select-dataset new interface

Renato De Donato
1 parent 0549043e
Showing 63 changed files with 3886 additions and 886 deletions
bower_components/iron-list/.bower.json
bower_components/iron-list/.gitignore
bower_components/iron-list/.travis.yml
bower_components/iron-list/CONTRIBUTING.md
bower_components/iron-list/README.md
bower_components/iron-list/bower.json
bower_components/iron-list/demo/basic.html
bower_components/iron-list/demo/collapse.html
bower_components/iron-list/demo/data/contacts.json
bower_components/iron-list/demo/index.html
bower_components/iron-list/demo/scroll-threshold.html
bower_components/iron-list/demo/selection.html
bower_components/iron-list/index.html
bower_components/iron-list/iron-list.html
bower_components/iron-list/test/basic.html
bower_components/iron-list/test/different-heights.html
bower_components/iron-list/test/dynamic-item-size.html
bower_components/iron-list/test/focus.html
bower_components/iron-list/test/helpers.html
bower_components/iron-list/test/hidden-list.html
@@ -7,43 +7,52 @@
     "list",
     "virtual-list"
   ],
-  "version": "1.1.5",
+  "version": "1.2.8",
   "homepage": "https://github.com/PolymerElements/iron-list",
   "authors": [
     "The Polymer Authors"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-list"
+  },
   "main": "iron-list.html",
   "license": "http://polymer.github.io/LICENSE.txt",
   "ignore": [],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
-    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0"
+    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
+    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
   },
   "devDependencies": {
+    "app-layout": "PolymerLabs/app-layout#master",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
+    "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0",
+    "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",
-    "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
-    "iron-icon": "polymerelements/iron-icon#^1.0.0",
-    "iron-icons": "polymerelements/iron-icons#^1.0.0",
     "paper-badge": "polymerelements/paper-badge#^1.0.0",
-    "paper-toolbar": "polymerelements/paper-toolbar#^1.0.0",
+    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
     "test-fixture": "polymerelements/test-fixture#^1.0.0",
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
-    "web-component-tester": "*"
+    "web-component-tester": "^4.0.0"
   },
-  "_release": "1.1.5",
+  "_release": "1.2.8",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.5",
-    "commit": "c6bf7caf1745cc3bed0769d41ac405476ef981b8"
+    "tag": "v1.2.8",
+    "commit": "4d974edf5c2eca5646846910efcc0bacbbff647f"
   },
   "_source": "git://github.com/PolymerElements/iron-list.git",
-  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-list"
+  "_target": "~1.2.8",
+  "_originalSource": "PolymerElements/iron-list",
+  "_direct": true
 }
 \ No newline at end of file
+language: node_js
+sudo: false
+before_script:
+  - npm install -g bower polylint web-component-tester
+  - bower install
+  - polylint
+env:
+  global:
+    - secure: qC9ustzA7LUlOLi34bsHNYQRkTMd8/KLNTXGGscSgWmSTb2bgyngdWOuIjA6qVvfaHrB/CygMiy17QJn0IeKD18yfGJHu17vYxDy4WW628An3C3VIgXO4F4+LzyDFuoHfK3eQYHrBKh6M8JvG6CVU/QYdOrzuwDtcOkZIEA72N8rj5bROcPygmHZsa/0cjz7Q29lseiI1qpPxcQPMADoJfD4BvnMD7kyJJTkLyq4UDySaWmC8GT6C8PIXeZI8uLQFOc47TQqFnGJg3H6luQoOC5wQ3uv4gBWbek5pY/GAXieDNvuXAdi7cvRziCuW4oG+cYg8NYZCBI7VkMcYhEA7wNzhhcb+OPt5eOgV0YPZjyVRhXktc+ikRQYi2UU9ig66UlJFMRuNcz9al6AAKa4La5Msalv8dJnLc896qebs9eWTN5uAn4QvOJ3KHtuBNppJtJVDi1GLdIWDZgad0paklGyyln0FRwBiQauiOsuvynJBk2H97f/45l95ExEpTNPzpu3rVXkSd5xF8UYzFvw0Fb1gYQa3kNKM10leHQvr+WfQ9t1xfpGpCkPC1YOVFS9HSipBLKGmeFkl3Xa+bMSF+lrEPSHMNTN02Tq1FfIJGOlHTeRhahLldWw0REZZ5xXyzdGa8HKt7gA0aktrkYbFbJNjciN68I+bGqMt3U2KZw=
+    - secure: vj29+8qXACt2RY0sK0Qk1Mf8XM5pgDDeJBqzoSyNxGAYL08BQAHQvXNv/2qWfSfA4b1HxleERsN2X4+b3mOAyWpKDAOcOABptpdI3qAQsZFOC1Qslz/vqHQBqIphZhiaxd1nVg02xJgrCt6Pk3sW8k7mj2cSH0q9JorWTch3fBWq4pLtzm0b/XEgyw2AbSAM0KUj18BCg9u0hJzrI+kVpenzegdrT3oNU3LYFSz2BgfMKKsuRtaJsMbnlfBhUKNUgfwp9FenvnztGWE3h+ZCK/1zUf0FsedH6s3OWF7U6dALv4AQlgwBKH8TmwVz82bvFpHaqCjy9bhrWbW/kYG+UYCeDg2C1DOAyjr4E42iIiGB/1QKTKCuGplVf2dzYxmozOcJGf7qa440WMfuHSccp5DWH++nEDnjrog1m1uw3GltQuSpJo6LkegwP5R0jHkZxx6K7ssaJWi3VEmwItenecsxvJTDUPn9sR1CQwID82XEc3qCapzXNZIM9UGty9dir79MFmF2oOMzKZhOD9cRt+DLm3s5btM5Nn52bDDw9rZ5XtNY9rFBChszCqZeA/S4v6Iogw8LS9uliLtcY6J8wA7m9bH0ZTjZ1cSXqXsgwovGOprPyggRsmJHD8IQqjBxsslq8/IsPoh7H9ZBSipwROXVjDDYTwsCyf9Nn5/mS2c=
+    - CXX=g++-4.8
+node_js: stable
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+      - ubuntu-toolchain-r-test
+    packages:
+      - google-chrome-stable
+      - g++-4.8
+  sauce_connect: true
+script:
+  - "xvfb-run -s '-screen 0 1024x768x24' wct"
+  - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
+
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
-iron-list
-========================
-`iron-list` displays a virtual, *'infinite'* list. The template inside
+<!---
+
+This README is automatically generated from the comments in these files:
+iron-list.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+The bot does some handling of markdown. Please file a bug if it does the wrong
+thing! https://github.com/PolymerLabs/tedium/issues
+
+-->
+
+[![Build status](https://travis-ci.org/PolymerElements/iron-list.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-list)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/iron-list)_
+
+
+##&lt;iron-list&gt;
+
+`iron-list` displays a virtual, 'infinite' list. The template inside
 the iron-list element represents the DOM to create for each list item.
 The `items` property specifies an array of list item data.
@@ -13,7 +31,7 @@ be reused with a new model at any time. Particularly, any state that may change
 as the result of a user interaction with the list item must be bound to the model
 to avoid view state inconsistency.
-__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an
+__Important:__ `iron-list` must either be explicitly sized, or delegate scrolling to an
 explicitly sized parent. By "explicitly sized", we mean it either has an explicit
 CSS `height` property set via a class or inline style, or else is sized by other
 layout means (e.g. the `flex` or `fit` classes).
@@ -24,10 +42,10 @@ List item templates should bind to template models of the following structure:
 ```js
 {
-  index: 0,     // data index for this item
-  item: {       // user data corresponding to items[index]
-    /* user item data  */
-  }
+  index: 0,        // index in the item array
+  selected: false, // true if the current item is selected
+  tabIndex: -1,    // a dynamically generated tabIndex for focus management
+  item: {}         // user data corresponding to items[index]
 }
 ```
@@ -56,30 +74,33 @@ bound from the model object provided to the template scope):
   <iron-list items="[[data]]" as="item">
     <template>
       <div>
-        Name: <span>[[item.name]]</span>
+        Name: [[item.name]]
       </div>
     </template>
   </iron-list>
 </template>
 ```
-### Resizing
+### Accessibility
-`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
-This event is fired by any element that implements `IronResizableBehavior`.
+`iron-list` automatically manages the focus state for the items. It also provides
+a `tabIndex` property within the template scope that can be used for keyboard navigation.
+For example, users can press the up and down keys to move to previous and next
+items in the list:
-By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
-this event automatically. If you hide the list manually (e.g. you use `display: none`)
-you might want to implement `IronResizableBehavior` or fire this event manually right 
-after the list became visible again. e.g.
-
-```js
-document.querySelector('iron-list').fire('iron-resize');
+```html
+<iron-list items="[[data]]" as="item">
+  <template>
+    <div tabindex$="[[tabIndex]]">
+      Name: [[item.name]]
+    </div>
+  </template>
+</iron-list>
 ```
 ### Styling
-Use the `--iron-list-items-container` mixin to style the container of items, e.g.
+You can use the `--iron-list-items-container` mixin to style the container of items:
 ```css
 iron-list {
@@ -89,8 +110,30 @@ iron-list {
 }
 ```
+### Resizing
+
+`iron-list` lays out the items when it receives a notification via the `iron-resize` event.
+This event is fired by any element that implements `IronResizableBehavior`.
+
+By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
+this event automatically. If you hide the list manually (e.g. you use `display: none`)
+you might want to implement `IronResizableBehavior` or fire this event manually right
+after the list became visible again. For example:
+
+```js
+document.querySelector('iron-list').fire('iron-resize');
+```
+
 ### When should `<iron-list>` be used?
-`iron-list` should be used when a page has significantly more DOM nodes than the ones visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time. This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
+`iron-list` should be used when a page has significantly more DOM nodes than the ones
+visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time.
+This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still
+create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
+
+However, having an `iron-list` does not mean that you can load all the data at once.
+Say, you have a million records in the database, you want to split the data into pages
+so you can bring a page at the time. The page could contain 500 items, and iron-list
+will only render 20.
+
-However, having an `iron-list` does not mean that you can load all the data at once. Say, you have a million records in the database, you want to split the data into pages so you can bring a page at the time. The page could contain 500 items, and iron-list will only render 20.
@@ -7,34 +7,42 @@
     "list",
     "virtual-list"
   ],
-  "version": "1.1.5",
+  "version": "1.2.8",
   "homepage": "https://github.com/PolymerElements/iron-list",
   "authors": [
     "The Polymer Authors"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-list"
+  },
   "main": "iron-list.html",
   "license": "http://polymer.github.io/LICENSE.txt",
   "ignore": [],
   "dependencies": {
     "polymer": "Polymer/polymer#^1.1.0",
-    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0"
+    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
+    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
   },
   "devDependencies": {
+    "app-layout": "PolymerLabs/app-layout#master",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
+    "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0",
+    "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",
-    "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
-    "iron-icon": "polymerelements/iron-icon#^1.0.0",
-    "iron-icons": "polymerelements/iron-icons#^1.0.0",
     "paper-badge": "polymerelements/paper-badge#^1.0.0",
-    "paper-toolbar": "polymerelements/paper-toolbar#^1.0.0",
+    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
     "test-fixture": "polymerelements/test-fixture#^1.0.0",
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
-    "web-component-tester": "*"
+    "web-component-tester": "^4.0.0"
   }
 }
+<!--
+@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>
+<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="../../iron-ajax/iron-ajax.html">
+  <link rel="import" href="../iron-list.html">
+
+  <style is="custom-style">
+
+    iron-list {
+      @apply(--layout-fit);
+    }
+
+    .item {
+      padding: 10px;
+      border-bottom: 1px solid #ccc;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <template is="dom-bind">
+    <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
+
+    <iron-list items="[[data]]" as="item">
+      <template>
+        <div class="item">
+        <b>#[[index]] - [[item.name]]</b>
+        <p>[[item.longText]]</p>
+        </div>
+      </template>
+    </iron-list>
+
+  </template>
+
+</body>
+</html>
@@ -15,7 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <title>Collapsable 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=yes">
+  <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">
@@ -23,13 +23,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <link rel="import" href="../../polymer/polymer.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
-  <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html">
+  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../paper-styles/typography.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>
+    body {
+      background-color: #eee;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
 </head>
 <body unresolved>
@@ -37,26 +46,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <template>
     <style>
       :host {
-        @apply(--layout-fit);
-        @apply(--layout-vertical);
+        display: block;
         @apply(--paper-font-common-base);
       }
-      paper-toolbar {
-        background: var(--google-green-700);
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      app-toolbar {
+        background-color: var(--google-green-700);
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
         font-weight: bold;
+        color: white;
         z-index: 1;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
       }
-      paper-toolbar paper-icon-button {
+      app-toolbar paper-icon-button {
         --paper-icon-button-ink-color: white;
       }
       iron-list {
-        background-color: var(--paper-grey-200, #eee);
-        padding-top: 1px;
-        padding-bottom: 16px;
+        padding-top: 64px;
         --iron-list-items-container: {
           max-width: 800px;
           margin: auto;
@@ -71,16 +82,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         padding: 20px;
         background-color: white;
         border: 1px solid #ddd;
-
         cursor: pointer;
         margin-bottom: 10px;
       }
-      .item:focus {
-        outline: 0;
-        border-color: #666;
-      }
-
       .avatar {
         height: 40px;
         width: 40px;
@@ -125,59 +130,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       .item.expanded:hover .longText::after {
         content: ' [–]';
       }
+
+      .spacer {
+        @apply(--layout-flex);
+      }
+
+      @media (max-width: 460px) {
+        paper-toolbar .bottom.title {
+          font-size: 14px;
+        }
+      }
     </style>
+
     <iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
-      <paper-toolbar>
-        <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
-        <div class="flex"></div>
-        <paper-icon-button icon="search" alt="Search"></paper-icon-button>
-        <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
-        <div class="bottom title">Collapsable items using iron-list</div>
-      </paper-toolbar>
-      <iron-list id="list" items="[[items]]" as="item">
-        <template>
-          <div on-tap="_collapseExpand">
-            <div class$="[[getClassForItem(item, item.expanded)]]" tabindex="0">
-              <img class="avatar" src="[[item.image]]">
-              <div class="pad">
-                <div class="primary">[[item.name]]</div>
-                <div class="shortText">[[item.shortText]]</div>
-                <div class="longText">[[item.longText]]</div>
-              </div>
-              <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
+
+    <app-toolbar>
+      <div title>Collapsable 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>
+
+    <iron-list id="list" items="[[items]]" as="item" selection-enabled multi-selection>
+      <template>
+        <div>
+          <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
+            <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
+            <div class="pad">
+              <div class="primary">[[item.name]]</div>
+              <div class="shortText">[[item.shortText]]</div>
+              <div class="longText">[[item.longText]]</div>
             </div>
+            <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
           </div>
-        </template>
-      </iron-list>
+        </div>
+      </template>
+    </iron-list>
+
   </template>
+
   <script>
-  HTMLImports.whenReady(function() {
+
+    HTMLImports.whenReady(function() {
+
       Polymer({
         is: 'x-collapse',
+
         properties: {
+
           items: {
             type: Array
           }
-        },
-        _collapseExpand: function(e) {
-          var list = this.$.list;
-          var index = e.model.index;
-          var isExpanded = list.items[index].expanded;
+        },
-          list.set('items.' + index + '.expanded', !isExpanded);
-          list.updateSizeForItem(e.model.index);
+        attached: function() {
+          // Use the document element
+          this.$.list.scrollTarget = this.ownerDocument.documentElement;
         },
         iconForItem: function(item) {
           return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
         },
-        getClassForItem: function(item, expanded) {
-          return expanded ? 'item expanded' : 'item';
+        getClassForItem: function(item, selected) {
+          return selected ? 'item expanded' : 'item';
         }
+
       });
+
     });
+
   </script>
 </dom-module>
@@ -9,13 +9,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <!doctype html>
-<html>
+<html id="html">
 <head>
-  <title>iron-list and paper-scroll-header-panel demo</title>
+  <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=yes">
+  <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">
@@ -23,52 +23,77 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <link rel="import" href="../../polymer/polymer.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
-  <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.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;
+    }
-    paper-scroll-header-panel {
-      @apply(--layout-fit);
-      @apply(--layout-vertical);
-      @apply(--paper-font-common-base);
+    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;
+      };
     }
-    paper-toolbar.tall .title {
-      font-size: 40px;
-      margin-left: 60px;
+    app-header paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
-      -webkit-transform-origin: left center;
-      transform-origin: left center;
-      overflow: visible;
+    [title] {
+      font-weight: 400;
+      margin: 0 0 0 50px;
     }
-    paper-toolbar paper-icon-button {
-      --paper-icon-button-ink-color: white;
+    [condensed-title] {
+      font-weight: 400;
+      margin-left: 30px;
+    }
+
+    [condensed-title] i {
+      font-style: normal;
+      font-weight: 100;
+    }
+
+    app-toolbar.tall {
+      height: 148px;
     }
     iron-list {
-      background-color: var(--paper-grey-200, #eee);
+      padding-top: 148px;
+      margin-top: 64px;
       padding-bottom: 16px;
     }
     .item {
       @apply(--layout-horizontal);
-
-      margin: 16px 16px 0 16px;
       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: #666;
+      border-color: #333;
     }
     .avatar {
@@ -98,6 +123,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       color: gray;
     }
+    .spacer {
+      @apply(--layout-flex);
+    }
+
   </style>
 </head>
@@ -106,47 +135,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <template is="dom-bind">
     <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
-    <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
-      <paper-toolbar class="tall">
-        <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
-        <div class="flex"></div>
-        <paper-icon-button icon="search" alt="Search"></paper-icon-button>
-        <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
-        <div class="bottom title">iron-list</div>
-      </paper-toolbar>
-      <iron-list items="[[data]]" as="item">
+      <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">
-              <img class="avatar" src="[[item.image]]">
+            <div class="item" tabindex$="[[tabIndex]]">
+              <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
               <div class="pad">
-                <div class="primary">[[item.name]]</div>
+                <div class="primary">[[item.name]] [[index]]</div>
                 <div class="secondary">[[item.shortText]]</div>
                 <div class="secondary dim">[[item.longText]]</div>
               </div>
-              <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
             </div>
           </div>
         </template>
       </iron-list>
-    </paper-scroll-header-panel>
-  </template>
-  <script>
-
-    document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
-      return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
-    };
-
-    document.addEventListener('paper-header-transform', function(event) {
-      var title = this.querySelector('.title');
-      var detail = event.detail;
-      var deltaHeight = detail.height - detail.condensedHeight;
-      var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4)  + 0.6);
-
-      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
-    });
+  </template>
-  </script>
 </body>
 </html>
+<!--
+@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>Load data using iron-scroll-threshold</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="../../iron-scroll-threshold/iron-scroll-threshold.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-spinner/paper-spinner.html">
+  <link rel="import" href="../../iron-ajax/iron-ajax.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../iron-list.html">
+
+  <style is="custom-style">
+
+    body {
+      @apply(--paper-font-common-base);
+      margin: 0;
+      padding: 0;
+      background-color: #eee;
+    }
+
+    app-toolbar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background: #F57C00;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+      color: white;
+      z-index: 1;
+      font-weight: bold;
+    }
+
+    .loadingIndicator {
+      text-align: center;
+      height: 40px;
+    }
+
+    .loadingIndicator paper-spinner {
+      width: 20px;
+      height: 20px;
+      margin-right: 10px;
+    }
+
+    iron-list {
+      padding-top: 64px;
+      padding-bottom: 16px;
+      --iron-list-items-container: {
+        max-width: 800px;
+        margin: auto;
+        margin-top: 60px;
+        margin-bottom: 10px;
+      };
+    }
+
+    .personItem {
+      @apply(--layout-horizontal);
+
+      margin: 16px 16px 0 16px;
+      padding: 20px;
+      border-radius: 8px;
+      background-color: white;
+      border: 1px solid #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);
+    }
+
+    .index {
+      width: 30px;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <template is="dom-bind" id="app">
+
+    <iron-ajax id="ajax"
+      url="http://www.filltext.com/"
+      params='{"rows": "20", "delay": 1, "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
+       "city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "business": "{business}", "index": "{index}"}'
+      handle-as="json"
+      loading="{{loadingPeople}}"
+      on-response="_didRespond">
+    </iron-ajax>
+
+    <app-toolbar>
+      <div title>Load data using iron-scroll-threshold</div>
+    </app-toolbar>
+
+    <iron-list id="list" items="[]" as="person" scroll-target="html">
+      <template>
+        <div>
+          <div class="personItem" tabindex$="[[tabIndex]]">
+            <div class="pad">
+              <div class="primary">[[person.fname]] [[person.lname]]</div>
+              <div class="secondary">[[person.address]] [[person.city]]</div>
+              <div class="secondary">[[person.city]], [[person.state]] [[person.zip]]</div>
+              <div class="secondary dim">[[person.business]]</div>
+            </div>
+            <iron-icon icon$="[[_iconForPerson(person)]]"></iron-icon>
+          </div>
+        </div>
+      </template>
+    </iron-list>
+
+    <div class="loadingIndicator">
+      <paper-spinner active="{{loadingPeople}}"></paper-spinner> Fetching data
+    </div>
+
+    <!-- this element will load more data when the user scrolls down and reached the lower threshold -->
+    <iron-scroll-threshold id="scrollTheshold"
+      lower-threshold="500"
+      on-lower-threshold="_loadMoreData"
+      scroll-target="html">
+    </iron-scroll-threshold>
+
+  </template>
+
+  <script>
+
+    (function(scope) {
+
+      scope._iconForPerson = function(person) {
+        return person.integer < 50 ? 'star-border' : 'star';
+      };
+
+      scope._loadMoreData = function() {
+        scope.$.ajax.generateRequest();
+      };
+
+      scope._didRespond = function(e) {
+        var people = e.detail.response;
+
+        people.forEach(function(person) {
+          scope.$.list.push('items', person);
+        });
+        // Clear the lower threshold so we can load more data when the user scrolls down again.
+        scope.$.scrollTheshold.clearTriggers();
+      };
+
+    })(document.querySelector('#app'));
+
+  </script>
+
+</body>
+</html>
@@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <html>
 <head>
-  <title>Selection</title>
+  <title>Select contacts</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
@@ -27,7 +27,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <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-toolbar/paper-toolbar.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">
@@ -36,27 +38,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <dom-module id="x-app">
     <style>
-
       :host {
         @apply(--layout-fit);
         @apply(--layout-vertical);
         @apply(--paper-font-common-base);
-
-        display: block;
         font-family: sans-serif;
       }
-      .toolbar {
+      app-toolbar {
         background: var(--paper-pink-500);
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-        font-weight: bold;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+        color: white;
+        z-index: 1;
+        color: white;
+        --paper-toolbar-title: {
+          font-size: 16px;
+          line-height: 16px;
+          font-weight: bold;
+          margin-left: 0;
+        };
       }
-      .toolbar paper-icon-button {
+      app-toolbar paper-icon-button {
         --paper-icon-button-ink-color: white;
       }
-      #itemsList, 
+      #itemsList,
       #selectedItemsList {
         @apply(--layout-flex);
       }
@@ -78,8 +85,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         color: var(--paper-blue-600);
       }
-      .item.selected:not(:focus) {
-        background-color: var(--google-grey-100);
+      .item.selected {
+        background-color: var(--google-grey-300);
+        border-bottom: 1px solid #ccc;
       }
       .avatar {
@@ -87,7 +95,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         width: 40px;
         border-radius: 20px;
         box-sizing: border-box;
-        background-color: #DDD;
+        background-color: #ddd;
       }
       .pad {
@@ -135,11 +143,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         position: relative;
       }
-      paper-item:focus {
-        outline: 0;
-        background-color: #ddd;
-      }
-
       paper-item:hover::after {
         content: "－";
         width: 16px;
@@ -164,48 +167,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         line-height: 50px;
       }
+      .twoColumns {
+        @apply(--layout-flex);
+        @apply(--layout-horizontal);
+        overflow: hidden;
+      }
+
+      #starredView {
+        @apply(--layout-vertical);
+      }
+
     </style>
     <template>
       <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
-      <paper-toolbar class="toolbar">
-        <div class="flex">Inbox</div>
-        <div style="position: relative;">
+      <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>
-      </paper-toolbar>
-      <div class="flex horizontal layout">
-        <div class="flex vertical layout">
-          <!-- Main List for the items -->
-          <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
-            <template>
-              <div>
-                <div tabindex="0" aria-label$="[[_getAriaLabel(item, selected)]]" class$="[[_computedClass(selected)]]">
-                  <img class="avatar" src="[[item.image]]">
-                  <div class="pad">
-                    <div class="primary">
-                      <span>[[index]]</span>
-                      <span>[[item.name]]</span>
-                    </div>
-                    <div class="secondary dim">[[item.shortText]]</div>
+      </app-toolbar>
+
+      <div class="twoColumns">
+        <!-- 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>
-                  <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
+                  <div class="secondary dim">[[item.shortText]]</div>
                 </div>
-                <div class="border"></div>
+                <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
               </div>
-            </template>
-          </iron-list>
-        </div>
-        <div id="starredView" class="vertical layout" hidden$="[[!showSelection]]">
+              <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 on-tap="_unselect" tabindex="0">[[item.name]]</paper-item>
+              <paper-item tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[item.name]]</paper-item>
             </template>
           </iron-list>
         </div>
@@ -255,10 +266,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         _showSelectionChanged: function() {
           this.$.selectedItemsList.fire('resize');
-        },
-
-        _getAriaLabel: function(item, selected) {
-          return selected ? 'Deselect ' + item.name : 'Select ' + item.name;
         }
       });
@@ -267,6 +274,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   </script>
 </head>
+<style is="custom-style">
+  body {
+    @apply(--layout-fullbleed);
+  }
+</style>
 <body unresolved>
   <x-app></x-app>
@@ -10,6 +10,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-scroll-target-behavior/iron-scroll-target-behavior.html">
 <!--
@@ -25,7 +27,7 @@ be reused with a new model at any time. Particularly, any state that may change
 as the result of a user interaction with the list item must be bound to the model
 to avoid view state inconsistency.
-__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an
+__Important:__ `iron-list` must either be explicitly sized, or delegate scrolling to an
 explicitly sized parent. By "explicitly sized", we mean it either has an explicit
 CSS `height` property set via a class or inline style, or else is sized by other
 layout means (e.g. the `flex` or `fit` classes).
@@ -34,12 +36,14 @@ layout means (e.g. the `flex` or `fit` classes).
 List item templates should bind to template models of the following structure:
-    {
-      index: 0,     // data index for this item
-      item: {       // user data corresponding to items[index]
-        /* user item data  */
-      }
-    }
+```js
+{
+  index: 0,        // index in the item array
+  selected: false, // true if the current item is selected
+  tabIndex: -1,    // a dynamically generated tabIndex for focus management
+  item: {}         // user data corresponding to items[index]
+}
+```
 Alternatively, you can change the property name used as data index by changing the
 `indexAs` property. The `as` property defines the name of the variable to add to the binding
@@ -49,54 +53,93 @@ For example, given the following `data` array:
 ##### data.json
-    [
-      {"name": "Bob"},
-      {"name": "Tim"},
-      {"name": "Mike"}
-    ]
+```js
+[
+  {"name": "Bob"},
+  {"name": "Tim"},
+  {"name": "Mike"}
+]
+```
 The following code would render the list (note the name and checked properties are
 bound from the model object provided to the template scope):
-    <template is="dom-bind">
-      <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
-      <iron-list items="[[data]]" as="item">
-        <template>
-          <div>
-            Name: <span>[[item.name]]</span>
-          </div>
-        </template>
-      </iron-list>
+```html
+<template is="dom-bind">
+  <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
+  <iron-list items="[[data]]" as="item">
+    <template>
+      <div>
+        Name: [[item.name]]
+      </div>
     </template>
+  </iron-list>
+</template>
+```
+
+### Accessibility
+
+`iron-list` automatically manages the focus state for the items. It also provides
+a `tabIndex` property within the template scope that can be used for keyboard navigation.
+For example, users can press the up and down keys to move to previous and next
+items in the list:
+
+```html
+<iron-list items="[[data]]" as="item">
+  <template>
+    <div tabindex$="[[tabIndex]]">
+      Name: [[item.name]]
+    </div>
+  </template>
+</iron-list>
+```
 ### Styling
-Use the `--iron-list-items-container` mixin to style the container of items, e.g.
+You can use the `--iron-list-items-container` mixin to style the container of items:
-    iron-list {
-     --iron-list-items-container: {
-        margin: auto;
-      };
-    }
+```css
+iron-list {
+ --iron-list-items-container: {
+    margin: auto;
+  };
+}
+```
 ### Resizing
-`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
+`iron-list` lays out the items when it receives a notification via the `iron-resize` event.
 This event is fired by any element that implements `IronResizableBehavior`.
 By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
 this event automatically. If you hide the list manually (e.g. you use `display: none`)
 you might want to implement `IronResizableBehavior` or fire this event manually right
-after the list became visible again. e.g.
+after the list became visible again. For example:
-    document.querySelector('iron-list').fire('iron-resize');
+```js
+document.querySelector('iron-list').fire('iron-resize');
+```
+### When should `<iron-list>` be used?
+
+`iron-list` should be used when a page has significantly more DOM nodes than the ones
+visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time.
+This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still
+create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
+
+However, having an `iron-list` does not mean that you can load all the data at once.
+Say, you have a million records in the database, you want to split the data into pages
+so you can bring a page at the time. The page could contain 500 items, and iron-list
+will only render 20.
 @group Iron Element
 @element iron-list
-@demo demo/index.html Simple list
-@demo demo/selection.html Selection of items
+@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/basic.html Basic list
+
 -->
 <dom-module id="iron-list">
@@ -104,14 +147,13 @@ after the list became visible again. e.g.
     <style>
       :host {
         display: block;
+        position: relative;
       }
-      :host(.has-scroller) {
-        overflow: auto;
-      }
-
-      :host(:not(.has-scroller)) {
-        position: relative;
+      @media only screen and (-webkit-max-device-pixel-ratio: 1) {
+        :host {
+          will-change: transform;
+        }
       }
       #items {
@@ -145,8 +187,9 @@ after the list became visible again. e.g.
   var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
   var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
-  var DEFAULT_PHYSICAL_COUNT = 20;
+  var DEFAULT_PHYSICAL_COUNT = 3;
   var MAX_PHYSICAL_COUNT = 500;
+  var HIDDEN_Y = '-10000px';
   Polymer({
@@ -232,16 +275,21 @@ after the list became visible again. e.g.
     observers: [
       '_itemsChanged(items.*)',
       '_selectionEnabledChanged(selectionEnabled)',
-      '_multiSelectionChanged(multiSelection)'
+      '_multiSelectionChanged(multiSelection)',
+      '_setOverflow(scrollTarget)'
     ],
     behaviors: [
       Polymer.Templatizer,
-      Polymer.IronResizableBehavior
+      Polymer.IronResizableBehavior,
+      Polymer.IronA11yKeysBehavior,
+      Polymer.IronScrollTargetBehavior
     ],
-    listeners: {
-      'iron-resize': '_resizeHandler'
+    keyBindings: {
+      'up': '_didMoveUp',
+      'down': '_didMoveDown',
+      'enter': '_didEnter'
     },
     /**
@@ -251,13 +299,7 @@ after the list became visible again. e.g.
     _ratio: 0.5,
     /**
-     * The element that controls the scroll
-     * @type {?Element}
-     */
-    _scroller: null,
-
-    /**
-     * The padding-top value of the `scroller` element
+     * The padding-top value for the list.
      */
     _scrollerPaddingTop: 0,
@@ -267,27 +309,12 @@ after the list became visible again. e.g.
     _scrollPosition: 0,
     /**
-     * The number of tiles in the DOM.
-     */
-    _physicalCount: 0,
-
-    /**
-     * The k-th tile that is at the top of the scrolling list.
-     */
-    _physicalStart: 0,
-
-    /**
-     * The k-th tile that is at the bottom of the scrolling list.
-     */
-    _physicalEnd: 0,
-
-    /**
      * The sum of the heights of all the tiles in the DOM.
      */
     _physicalSize: 0,
     /**
-     * The average `offsetHeight` of the tiles observed till now.
+     * The average `F` of the tiles observed till now.
      */
     _physicalAverage: 0,
@@ -308,11 +335,6 @@ after the list became visible again. e.g.
     _virtualCount: 0,
     /**
-     * The n-th item rendered in the `_physicalStart` tile.
-     */
-    _virtualStartVal: 0,
-
-    /**
      * A map between an item key and its physical item index
      */
     _physicalIndexForKey: null,
@@ -328,7 +350,7 @@ after the list became visible again. e.g.
     _scrollHeight: 0,
     /**
-     * The size of the viewport
+     * The height of the list. This is referred as the viewport in the context of list.
      */
     _viewportSize: 0,
@@ -345,13 +367,20 @@ after the list became visible again. e.g.
     _physicalSizes: null,
     /**
-     * A cached value for the visible index.
+     * A cached value for the first visible index.
      * See `firstVisibleIndex`
      * @type {?number}
      */
     _firstVisibleIndexVal: null,
     /**
+     * A cached value for the last visible index.
+     * See `lastVisibleIndex`
+     * @type {?number}
+     */
+    _lastVisibleIndexVal: null,
+
+    /**
      * A Polymer collection for the items.
      * @type {?Polymer.Collection}
      */
@@ -364,6 +393,38 @@ after the list became visible again. e.g.
     _itemsRendered: false,
     /**
+     * The page that is currently rendered.
+     */
+    _lastPage: null,
+
+    /**
+     * The max number of pages to render. One page is equivalent to the height of the list.
+     */
+    _maxPages: 3,
+
+    /**
+     * The currently focused physical item.
+     */
+    _focusedItem: null,
+
+    /**
+     * The index of the `_focusedItem`.
+     */
+    _focusedIndex: -1,
+
+    /**
+     * The the item that is focused if it is moved offscreen.
+     * @private {?TemplatizerNode}
+     */
+    _offscreenFocusedItem: null,
+
+    /**
+     * The item that backfills the `_offscreenFocusedItem` in the physical items
+     * list when that item is moved offscreen.
+     */
+    _focusBackfillItem: null,
+
+    /**
      * The bottom of the physical content.
      */
     get _physicalBottom() {
@@ -381,7 +442,21 @@ after the list became visible again. e.g.
      * The n-th item rendered in the last physical item.
      */
     get _virtualEnd() {
-      return this._virtualStartVal + this._physicalCount - 1;
+      return this._virtualStart + this._physicalCount - 1;
+    },
+
+    /**
+     * The height of the physical content that isn't on the screen.
+     */
+    get _hiddenContentSize() {
+      return this._physicalSize - this._viewportSize;
+    },
+
+    /**
+     * The maximum scroll top value.
+     */
+    get _maxScrollTop() {
+      return this._estScrollHeight - this._viewportSize + this._scrollerPaddingTop;
     },
     /**
@@ -397,35 +472,53 @@ after the list became visible again. e.g.
     },
     /**
-     * The height of the physical content that isn't on the screen.
+     * The n-th item rendered in the `_physicalStart` tile.
      */
-    get _hiddenContentSize() {
-      return this._physicalSize - this._viewportSize;
+    _virtualStartVal: 0,
+
+    set _virtualStart(val) {
+      this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
+    },
+
+    get _virtualStart() {
+      return this._virtualStartVal || 0;
     },
     /**
-     * The maximum scroll top value.
+     * The k-th tile that is at the top of the scrolling list.
      */
-    get _maxScrollTop() {
-      return this._estScrollHeight - this._viewportSize;
+    _physicalStartVal: 0,
+
+    set _physicalStart(val) {
+      this._physicalStartVal = val % this._physicalCount;
+      if (this._physicalStartVal < 0) {
+        this._physicalStartVal = this._physicalCount + this._physicalStartVal;
+      }
+      this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
+    },
+
+    get _physicalStart() {
+      return this._physicalStartVal || 0;
     },
     /**
-     * Sets the n-th item rendered in `_physicalStart`
+     * The number of tiles in the DOM.
      */
-    set _virtualStart(val) {
-      // clamp the value so that _minVirtualStart <= val <= _maxVirtualStart
-      this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
-      this._physicalStart = this._virtualStartVal % this._physicalCount;
+    _physicalCountVal: 0,
+
+    set _physicalCount(val) {
+      this._physicalCountVal = val;
       this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
     },
+    get _physicalCount() {
+      return this._physicalCountVal;
+    },
+
     /**
-     * Gets the n-th item rendered in `_physicalStart`
+     * The k-th tile that is at the bottom of the scrolling list.
      */
-    get _virtualStart() {
-      return this._virtualStartVal;
-    },
+    _physicalEnd: 0,
     /**
      * An optimal physical size such that we will have enough physical items
@@ -435,14 +528,14 @@ after the list became visible again. e.g.
      * to a viewport of physical items above and below the user's viewport.
      */
     get _optPhysicalSize() {
-      return this._viewportSize * 3;
+      return this._viewportSize * this._maxPages;
     },
    /**
     * True if the current list is visible.
     */
     get _isVisible() {
-      return this._scroller && Boolean(this._scroller.offsetWidth || this._scroller.offsetHeight);
+      return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
     },
     /**
@@ -451,68 +544,67 @@ after the list became visible again. e.g.
      * @type {number}
      */
     get firstVisibleIndex() {
-      var physicalOffset;
-
       if (this._firstVisibleIndexVal === null) {
-        physicalOffset = this._physicalTop;
+        var physicalOffset = this._physicalTop + this._scrollerPaddingTop;
         this._firstVisibleIndexVal = this._iterateItems(
           function(pidx, vidx) {
             physicalOffset += this._physicalSizes[pidx];
-
             if (physicalOffset > this._scrollPosition) {
               return vidx;
             }
           }) || 0;
       }
-
       return this._firstVisibleIndexVal;
     },
-    ready: function() {
-      if (IOS_TOUCH_SCROLLING) {
-        this._scrollListener = function() {
-          requestAnimationFrame(this._scrollHandler.bind(this));
-        }.bind(this);
-      } else {
-        this._scrollListener = this._scrollHandler.bind(this);
-      }
-    },
-
     /**
-     * When the element has been attached to the DOM tree.
+     * Gets the index of the last visible item in the viewport.
+     *
+     * @type {number}
      */
-    attached: function() {
-      // delegate to the parent's scroller
-      // e.g. paper-scroll-header-panel
-      var el = Polymer.dom(this);
+    get lastVisibleIndex() {
+      if (this._lastVisibleIndexVal === null) {
+        var physicalOffset = this._physicalTop;
-      var parentNode = /** @type {?{scroller: ?Element}} */ (el.parentNode);
-      if (parentNode && parentNode.scroller) {
-        this._scroller = parentNode.scroller;
-      } else {
-        this._scroller = this;
-        this.classList.add('has-scroller');
-      }
+        this._iterateItems(function(pidx, vidx) {
+          physicalOffset += this._physicalSizes[pidx];
-      if (IOS_TOUCH_SCROLLING) {
-        this._scroller.style.webkitOverflowScrolling = 'touch';
+          if (physicalOffset <= this._scrollBottom) {
+            this._lastVisibleIndexVal = vidx;
+          }
+        });
       }
+      return this._lastVisibleIndexVal;
+    },
+
+    get _defaultScrollTarget() {
+      return this;
+    },
-      this._scroller.addEventListener('scroll', this._scrollListener);
+    ready: function() {
+      this.addEventListener('focus', this._didFocus.bind(this), true);
+    },
+    attached: function() {
       this.updateViewportBoundaries();
       this._render();
+      // `iron-resize` is fired when the list is attached if the event is added
+      // before attached causing unnecessary work.
+      this.listen(this, 'iron-resize', '_resizeHandler');
     },
-    /**
-     * When the element has been removed from the DOM tree.
-     */
     detached: function() {
       this._itemsRendered = false;
-      if (this._scroller) {
-        this._scroller.removeEventListener('scroll', this._scrollListener);
-      }
+      this.unlisten(this, 'iron-resize', '_resizeHandler');
+    },
+
+    /**
+     * Set the overflow property if this element has its own scrolling region
+     */
+    _setOverflow: function(scrollTarget) {
+      this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
+      this.style.overflow = scrollTarget === this ? 'auto' : '';
     },
     /**
@@ -522,23 +614,22 @@ after the list became visible again. e.g.
      * @method updateViewportBoundaries
      */
     updateViewportBoundaries: function() {
-      var scrollerStyle = window.getComputedStyle(this._scroller);
-      this._scrollerPaddingTop = parseInt(scrollerStyle['padding-top'], 10);
-      this._viewportSize = this._scroller.offsetHeight;
+      this._scrollerPaddingTop = this.scrollTarget === this ? 0 :
+          parseInt(window.getComputedStyle(this)['padding-top'], 10);
+
+      this._viewportSize = this._scrollTargetHeight;
     },
     /**
      * Update the models, the position of the
      * items in the viewport and recycle tiles as needed.
      */
-    _refresh: function() {
+    _scrollHandler: function() {
       // clamp the `scrollTop` value
-      // IE 10|11 scrollTop may go above `_maxScrollTop`
-      // iOS `scrollTop` may go below 0 and above `_maxScrollTop`
-      var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scroller.scrollTop));
-      var tileHeight, tileTop, kth, recycledTileSet, scrollBottom;
-      var ratio = this._ratio;
+      var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
       var delta = scrollTop - this._scrollPosition;
+      var tileHeight, tileTop, kth, recycledTileSet, scrollBottom, physicalBottom;
+      var ratio = this._ratio;
       var recycledTiles = 0;
       var hiddenContentSize = this._hiddenContentSize;
       var currentRatio = ratio;
@@ -547,10 +638,12 @@ after the list became visible again. e.g.
       // track the last `scrollTop`
       this._scrollPosition = scrollTop;
-      // clear cached visible index
+      // clear cached visible indexes
       this._firstVisibleIndexVal = null;
+      this._lastVisibleIndexVal = null;
       scrollBottom = this._scrollBottom;
+      physicalBottom = this._physicalBottom;
       // random access
       if (Math.abs(delta) > this._physicalSize) {
@@ -561,7 +654,6 @@ after the list became visible again. e.g.
       else if (delta < 0) {
         var topSpace = scrollTop - this._physicalTop;
         var virtualStart = this._virtualStart;
-        var physicalBottom = this._physicalBottom;
         recycledTileSet = [];
@@ -593,7 +685,7 @@ after the list became visible again. e.g.
       }
       // scroll down
       else if (delta > 0) {
-        var bottomSpace = this._physicalBottom - scrollBottom;
+        var bottomSpace = physicalBottom - scrollBottom;
         var virtualEnd = this._virtualEnd;
         var lastVirtualItemIndex = this._virtualCount-1;
@@ -625,31 +717,29 @@ after the list became visible again. e.g.
       }
       if (recycledTiles === 0) {
-        // If the list ever reach this case, the physical average is not significant enough
-        // to create all the items needed to cover the entire viewport.
-        // e.g. A few items have a height that differs from the average by serveral order of magnitude.
-        if (this._increasePoolIfNeeded()) {
-          // yield and set models to the new items
-          this.async(this._update);
+        // Try to increase the pool if the list's client height isn't filled up with physical items
+        if (physicalBottom < scrollBottom || this._physicalTop > scrollTop) {
+          this._increasePoolIfNeeded();
         }
       } else {
         this._virtualStart = this._virtualStart + recycledTiles;
+        this._physicalStart = this._physicalStart + recycledTiles;
         this._update(recycledTileSet, movingUp);
       }
     },
     /**
-     * Update the list of items, starting from the `_virtualStartVal` item.
+     * Update the list of items, starting from the `_virtualStart` item.
      * @param {!Array<number>=} itemSet
      * @param {!Array<number>=} movingUp
      */
     _update: function(itemSet, movingUp) {
+      // manage focus
+      this._manageFocus();
       // update models
       this._assignModels(itemSet);
-
       // measure heights
       this._updateMetrics(itemSet);
-
       // adjust offset after measuring
       if (movingUp) {
         while (movingUp.length) {
@@ -658,15 +748,10 @@ after the list became visible again. e.g.
       }
       // update the position of the items
       this._positionItems();
-
       // set the scroller size
       this._updateScrollerSize();
-
-      // increase the pool of physical items if needed
-      if (this._increasePoolIfNeeded()) {
-        // yield set models to the new items
-        this.async(this._update);
-      }
+      // increase the pool of physical items
+      this._increasePoolIfNeeded();
     },
     /**
@@ -679,53 +764,64 @@ after the list became visible again. e.g.
       for (var i = 0; i < size; i++) {
         var inst = this.stamp(null);
-
         // First element child is item; Safari doesn't support children[0]
         // on a doc fragment
         physicalItems[i] = inst.root.querySelector('*');
         Polymer.dom(this).appendChild(inst.root);
       }
-
       return physicalItems;
     },
     /**
      * Increases the pool of physical items only if needed.
-     * This function will allocate additional physical items
-     * (limited by `MAX_PHYSICAL_COUNT`) if the content size is shorter than
-     * `_optPhysicalSize`
      *
-     * @return boolean
+     * @return {boolean} True if the pool was increased.
      */
     _increasePoolIfNeeded: function() {
-      if (this._physicalAverage === 0) {
+      // Base case 1: the list has no size.
+      if (this._viewportSize === 0) {
         return false;
       }
-      if (this._physicalBottom < this._scrollBottom || this._physicalTop > this._scrollPosition) {
-        return this._increasePool(1);
+      // Base case 2: If the physical size is optimal and the list's client height is full
+      // with physical items, don't increase the pool.
+      var isClientHeightFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
+      if (this._physicalSize >= this._optPhysicalSize && isClientHeightFull) {
+        return false;
       }
-      if (this._physicalSize < this._optPhysicalSize) {
-        return this._increasePool(Math.round((this._optPhysicalSize - this._physicalSize) * 1.2 / this._physicalAverage));
+      // this value should range between [0 <= `currentPage` <= `_maxPages`]
+      var currentPage = Math.floor(this._physicalSize / this._viewportSize);
+
+      if (currentPage === 0) {
+        // fill the first page
+        this._debounceTemplate(this._increasePool.bind(this, Math.round(this._physicalCount * 0.5)));
+      } else if (this._lastPage !== currentPage && isClientHeightFull) {
+        // paint the page and defer the next increase
+        // wait 16ms which is rough enough to get paint cycle.
+        Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', this._increasePool.bind(this, 1), 16));
+      } else {
+        // fill the rest of the pages
+        this._debounceTemplate(this._increasePool.bind(this, 1));
       }
-      return false;
+
+      this._lastPage = currentPage;
+
+      return true;
     },
     /**
      * Increases the pool size.
      */
     _increasePool: function(missingItems) {
-      // limit the size
       var nextPhysicalCount = Math.min(
           this._physicalCount + missingItems,
-          this._virtualCount,
+          this._virtualCount - this._virtualStart,
           MAX_PHYSICAL_COUNT
         );
-
       var prevPhysicalCount = this._physicalCount;
       var delta = nextPhysicalCount - prevPhysicalCount;
       if (delta <= 0) {
-        return false;
+        return;
       }
       [].push.apply(this._physicalItems, this._createPool(delta));
@@ -733,7 +829,15 @@ after the list became visible again. e.g.
       this._physicalCount = prevPhysicalCount + delta;
-      return true;
+      // update the physical start if we need to preserve the model of the focused item.
+      // In this situation, the focused item is currently rendered and its model would
+      // have changed after increasing the pool if the physical start remained unchanged.
+      if (this._physicalStart > this._physicalEnd &&
+          this._isIndexRendered(this._focusedIndex) &&
+          this._getPhysicalIndex(this._focusedIndex) < this._physicalEnd) {
+        this._physicalStart = this._physicalStart + delta;
+      }
+      this._update();
     },
     /**
@@ -743,7 +847,8 @@ after the list became visible again. e.g.
     _render: function() {
       var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;
-      if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate)  {
+      if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate) {
+        this._lastPage = 0;
         this._update();
         this._itemsRendered = true;
       }
@@ -756,11 +861,11 @@ after the list became visible again. e.g.
       if (!this.ctor) {
         // Template instance props that should be excluded from forwarding
         var props = {};
-
         props.__key__ = true;
         props[this.as] = true;
         props[this.indexAs] = true;
         props[this.selectedAs] = true;
+        props.tabIndex = true;
         this._instanceProps = props;
         this._userTemplate = Polymer.dom(this).querySelector('template');
@@ -820,23 +925,36 @@ after the list became visible again. e.g.
     /**
      * Called as a side effect of a host items.<key>.<path> path change,
-     * responsible for notifying item.<path> changes to row for key.
+     * responsible for notifying item.<path> changes.
      */
     _forwardItemPath: function(path, value) {
-      if (this._physicalIndexForKey) {
-        var dot = path.indexOf('.');
-        var key = path.substring(0, dot < 0 ? path.length : dot);
-        var idx = this._physicalIndexForKey[key];
-        var row = this._physicalItems[idx];
-        if (row) {
-          var inst = row._templateInstance;
-          if (dot >= 0) {
-            path = this.as + '.' + path.substring(dot+1);
-            inst.notifyPath(path, value, true);
-          } else {
-            inst[this.as] = value;
-          }
-        }
+      if (!this._physicalIndexForKey) {
+        return;
+      }
+      var inst;
+      var dot = path.indexOf('.');
+      var key = path.substring(0, dot < 0 ? path.length : dot);
+      var idx = this._physicalIndexForKey[key];
+      var el = this._physicalItems[idx];
+
+
+      if (idx === this._focusedIndex && this._offscreenFocusedItem) {
+        el = this._offscreenFocusedItem;
+      }
+      if (!el) {
+        return;
+      }
+
+      inst = el._templateInstance;
+
+      if (inst.__key__ !== key) {
+        return;
+      }
+      if (dot >= 0) {
+        path = this.as + '.' + path.substring(dot+1);
+        inst.notifyPath(path, value, true);
+      } else {
+        inst[this.as] = value;
       }
     },
@@ -846,18 +964,15 @@ after the list became visible again. e.g.
      */
     _itemsChanged: function(change) {
       if (change.path === 'items') {
-        // render the new set
-        this._itemsRendered = false;
-
-        // update the whole set
-        this._virtualStartVal = 0;
+        // reset items
+        this._virtualStart = 0;
         this._physicalTop = 0;
         this._virtualCount = this.items ? this.items.length : 0;
         this._collection = this.items ? Polymer.Collection.get(this.items) : null;
         this._physicalIndexForKey = {};
-        // scroll to the top
         this._resetScrollPosition(0);
+        this._removeFocusedItem();
         // create the initial physical items
         if (!this._physicalItems) {
@@ -866,48 +981,50 @@ after the list became visible again. e.g.
           this._physicalSizes = new Array(this._physicalCount);
         }
-        this.debounce('refresh', this._render);
+        this._physicalStart = 0;
       } else if (change.path === 'items.splices') {
-        // render the new set
-        this._itemsRendered = false;
-
         this._adjustVirtualIndex(change.value.indexSplices);
         this._virtualCount = this.items ? this.items.length : 0;
-        this.debounce('refresh', this._render);
-
       } else {
         // update a single item
         this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
+        return;
       }
+
+      this._itemsRendered = false;
+      this._debounceTemplate(this._render);
     },
     /**
      * @param {!Array<!PolymerSplice>} splices
      */
     _adjustVirtualIndex: function(splices) {
-      var i, splice, idx;
-
-      for (i = 0; i < splices.length; i++) {
-        splice = splices[i];
-
+      splices.forEach(function(splice) {
         // deselect removed items
-        splice.removed.forEach(this.$.selector.deselect, this.$.selector);
-
-        idx = splice.index;
+        splice.removed.forEach(this._removeItem, this);
         // We only need to care about changes happening above the current position
-        if (idx >= this._virtualStartVal) {
-          break;
-        }
+        if (splice.index < this._virtualStart) {
+          var delta = Math.max(
+              splice.addedCount - splice.removed.length,
+              splice.index - this._virtualStart);
-        this._virtualStart = this._virtualStart +
-            Math.max(splice.addedCount - splice.removed.length, idx - this._virtualStartVal);
-      }
+          this._virtualStart = this._virtualStart + delta;
+
+          if (this._focusedIndex >= 0) {
+            this._focusedIndex = this._focusedIndex + delta;
+          }
+        }
+      }, this);
     },
-    _scrollHandler: function() {
-      this._refresh();
+    _removeItem: function(item) {
+      this.$.selector.deselect(item);
+      // remove the current focused item
+      if (this._focusedItem && this._focusedItem._templateInstance[this.as] === item) {
+        this._removeFocusedItem();
+      }
     },
     /**
@@ -924,9 +1041,9 @@ after the list became visible again. e.g.
         for (i = 0; i < itemSet.length; i++) {
           pidx = itemSet[i];
           if (pidx >= this._physicalStart) {
-            vidx = this._virtualStartVal + (pidx - this._physicalStart);
+            vidx = this._virtualStart + (pidx - this._physicalStart);
           } else {
-            vidx = this._virtualStartVal + (this._physicalCount - this._physicalStart) + pidx;
+            vidx = this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
           }
           if ((rtn = fn.call(this, pidx, vidx)) != null) {
             return rtn;
@@ -934,17 +1051,14 @@ after the list became visible again. e.g.
         }
       } else {
         pidx = this._physicalStart;
-        vidx = this._virtualStartVal;
+        vidx = this._virtualStart;
         for (; pidx < this._physicalCount; pidx++, vidx++) {
           if ((rtn = fn.call(this, pidx, vidx)) != null) {
             return rtn;
           }
         }
-
-        pidx = 0;
-
-        for (; pidx < this._physicalStart; pidx++, vidx++) {
+        for (pidx = 0; pidx < this._physicalStart; pidx++, vidx++) {
           if ((rtn = fn.call(this, pidx, vidx)) != null) {
             return rtn;
           }
@@ -962,19 +1076,18 @@ after the list became visible again. e.g.
         var inst = el._templateInstance;
         var item = this.items && this.items[vidx];
-        if (item) {
+        if (item != null) {
           inst[this.as] = item;
           inst.__key__ = this._collection.getKey(item);
-          inst[this.selectedAs] =
-            /** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item);
+          inst[this.selectedAs] = /** @type {!ArraySelectorElement} */ (this.$.selector).isSelected(item);
           inst[this.indexAs] = vidx;
-          el.removeAttribute('hidden');
+          inst.tabIndex = this._focusedIndex === vidx ? 0 : -1;
           this._physicalIndexForKey[inst.__key__] = pidx;
+          el.removeAttribute('hidden');
         } else {
           inst.__key__ = null;
           el.setAttribute('hidden', '');
         }
-
       }, itemSet);
     },
@@ -984,23 +1097,26 @@ after the list became visible again. e.g.
      * @param {!Array<number>=} itemSet
      */
      _updateMetrics: function(itemSet) {
+      // Make sure we distributed all the physical items
+      // so we can measure them
+      Polymer.dom.flush();
+
       var newPhysicalSize = 0;
       var oldPhysicalSize = 0;
       var prevAvgCount = this._physicalAverageCount;
       var prevPhysicalAvg = this._physicalAverage;
-      // Make sure we distributed all the physical items
-      // so we can measure them
-      Polymer.dom.flush();
       this._iterateItems(function(pidx, vidx) {
+
         oldPhysicalSize += this._physicalSizes[pidx] || 0;
         this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
         newPhysicalSize += this._physicalSizes[pidx];
         this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
+
       }, itemSet);
       this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
-      this._viewportSize = this._scroller.offsetHeight;
+      this._viewportSize = this._scrollTargetHeight;
       // update the average if we measured something
       if (this._physicalAverageCount !== prevAvgCount) {
@@ -1019,10 +1135,8 @@ after the list became visible again. e.g.
       var y = this._physicalTop;
       this._iterateItems(function(pidx) {
-
-        this.transform('translate3d(0, ' + y + 'px, 0)', this._physicalItems[pidx]);
+        this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
         y += this._physicalSizes[pidx];
-
       });
     },
@@ -1030,15 +1144,14 @@ after the list became visible again. e.g.
      * Adjusts the scroll position when it was overestimated.
      */
     _adjustScrollPosition: function() {
-      var deltaHeight = this._virtualStartVal === 0 ? this._physicalTop :
+      var deltaHeight = this._virtualStart === 0 ? this._physicalTop :
           Math.min(this._scrollPosition + this._physicalTop, 0);
       if (deltaHeight) {
         this._physicalTop = this._physicalTop - deltaHeight;
-
         // juking scroll position during interial scrolling on iOS is no bueno
         if (!IOS_TOUCH_SCROLLING) {
-          this._resetScrollPosition(this._scroller.scrollTop - deltaHeight);
+          this._resetScrollPosition(this._scrollTop - deltaHeight);
         }
       }
     },
@@ -1047,9 +1160,9 @@ after the list became visible again. e.g.
      * Sets the position of the scroll.
      */
     _resetScrollPosition: function(pos) {
-      if (this._scroller) {
-        this._scroller.scrollTop = pos;
-        this._scrollPosition = this._scroller.scrollTop;
+      if (this.scrollTarget) {
+        this._scrollTop = pos;
+        this._scrollPosition = this._scrollTop;
       }
     },
@@ -1060,7 +1173,7 @@ after the list became visible again. e.g.
      */
     _updateScrollerSize: function(forceUpdate) {
       this._estScrollHeight = (this._physicalBottom +
-          Math.max(this._virtualCount - this._physicalCount - this._virtualStartVal, 0) * this._physicalAverage);
+          Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage);
       forceUpdate = forceUpdate || this._scrollHeight === 0;
       forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
@@ -1071,7 +1184,6 @@ after the list became visible again. e.g.
         this._scrollHeight = this._estScrollHeight;
       }
     },
-
     /**
      * Scroll to a specific item in the virtual list regardless
      * of the physical items in the DOM tree.
@@ -1084,20 +1196,19 @@ after the list became visible again. e.g.
         return;
       }
-      var firstVisible = this.firstVisibleIndex;
+      Polymer.dom.flush();
       idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
-
-      // start at the previous virtual item
-      // so we have a item above the first visible item
-      this._virtualStart = idx - 1;
-
+      // update the virtual start only when needed
+      if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
+        this._virtualStart = idx - 1;
+      }
+      // manage focus
+      this._manageFocus();
       // assign new models
       this._assignModels();
-
       // measure the new sizes
       this._updateMetrics();
-
       // estimate new physical offset
       this._physicalTop = this._virtualStart * this._physicalAverage;
@@ -1107,28 +1218,22 @@ after the list became visible again. e.g.
       var hiddenContentSize = this._hiddenContentSize;
       // scroll to the item as much as we can
-      while (currentVirtualItem !== idx && targetOffsetTop < hiddenContentSize) {
+      while (currentVirtualItem < idx && targetOffsetTop < hiddenContentSize) {
         targetOffsetTop = targetOffsetTop + this._physicalSizes[currentTopItem];
         currentTopItem = (currentTopItem + 1) % this._physicalCount;
         currentVirtualItem++;
       }
-
       // update the scroller size
       this._updateScrollerSize(true);
-
       // update the position of the items
       this._positionItems();
-
       // set the new scroll position
-      this._resetScrollPosition(this._physicalTop + targetOffsetTop + 1);
-
+      this._resetScrollPosition(this._physicalTop + this._scrollerPaddingTop + targetOffsetTop);
       // increase the pool of physical items if needed
-      if (this._increasePoolIfNeeded()) {
-        // yield set models to the new items
-        this.async(this._update);
-      }
+      this._increasePoolIfNeeded();
       // clear cached visible index
       this._firstVisibleIndexVal = null;
+      this._lastVisibleIndexVal = null;
     },
     /**
@@ -1144,21 +1249,30 @@ after the list became visible again. e.g.
      * when the element is resized.
      */
     _resizeHandler: function() {
-      this.debounce('resize', function() {
-        this._render();
-        if (this._itemsRendered && this._physicalItems && this._isVisible) {
-          this._resetAverage();
-          this.updateViewportBoundaries();
-          this.scrollToIndex(this.firstVisibleIndex);
-        }
-      });
+      // iOS fires the resize event when the address bar slides up
+      if (IOS && Math.abs(this._viewportSize - this._scrollTargetHeight) < 100) {
+        return;
+      }
+      // In Desktop Safari 9.0.3, if the scroll bars are always shown, 
+      // changing the scroll position from a resize handler would result in 
+      // the scroll position being reset. Waiting 1ms fixes the issue. 
+      Polymer.dom.addDebouncer(this.debounce('_debounceTemplate',
+        function() {
+          this._render();
+
+          if (this._itemsRendered && this._physicalItems && this._isVisible) {
+            this._resetAverage();
+            this.updateViewportBoundaries();
+            this.scrollToIndex(this.firstVisibleIndex);
+          }
+        }.bind(this), 1));
     },
     _getModelFromItem: function(item) {
       var key = this._collection.getKey(item);
       var pidx = this._physicalIndexForKey[key];
-      if (pidx !== undefined) {
+      if (pidx != null) {
         return this._physicalItems[pidx]._templateInstance;
       }
       return null;
@@ -1170,12 +1284,14 @@ after the list became visible again. e.g.
      * @param {(Object|number)} item The item object or its index
      */
     _getNormalizedItem: function(item) {
-      if (typeof item === 'number') {
-        item = this.items[item];
-        if (!item) {
-          throw new RangeError('<item> not found');
+      if (this._collection.getKey(item) === undefined) {
+        if (typeof item === 'number') {
+          item = this.items[item];
+          if (!item) {
+            throw new RangeError('<item> not found');
+          }
+          return item;
         }
-      } else if (this._collection.getKey(item) === undefined) {
         throw new TypeError('<item> should be a valid item');
       }
       return item;
@@ -1198,6 +1314,7 @@ after the list became visible again. e.g.
         model[this.selectedAs] = true;
       }
       this.$.selector.select(item);
+      this.updateSizeForItem(item);
     },
     /**
@@ -1215,6 +1332,7 @@ after the list became visible again. e.g.
         model[this.selectedAs] = false;
       }
       this.$.selector.deselect(item);
+      this.updateSizeForItem(item);
     },
     /**
@@ -1260,20 +1378,15 @@ after the list became visible again. e.g.
      * it will remove the listener otherwise.
      */
     _selectionEnabledChanged: function(selectionEnabled) {
-      if (selectionEnabled) {
-        this.listen(this, 'tap', '_selectionHandler');
-        this.listen(this, 'keypress', '_selectionHandler');
-      } else {
-        this.unlisten(this, 'tap', '_selectionHandler');
-        this.unlisten(this, 'keypress', '_selectionHandler');
-      }
+      var handler = selectionEnabled ? this.listen : this.unlisten;
+      handler.call(this, this, 'tap', '_selectionHandler');
     },
     /**
      * Select an item from an event object.
      */
     _selectionHandler: function(e) {
-      if (e.type !== 'keypress' || e.keyCode === 13) {
+      if (this.selectionEnabled) {
         var model = this.modelForElement(e.target);
         if (model) {
           this.toggleSelectionForItem(model[this.as]);
@@ -1297,10 +1410,179 @@ after the list became visible again. e.g.
       var key = this._collection.getKey(item);
       var pidx = this._physicalIndexForKey[key];
-      if (pidx !== undefined) {
+      if (pidx != null) {
         this._updateMetrics([pidx]);
         this._positionItems();
       }
+    },
+
+    /**
+     * Creates a temporary backfill item in the rendered pool of physical items
+     * to replace the main focused item. The focused item has tabIndex = 0
+     * and might be currently focused by the user.
+     *
+     * This dynamic replacement helps to preserve the focus state.
+     */
+    _manageFocus: function() {
+      var fidx = this._focusedIndex;
+
+      if (fidx >= 0 && fidx < this._virtualCount) {
+        // if it's a valid index, check if that index is rendered
+        // in a physical item.
+        if (this._isIndexRendered(fidx)) {
+          this._restoreFocusedItem();
+        } else {
+          this._createFocusBackfillItem();
+        }
+      } else if (this._virtualCount > 0 && this._physicalCount > 0) {
+        // otherwise, assign the initial focused index.
+        this._focusedIndex = this._virtualStart;
+        this._focusedItem = this._physicalItems[this._physicalStart];
+      }
+    },
+
+    _isIndexRendered: function(idx) {
+      return idx >= this._virtualStart && idx <= this._virtualEnd;
+    },
+
+    _isIndexVisible: function(idx) {
+      return idx >= this.firstVisibleIndex && idx <= this.lastVisibleIndex;
+    },
+
+    _getPhysicalIndex: function(idx) {
+      return this._physicalIndexForKey[this._collection.getKey(this._getNormalizedItem(idx))];
+    },
+
+    _focusPhysicalItem: function(idx) {
+      if (idx < 0 || idx >= this._virtualCount) {
+        return;
+      }
+      this._restoreFocusedItem();
+      // scroll to index to make sure it's rendered
+      if (!this._isIndexRendered(idx)) {
+        this.scrollToIndex(idx);
+      }
+
+      var physicalItem = this._physicalItems[this._getPhysicalIndex(idx)];
+      var SECRET = ~(Math.random() * 100);
+      var model = physicalItem._templateInstance;
+      var focusable;
+
+      // set a secret tab index
+      model.tabIndex = SECRET;
+      // check if focusable element is the physical item
+      if (physicalItem.tabIndex === SECRET) {
+       focusable = physicalItem;
+      }
+      // search for the element which tabindex is bound to the secret tab index
+      if (!focusable) {
+        focusable = Polymer.dom(physicalItem).querySelector('[tabindex="' + SECRET + '"]');
+      }
+      // restore the tab index
+      model.tabIndex = 0;
+      // focus the focusable element
+      this._focusedIndex = idx;
+      focusable && focusable.focus();
+    },
+
+    _removeFocusedItem: function() {
+      if (this._offscreenFocusedItem) {
+        Polymer.dom(this).removeChild(this._offscreenFocusedItem);
+      }
+      this._offscreenFocusedItem = null;
+      this._focusBackfillItem = null;
+      this._focusedItem = null;
+      this._focusedIndex = -1;
+    },
+
+    _createFocusBackfillItem: function() {
+      var pidx, fidx = this._focusedIndex;
+      if (this._offscreenFocusedItem || fidx < 0) {
+        return;
+      }
+      if (!this._focusBackfillItem) {
+        // create a physical item, so that it backfills the focused item.
+        var stampedTemplate = this.stamp(null);
+        this._focusBackfillItem = stampedTemplate.root.querySelector('*');
+        Polymer.dom(this).appendChild(stampedTemplate.root);
+      }
+      // get the physical index for the focused index
+      pidx = this._getPhysicalIndex(fidx);
+
+      if (pidx != null) {
+        // set the offcreen focused physical item
+        this._offscreenFocusedItem = this._physicalItems[pidx];
+        // backfill the focused physical item
+        this._physicalItems[pidx] = this._focusBackfillItem;
+        // hide the focused physical
+        this.translate3d(0, HIDDEN_Y, 0, this._offscreenFocusedItem);
+      }
+    },
+
+    _restoreFocusedItem: function() {
+      var pidx, fidx = this._focusedIndex;
+
+      if (!this._offscreenFocusedItem || this._focusedIndex < 0) {
+        return;
+      }
+      // assign models to the focused index
+      this._assignModels();
+      // get the new physical index for the focused index
+      pidx = this._getPhysicalIndex(fidx);
+
+      if (pidx != null) {
+        // flip the focus backfill
+        this._focusBackfillItem = this._physicalItems[pidx];
+        // restore the focused physical item
+        this._physicalItems[pidx] = this._offscreenFocusedItem;
+        // reset the offscreen focused item
+        this._offscreenFocusedItem = null;
+        // hide the physical item that backfills
+        this.translate3d(0, HIDDEN_Y, 0, this._focusBackfillItem);
+      }
+    },
+
+    _didFocus: function(e) {
+      var targetModel = this.modelForElement(e.target);
+      var focusedModel = this._focusedItem ? this._focusedItem._templateInstance : null;
+      var hasOffscreenFocusedItem = this._offscreenFocusedItem !== null;
+      var fidx = this._focusedIndex;
+
+      if (!targetModel || !focusedModel) {
+        return;
+      }
+      if (focusedModel === targetModel) {
+        // if the user focused the same item, then bring it into view if it's not visible
+        if (!this._isIndexVisible(fidx)) {
+          this.scrollToIndex(fidx);
+        }
+      } else {
+        this._restoreFocusedItem();
+        // restore tabIndex for the currently focused item
+        focusedModel.tabIndex = -1;
+        // set the tabIndex for the next focused item
+        targetModel.tabIndex = 0;
+        fidx = targetModel[this.indexAs];
+        this._focusedIndex = fidx;
+        this._focusedItem = this._physicalItems[this._getPhysicalIndex(fidx)];
+
+        if (hasOffscreenFocusedItem && !this._offscreenFocusedItem) {
+          this._update();
+        }
+      }
+    },
+
+    _didMoveUp: function() {
+      this._focusPhysicalItem(this._focusedIndex - 1);
+    },
+
+    _didMoveDown: function() {
+      this._focusPhysicalItem(this._focusedIndex + 1);
+    },
+
+    _didEnter: function(e) {
+      this._focusPhysicalItem(this._focusedIndex);
+      this._selectionHandler(e.detail.keyboardEvent);
     }
   });
@@ -16,9 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
 </head>
@@ -41,9 +39,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     });
     test('defaults', function() {
-      assert.equal(list.items, null);
-      assert.equal(list.as, 'item');
-      assert.equal(list.indexAs, 'index');
+      assert.equal(list.items, null, 'items');
+      assert.equal(list.as, 'item', 'as');
+      assert.equal(list.indexAs, 'index', 'indexAs');
+      assert.equal(list.selectedAs, 'selected', 'selectedAs');
+      assert.equal(list.scrollTarget, list, 'scrollTarget');
+      assert.isFalse(list.selectionEnabled, 'selectionEnabled');
+      assert.isFalse(list.multiSelection, 'multiSelection');
     });
     test('check items length', function(done) {
@@ -84,7 +86,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       flush(function() {
         var setSize = list.items.length;
-        var rowHeight = list._physicalItems[0].offsetHeight;
+        var rowHeight = container.itemHeight;
         var viewportHeight = list.offsetHeight;
         var scrollToItem;
@@ -93,31 +95,39 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           assert.equal(getFirstItemFromList(list).textContent, scrollToItem);
         }
+        function checkLastVisible() {
+          var visibleItemsCount = Math.floor(viewportHeight / rowHeight);
+          assert.equal(list.lastVisibleIndex, scrollToItem + visibleItemsCount - 1);
+          assert.equal(getLastItemFromList(list).textContent, scrollToItem + visibleItemsCount - 1);
+        }
+
         function doneScrollDown() {
           checkFirstVisible();
-
+          checkLastVisible();
           scrollToItem = 1;
-
           flush(function() {
             simulateScroll({
               list: list,
               contribution: rowHeight,
-              target: scrollToItem*rowHeight
-            }, doneScrollUp);
+              target: scrollToItem*rowHeight,
+              onScrollEnd: doneScrollUp
+            });
           });
         }
         function doneScrollUp() {
           checkFirstVisible();
+          checkLastVisible();
           done();
         }
-
         scrollToItem = 50;
+
         simulateScroll({
           list: list,
           contribution: 50,
-          target: scrollToItem*rowHeight
-        }, doneScrollDown);
+          target: scrollToItem*rowHeight,
+          onScrollEnd: doneScrollDown
+        });
       });
     });
@@ -125,7 +135,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     test('scroll to index', function(done) {
       list.items = buildDataSet(100);
-      flush(function() {
+      setTimeout(function() {
         list.scrollToIndex(30);
         assert.equal(list.firstVisibleIndex, 30);
@@ -148,25 +158,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           assert.equal(list.firstVisibleIndex, 99);
           done();
         }, 100);
-
-      });
+      }, 100);
     });
     test('reset items', function(done) {
       list.items = buildDataSet(100);
       flush(function() {
-        var firstItem = getFirstItemFromList(list);
-        assert.equal(firstItem.textContent, '0');
+        assert.equal(getFirstItemFromList(list).textContent, '0');
         list.items = null;
         flush(function() {
-          assert.notEqual(getFirstItemFromList(list), firstItem);
+          assert.notEqual(getFirstItemFromList(list).textContent, '0');
           list.items = buildDataSet(100);
           flush(function() {
-            assert.equal(getFirstItemFromList(list), firstItem);
+            assert.equal(getFirstItemFromList(list).textContent, '0');
             done();
           });
         });
@@ -16,11 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
@@ -60,16 +57,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             {index: 8, height: 51}
           );
-          list.addEventListener('scroll', function() {
-            assert.isTrue(isFullOfItems(list));
-          });
-
           simulateScroll({
             list: list,
-            contribution: 15,
-            target: 100000
-          }, function() {
-            done();
+            contribution: 20,
+            target: 100000,
+            onScrollEnd: done,
+            onScroll: function() {
+              list.debounce('scroll', function() {
+                assert.isTrue(isFullOfItems(list));
+              });
+            }
           });
         });
       });
@@ -84,16 +81,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         list.items = items;
         flush(function() {
-          list.addEventListener('scroll', function() {
-            assert.isTrue(isFullOfItems(list));
-          });
-
           simulateScroll({
             list: list,
             contribution: 20,
-            target: 100000
-          }, function() {
-            done();
+            target: 100000,
+            onScrollEnd: done,
+            onScroll: function() {
+              list.debounce('scroll', function() {
+                assert.equal(isFullOfItems(list), true);
+              });
+            }
           });
         });
       });
@@ -106,16 +103,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
         flush(function() {
-          list.addEventListener('scroll', function() {
-            assert.isTrue(isFullOfItems(list));
-          });
-
           simulateScroll({
             list: list,
             contribution: 20,
-            target: 100000
-          }, function() {
-            done();
+            target: 100000,
+            onScrollEnd: done,
+            onScroll: function() {
+              list.debounce('scroll', function() {
+                assert.isTrue(isFullOfItems(list));
+              });
+            }
           });
         });
       });
@@ -16,11 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
@@ -85,7 +82,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         list.items = buildDataSet(100);
         flush(function() {
-          list.updateSizeForItem(list.items[list._physicalCount + 1]);
+          list.updateSizeForItem(list.items[list.items.length - 1]);
           done();
         });
       });
+<!doctype html>
+<!--
+@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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>iron-list test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="x-list.html">
+</head>
+<body>
+
+  <test-fixture id="trivialList">
+    <template>
+      <x-list></x-list>
+    </template>
+  </test-fixture>
+
+<script>
+
+  suite('basic features', function() {
+    var list, container;
+
+    setup(function() {
+      container = fixture('trivialList');
+      list = container.list;
+    });
+
+    test('first item should be focusable', function(done) {
+      container.data = buildDataSet(100);
+
+      flush(function() {
+        console.log(getFirstItemFromList(list));
+        assert.notEqual(getFirstItemFromList(list).tabIndex, -1);
+        done();
+      });
+    });
+
+    test('focus the first item and then reset the items', function(done) {
+      list.items = buildDataSet(100);
+
+      flush(function() {
+        getFirstItemFromList(list).focus();
+
+        simulateScroll({
+          list: list,
+          contribution: 200,
+          target: 3000,
+          onScrollEnd: function() {
+            list.items = [];
+            flush(function() {
+              done(); 
+            });
+          }
+        });
+      });
+    });
+
+    test('focus the first item and then splice all the items', function(done) {
+      list.items = buildDataSet(100);
+
+      flush(function() {
+        getFirstItemFromList(list).focus();
+
+        simulateScroll({
+          list: list,
+          contribution: 200,
+          target: 3000,
+          onScrollEnd: function() {
+            list.splice('items', 0, list.items.length);
+            flush(function() {
+              done(); 
+            });
+          }
+        });
+      });
+    });
+
+    test('should not hide the list', function(done) {
+      list.items = buildDataSet(100);
+
+      flush(function() {
+        // this index isn't rendered yet
+        list._focusedIndex = list.items.length-1;
+        list.scrollTarget.addEventListener('scroll', function() {
+          var rect = list.getBoundingClientRect();
+          assert.isTrue(rect.top + rect.height > 0);
+          done();
+        });
+        // trigger the scroll event
+        list._scrollTop = 1000;
+      });
+    });
+
+  });
+
+</script>
+
+</body>
+</html>
@@ -36,41 +36,48 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     return data;
   }
-  function simulateScroll(config, fn) {
+  function simulateScroll(config) {
     var list = config.list;
     var target = config.target;
     var delay = config.delay || 1;
-    var contribution = config.contribution || 10;
-
-    function scroll(dir, prevVal) {
-      if ((dir > 0 && list.scrollTop >= target) || 
-          (dir < 0 && list.scrollTop <= target) || 
-          list.scrollTop === prevVal
-        ){
-        list.scrollTop = target;
-        setTimeout(fn.bind(null, list.scrollTop), 100);
-        return;
-      }
-      prevVal = list.scrollTop;
-      list.scrollTop = list.scrollTop + dir;
-      setTimeout(scroll.bind(null, dir, prevVal), delay);
+    var contribution = Math.abs(config.contribution) || 10;
+    // scroll back up
+    if (target < list.scrollTop) {
+      contribution = -contribution;
     }
-    if (list.scrollTop < target) {
-      scroll(Math.abs(contribution), -1);
-    } else if (list.scrollTop > target) {
-      scroll(-Math.abs(contribution), -1);
+    function scrollHandler() {
+      setTimeout(function() {
+        var minScrollTop = 0;
+        var maxScrollTop = list.scrollHeight - list.offsetHeight;
+
+        config.onScroll && config.onScroll();
+
+        if (list.scrollTop < target && contribution > 0 && list.scrollTop < maxScrollTop) {
+          list.scrollTop = Math.min(maxScrollTop, list.scrollTop + contribution);
+
+        } else if (list.scrollTop > target && contribution < 0 && list.scrollTop > minScrollTop) {
+          list.scrollTop = Math.max(minScrollTop, list.scrollTop + contribution);
+
+        } else {
+          list.removeEventListener('scroll', scrollHandler);
+          list.scrollTop = target;
+          config.onScrollEnd && config.onScrollEnd();
+        }
+      }, delay);
     }
+    list.addEventListener('scroll', scrollHandler);
+    scrollHandler();
   }
   function getFirstItemFromList(list) {
     var listRect = list.getBoundingClientRect();
-    return document.elementFromPoint(listRect.left + 1, listRect.top + 1);
+    return document.elementFromPoint(listRect.left + 100, listRect.top + 1);
   }
   function getLastItemFromList(list) {
     var listRect = list.getBoundingClientRect();
-    return document.elementFromPoint(listRect.left + 1, listRect.top + listRect.height - 1);
+    return document.elementFromPoint(listRect.left + 100, listRect.top + listRect.height - 1);
   }
   function isFullOfItems(list) {
@@ -80,15 +87,39 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     // IE 10 & 11 doesn't render propertly :(
     var badPixels = 0;
     while (y < listHeight) {
-      item = document.elementFromPoint(listRect.left + 1, y);
-      if (item.parentNode && !item.parentNode._templateInstance) {
+      item = document.elementFromPoint(listRect.left + 100, y);
+      if (!item || (item.parentNode && !item.parentNode._templateInstance)) {
         badPixels++;
       }
-      if (badPixels > 3) {
+      y++;
+      if (badPixels > 2) {
         return false;
       }
-      y += 2;
     }
     return true;
   }
+
+  function checkRepeatedItems(list) {
+    var listRect = list.getBoundingClientRect();
+    var listHeight = list.offsetHeight;
+    var listItems = {};
+
+    return function() {
+      var itemKey;
+      var y = listRect.top;
+      while (y < listHeight) {
+        item = document.elementFromPoint(listRect.left + 100, y + 2);
+        itemKey = item.textContent || item.innerText;
+
+        if (item.parentNode && item.parentNode._templateInstance) {
+          if (listItems[itemKey] && listItems[itemKey] != item) {
+            return true;
+          }
+          listItems[itemKey] = item;
+        }
+        y += item.offsetHeight;
+      }
+      return false;
+    };
+  }
 </script>
@@ -16,10 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
@@ -54,7 +51,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       test('iron-resize', function(done) {
         list.items = buildDataSet(100);
         list.fire('iron-resize');
-       
+
         assert.notEqual(getFirstItemFromList(list).textContent, '0');
         Polymer.RenderStatus.whenReady(function() {
           container.removeAttribute('hidden');
@@ -19,6 +19,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script>
     WCT.loadSuites([
       'basic.html',
+      'focus.html',
       'mutations.html',
       'physical-count.html',
       'hidden-list.html',
@@ -16,9 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
 </head>
@@ -30,9 +28,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </template>
   </test-fixture>
+  <test-fixture id="trivialListPrimitiveItem">
+    <template>
+      <x-list primitive></x-list>
+    </template>
+  </test-fixture>
+
   <script>
-    suite('mutations to items', function() {
+    suite('mutations to the collection of items', function() {
       var list, container;
       setup(function() {
@@ -63,26 +67,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         function scrollBackUp() {
           simulateScroll({
             list: list,
-            contribution: 100,
-            target: 0
-          }, function() {
-            flush(function() {
-              assert.equal(getFirstItemFromList(list).textContent, phrase);
-              done();
-            });
+            contribution: 200,
+            target: 0,
+            onScrollEnd: function() {
+             assert.equal(getFirstItemFromList(list).textContent, phrase);
+             done();
+            }
           });
         }
         flush(function() {
-          var rowHeight = list._physicalItems[0].offsetHeight;
+          var rowHeight = getFirstItemFromList(list).offsetHeight;
           // scroll down
           simulateScroll({
             list: list,
-            contribution: 100,
-            target: setSize*rowHeight
-          }, function() {
-            list.set('items.0.index', phrase);
-            flush(scrollBackUp);
+            contribution: 200,
+            target: setSize*rowHeight,
+            onScrollEnd: function() {
+              list.set('items.0.index', phrase);
+              scrollBackUp();
+            }
           });
         });
       });
@@ -105,38 +109,60 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           simulateScroll({
             list: list,
-            contribution: rowHeight,
-            target: list.items.length*rowHeight
-          }, function() {
-            assert.equal(getFirstItemFromList(list).textContent,
+            contribution: 200,
+            target: list.items.length*rowHeight,
+            onScrollEnd: function() {
+              assert.equal(getFirstItemFromList(list).textContent,
                 list.items.length - itemsPerViewport);
-            done();
+              done();
+            }
           });
         })
       });
+      test('push and scroll to bottom', function(done) {
+        list.items = [buildItem(0)];
+
+        flush(function() {
+          var rowHeight = getFirstItemFromList(list).offsetHeight;
+          var viewportHeight = list.offsetHeight;
+          var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
+
+          while (list.items.length < 200) {
+            list.push('items', buildItem(list.items.length));
+          }
+
+          list.scrollToIndex(list.items.length - 1);
+          assert.isTrue(isFullOfItems(list));
+          assert.equal(getFirstItemFromList(list).textContent.trim(),
+              list.items.length - itemsPerViewport);
+          done();
+        });
+      });
+
       test('pop', function(done) {
         var setSize = 100;
         list.items = buildDataSet(setSize);
         flush(function() {
-          var rowHeight = list._physicalItems[0].offsetHeight;
+          var rowHeight = getFirstItemFromList(list).offsetHeight;
           simulateScroll({
             list: list,
-            contribution: rowHeight,
-            target: setSize*rowHeight
-          }, function() {
-            var viewportHeight = list.offsetHeight;
-            var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
-
-            list.pop('items');
-
-            flush(function() {
-              assert.equal(list.items.length, setSize-1);
-              assert.equal(getFirstItemFromList(list).textContent, setSize - 3 - 1);
-              done();
-            });
+            contribution: 200,
+            target: setSize*rowHeight,
+            onScrollEnd: function() {
+              var viewportHeight = list.offsetHeight;
+              var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
+
+              list.pop('items');
+
+              flush(function() {
+                assert.equal(list.items.length, setSize-1);
+                assert.equal(getFirstItemFromList(list).textContent, setSize - 3 - 1);
+                done();
+              });
+            }
           });
         });
       });
@@ -168,7 +194,98 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }
       });
+      test('reassign items', function(done) {
+        list.items = buildDataSet(100);
+        container.itemHeight = 'auto';
+
+        flush(function() {
+          var itemHeight = getFirstItemFromList(list).offsetHeight;
+          var hasRepeatedItems = checkRepeatedItems(list);
+
+          simulateScroll({
+            list: list,
+            contribution: 200,
+            target: itemHeight * list.items.length,
+            onScrollEnd: function() {
+              list.items = list.items.slice(0);
+              simulateScroll({
+                list: list,
+                contribution: itemHeight,
+                target: itemHeight * list.items.length,
+                onScroll: function() {
+                  assert.isFalse(hasRepeatedItems(), 'List should not have repeated items');
+                },
+                onScrollEnd: done
+              });
+            }
+          });
+        });
+      });
+
+      test('empty items array', function(done) {
+        list.items = buildDataSet(100);
+
+        flush(function() {
+          list.items = [];
+          flush(function() {
+            assert.notEqual(getFirstItemFromList(list).textContent, '0');
+            done();
+          });
+        });
+      });
+
+      test('should notify path to the right physical item', function(done) {
+        list.items = buildDataSet(100);
+        flush(function() {
+          var idx = list._physicalCount + 1;
+
+          list.scrollToIndex(idx);
+          list.notifyPath('items.1.index', 'bad');
+          assert.equal(getFirstItemFromList(list).textContent, idx);
+          done();
+        });
+      });
+    });
+
+    suite('mutations of primitive type items', function() {
+      var container, list;
+
+      setup(function() {
+        container = fixture('trivialListPrimitiveItem');
+        list = container.list;
+      });
+
+      test('push item = polymer', function(done) {
+        list.items = [];
+        list.push('items', 'polymer');
+
+        flush(function() {
+         assert.equal(getFirstItemFromList(list).textContent, 'polymer');
+         done();
+        });
+      });
+
+      test('push item = 0', function(done) {
+        list.items = [];
+        list.push('items', 0);
+
+        flush(function() {
+          assert.equal(getFirstItemFromList(list).textContent, '0');
+          done();
+        });
+      });
+
+      test('push item = false', function(done) {
+        list.items = [];
+        list.push('items', false);
+
+        flush(function() {
+          assert.equal(getFirstItemFromList(list).textContent, 'false');
+          done();
+        });
+      });
     });
+
   </script>
 </body>
@@ -16,10 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
@@ -28,7 +25,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <test-fixture id="trivialList">
     <template>
-      <x-list item-height="2" list-height="300"></x-list>
+      <x-list list-height="100" item-height="2"></x-list>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="trivialListSmall">
+    <template>
+      <x-list list-height="2" item-height="2"></x-list>
     </template>
   </test-fixture>
@@ -40,38 +43,45 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       setup(function() {
         container = fixture('trivialList');
         list = container.list;
+        list.items = buildDataSet(200);
       });
       test('increase pool size', function(done) {
-        list.items = buildDataSet(1000);
+        setTimeout(function() {
+          list.scrollTop = 0;
-        flush(function() {
           var lastItem = getLastItemFromList(list);
           var lastItemHeight = lastItem.offsetHeight;
-          var expectedFinalItem = list.offsetHeight/lastItemHeight;
+          var expectedFinalItem = container.listHeight/lastItemHeight - 1;
+          assert.equal(list.offsetHeight, container.listHeight);
           assert.equal(lastItemHeight, 2);
-          assert.equal(getLastItemFromList(list).textContent, expectedFinalItem);
+          assert.isTrue(isFullOfItems(list));
+          assert.equal(lastItem.textContent, expectedFinalItem);
           done();
-        });
+        }, 100);
       });
+    });
-      test('increase pool size on resize', function(done) {
-        list.items = buildDataSet(1000);
+    suite('iron-resize', function() {
+      var list, container;
+      setup(function() {
+        container = fixture('trivialListSmall');
+        list = container.list;
+        list.style.display = 'none';
+        list.items = buildDataSet(200);
+      });
+
+      test('increase pool size after resizing the list', function(done) {
         flush(function() {
-          // change the height of the list
-          container.listHeight = 500;
-          // resize
+          list.style.display = '';
+          assert.notEqual(getFirstItemFromList(list).textContent, '0', 'Item should not be rendered');
+
           list.fire('iron-resize');
           flush(function() {
-            var lastItem = getLastItemFromList(list);
-            var lastItemHeight = lastItem.offsetHeight;
-            var expectedFinalItem = list.offsetHeight/lastItemHeight;
-
-            assert.equal(lastItemHeight, 2);
-            assert.equal(getLastItemFromList(list).textContent, expectedFinalItem);
+            assert.equal(getFirstItemFromList(list).textContent, '0', 'Item should be rendered');
             done();
           });
         });
@@ -16,11 +16,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../test-fixture/test-fixture-mocha.js"></script>
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
-  <link rel="import" href="../../test-fixture/test-fixture.html">
-  <link rel="import" href="../../paper-styles/paper-styles.html">
   <link rel="import" href="helpers.html">
   <link rel="import" href="x-list.html">
@@ -29,7 +26,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <test-fixture id="trivialList">
     <template>
-      <x-list></x-list>
+      <x-list item-height="10"></x-list>
     </template>
   </test-fixture>
@@ -321,7 +318,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           assert.isFalse(list._physicalItems[0]._templateInstance.selected);
           assert.isTrue(list._physicalItems[10]._templateInstance.selected);
-
           done();
         });
       });
@@ -22,11 +22,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../../polymer/polymer.html">
-  <link rel="import" href="../../../paper-styles/paper-styles.html">
   <link rel="import" href="../../iron-list.html">
   <style is="custom-style">
-
+    body {
+      @apply(--layout-fullbleed);
+    }
+    
     iron-list {
       width: 500px;
       height: 400px;
@@ -36,35 +38,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     .item {
       background-color: green;
-      border-bottom: 1px solid white; 
+      border-bottom: 1px solid white;
     }
   </style>
 </head>
-<body  class="fullbleed" unresolved>
+<body unresolved>
   <template is="dom-bind">
-    
-    <h1>The physical avarage is not useful in this situations</h1>
+
+    <h1>The physical average is not useful in this situations</h1>
     <p>The list is correct if it can render all the items without empty spaces.</p>
     <iron-list id="list" items="[791, 671]" as="item" style="width: 300px; height: 300px;">
       <template>
-        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span> 
+        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
         </div>
       </template>
     </iron-list>
     <iron-list id="list2" items="[791, 671]" as="item" style="width: 710px; height: 453px;">
       <template>
-        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span> 
+        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
         </div>
       </template>
     </iron-list>
     <iron-list items="[512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4]" as="item" style="height: 256px;">
       <template>
-        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span> 
+        <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
         </div>
       </template>
     </iron-list>
@@ -20,6 +20,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../../polymer/polymer.html">
+  <link rel="import" href="../../../paper-styles/paper-styles.html">
+
   <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
   <link rel="import" href="../../iron-list.html">
   <link rel="import" href="dummy-data.html">
@@ -35,6 +37,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       iron-list {
         @apply(--layout-flex);
+        height: 100%;
       }
       .item {
@@ -188,7 +191,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   </script>
   <style is="custom-style">
-    x-app {
+    body, x-app {
       @apply(--layout-fit);
     }
   </style>
@@ -196,7 +199,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 </head>
 <body unresolved>
-  <x-app class="flex"></x-app>
+  <x-app></x-app>
 </body>
 </html>
+<!--
+@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>
+<head>
+
+  <title>physical count</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <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="../../../paper-button/paper-button.html">
+
+  <link rel="import" href="../../iron-list.html">
+
+  <style is="custom-style">
+    body {
+      @apply(--layout-fullbleed);
+    }
+
+    .item {
+      background-color: green;
+      border-bottom: 1px solid white;
+      overflow:hidden;
+    }
+
+    .wrapper {
+      position: relative;
+      margin: 10px;
+    }
+
+    .wrapper .count {
+      background-color: red;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .wrapper .stats {
+      background-color: red;
+      position: absolute;
+      top: 20px;
+      right: 0;
+      z-index: 1;
+    }
+
+    .wrapper iron-list {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .group {
+      float: left;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <template is="dom-bind">
+
+    <h1>Physical count</h1>
+    <p>In red you can see the last physical count values</p>
+    <div class="group">
+      <p>100 items, 50px tall</p>
+      <div class="wrapper" style="width: 300px; height: 300px;">
+        <iron-list id="list1" as="item">
+          <template>
+            <div class="item" style$="[[_getStyle(item)]]"><span>[[index]]</span> height: <span>[[item]]</span>
+            <div>
+              <paper-button raised>Test</paper-button>
+              <paper-button raised>Test</paper-button>
+              <paper-button raised>Test</paper-button>
+              <paper-button raised>Test</paper-button>
+            </div>
+            </div>
+          </template>
+        </iron-list>
+      </div>
+    </div>
+<!--
+  <div class="group">
+    <p>100 items, 300px tall</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list2" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+<div class="group">
+    <p>1000 items, 2px tall</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list3" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+<div class="group">
+    <p>First two items: 2px tall, next 100 items are 300px tall</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list4" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+<div class="group">
+    <p>100 items, 600px tall</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list5" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+<div class="group">
+    <p>1 item that is 2px tall, <br /> and then add 100 items async with different heights </p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list6" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+
+<div class="group">
+    <p>200 items with random heights</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list7" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div>
+
+
+<div class="group">
+    <p>200 items async with random heights</p>
+    <div class="wrapper" style="width: 300px; height: 300px;">
+      <iron-list id="list8" as="item">
+        <template>
+          <div class="item" style$="[[_getStyle(item)]]">
+            <span>[[index]]</span> height: <span>[[item]]</span>
+          </div>
+        </template>
+      </iron-list>
+    </div>
+</div> -->
+</template>
+
+  <script>
+    HTMLImports.whenReady(function() {
+      function observePhysicalCount(list) {
+        var div = document.createElement('div');
+        var stats = document.createElement('div');
+        var values = [];
+        var timer;
+        div.classList.add('count');
+        stats.classList.add('stats');
+
+        Object.observe(list, function(changes) {
+          var physicalCount = list._physicalCount;
+          changes.forEach(function(change) {
+
+            if (change.name === '_physicalCount') {
+              values.pop();
+              values.push(change.oldValue);
+              values.push(list._physicalCount);
+              div.innerText = values.join(' -> ');
+            } else if (change.name === '_lastPage') {
+              if (list._lastPage === 0) {
+                timer = Date.now();
+              } else if (list._lastPage === 1) {
+                stats.innerText = 'First paint: ' + (Date.now() - timer) + 'ms';
+              } else if (list._lastPage === list._maxPages) {
+                stats.innerText = stats.innerText  + ' total: ' + (Date.now() - timer) + 'ms';
+              }
+            }
+          });
+        });
+
+        values.push(list._physicalCount);
+        div.innerText = list._physicalCount;
+        stats.innerText = 'Waiting for stats...';
+
+        Polymer.dom(list.parentNode).appendChild(div);
+        Polymer.dom(list.parentNode).appendChild(stats);
+      }
+
+      function arrayFill(size, value) {
+        return (new Array(size)).fill(value, 0, size);
+      }
+
+      function randomArrayFill(size, min, max) {
+        var a = [];
+        while (a.length < size) {
+          a.push(parseInt(Math.random() * (max-min+1)) + min);
+        }
+        return a;
+      }
+
+      function asyncJob(fn) {
+        if (fn()) {
+          setTimeout(asyncJob.bind(null, fn), 1);
+        }
+      }
+
+      document.querySelector('template[is=dom-bind]')._getStyle = function(item) {
+        return 'height:' + item + 'px; ';
+      };
+
+      setTimeout(function() {
+        var list1 = document.querySelector('#list1');
+        var list2 = document.querySelector('#list2');
+        var list3 = document.querySelector('#list3');
+        var list4 = document.querySelector('#list4');
+        var list5 = document.querySelector('#list5');
+        var list6 = document.querySelector('#list6');
+        var list7 = document.querySelector('#list7');
+        var list8 = document.querySelector('#list8');
+        var items = randomArrayFill(100, 1, 200);
+
+        list1.items = arrayFill(100, 50);
+        observePhysicalCount(list1);
+
+        // list2.items = arrayFill(100, 300);
+        // list3.items = arrayFill(1000, 2);
+        // list4.items = arrayFill(2, 2).concat(arrayFill(100, 300));
+        // list5.items = arrayFill(100, 600);
+        // list6.items = [2];
+
+        // setTimeout(function() {
+        //   list6.push.apply(list6,
+        //     ['items'].concat([512, 256, 128, 64, 16, 16, 16, 16, 16, 16, 8, 4])
+        //   );
+        // }, 100);
+
+        // list7.items = randomArrayFill(100, 1, 200);
+        // list8.items = [];
+
+        // asyncJob(function() {
+        //   list8.push('items', items.pop());
+        //   return items.length > 0;
+        // });
+
+        // observePhysicalCount(list2);
+        // observePhysicalCount(list3);
+        // observePhysicalCount(list4);
+        // observePhysicalCount(list5);
+        // observePhysicalCount(list6);
+        // observePhysicalCount(list7);
+        // observePhysicalCount(list8);
+
+      }, 0);
+
+    });
+  </script>
+</body>
+</html>
@@ -33,13 +33,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     .item:nth-child(even) {
       background-color: red;
     }
+
+    iron-list {
+      overflow: hidden;
+    }
   </style>
   <template>
     <iron-list style$="[[_computedListHeight(listHeight)]]" items="[[data]]" as="item" id="list">
       <template>
         <div class="item">
-          <div style$="[[_computedItemHeight(item)]]">[[item.index]]</div>
+          <div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[primitive]]">[[item.index]]</div>
+          <div style$="[[_computedItemHeight(item)]]" tabindex$="[[tabIndex]]" hidden$="[[!primitive]]">[[item]]</div>
         </div>
       </template>
     </iron-list>
@@ -68,6 +73,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       pre: {
         type: Boolean
+      },
+
+      primitive: {
+        value: false,
+        type: Boolean
       }
     },
@@ -86,7 +96,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     },
     _computedListHeight: function(listHeight) {
-      return 'height: ' + (listHeight) + 'px';
+      return 'height: ' + (listHeight) + 'px;';
     }
   });
 </script>
+{
+  "name": "iron-scroll-target-behavior",
+  "version": "1.0.6",
+  "description": "Allows to define a scroller target",
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "main": "iron-scroll-target-behavior.html",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "scroll"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-scroll-target-behavior.git"
+  },
+  "homepage": "https://github.com/PolymerElements/iron-scroll-target-behavior",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.0.6",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.6",
+    "commit": "33d5864e0557212eb530dbac280bfc4b4d923880"
+  },
+  "_source": "git://github.com/PolymerElements/iron-scroll-target-behavior.git",
+  "_target": "^1.0.0",
+  "_originalSource": "PolymerElements/iron-scroll-target-behavior"
+}
 \ No newline at end of file
+<!-- Instructions: https://github.com/PolymerElements/iron-scroll-target-behavior/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10
+bower_components
+
+language: node_js
+node_js: stable
+addons:
+  firefox: latest
+  sauce_connect: true
+  apt:
+    sources:
+    - google-chrome
+    - ubuntu-toolchain-r-test
+    packages:
+    - google-chrome-stable
+    - g++-4.8
+before_script:
+- npm install -g bower polylint web-component-tester
+- bower install
+- polylint
+script:
+- xvfb-run wct
+- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
+env:
+  global:
+  - CXX=g++-4.8
+  - secure: V9/FfFlrGgmgHI8icv3zjSn2bupGJs3FG2KlCqBwK5irWVU3Kcshl8XnXordLIfu2UF4Q/Aa4PkD2jKNuX/jSgGPpAfAi7aOruURSMZCzPErzKTQRg8iqHovhqDyJ2d5TypCRPCYDp+nO1ZQdPT5GQ1/8EZgilZFNVNTZ9twUJIYqPEcyQ7eAlxynDgjKxhMLa04UnUXzHVZ200x09gqGXByAK6tHvzf/W3BtjmjX7BZp0CWWk7tBgiH9gBsqwaYwHG7hg+hCVsnywN6G2WsUpPM4tBu3iyiVuNDuhY07MrV1uxEW9NCjyK8GUpHuCVN9A4CxeeDJM4xR8A3JUaVvWRwhES6KJ4YEdjfU6W759o2e05Sw3q3k4YQD96xiRz5YXYrnqLvm75trLY75pWqzIQkh+6g/C/ZBxRndh/n1VrV35GtAN+KEPE733PLvE8+yUWSiSAo052GyiYqt82joZv8+a1E38jg+bWRAYGuKcYxB5zS7xCEfkoztCuBT80yR+daQGyv0q61jmDrCUgl4B2m3xNf0+C08hYhR7KPHrMzIov3LTgJhHt6oonFs21Oa9cO8moMgaXP7Az8Y4c4Bg/BXaUe6lKkZ19kyzuDbF7hFKY0ABt1SwwkHZkEJ/Bk95CJigauFOuR3rq4TW4+M1DyqebvoyzjF4H1rHBY+lo=
+  - secure: x0Lq3topCMeNImNyY7nKiVPUEaQHjmywaen23pqH5/slsYrmMEFUEME+2sigGDuSacmhfka7DZuXs7jZuk6DlZN5HoueW+xwF6MxnGJRibTw6yFj6g3MJ0dDD6wu3w9TVERNiWCJ5drnTH41QwvUjGMtBrJuHw6qaiCuuLzbwqCxkRynEjssOXzsYY4JlC3EgM2/BVZQ1H2lyWH+elmRXOGDADzm8BVGQkJWCj644HROvGc45j2cOP+vq5MvL1SEA4IDdRRYGOhcc9lGZUY/qOfsai2K0LzgIvMQbjAdt8kbcvz8cnCVJHreIJKQfNe7VAWFiXhNbbzGrYH4DGe52MRSM6c22oLWqzgctqF1YDYAPAoF+6Cj6HqzHmMyNAe4RkpAGnXw5V4HjX013BFYCdImMHF6Am8I2RW2q+buWWW9fZVFjKGD0woz3ay5W4jw6Z//V73J6p/jDiVgq0MT2S4Q8hCEh8QaqK69v9eS+Vxbh1KRUvFaBJvgDYfTnTQ4niuT/Y7TV0ZQ/DMAZ/kBfyMLAmyU5XWuGAnmg6uydE5JtHJHKYb+BKyZ++uImhyfM+bQkp6PxWRNxKsgNt8dcYn50/ppNnkHjXpoQxAlR5kjjiHsVmo4ZLOxkckjyr074Kb/nmDOqMxbRzdTlsBBqycJZjKtm4YX+GkrQXsEbg8=
+
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
+
+<!---
+
+This README is automatically generated from the comments in these files:
+iron-scroll-target-behavior.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+The bot does some handling of markdown. Please file a bug if it does the wrong
+thing! https://github.com/PolymerLabs/tedium/issues
+
+-->
+
+[![Build status](https://travis-ci.org/PolymerElements/iron-scroll-target-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-scroll-target-behavior)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/iron-scroll-target-behavior)_
+
+
+##Polymer.IronScrollTargetBehavior
+
+`Polymer.IronScrollTargetBehavior` allows an element to respond to scroll events from a
+designated scroll target.
+
+Elements that consume this behavior can override the `_scrollHandler`
+method to add logic on the scroll event.
+
+
+{
+  "name": "iron-scroll-target-behavior",
+  "version": "1.0.6",
+  "description": "Allows to define a scroller target",
+  "private": true,
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "main": "iron-scroll-target-behavior.html",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "scroll"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-scroll-target-behavior.git"
+  },
+  "homepage": "https://github.com/PolymerElements/iron-scroll-target-behavior",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
+<!doctype html>
+<!--
+@license
+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
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+  <head>
+
+    <title>iron-scroll-target-behavior using the document scrolling</title>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../iron-scroll-target-behavior.html">
+    <link rel="import" href="x-scrollable.html">
+
+    <style>
+
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+    </style>
+  </head>
+  <body unresolved>
+
+    <x-scrollable scroll-target="document"></x-scrollable>
+
+  </body>
+</html>
+<!doctype html>
+<!--
+@license
+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
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+  <head>
+
+    <title>iron-scroll-target-behavior using a scrolling region</title>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../iron-scroll-target-behavior.html">
+    <link rel="import" href="x-scrollable.html">
+
+    <style>
+
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      #region {
+        height: 50vh;
+        overflow: auto;
+        position: absolute;
+        top: 25vh;
+        left: 25vh;
+        right: 25vh;
+        box-shadow: 0 0 60px rgba(0,0,0,0.5);
+      }
+
+    </style>
+  </head>
+  <body unresolved>
+    
+    <div id="region">
+      <x-scrollable scroll-target="region"></x-scrollable>
+    </div>
+
+  </body>
+</html>
+<!--
+@license
+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
+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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../iron-scroll-target-behavior.html">
+
+<dom-module id="x-scrollable">
+
+  <style>
+
+    :host {
+      display: block;
+      font: 14px arial;
+    }
+
+    .scrollState {
+      border-left: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      font-weight: bold;
+      background-color: #eee;
+      position: fixed;
+      top: 0;
+      left: calc(50% - 100px);
+      padding: 10px;
+      width: 220px;
+      text-align: center;
+    }
+
+    .item {
+      border-bottom: 1px solid #ccc;
+      background-color: white;
+      padding: 20px;
+      width: 200%;
+    }
+
+  </style>
+
+  <template>
+
+    <div class="scrollState">scrollTop: [[xScrollTop]] - scrollLeft: [[xScrollLeft]]</div>
+
+    <template is="dom-repeat" items="[[_getItems(itemCount)]]">
+      <div class="item">[[index]]</div>
+    </template>
+
+  </template>
+
+</dom-module>
+
+<script>
+  Polymer({
+
+    is: 'x-scrollable',
+
+    properties: {
+
+      xScrollTop: {
+        type: Number,
+        readOnly: true,
+        value: 0
+      },
+
+      xScrollLeft: {
+        type: Number,
+        readOnly: true,
+        value: 0
+      },
+
+      itemCount: {
+        type: Number,
+        value: 200
+      }
+
+    },
+
+    behaviors: [
+      Polymer.IronScrollTargetBehavior
+    ],
+
+    attached: function() {
+      this._scrollHandler();
+    },
+
+    _scrollHandler: function() {
+      this._setXScrollTop(this._scrollTop);
+      this._setXScrollLeft(this._scrollLeft);
+    },
+
+    _getItems: function(itemCount) {
+      var items = new Array(itemCount);
+      while (itemCount > 0) {
+        items[--itemCount] = true;
+      }
+      return items;
+    }
+  });
+</script>
+<!doctype html>
+<!--
+@license
+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
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+<head>
+
+  <title>iron-scroll-target-behavior</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
+<!--
+@license
+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
+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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+  /**
+   * `Polymer.IronScrollTargetBehavior` allows an element to respond to scroll events from a
+   * designated scroll target.
+   *
+   * Elements that consume this behavior can override the `_scrollHandler`
+   * method to add logic on the scroll event.
+   *
+   * @demo demo/scrolling-region.html Scrolling Region
+   * @demo demo/document.html Document Element
+   * @polymerBehavior
+   */
+  Polymer.IronScrollTargetBehavior = {
+
+    properties: {
+
+      /**
+       * Specifies the element that will handle the scroll event
+       * on the behalf of the current element. This is typically a reference to an element,
+       * but there are a few more posibilities:
+       *
+       * ### Elements id
+       *
+       *```html
+       * <div id="scrollable-element" style="overflow: auto;">
+       *  <x-element scroll-target="scrollable-element">
+       *    <!-- Content-->
+       *  </x-element>
+       * </div>
+       *```
+       * In this case, the `scrollTarget` will point to the outer div element. 
+       *
+       * ### Document scrolling
+       *
+       * For document scrolling, you can use the reserved word `document`:
+       *
+       *```html
+       * <x-element scroll-target="document">
+       *   <!-- Content -->
+       * </x-element>
+       *```
+       *
+       * ### Elements reference
+       *
+       *```js
+       * appHeader.scrollTarget = document.querySelector('#scrollable-element');
+       *```
+       * 
+       * @type {HTMLElement}
+       */
+      scrollTarget: {
+        type: HTMLElement,
+        value: function() {
+          return this._defaultScrollTarget;
+        }
+      }
+    },
+
+    observers: [
+      '_scrollTargetChanged(scrollTarget, isAttached)'
+    ],
+
+    _scrollTargetChanged: function(scrollTarget, isAttached) {
+      var eventTarget;
+
+      if (this._oldScrollTarget) {
+        eventTarget = this._oldScrollTarget === this._doc ? window : this._oldScrollTarget;
+        eventTarget.removeEventListener('scroll', this._boundScrollHandler);
+        this._oldScrollTarget = null;
+      }
+
+      if (!isAttached) {
+        return;
+      }
+      // Support element id references
+      if (scrollTarget === 'document') {
+
+        this.scrollTarget = this._doc;
+
+      } else if (typeof scrollTarget === 'string') {
+
+        this.scrollTarget = this.domHost ? this.domHost.$[scrollTarget] :
+            Polymer.dom(this.ownerDocument).querySelector('#' + scrollTarget);
+
+      } else if (this._isValidScrollTarget()) {
+
+        eventTarget = scrollTarget === this._doc ? window : scrollTarget;
+        this._boundScrollHandler = this._boundScrollHandler || this._scrollHandler.bind(this);
+        this._oldScrollTarget = scrollTarget;
+
+        eventTarget.addEventListener('scroll', this._boundScrollHandler);
+      }
+    },
+
+    /**
+     * Runs on every scroll event. Consumer of this behavior may override this method.
+     *
+     * @protected
+     */
+    _scrollHandler: function scrollHandler() {},
+
+    /**
+     * The default scroll target. Consumers of this behavior may want to customize
+     * the default scroll target.
+     *
+     * @type {Element}
+     */
+    get _defaultScrollTarget() {
+      return this._doc;
+    },
+
+    /**
+     * Shortcut for the document element
+     *
+     * @type {Element}
+     */
+    get _doc() {
+      return this.ownerDocument.documentElement;
+    },
+
+    /**
+     * Gets the number of pixels that the content of an element is scrolled upward.
+     *
+     * @type {number}
+     */
+    get _scrollTop() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.pageYOffset : this.scrollTarget.scrollTop;
+      }
+      return 0;
+    },
+
+    /**
+     * Gets the number of pixels that the content of an element is scrolled to the left.
+     *
+     * @type {number}
+     */
+    get _scrollLeft() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.pageXOffset : this.scrollTarget.scrollLeft;
+      }
+      return 0;
+    },
+
+    /**
+     * Sets the number of pixels that the content of an element is scrolled upward.
+     *
+     * @type {number}
+     */
+    set _scrollTop(top) {
+      if (this.scrollTarget === this._doc) {
+        window.scrollTo(window.pageXOffset, top);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollTop = top;
+      }
+    },
+
+    /**
+     * Sets the number of pixels that the content of an element is scrolled to the left.
+     *
+     * @type {number}
+     */
+    set _scrollLeft(left) {
+      if (this.scrollTarget === this._doc) {
+        window.scrollTo(left, window.pageYOffset);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollLeft = left;
+      }
+    },
+
+    /**
+     * Scrolls the content to a particular place.
+     *
+     * @method scroll
+     * @param {number} left The left position
+     * @param {number} top The top position
+     */
+    scroll: function(left, top) {
+       if (this.scrollTarget === this._doc) {
+        window.scrollTo(left, top);
+      } else if (this._isValidScrollTarget()) {
+        this.scrollTarget.scrollLeft = left;
+        this.scrollTarget.scrollTop = top;
+      }
+    },
+
+    /**
+     * Gets the width of the scroll target.
+     *
+     * @type {number}
+     */
+    get _scrollTargetWidth() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.innerWidth : this.scrollTarget.offsetWidth;
+      }
+      return 0;
+    },
+
+    /**
+     * Gets the height of the scroll target.
+     *
+     * @type {number}
+     */
+    get _scrollTargetHeight() {
+      if (this._isValidScrollTarget()) {
+        return this.scrollTarget === this._doc ? window.innerHeight : this.scrollTarget.offsetHeight;
+      }
+      return 0;
+    },
+
+    /**
+     * Returns true if the scroll target is a valid HTMLElement.
+     *
+     * @return {boolean}
+     */
+    _isValidScrollTarget: function() {
+      return this.scrollTarget instanceof HTMLElement;
+    }
+  };
+
+</script>
+<!doctype html>
+<!--
+@license
+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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>iron-scroll-target-behavior test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="x-scrollable.html">
+  <link rel="import" href="x-nested-scrollable.html">
+
+  <style>
+    #temporaryScrollingRegion,
+    #region {
+      overflow: auto;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+
+  <test-fixture id="trivialScrollable">
+    <template>
+      <div id="temporaryScrollingRegion">
+        <x-scrollable></x-scrollable>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="trivialScrollingRegion">
+    <template>
+      <div id="region">
+        <x-scrollable scroll-target="region"></x-scrollable>
+      </div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="trivialNestedScrollingRegion">
+    <template>
+      <x-nested-scrollable id="nestedScrollingRegion"></x-nested-scrollable>
+    </template>
+  </test-fixture>
+
+
+  <test-fixture id="trivialDocumentScroll">
+    <template>
+      <x-scrollable scroll-target="document"></x-scrollable>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('basic features', function() {
+      var scrollingRegion, xScroll;
+
+      setup(function() {
+        scrollingRegion = fixture('trivialScrollable');
+        xScroll = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
+      });
+
+      test('default', function() {
+        assert.equal(xScroll._scrollTop, 0, '_scrollTop');
+        assert.equal(xScroll._scrollLeft, 0, '_scrollLeft');
+        assert.equal(xScroll._scrollTargetWidth, 0, '_scrollTargetWidth');
+        assert.equal(xScroll._scrollTargetHeight, 0, '_scrollTargetHeight');
+        assert.equal(xScroll.scrollTarget, null, 'scrollTarget');
+        assert.equal(xScroll._defaultScrollTarget, xScroll.scrollTarget, '_defaultScrollTarget');
+      });
+
+      test('invalid `scrollTarget` selector', function(done) {
+        flush(function() {
+          xScroll.scrollTarget = 'invalid-id';
+          assert.equal(xScroll.scrollTarget, null);
+          done();
+        });
+      });
+
+      test('valid `scrollTarget` selector', function(done) {
+        flush(function() {
+          xScroll.scrollTarget = 'temporaryScrollingRegion';
+          assert.equal(xScroll.scrollTarget, scrollingRegion);
+          done();
+        });
+      });
+    });
+
+    suite('scrolling region', function() {
+      var scrollingRegion, xScrollable;
+
+      setup(function() {
+        scrollingRegion = fixture('trivialScrollingRegion');
+        xScrollable = Polymer.dom(scrollingRegion).querySelector('x-scrollable');
+      });
+
+      teardown(function() {
+        xScrollable._scrollTop = 0;
+        xScrollable._scrollLeft = 0;
+      });
+
+      test('scrollTarget reference', function(done) {
+        flush(function() {
+          assert.equal(xScrollable.scrollTarget, scrollingRegion);
+          done();
+        });
+      });
+
+      test('invalid scrollTarget', function(done) {
+        flush(function() {
+          assert.equal(xScrollable.scrollTarget, scrollingRegion);
+          done();
+        });
+      });
+
+      test('setters', function(done) {
+        flush(function() {
+          xScrollable._scrollTop = 100;
+          xScrollable._scrollLeft = 100;
+
+          assert.equal(scrollingRegion.scrollTop, 100);
+          assert.equal(scrollingRegion.scrollLeft, 100);
+
+          done();
+        });
+      });
+
+      test('getters', function(done) {
+        flush(function() {
+          scrollingRegion.scrollTop = 50;
+          scrollingRegion.scrollLeft = 50;
+
+          assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
+          assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
+          assert.equal(xScrollable._scrollTargetWidth, scrollingRegion.offsetWidth, '_scrollTargetWidth');
+          assert.equal(xScrollable._scrollTargetHeight, scrollingRegion.offsetHeight, '_scrollTargetHeight');
+
+          done();
+        });
+      });
+
+      test('scroll method', function(done) {
+        flush(function() {
+          xScrollable.scroll(110, 110);
+
+          assert.equal(xScrollable._scrollTop, 110);
+          assert.equal(xScrollable._scrollLeft, 110);
+
+          xScrollable.scroll(0, 0);
+
+          assert.equal(xScrollable._scrollTop, 0);
+          assert.equal(xScrollable._scrollLeft, 0);
+
+          done();
+        });
+      });
+    });
+
+    suite('document scroll', function() {
+      var xScrollable;
+
+      setup(function() {
+        xScrollable = fixture('trivialDocumentScroll');
+      });
+
+      teardown(function() {
+        xScrollable._scrollTop = 0;
+        xScrollable._scrollLeft = 0;
+      });
+
+      test('scrollTarget reference', function(done) {
+        flush(function() {
+          assert.equal(xScrollable.scrollTarget, document.documentElement);
+          done();
+        });
+      });
+
+      test('setters', function(done) {
+        flush(function() {
+          xScrollable._scrollTop = 100;
+          xScrollable._scrollLeft = 100;
+
+          assert.equal(window.pageXOffset, 100);
+          assert.equal(window.pageYOffset, 100);
+
+          done();
+        });
+      });
+
+      test('getters', function(done) {
+        flush(function() {
+          window.scrollTo(50, 50);
+
+          assert.equal(xScrollable._scrollTop, 50, '_scrollTop');
+          assert.equal(xScrollable._scrollLeft, 50, '_scrollLeft');
+          assert.equal(xScrollable._scrollTargetWidth, window.innerWidth, '_scrollTargetWidth');
+          assert.equal(xScrollable._scrollTargetHeight, window.innerHeight, '_scrollTargetHeight');
+
+          done();
+        });
+      });
+
+      test('scroll method', function(done) {
+        flush(function() {
+
+          xScrollable.scroll(1, 2);
+
+          assert.equal(xScrollable._scrollLeft, 1);
+          assert.equal(xScrollable._scrollTop, 2);
+
+          xScrollable.scroll(3, 4);
+
+          assert.equal(xScrollable._scrollLeft, 3);
+          assert.equal(xScrollable._scrollTop, 4);
+
+          done();
+        });
+      });
+    });
+
+    suite('nested scrolling region', function() {
+      var xScrollingRegion;
+      var xScrollable;
+
+      setup(function() {
+        var nestedScrollingRegion = fixture('trivialNestedScrollingRegion');
+        xScrollable = nestedScrollingRegion.$.xScrollable;
+        xScrollingRegion = nestedScrollingRegion.$.xRegion;
+      });
+
+      teardown(function() {
+        xScrollable._scrollTop = 0;
+        xScrollable._scrollLeft = 0;
+      });
+
+      test('scrollTarget reference', function(done) {
+        flush(function() {
+          assert.equal(xScrollable.scrollTarget, xScrollingRegion);
+          done();
+        });
+      });
+
+      test('setters', function(done) {
+        flush(function() {
+          xScrollable._scrollTop = 10;
+          xScrollable._scrollLeft = 20;
+
+          assert.equal(xScrollingRegion.scrollTop, 10);
+          assert.equal(xScrollingRegion.scrollLeft, 20);
+
+          done();
+        });
+      });
+
+      test('getters', function(done) {
+        flush(function() {
+          xScrollable._scrollTop = 10;
+          xScrollable._scrollLeft = 20;
+
+          assert.equal(xScrollable._scrollTop, 10, '_scrollTop');
+          assert.equal(xScrollable._scrollLeft, 20, '_scrollLeft');
+
+          done();
+        });
+      });
+
+      test('scroll method', function(done) {
+        flush(function() {
+
+          xScrollable.scroll(1, 2);
+
+          assert.equal(xScrollable._scrollLeft, 1);
+          assert.equal(xScrollable._scrollTop, 2);
+
+          xScrollable.scroll(3, 4);
+
+          assert.equal(xScrollable._scrollLeft, 3);
+          assert.equal(xScrollable._scrollTop, 4);
+
+          done();
+        });
+      });
+    });
+
+  </script>
+
+</body>
+</html>
+<!doctype html>
+<!--
+@license
+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
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <title>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+
+</head>
+<body>
+
+  <script>
+
+    WCT.loadSuites([
+      'basic.html',
+      'basic.html?dom=shadow'
+    ]);
+
+  </script>
+
+</body>
+</html>
+<!--
+@license
+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
+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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="x-scrollable.html">
+
+<dom-module id="x-nested-scrollable">
+
+  <style>
+
+    :host {
+      display: block;
+    }
+
+    #xRegion {
+      width: 100px;
+      height: 100px;
+      overflow: auto;
+    }
+
+  </style>
+
+  <template>
+    <div id="xRegion">
+      <x-scrollable id="xScrollable" scroll-target="xRegion"></x-scrollable>
+    </div>
+  </template>
+
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-nested-scrollable'
+  });
+</script>
+<!--
+@license
+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
+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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../iron-scroll-target-behavior.html">
+
+<dom-module id="x-scrollable">
+
+  <style>
+
+    :host {
+      display: block;
+      font: 14px arial;
+    }
+
+    .item {
+      border-bottom: 1px solid #ccc;
+      background-color: white;
+      padding: 20px;
+      width: 200%;
+    }
+
+  </style>
+
+  <template>
+    <template is="dom-repeat" items="[[_getItems(itemCount)]]">
+      <div class="item">[[index]]</div>
+    </template>
+  </template>
+
+</dom-module>
+
+<script>
+  Polymer({
+
+    is: 'x-scrollable',
+
+    properties: {
+
+      itemCount: {
+        type: Number,
+        value: 200
+      }
+
+    },
+
+    behaviors: [
+      Polymer.IronScrollTargetBehavior
+    ],
+
+    _defaultScrollTarget: null,
+
+    _getItems: function(itemCount) {
+      var items = new Array(itemCount);
+      while (itemCount > 0) {
+        items[--itemCount] = true;
+      }
+      return items;
+    }
+  });
+</script>
@@ -62,6 +62,7 @@
         .toolbar {
             background: #2196F3;
             height: 48px;
+            padding: 4px 0px 0px 0px;
         }
         paper-fab.close {
@@ -6,10 +6,13 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../page-slider-controllet/page-slider-controllet.html">
-<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">
+
+<!--<link rel="import" href="../dataset-selection-controllet/dataset-selection-controllet.html">-->
+<link rel="import" href="../select-dataset-controllet/select-dataset-controllet.html">
 <link rel="import" href="../select-data-controllet/select-data-controllet.html" />
 <link rel="import" href="../select-visualization-controllet/select-visualization-controllet.html" />
-<!--<link rel="import" href="../datalet-selection-controllet/datalet-selection-controllet.html">-->
+
+
 <dom-module id="data-sevc-controllet">
@@ -20,7 +23,8 @@
             <neon-animatable>
                 <template is="dom-if" if={{!modify}}>
-                    <dataset-selection-controllet id="select_dataset" data={{data}} datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>
+                    <!--<dataset-selection-controllet id="select_dataset" data={{data}} datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></dataset-selection-controllet>-->
+                    <select-dataset-controllet id="select_dataset" data={{data}} datasets={{datasets}} suggested-datasets={{suggestedDatasets}}></select-dataset-controllet>
                 </template>
             </neon-animatable>
@@ -33,7 +37,6 @@
             <neon-animatable>
-                <!--<datalet-selection-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></datalet-selection-controllet>-->
                 <select-visualization-controllet id="select_visualization" deep-url={{deepUrl}} datalets-list-url={{dataletsListUrl}} data-url={{dataUrl}} preselected-datalet={{selectedDatalet}} datalet-preset={{dataletPreset}}></select-visualization-controllet>
             </neon-animatable>
@@ -140,22 +143,32 @@
                             slider.chevronLeft(true);
                         }
                         slider.chevronRight(false);
-                        this.$.select_data.ready();
-//                        this.async(function () {this.dataletPreset["filters"] = undefined;}, 1000);
-                        this._allowThirdStep({detail: {fields: select_data.getFlatFields()}});
                         this._allowThirdStep({detail: {fields: select_data.getFlatFields()}});
+                        if(this.modify){
+                            this.$.select_visualization.setFields(select_data.getFlatFields());
+                            this.$.select_visualization.setFilters(select_data.getFilters());
+                        }
                         break;
                     case 2:
                         slider.setTitle(ln["slide3Title_" + this.localization], ln["slide3Subtitle_" + this.localization]);
                         slider.chevronLeft(true);
                         slider.chevronRight("invisible");
+
                         this.$.select_visualization.setFields(select_data.getFlatFields());
                         this.$.select_visualization.setFilters(select_data.getFilters());
-                        this.$.select_visualization.ready();
+                        if(this.modify) {
+                            this.$.select_visualization.show();//resize
+                        }
                 }
             },
             _allowSecondStep : function(e){
+                if(e.detail.url == "") {
+                    slider.chevronRight(false);
+                    select_dataset.$.selected_url.invalid = false;
+                    return;
+                }
+
                 this.dataUrl = e.detail.url;
                 $.ajax({
@@ -7,6 +7,8 @@
     <link rel="import" href="../filters-controllet.html" />
+    <script src="../../../locales/controllet_ln.js"></script>
+
     <script src="../../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
     <link rel="stylesheet" href="../../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
 </head>
@@ -31,6 +33,7 @@
     </div>
     <script>
+        ln["localization"] = "en";
         var fields = ["result,records,Lat","result,records,Lng", "Sbiricos"];
@@ -132,7 +132,6 @@ Example:
                 var cards = document.querySelectorAll('paper-card-controllet');
 //                if(cards.length == 0){
-//
 //                   this.$.card_grid.innerHTML += "<div class='empty'>There is nothing to show.</div>";
 //                }
@@ -161,11 +160,9 @@ Example:
                 if(e.detail.id == "search_from_animated_button_container") {
                     var cards = document.querySelectorAll('.card');
                     for (var i = 0; i < cards.length; i++) {
-                        var title = cards[i].cardTitle;
-                        var comment = cards[i].comment;
-                        var type = cards[i].cardType;
-
-                        var searchFlag = title.indexOf(e.detail.searchKey) == -1 && comment.indexOf(e.detail.searchKey) == -1 && type.indexOf(e.detail.searchKey) == -1;
+                        var title = cards[i].cardTitle ? cards[i].cardTitle : "";
+                        var comment = cards[i].comment ? cards[i].comment : "";
+                        var searchFlag = title.indexOf(e.detail.searchKey) == -1 && comment.indexOf(e.detail.searchKey) == -1;
                         if (!searchFlag || e.detail.searchKey == "") {
                             cards[i].style.display = "inline-block";
@@ -201,6 +201,8 @@
                 }
                 this.selectedDatalet = undefined;
                 this.filter = "";
+
+                this.fire('items-vslider-controllet_selected-datalet', {datalet: undefined});
             },
             _translate : function(){
@@ -66,9 +66,8 @@ Example:
                 --paper-input-container-focus-color: #ffffff;
                 --paper-input-container-color: #ffffff;
                 position: absolute;
-                /*top: -12px;*/
-                /*width: 20vw;*/
-                width: 392px;
+                width: 340px;
+                margin-left: -5px;
             }
             paper-icon-button
@@ -171,7 +170,7 @@ Example:
             _valueChanged : function(oldvalue, newValue){
                 var t = this;
                 clearTimeout(this.timer);
-                this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 500);
+                this.timer = setTimeout(function(){t.fire('search-panel-controllet_content-changed', {searchKey: t.searchKey, id : t.id})}, 0);
             },
             /**
              * It returns the value in text area
@@ -87,7 +87,7 @@
                 filters : {
                     type : Array,
-                    value : undefined
+                    value : []
                 },
             },
@@ -99,23 +99,25 @@
             ready : function() {
                 $(this.$.material_tree_view).perfectScrollbar();
-
-                if(this.filters == undefined){
-                    if(this.dataletPreset && this.dataletPreset["filters"] != undefined)
-                        this.filters = JSON.parse(this.dataletPreset["filters"]);
-                    else
-                        this.filters = [];
-                }
-
-                this.$.filters.filters = this.filters;
-                this.$.multi_table.filters = this.filters;
-                this._refreshTables();
             },
             attached : function(){
                 this._resize();
                 var that = this;
                 window.addEventListener("resize", function() { that._resize(); });
+
+                if(this.dataletPreset && this.dataletPreset["filters"] != undefined)
+                    this._preselectFilters();
+            },
+
+            _preselectFilters : function() {
+                this.async(function() {
+                    this.filters = JSON.parse(this.dataletPreset["filters"]);
+                    this.dataletPreset["filters"] = undefined;
+                    this.$.filters.filters = this.filters;
+                    this.$.multi_table.filters = this.filters;
+                    this._refreshTables();
+                }, 1);
             },
             getFilters : function() {
@@ -21,19 +21,24 @@
 <style>
     .container {
-        height: calc(90px * 5 - 8px);
-        width: 50%;
-        /*width: 400px;*/
+        /*height: calc(56px * 5 + 24px);*/
+        /*width: 50%;*/
+        width: 1652px;
         position: relative;
-        top: 100px;
-        left:25%;
+        /*top: 100px;*/
+        left:5%;
         /*background-color: red;*/
     }
 </style>
 <div class="container">
-    <select-dataset-controllet id="ds"></select-dataset-controllet>
+    <!--<select-dataset-controllet id="ds" datasets="we"></select-dataset-controllet>-->
+
+    <select-dataset-controllet id="ds" datasets='{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 2","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b056c5e6-76af-4526-a35d-7dee664fb6ee\/download\/isislab.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) ROUTE-TO-PA Dissemination","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/818c2edb-0cb7-4288-b340-e4dd1933d817\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) ROUTE-TO-PA Dissemination - dl","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/fd8c4d6f-315d-4aa0-b7bd-4fdde7bf641b\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) dissemination of ROUTE-TO-PA project","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/b0ef6017-8c64-4e11-8046-7e51a8561856\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"test dissemination with link","resource_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","url":"http:\/\/ckan.routetopa.eu\/dataset\/ba5054af-7561-4f99-9504-76ea004a1e85\/resource\/4cc2349d-bf7b-4bbe-a7ca-db5312bb6c94\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Dissemination activity of the first year","resource_name":"Dissemination activity of the first year (2015)","url":"http:\/\/ckan.routetopa.eu\/dataset\/61f07087-210a-4c35-9606-2aafe183633b\/resource\/5f9d8d8b-1c41-45f7-9dbb-61b9a7bcd076\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"City of the Hague Municipality","package_name":"Test 3- Buurten","resource_name":"Test Buurten - 3","url":"http:\/\/ckan.routetopa.eu\/dataset\/1248d447-2901-4beb-91ae-c2f249fd8a99\/resource\/1fdbc765-8945-4271-8dce-9c7eba45a67d\/download\/Test-3-Compare.csv","metas":"{\"organization\":\"City of the Hague Municipality\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"}]}}'
+                                       suggested-datasets='[{"resource_name":"SUGGESTED 1","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 2","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"},{"resource_name":"SUGGESTED 3","url":"noUrl.csv","metas":"{\"description\":\"noDescriione\"}"}]'
+    ></select-dataset-controllet>
+    <!--<select-dataset-controllet id="ds" datasets='{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"}]}}'></select-dataset-controllet>-->
 </div>
 <script>
@@ -61,8 +66,9 @@
     var datasets = [dataset1, dataset2, dataset3];
     var datasets = [dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3, dataset1, dataset2, dataset3];
-    var ds = document.getElementById('ds');
-    ds.setAttribute("items", JSON.stringify(datasets));
+//    var ds = document.getElementById('ds');
+//    ds.setAttribute("items", JSON.stringify(datasets));
+//    ds.setAttribute("items", a);
 </script>
+"{"result":{"providers":{"1":{"title":"CKAN","api_url":"http:\/\/ckan.routetopa.eu","image_hash":"11","id":"1"}},"datasets":[{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 1","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b3d3d9ff-291e-47ca-a0d2-a15deef81737\/download\/isislab2.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"Dublin","package_name":"isislab DATA","resource_name":"Resource 2","url":"http:\/\/ckan.routetopa.eu\/dataset\/566c2867-ea89-45a2-bd7a-30ae82606007\/resource\/b056c5e6-76af-4526-a35d-7dee664fb6ee\/download\/isislab.csv","metas":"{\"organization\":\"Dublin\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) ROUTE-TO-PA Dissemination","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/818c2edb-0cb7-4288-b340-e4dd1933d817\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) ROUTE-TO-PA Dissemination - dl","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/fd8c4d6f-315d-4aa0-b7bd-4fdde7bf641b\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","resource_name":"First year (2015) dissemination of ROUTE-TO-PA project","url":"http:\/\/ckan.routetopa.eu\/dataset\/d81d451d-8b3d-47f4-b57f-e295e8f51da0\/resource\/b0ef6017-8c64-4e11-8046-7e51a8561856\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link-Upd.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"test dissemination with link","resource_name":"Year 1 Dissemination of the ROUTE-TO-PA project (2015)","url":"http:\/\/ckan.routetopa.eu\/dataset\/ba5054af-7561-4f99-9504-76ea004a1e85\/resource\/4cc2349d-bf7b-4bbe-a7ca-db5312bb6c94\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New---Link.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"ROUTE-TO-PA","package_name":"Dissemination activity of the first year","resource_name":"Dissemination activity of the first year (2015)","url":"http:\/\/ckan.routetopa.eu\/dataset\/61f07087-210a-4c35-9606-2aafe183633b\/resource\/5f9d8d8b-1c41-45f7-9dbb-61b9a7bcd076\/download\/ROUTE-TO-PA-Individual-Dissemination-Activity-Report-Form-Responses-New.csv","metas":"{\"organization\":\"ROUTE-TO-PA\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"},{"w":1,"provider_name":"p:1","organization_name":"City of the Hague Municipality","package_name":"Test 3- Buurten","resource_name":"Test Buurten - 3","url":"http:\/\/ckan.routetopa.eu\/dataset\/1248d447-2901-4beb-91ae-c2f249fd8a99\/resource\/1fdbc765-8945-4271-8dce-9c7eba45a67d\/download\/Test-3-Compare.csv","metas":"{\"organization\":\"City of the Hague Municipality\",\"description\":\"\",\"format\":\"\",\"last_modified\":\"\",\"name\":\"\",\"created\":\"\"}"}]}}"
 \ No newline at end of file
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
+
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-animations.html">
+
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <!--<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">-->
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
@@ -9,177 +17,328 @@
 <link rel="import" href="../../bower_components/iron-image/iron-image.html">
 <link rel="import" href="../../bower_components/iron-list/iron-list.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+
+<link rel="import" href="../../bower_components/paper-material/paper-material.html" />
+
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/hardware-icons.html">
+<!--<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">-->
+
+<link rel="import" href="../../bower_components/paper-checkbox/paper-checkbox.html">
+
+<link rel="import" href="../../datalets/datasetexplorer-datalet/datasetexplorer-datalet.html">
 <dom-module id="select-dataset-controllet">
     <template>
         <style>
-            /*:host {*/
-                /*display: block;*/
-            /*@apply(--paper-font-common-base);*/
-            /*}*/
-            /*app-toolbar {*/
-                /*background-color: var(--google-green-700);*/
-                /*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);*/
-                /*font-weight: bold;*/
-                /*color: white;*/
-                /*z-index: 1;*/
-                /*position: fixed;*/
-                /*top: 0;*/
-                /*left: 0;*/
-                /*right: 0;*/
-            /*}*/
-            /*app-toolbar paper-icon-button {*/
-                /*--paper-icon-button-ink-color: white;*/
-            /*}*/
-            /*iron-list {*/
-                /*padding-top: 64px;*/
-            /*--iron-list-items-container: {*/
-                 /*max-width: 800px;*/
-                 /*margin: auto;*/
-                 /*margin-top: 60px;*/
-                 /*margin-bottom: 60px;*/
-                 /*border-bottom: 1px solid #ddd;*/
+            :host {
+            --paper-dropdown-menu-icon: {
+                 color: #000000;
+             };
+            --paper-dropdown-menu-ripple: {
+                 color: #FFFFFF;
+             };
+            /*--paper-tab-ink: {*/
+                 /*color: #FFFFFF;*/
              /*};*/
-            /*}*/
+            }
+
+            iron-list {
+            --iron-list-items-container: {
+                margin:16px 16px 8px 16px;
+             };
+            }
+
+            paper-textarea {
+                width: 100%;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-input {
+                --paper-input-container-focus-color: #2196F3;
+            }
+            paper-dropdown-menu {
+                width: 100%;
+                --paper-input-container-focus-color: #2196F3;
+            }
+
+            paper-item.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-checkbox {
+                height: 24px;
+                /*margin-top: 8px*/
+                --paper-checkbox-checked-color: #2196F3;
+                --paper-checkbox-checked-ink-color: #FFFFFF;
+                --paper-checkbox-unchecked-color: #000000;
+                --paper-checkbox-unchecked-ink-color: #FFFFFF;
+                --paper-checkbox-label-color: #000000;
+            }
+
+            paper-icon-button{
+                height: 48px;
+                width: 48px;
+                padding: 0px;
+                --paper-icon-button-ink-color: #FFFFFF;
+            }
+
+            paper-icon-button:hover{
+                color: #2196F3;
+            }
+
+            paper-icon-button[disabled]{
+                color: #B6B6B6;
+            }
+
+            paper-icon-button.clear {
+                width: 24px;
+                height: 24px;
+                padding: 0px 4px;
+                color: #F44336;
+                --paper-icon-button-ink-color: #FFFFFF;
+            }
+
+            paper-tabs {
+                font-weight: bold;
+            }
+
+            paper-tab {
+                transition: all 1.0s;
+            }
+
+            paper-tab.iron-selected {
+                background-color: #2196F3;
+                color: #FFFFFF;
+            }
+
+            paper-tab:not(.iron-selected):hover {
+                color: #2196F3;
+            }
+
             .item {
-            @apply(--layout-horizontal);
-                padding: 16px;
-                background-color: #FFFFFF;
-                border: 1px solid #B6B6B6;/*2196F3*/
+                /*@apply(--layout-horizontal);*/
+                display: flex;
+                padding: 11px;
+                border: 1px solid #B6B6B6;
                 cursor: pointer;
                 margin-bottom: 8px;
-                /*border-radius: 8px;*/
+                background-color: #E0E0E0;
             }
-            /*.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);
+                @apply(--layout-flex);
+                /*@apply(--layout-vertical);*/
             }
+
             .primary {
-                /*font-size: 16px;*/
                 font-weight: bold;
-                /*padding-top: 5px;*/
             }
-            .shortText/*, .longText*/ {
-                font-size: 16px;
+
+            .item.expanded .primary {
+                color: #2196F3;
             }
+
             .longText {
-                color: gray;
                 display: none;
             }
-            .item:hover .shortText::after {
-                content: ' [+]';
-                color: gray;
-            }
-            .item.expanded:hover .shortText::after {
-                content: '';
-            }
+
             .item.expanded .longText {
                 display: block;
             }
-            .item.expanded:hover .longText::after {
-                content: ' [–]';
-            }
-            /*.spacer {*/
-            /*@apply(--layout-flex);*/
-            /*}*/
-            /*@media (max-width: 460px) {*/
-                /*paper-toolbar .bottom.title {*/
-                    /*font-size: 14px;*/
-                /*}*/
-            /*}*/
-            /*.item.selected {*/
-                /*border: 1px solid #2196F3;/!**!/*/
-            /*}*/
-
-            #list_container {
-                /*background-color: #ccc;*/
-                height: 100%;
-                width: calc(100% - 16px);
-                /*overflow: scroll;*/
-                position: relative;
+            #select_dataset_container {
+                margin-top: 8px;
+            }
+            #select_dataset_container * {
                 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                 font-size: 16px;
-                line-height: 24px;/*???*/
+                line-height: 24px;
+            }
-                margin: 8px;
+            #select_dataset_container #neon_container {
+                height: calc(100% - 172px);
+                width: calc(100% - 8px);
+            }
+            #select_dataset_container #list_container {
+                /*height: calc(100% - 244px);*/
+                /*width: calc(100% - 8px);*/
+                height: calc(100% - 48px);
+                width: 100%;
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                border-bottom: 0px;
+                position: relative;
             }
-            #select_dataset_container {
-               /*padding: 8px;*/
-                /*background-color: #B6B6B6;*/
-                border: 4px solid #B6B6B6;/*2196F3*/
+            #select_dataset_container #treemap_container {
+                /*height: calc(100% - 244px);*/
+                /*width: calc(100% - 8px);*/
+                height: calc(100% - 48px);
+                width: 100%;
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                border-bottom: 0px;
+                position: relative;
             }
-            #toolbar {
-                /*padding: 8px;*/
-                /*background-color: #B6B6B6;*/
-                width: calc(100% - 12px);
-                height: 20px;
+            #select_dataset_container #header {
                 background-color: #B6B6B6;
+                display: flex;
+                padding: 0px 4px;
+            }
-                font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-                font-size: 16px;
-                font-weight: bold;
-                /*line-height: 24px;*/
-                padding-left: 12px;
-                padding-top: 12px;
-                padding-bottom: 12px;
+            #select_dataset_container #footer_list,
+            #select_dataset_container #footer_treemap {
+                width: 100%;
+                background-color: #B6B6B6;
+                display: flex;
+                padding: 0px 4px;
+            }
+
+            #select_dataset_container #url {
+                height: 76px;/*100*/
+                border: 4px solid #B6B6B6;
+                border-top: 0px;
+                padding: 0px 16px;
+                margin-top: -4px;
             }
-            .ssssssssseeeel {
-                background-color: red;
+
+            #header .header_block {
+                width: 20%;
+                height: 40px;
+                padding: 4px 16px 4px 16px;
+            }
+
+            /*.header_block:nth-child(2), .header_block:nth-child(3), .header_block:nth-child(3), .header_block:nth-child(4){*/
+                /*visibility: hidden;*/
+            /*}*/
+
+            #header .header_block:nth-child(4) {
+                text-align: center;
             }
+            .footer_block {
+                width: calc((100% - 0px) / 3);
+                height: 24px;
+                padding: 12px 8px 12px 8px;
+                text-align: center;
+            }
+
+            .footer_block:nth-child(2) {
+                height: 48px;
+                padding: 0px 8px;
+            }
+
+            #suggested_div {
+                visibility: hidden;
+            }
         </style>
-        <div id="select_dataset_container">
+        <paper-material id="select_dataset_container" elevation="5">
-            <div id="toolbar">
-                AVAILABLE DATASETS
+            <paper-tabs selected="{{selected}}" no-bar>
+                <paper-tab noink on-tap="_refreshList"><span id="listView"></span></paper-tab>
+                <!--<paper-tab noink ><span id="listView"></span></paper-tab>-->
+                <paper-tab noink><span id="treeMapView"></span></paper-tab>
+            </paper-tabs>
+            <div id="header">
+                <div class="header_block">
+                    <paper-dropdown-menu id="ddl_provider" label="" no-label-float>
+                        <paper-menu class="dropdown-content" selected="0">
+                            <paper-item id="0" on-tap="_filter"></paper-item>
+                            <template is="dom-repeat" items={{_toArray(providers)}} as="provider">
+                                <!--<paper-item id={{provider.value.id}} style$="background: {{_getProviderColor(provider.value.id)}};">{{provider.value.title}}</paper-item>-->
+                                <paper-item id={{provider.value.id}} on-tap="_filter">{{provider.value.title}}</paper-item>
+                            </template>
+                        </paper-menu>
+                    </paper-dropdown-menu>
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                </div>
+                <div class="header_block">
+                    <paper-input id="datasets_filter" value={{filter}} no-label-float label="">
+                        <iron-icon class="search" icon="search" prefix></iron-icon>
+                        <paper-icon-button class="clear" suffix on-click="_clearInput" icon="clear" tabindex="0"></paper-icon-button>
+                    </paper-input>
+                </div>
             </div>
-            <div id="list_container">
-
-                <!--<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>-->
-
-                <!--<app-toolbar>-->
-                    <!--<div title>Collapsable 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>-->
-
-                <iron-list id="list" items="[[items]]" as="item" selection-enabled><!--multi-selection-->
-                    <template>
-                        <div>
-                            <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" on-tap="_prova">
-                                <!--<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>-->
-                                <div class="pad">
-                                    <div class="primary">[[item.name]]</div>
-                                    <!--<div class="shortText">[[item.url]]</div>-->
-                                    <!--substring description-->
-                                    <div class="longText">[[item.description]]</div>
+            <neon-animated-pages id="neon_container" selected="{{selected}}" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+
+                <neon-animatable>
+                    <div id="list_container">
+                        <iron-list id="list" items="{{shownDatasets}}" selection-enabled><!--multi-selection-->
+                            <template>
+                                <div>
+                                    <div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl" style$="background: {{_getColorForItem(item)}};">
+                                    <!--<div class$="{{getClassForItem(selected)}}" on-tap="_selectDataUrl">-->
+                                        <span style="display:none;">{{item.url}}</span>
+                                        <div class="pad">
+                                            <div class="primary">{{item.resource_name}}</div>
+                                            <!--<div class="shortText" style="display:none;">{{item.url}}</div>-->
+                                            <div class="longText">
+                                                <template is="dom-repeat" items="{{_stringToArray(item.metas)}}" as="mata">
+                                                    <b>{{mata.name}}:</b>
+                                                    <span inner-h-t-m-l="{{mata.value}}"></span> <br>
+                                                </template>
+                                            </div>
+                                        </div>
+                                        <!--<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>-->
+                                        <!--<iron-icon icon="bookmark" style$="color: {{_getColorForItem(item)}};"></iron-icon>-->
+                                        <iron-icon icon$="{{_getIconForItem(item)}}" style$="color: {{_getColorForIcon(item)}};"></iron-icon>
+                                    </div>
                                 </div>
-                                <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
-                            </div>
+                            </template>
+                        </iron-list>
+                    </div>
+
+                    <div id="footer_list">
+                        <div class="footer_block"><span id="showing"></span> {{shownPrev}} <span id="to"></span> {{shownNext}} <span id="of"></span> {{length}} <span id="datasets"></span></div>
+                        <div class="footer_block">
+                            <paper-icon-button id="slider_chevron_left" class="chevron-left" on-click="_onPrevClick" icon="chevron-left"></paper-icon-button>
+                            <paper-icon-button id="slider_chevron_right" class="chevron-right" on-click="_onNextClick" icon="chevron-right"></paper-icon-button>
+                        </div>
+                        <div id="suggested_div" class="footer_block">
+                            <!--<template is="dom-if" if={{suggestedDatasets}}>-->
+                                <paper-checkbox checked on-change="showSuggested"><span id="suggested_datasets"></span></paper-checkbox>
+                            <!--</template>-->
                         </div>
-                    </template>
-                </iron-list>
+                    </div>
+                </neon-animatable>
+
+                <neon-animatable>
+                    <div id="treemap_container"></div>
+
+                    <div id="footer_treemap">
+                        <div class="footer_block"><span id="showing2"></span> {{tLength}} <span id="datasets2"></span></div>
+                        <div class="footer_block"></div>
+                        <div class="footer_block"></div>
+                    </div>
+                </neon-animatable>
+            </neon-animated-pages>
+
+            <div id="url">
+                <paper-textarea id="selected_url" label="" value={{dataUrl}} error-message={{errorMessage}}></paper-textarea>
             </div>
-        </div>
+        </paper-material>
     </template>
@@ -188,34 +347,353 @@
             Polymer({
                 is: 'select-dataset-controllet',
                 properties: {
-                    items: {
-                        type: Array,
-                        value: [
-//                            {"name": "Bob"},
-//                            {"name": "Tim"},
-//                            {"name": "Mike"}
-                        ]
+                    datasets: {
+                        type: Object,
+                        value: undefined
+                    },
+                    filteredDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+                    shownDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+                    suggestedDatasets : {
+                        type : Array,
+                        value : undefined
+                    },
+
+                    providers : {
+                        type : Array,
+                        value : undefined
+                    },
+                    dataUrl : {
+                        type  : String,
+                        value : undefined,
+                        observer : '_fireDataUrl'
+                    },
+                    filter : {
+                        type  : String,
+                        value : "",
+                        observer : '_filter'
+                    },
+                    selected : {
+                        type  : Number,
+                        value : 0
+                    },
+                    prev : {type  : Number, value : undefined},
+                    next : {type  : Number, value : undefined},
+                    shownPrev : {type  : Number, value : undefined},
+                    shownNext : {type  : Number, value : undefined},
+                    length : {type  : Number, value : undefined},
+                    tLength : {type  : Number, computed : 'treemapLength(length)'},
+                    step : {type  : Number, value : 20},
+                    colors : {
+                        type : Array,
+                        value : ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
                     }
                 },
+
+                listeners: {
+                    'datasetexplorer-datalet_data-url': '_selectDataUrl_treeMap'
+                },
+
                 ready : function() {
                     $(this.$.list_container).perfectScrollbar();
-                },
-                _prova : function(e) {
-//                   console.log(e.target);
-//                    e.target.style.background = "#B6B6B6";
+
+//                    this.$.selected_url.invalid = true;
                 },
                 attached: function() {
-                    // Use the document element
+                    this._resize();
+                    var that = this;
+                    window.addEventListener("resize", function() { that._resize(); });
+
+                    this.providers = this.datasets["result"]["providers"];
+                    this.datasets = this.datasets["result"]["datasets"];
+
+                    if(this.suggestedDatasets) {
+                        this.tempDatasets = this.datasets;
+                        this.datasets = this.suggestedDatasets.concat(this.datasets);
+                        this.$.suggested_div.style.visibility = "visible";
+                    }
+
+                    this.filteredDatasets = this.datasets;
+
+                    this.prev = 1;
+                    this.next = this.step;
+                    this.length = this.filteredDatasets.length;
+
+                    this.shownPrev = Math.min(this.prev, this.length);
+                    this.shownNext = Math.min(this.next, this.length);
+                    this.shownDatasets = this.filteredDatasets.slice(this.prev-1, this.next);
+
                     this.$.list.scrollTarget = this.ownerDocument.documentElement;
+
+                    this._translate();
+
+                    this._loadTreeMap();
+                },
+
+                _translate : function(){
+                    this.$.listView.innerHTML    = ln["listView_" + ln["localization"]];
+                    this.$.treeMapView.innerHTML = ln["treeMapView_" + ln["localization"]];
+
+                    this.$.ddl_provider.setAttribute("label", ln["provider_" + ln["localization"]]);
+                    this.$.datasets_filter.setAttribute("label", ln["search_" + ln["localization"]]);
+
+                    this.$.suggested_datasets.innerHTML = ln["suggestedDatasets_" + ln["localization"]];
+
+                    this.$.showing.innerHTML = ln["showing_" + ln["localization"]];
+                    this.$.showing2.innerHTML = ln["showing_" + ln["localization"]];
+                    this.$.to.innerHTML = ln["to_" + ln["localization"]];
+                    this.$.of.innerHTML = ln["of_" + ln["localization"]];
+                    this.$.datasets.innerHTML = ln["datasets_" + ln["localization"]];
+                    this.$.datasets2.innerHTML = ln["datasets_" + ln["localization"]];
+
+                    this.$.selected_url.setAttribute("label", ln["selectedUrl_" + ln["localization"]]);
+                    this.errorMessage = ln["wrongUrl_" + ln["localization"]];
                 },
-                iconForItem: function(item) {
-                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
+
+                showSuggested : function(e) {
+                    if(e.target.checked)
+                        this.datasets = this.suggestedDatasets.concat(this.tempDatasets);
+                    else
+                        this.datasets = this.tempDatasets;
+                    this._filter();
+                },
+
+                _loadTreeMap : function(){
+                    var h = $("#neon_container").height() - 48;
+                    var w = $("#neon_container").width();
+
+                    var data = JSON.stringify({result : {providers: this.providers, datasets: this.filteredDatasets}}).replace(/'/g, "");
+
+                    if(this.filteredDatasets.length > 0)
+                        this.$.treemap_container.innerHTML = "<datasetexplorer-datalet data='"+data+"' width=\""+w+"\" height=\""+h+"\" fields='[\"result,datasets,provider_name\",\"result,datasets,organization_name\",\"result,datasets,package_name\",\"result,datasets,resource_name\",\"result,datasets,url\",\"result,datasets,w\",\"result,datasets,metas\"]'></datasetexplorer-datalet>";
+                    else
+                        this.$.treemap_container.innerHTML = "";
+                },
+
+                _filter : function() {
+                    if(this.filteredDatasets) {
+                        this.async(function () {
+                            var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                            var name = ddl_provider.innerHTML.trim();
+                            var id = this._getIdByProviderName(name);
+                            this.prev = 1;
+                            this.next = this.step;
+                            if (id) {
+                                //filtered by provider name
+                                this.filteredDatasets = this.datasets.filter(function (el) {
+                                    return el.provider_name == "p:" + id;
+                                });
+                            }
+                            else {
+                                this.filteredDatasets = this.datasets;
+                            }
+
+                            //filtered by filter
+                            var filter = this.filter;
+                            this.filteredDatasets = this.filteredDatasets.filter(function (el) {
+                                return el.resource_name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
+                            });
+
+                            this.length = this.filteredDatasets.length;
+
+                            this.shownPrev = Math.min(this.prev, this.length);
+                            this.shownNext = Math.min(this.next, this.length);
+                            this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+
+                            $("#list_container").animate({scrollTop: 0}, 0);
+
+                            this._loadTreeMap();
+                        }, 0);
+                    }
+                },
+
+                _refreshList : function() {
+                    this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                },
+
+                _clearInput : function() {
+                    this.$.datasets_filter.value = "";
                 },
-                getClassForItem: function(item, selected) {
-                    console.log(item);
-                    console.log(selected);
+
+                _getIdByProviderName : function(name) {
+                    for(var id in this.providers) {
+                        if (this.providers[id].title == name)
+                            return this.providers[id].id;
+                    }
+                },
+
+//                iconForItem: function(item) {
+//                    return item ? (item.integer < 50 ? 'star-border' : 'info-outline') : '';
+//                },
+
+                treemapLength : function(length) {
+                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                    var name = ddl_provider.innerHTML.trim();
+                    var id = this._getIdByProviderName(name);
+
+                    if(this.suggestedDatasets && !id)
+                        return Math.max(length - this.suggestedDatasets.length, 0);
+                    return length;
+                },
+
+                _getColorForIcon : function(item) {
+                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+                    var name = ddl_provider.innerHTML.trim();
+                    var id = this._getIdByProviderName(name);
+                    if (id) {
+                        return this.colors[0];
+                    }
+                    if(!item.provider_name) {
+                        return "#00BCD4";
+                    }
+                    var id = item.provider_name.substring(2, item.provider_name.length);
+                    var i = this.getProviderById(id) % this.colors.length;
+                    return this.colors[i];
+                },
+
+                _getColorForItem : function(item) {
+//                    var ddl_provider = $(this.$.ddl_provider).find("paper-menu")[0].selectedItem;
+//                    var name = ddl_provider.innerHTML.trim();
+//                    var id = this._getIdByProviderName(name);
+//                    if (id) {
+//                        return this.colors[0];
+//                    }
+                    if(!item.provider_name) {
+                        return "#FFEB3B";
+                    }
+//                    var id = item.provider_name.substring(2, item.provider_name.length);
+//                    var i = this.getProviderById(id) % this.colors.length;
+//                    return this.colors[i];
+                },
+
+                _getIconForItem : function(item) {
+                    return item.provider_name ? 'bookmark' : 'star';
+                },
+
+//                _getProviderColor: function(id) {
+//                    var i = this.getProviderById(id) % this.colors.length;
+//                    return this.colors[i];
+//                },
+
+                getClassForItem: function(selected) {
                     return selected ? 'item expanded' : 'item';
+                },
+
+                getProviderById: function(providerId) {
+                    var i = 0;
+                    for(var id in this.providers){
+                        if(this.providers[id].id == providerId)
+                            return i;
+                        i++;
+                    }
+                },
+
+                _onPrevClick : function(){
+                    if(this.prev != 1) {
+                        this.prev -= this.step;
+                        this.next -= this.step;
+
+                        this.shownPrev = Math.min(this.prev, this.length);
+                        this.shownNext = Math.min(this.next, this.length);
+                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                    }
+                    $("#list_container").animate({ scrollTop: 0}, 0);
+                },
+
+                _onNextClick : function(){
+                    if(this.next < this.length) {
+                        this.prev += this.step;
+                        this.next += this.step;
+
+                        this.shownPrev = Math.min(this.prev, this.length);
+                        this.shownNext = Math.min(this.next, this.length);
+                        this.shownDatasets = this.filteredDatasets.slice(this.prev - 1, this.next);
+                    }
+                    $("#list_container").animate({ scrollTop: 0}, 0);
+                },
+
+                _stringToArray: function(obj) {
+                    obj = JSON.parse(obj);
+                    return Object.keys(obj).map(function(key) {
+                        return {
+                            name: key,
+                            value: obj[key]
+                        };
+                    });
+                },
+
+                _toArray: function(obj) {
+                    return Object.keys(obj).map(function(key) {
+                        return {
+                            name: key,
+                            value: obj[key]
+                        };
+                    });
+                },
+
+                _selectDataUrl : function(){
+                    this.async(function () {
+                        if(this.$.list.selectedItem) {
+                            var url = this.$.list.selectedItem.url;
+
+                            // Check if CKAN
+                            var strDatasetPos = url.indexOf('/dataset/');
+                            var strResourcePos = (strDatasetPos >= 0) ? url.indexOf('/resource/') : -1;
+                            if (strDatasetPos >= 0 && strResourcePos > strDatasetPos) {
+                                var urlSegment1 = url.substring(0, strDatasetPos);
+                                var urlResourceEnd = url.indexOf('/', strResourcePos + 10);
+                                var resourceId = url.substring(strResourcePos + 10, urlResourceEnd);
+                                url = urlSegment1 + "/api/action/datastore_search?resource_id=" + resourceId;
+                            }
+
+                            // Check if OPENDATASOFT
+                            var strExploreDatasetPos = url.indexOf('/explore/dataset/');
+                            if (strExploreDatasetPos >= 0) {
+                                var urlSegment1 = url.substring(0, strExploreDatasetPos);
+                                var datasetEnd = url.indexOf(strExploreDatasetPos + 17, '/');
+                                var datasetId = url.substring(strExploreDatasetPos + 17, datasetEnd >= 0 ? datasetEnd : url.length);
+                                url = urlSegment1 + '/api/records/1.0/search?dataset=' + datasetId;
+                            }
+
+                            this.dataUrl = this._addlimitUrl(url);
+                        }
+                        else {
+                            this.dataUrl = "";
+                        }
+                    }, 0);
+                },
+
+                _selectDataUrl_treeMap : function(e) {
+                    this.dataUrl = this._addlimitUrl(e.detail.url);
+                },
+
+                _fireDataUrl : function(){
+                    this.fire('dataset-selection-controllet_data-url', {url: this.dataUrl});
+                },
+
+                _addlimitUrl : function(url){
+                    //CKAN --> action no limit
+                    if((url.indexOf("api/action") > -1) && !(url.indexOf("limit") > -1))
+                    {
+                        url += "&limit=99999";
+                    }
+                    //OpenDataSoft --> action no limit
+                    if((url.indexOf("api/records") > -1) && !(url.indexOf("rows") > -1)){
+                        url += "&rows=10000";
+                    }
+                    return url;
+                },
+
+                _resize : function(){
+                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - 16;
+                    h = h - 64 - 8; //height with page scroller
+                    $("#select_dataset_container").height(h);
                 }
             });
         });
@@ -186,6 +186,18 @@
                 this._translate();
             },
+            _preselectInputs : function(fields, aggregators, orders) {
+                var ddls = this.$.inputs_container.querySelectorAll("paper-dropdown-menu");
+
+//                this.async(function () {
+                for (var i = 0; i < fields.length; i++) {
+                    var menu = $(ddls[i]).find("paper-menu")[0];
+                        menu.select(i+1);
+                }
+                    this.selectedFields = this._copy(fields);
+//                }, 2);
+            },
+
             getSelectedFields : function () {
                 return this.selectedFields.filter(function(field){ return field != "" });
             },
@@ -201,11 +213,12 @@
             setFields : function(fields) {
                 var temp = this._copy(fields);
                 temp.unshift("");
-                this.fields = this._copy(temp);
-
-                this.$.expert_header.style.display = "block";
-                this._reset();
+                if (JSON.stringify(this.fields) != JSON.stringify(temp)) {
+                    this.fields = this._copy(temp);
+                    this.$.expert_header.style.display = "block";
+                    this._reset();
+                }
             },
             setInputs : function(inputs) {
@@ -187,6 +187,18 @@
                 this._translate();
             },
+            _preselectInputs : function(fields, aggregators, orders) {
+                var ddls = this.$.inputs_series_container.querySelectorAll("paper-dropdown-menu");
+
+//                this.async(function () {
+                    for (var i = 0; i < fields.length; i++) {
+                        var menu = $(ddls[i]).find("paper-menu")[0];
+                        menu.select(i+1);
+                    }
+                    this.selectedFields = this._copy(fields);
+//                }, 0);
+            },
+
             getSelectedFields : function () {
                 var gb_menu = $(this.$.group_by).find("paper-menu")[0];
                 var c_menu = $("#calculate_0").find("paper-menu")[0];
@@ -210,9 +222,11 @@
             setFields : function(fields) {
                 var temp = this._copy(fields);
                 temp.unshift("");
-                this.fields = this._copy(temp);
-                this._reset();
+                if (JSON.stringify(this.fields) != JSON.stringify(temp)) {
+                    this.fields = this._copy(temp);
+                    this._reset();
+                }
             },
             setInputs : function(inputs) {
@@ -195,6 +195,28 @@
                 this._translate();
             },
+            _preselectOptions : function(params) {
+                var textarea = this.$.select_datalet_options_container.querySelectorAll("paper-textarea");
+                textarea[0].value = params["description"];
+
+                var inputs = this.$.select_datalet_options_container.querySelectorAll("paper-input");
+                inputs[0].value = params["title"];
+
+                for (var i = 1; i < inputs.length; i++)
+                    if(params[this.options[i - 1].name])
+                        inputs[i].value = params[this.options[i - 1].name];
+
+                this._updateParams();
+
+//                var menus = this.$.select_datalet_options_container.querySelectorAll("paper-menu");
+//                var ddls = this.$.select_datalet_options_container.querySelectorAll("paper-dropdown-menu");
+//                for (var i = 0; i < ddls.length; i++) {
+//                    var menu = $(ddls[i]).find("paper-menu")[0];
+//                    if(params[ddls[i].label])
+//                        menu.select(1);//select item con nome params[ddls[i].label]
+//                }
+            },
+
             setOptions : function(options) {
                 this.options = [];
                 this.params = [];
@@ -205,10 +205,7 @@
                 $(this.$.datalet_selection_datalet).perfectScrollbar();
-                this.params = {'data-url' : this.dataUrl};
-
-                if(this.preselectedDatalet)
-                    this._preselectDatalet();
+//                this.params = {'data-url' : this.dataUrl};//not here
             },
             attached : function() {
@@ -224,17 +221,27 @@
             },
             setFields : function(fields) {
+                if (this.fields.length > 0 && JSON.stringify(this.fields) != JSON.stringify(fields))
+                    this.reset();
+
                 this.fields = this._copy(fields);
                 var inputs = this._getInputs();
-                if(inputs)
+                if (inputs)
                     inputs.setFields(this.fields);
             },
             reset : function() {
                 this.$.vslider._reset();
-                this.type = "";
-                this.$.datalet_selection_datalet_placeholder.innerHTML = "";
+            },
+
+            show : function() {//show --> preselect
+                if(this.preselectedDatalet)
+                    this._preselectDatalet();
+//                if (this.$.datalet_selection_datalet_placeholder.innerHTML == "") {
+//                    var inputs = this._getInputs();
+//                    inputs.fireReady();
+//                }
             },
             _translate : function(){
@@ -264,25 +271,6 @@
                 }
             },
-            _preselectDatalet : function() {
-//                console.log("_preselectDatalet to implement");
-//                console.log(this.preselectedDatalet);
-//                console.log(this.fields);
-//                console.log(this.dataletPreset);
-
-                var dataletParams ={
-                    component   : this.preselectedDatalet+"-datalet",
-                    params      : this.dataletPreset,
-                    fields      : this.fields,
-                    placeHolder : this.$.datalet_selection_datalet_placeholder
-                };
-
-                ComponentService.deep_url = this.deepUrl;
-                ComponentService.getComponent(dataletParams);
-
-                this.$.add_button.removeAttribute("disabled");
-            },
-
             _handleSelectedDatalet : function(e){
                 if(this.type != e.detail.response.type) {
@@ -305,6 +293,23 @@
                     var inputs = this._getInputs();
                     inputs.fireReady();
                 }, 0);
+
+//                this.async(function () {
+//                    if(this.preselectedDatalet)
+//                        this._preselectDatalet();
+//                }, 1);
+            },
+
+            _preselectDatalet : function() {
+                var inputs = this._getInputs();
+                inputs._preselectInputs(this.fields, this.dataletPreset["aggregators"], this.dataletPreset["orders"]);
+                this.$.options._preselectOptions(this.dataletPreset);
+                this.dataletPreset = undefined;
+
+//                this.async(function () {
+//                var inputs = this._getInputs();
+//                inputs.fireReady();
+//                }, 500);
             },
             _tryLoadDatalet : function(){
@@ -322,6 +327,8 @@
                 this.selectedFields = inputs.getSelectedFields();
+                this.params = {'data-url' : this.dataUrl};
+
                 this.params["filters"] = JSON.stringify(this.filters);
                 this.params["aggregators"] = JSON.stringify(inputs.getAggregators());
                 this.params["orders"] = JSON.stringify(inputs.getOrders());
@@ -164,7 +164,7 @@ Example:
                 this.map.children = [];
                 for(var i = 0; i < treemapData.length; i++){
-                    this.checkAggragationField(treemapData[i], this._component.fields.length - 1, this._component.fields.length - 1);
+                    this.checkAggragationField(treemapData[i], this._component.fields.length - 2, this._component.fields.length - 2);
                 }
                 var json = JSON.stringify(this.map);
@@ -204,6 +204,7 @@ Example:
                 var xyz = function(url) {
                     me.selectResource(url);
                 }
+                this.map.name = this._component.name;
                 build2(this.map, this.meta, this._component.$.treemap_placeholder, xyz, this._component.width, this._component.height);
             },
@@ -262,6 +263,11 @@ Example:
                     value : {}
                 },
+                name : {
+                    type : String,
+                    value: ""
+                },
+
                 width : {
                     type : Number,
                     value: 968
@@ -148,17 +148,13 @@ function build2(root, meta, place_holder, select_listener, width, height) {
                     // FIRST LVL
                     data[0] = "first";
                     data[1] = meta[id]['title'];
-                    var key = (typeof OW == 'undefined') ? "" : OW.getLanguageText('openwall', 'provider_'+id);
-                    //data[3] = key;
-                    data[3] = datasetexplorer_ln[key+"_"+datasetexplorer_ln["ln"]];
-                    //data[4] = ((typeof ODE == 'undefined') ? parent.ODE.THEME_IMAGES_URL : ODE.THEME_IMAGES_URL) + "/logos/"+id+".png";//meta[id]['logo_url'];
-                    data[4] = "/ow_static/themes/spod_theme_matter/images/logos/"+id+".png";//meta[id]['logo_url'];
-                    //data[5] = d.value;
+                    data[3] = meta[id]['description'];
+                    data[4] = "/ow_static/themes/spod_theme_matter/images/logos/"+id+".png";
+                    //data[4] = "/ow_static/themes/spod_theme_matter/images/logos/"+meta[id]['logo_png'];
                 } else if (d._children && !d._children[0]._children) {
                     // LAST LVL
                     data[0] = "last";
                     data[6] = d._children[0].name;
-                    //data[6] = "datasert url";
                 } else {
                     // MIDDLE LVL
                     data[0] = "middle";
@@ -346,7 +342,7 @@ function build2(root, meta, place_holder, select_listener, width, height) {
     function name(d) {
         return d.parent
-            ? name(d.parent) + " >> " + checkProviderName(d.name)
+            ? name(d.parent) + "." + checkProviderName(d.name)
             : checkProviderName(d.name);
     }
@@ -4,7 +4,7 @@ var ln = [];
 //PAGE SLIDER
 ln["slide1Title_en"] = "SELECT DATASET";
-ln["slide1Subtitle_en"] = "Search or copy and paste the url of dataset.";
+ln["slide1Subtitle_en"] = "Select a dataset from the list or copy and paste the url of dataset.";
 ln["slide2Title_en"] = "SELECT DATA";
 ln["slide2Subtitle_en"] = "Select the fields from tree-view. The multi-table will show the values related to the selected fields.";
 ln["slide3Title_en"] = "SELECT VISUALIZATION";
@@ -15,7 +15,12 @@ ln[&quot;forward_en&quot;] = &quot;Forward&quot;;
 //SELECT DATASET
 ln["listView_en"] = "LIST VIEW";
 ln["treeMapView_en"] = "TREE MAP VIEW";
-ln["availableDatasets_en"] = "Available datasets";
+ln["provider_en"] = "Provider";
+ln["showing_en"] = "Showing";
+ln["to_en"] = "to";
+ln["of_en"] = "of";
+ln["datasets_en"] = "datasets";
+//ln["availableDatasets_en"] = "Available datasets";
 ln["suggestedDatasets_en"] = "Suggested datasets";
 ln["selectedUrl_en"] = "Selected url";
 ln["wrongUrl_en"] = "Invalid url or data provider not supported yet.";
@@ -112,7 +117,7 @@ ln[&quot;donut_description_en&quot;] = &quot;If &#39;true&#39; Pie will become Donut! :)&quot;;
 //PAGE SLIDER
 ln["slide1Title_it"] = "SELEZIONA IL DATASET";
-ln["slide1Subtitle_it"] = "Ricerca o copia e incolla la url del dataset.";
+ln["slide1Subtitle_it"] = "Seleziona il dataset dalla lista o copia e incolla la url del dataset.";
 ln["slide2Title_it"] = "SELEZIONA I DATI";
 ln["slide2Subtitle_it"] = "Seleziona i campi dalla struttura ad albero. Nella tabella saranno mostrati i valori dei campi selezionati.";
 ln["slide3Title_it"] = "SELEZIONA LA VISUALIZZAZIONE";
@@ -123,7 +128,12 @@ ln[&quot;forward_it&quot;] = &quot;Avanti&quot;;
 //SELECT DATASET
 ln["listView_it"] = "ELENCO";
 ln["treeMapView_it"] = "GRAFICO AD ALBERO";
-ln["availableDatasets_it"] = "Dataset disponibili";
+ln["provider_it"] = "Provider";
+ln["showing_it"] = "Visualizzati";
+ln["to_it"] = "a";
+ln["of_it"] = "di";
+ln["datasets_it"] = "datasets";
+//ln["availableDatasets_it"] = "Dataset disponibili";
 ln["suggestedDatasets_it"] = "Dataset suggeriti";
 ln["selectedUrl_it"] = "Url selezionata";
 ln["wrongUrl_it"] = "Url invalido o data provider non ancora supportato.";
@@ -231,7 +241,12 @@ ln[&quot;forward_fr&quot;] = &quot;AVANT&quot;;
 //SELECT DATASET
 ln["listView_fr"] = "VUE EN LISTE";
 ln["treeMapView_fr"] = "VUE EN ARBORESCENCE";
-ln["availableDatasets_fr"] = "Jeux de données disponibles";
+ln["provider_fr"] = "Provider";
+ln["showing_fr"] = "Showing";
+ln["to_fr"] = "to";
+ln["of_fr"] = "of";
+ln["datasets_fr"] = "datasets";
+//ln["availableDatasets_fr"] = "Jeux de données disponibles";
 ln["suggestedDatasets_fr"] = "Jeux de données suggérés";
 ln["selectedUrl_fr"] = "Sélectionner URL";
 ln["wrongUrl_fr"] = "Invalid url or data provider not supported yet.";
@@ -339,7 +354,12 @@ ln[&quot;forward_nl&quot;] = &quot;VOOTUIT&quot;;
 //SELECT DATASET
 ln["listView_nl"] = "LIJSTWEERGAVE";
 ln["treeMapView_nl"] = "BOOMSTRUCTUUR WEEERGAVE";
-ln["availableDatasets_nl"] = "Beschikbare datasets";
+ln["provider_nl"] = "Provider";
+ln["showing_nl"] = "Showing";
+ln["to_nl"] = "to";
+ln["of_nl"] = "of";
+ln["datasets_nl"] = "datasets";
+//ln["availableDatasets_nl"] = "Beschikbare datasets";
 ln["suggestedDatasets_nl"] = "Voeg aanbevolen datasets";
 ln["selectedUrl_nl"] = "Selecteer url";
 ln["wrongUrl_nl"] = "Ongeldige url of data provider nog niet ondersteund.";
@@ -3,47 +3,11 @@ datasetexplorer_ln = [];
 /*EN*/
 datasetexplorer_ln["ode+back_en"] = "<< Click to navigate back to the top level.";
-//datasetexplorer_ln["openwall+provider_1_en"] = "Example CKAN with data from out pilots (Pratos - Groiningen - Den Haag)";
-//datasetexplorer_ln["openwall+provider_2_en"] = "data.issy.com (from OpenDataSoft France)";
-//datasetexplorer_ln["openwall+provider_3_en"] = "Open data Regione Lazio (Italy)";
-//datasetexplorer_ln["openwall+provider_4_en"] = "data.gov.uk (UK)";
-//datasetexplorer_ln["openwall+provider_5_en"] = "Dataportaal van de Nederlandse overheid (Netherland)";
-//datasetexplorer_ln["openwall+provider_6_en"] = "French Open Data Portal (France)";
-//datasetexplorer_ln["openwall+provider_7_en"] = "Ireland\\'s Open Data Portal (Ireland)";
-//datasetexplorer_ln["openwall+provider_8_en"] = "TET v.0.1 @ Galway (Ireland)";
-
 /*IT*/
 datasetexplorer_ln["ode+back_it"] = "<< Clicca qui per tornare al livello precedente.";
-//datasetexplorer_ln["openwall+provider_1_it"] = "Example CKAN with data from out pilots (Pratos - Groiningen - Den Haag)";
-//datasetexplorer_ln["openwall+provider_2_it"] = "data.issy.com (from OpenDataSoft France)";
-//datasetexplorer_ln["openwall+provider_3_it"] = "Open data Regione Lazio (Italy)";
-//datasetexplorer_ln["openwall+provider_4_it"] = "data.gov.uk (UK)";
-//datasetexplorer_ln["openwall+provider_5_it"] = "Dataportaal van de Nederlandse overheid (Netherland)";
-//datasetexplorer_ln["openwall+provider_6_it"] = "French Open Data Portal (France)";
-//datasetexplorer_ln["openwall+provider_7_it"] = "Ireland\\'s Open Data Portal (Ireland)";
-//datasetexplorer_ln["openwall+provider_8_it"] = "TET v.0.1 @ Galway (Ireland)";
-
 /*FR*/
 datasetexplorer_ln["ode+back_fr"] = "<< Click to navigate back to the top level.";
-//datasetexplorer_ln["openwall+provider_1_fr"] = "Example CKAN with data from out pilots (Pratos - Groiningen - Den Haag)";
-//datasetexplorer_ln["openwall+provider_2_fr"] = "data.issy.com (from OpenDataSoft France)";
-//datasetexplorer_ln["openwall+provider_3_fr"] = "Open data Regione Lazio (Italy)";
-//datasetexplorer_ln["openwall+provider_4_fr"] = "data.gov.uk (UK)";
-//datasetexplorer_ln["openwall+provider_5_fr"] = "Dataportaal van de Nederlandse overheid (Netherland)";
-//datasetexplorer_ln["openwall+provider_6_fr"] = "French Open Data Portal (France)";
-//datasetexplorer_ln["openwall+provider_7_fr"] = "Ireland\\'s Open Data Portal (Ireland)";
-//datasetexplorer_ln["openwall+provider_8_fr"] = "TET v.0.1 @ Galway (Ireland)";
-
 /*NL*/
 datasetexplorer_ln["ode+back_nl"] = "<< Click to navigate back to the top level.";
-
-//datasetexplorer_ln["openwall+provider_1_nl"] = "Example CKAN with data from out pilots (Pratos - Groiningen - Den Haag)";
-//datasetexplorer_ln["openwall+provider_2_nl"] = "data.issy.com (from OpenDataSoft France)";
-//datasetexplorer_ln["openwall+provider_3_nl"] = "Open data Regione Lazio (Italy)";
-//datasetexplorer_ln["openwall+provider_4_nl"] = "data.gov.uk (UK)";
-//datasetexplorer_ln["openwall+provider_5_nl"] = "Dataportaal van de Nederlandse overheid (Netherland)";
-//datasetexplorer_ln["openwall+provider_6_nl"] = "French Open Data Portal (France)";
-//datasetexplorer_ln["openwall+provider_7_nl"] = "Ireland\\'s Open Data Portal (Ireland)";
-//datasetexplorer_ln["openwall+provider_8_nl"] = "TET v.0.1 @ Galway (Ireland)";