graph and datalets updates

Luigi Serra
1 parent c844388d
Showing 29 changed files with 1371 additions and 175 deletions
bower.json
bower_components/paper-scroll-header-panel/.bower.json
bower_components/paper-scroll-header-panel/.travis.yml
bower_components/paper-scroll-header-panel/CONTRIBUTING.md
bower_components/paper-scroll-header-panel/README.md
bower_components/paper-scroll-header-panel/bower.json
bower_components/paper-scroll-header-panel/demo/drawer-panel.html
bower_components/paper-scroll-header-panel/demo/hide-header.html
bower_components/paper-scroll-header-panel/demo/images/bg1.jpg
bower_components/paper-scroll-header-panel/demo/images/bg2.jpg
bower_components/paper-scroll-header-panel/demo/images/bg3.jpg
bower_components/paper-scroll-header-panel/demo/images/bg4.jpg
bower_components/paper-scroll-header-panel/demo/index.html
bower_components/paper-scroll-header-panel/demo/keep-header.html
bower_components/paper-scroll-header-panel/demo/toggle-fixed-header.html
bower_components/paper-scroll-header-panel/demo/transform-header-1.html
bower_components/paper-scroll-header-panel/demo/transform-header-2.html
bower_components/paper-scroll-header-panel/demo/transform-header-3.html
bower_components/paper-scroll-header-panel/demo/transform-header-4.html
bower_components/paper-scroll-header-panel/demo/transform-header-5.html
@@ -16,6 +16,7 @@
   "dependencies": {
     "google-map": "GoogleWebComponents/google-map#^1.0.0",
     "paper-fab-transitions": "~0.1.0",
+    "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14",
     "polymer": "Polymer/polymer#^1.0.0"
   }
 }
 {
   "name": "paper-scroll-header-panel",
   "description": "A header bar with scrolling behavior",
-  "version": "1.0.8",
+  "version": "1.0.14",
   "license": "http://polymer.github.io/LICENSE.txt",
   "private": true,
   "authors": "The Polymer Authors",
@@ -11,20 +11,18 @@
     "layout",
     "responsive"
   ],
-  "main": [
-    "paper-scroll-header-panel.html"
-  ],
+  "main": "paper-scroll-header-panel.html",
   "repository": {
     "type": "git",
     "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
   },
   "dependencies": {
     "polymer": "Polymer/polymer#^1.0.0",
-    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
   },
   "devDependencies": {
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
@@ -35,14 +33,16 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
+  "ignore": [],
   "homepage": "https://github.com/PolymerElements/paper-scroll-header-panel",
-  "_release": "1.0.8",
+  "_release": "1.0.14",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.8",
-    "commit": "e1f1823fdf6e496e6ef45340d7cd5664a6a87fc9"
+    "tag": "v1.0.14",
+    "commit": "ec62c5a1d88d4e5f0f3959586ab9633110912c92"
   },
   "_source": "git://github.com/PolymerElements/paper-scroll-header-panel.git",
-  "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-scroll-header-panel"
+  "_target": "~1.0.14",
+  "_originalSource": "PolymerElements/paper-scroll-header-panel",
+  "_direct": true
 }
 \ No newline at end of file
+language: node_js
+sudo: false
+before_script:
+  - npm install web-component-tester
+  - npm install bower
+  - 'export PATH=$PWD/node_modules/.bin:$PATH'
+  - bower install
+env:
+  global:
+    - secure: XFAsPXpYVWqsvZ5NX0ueW63LYhGN560ZPdFbntpau2vYIiuLKwe5N5y3pjw+zE1aJ+MV/JcW7snvP9mimdBQoKj77PLFqzo6wSozaDeV8Zx7PitkztC3rByn9WDVLO8qmlWGqFfedY24Whd4YIHAbBk7V89vaIFPZToTUm0rlUKlsaBWlhViEeG9YxmHoIUXJoRwq9pZ6enFYGIbritYlvcdMnOmTN8AJXqe2hmFel1TzE+e0z67yJdzEFBfkEgGgTAmBKpwFugFyUupOq9ZeFqoD2rg05xgfmtcUv7wrJei6/XqQ5gwbRFS+1Sbjv9AsY02hKFqmToD8a+IXjnxRB2s3OQOF/GFH70RRUeeQW+VOp9jFUaiSMdTghHhj5uMqEQPT0sxvaB+si9R8+g1cYJLaKgT3HoeJtFjcaDYwKkAiFK0ZWhL84JFbxWRqvnAf3gdgK+UWrs517amVaV0cyBjyzrIPtrgACNzJyON32sZEfuLDAKtDfpHf18rfY/QLRO/D8GjB+aWSDA2FzDe7Lrdfhrfgw/fnHq9A4ohS4swBeW8IUC5imN4Eh3FqB/GjVz6q7H0cfmxMre+b0RFCK74HroFW+or/tG5K+Tw7Z51j7NwLt8YGwyfsUDzUZpQ7jUbnW3y/5HJGHov81LkQPESZP4KxWSEYTwXnWrLKk4=
+    - secure: xJhCDzTM2Ud1hx17cjcMDRtI0+IzrZbvY1vYK6OhX//fP1JTatIHOsXvBVFYfHCdutib6zkKaLTi8AF3oBYdZd7BF1c8Pfv1woZtML5hKb9Ti5VdGsino8Hr0IrInCQaqE+VM+C0Jn9xbsYYMCIMvI77L8kM6HY6Qno8S3Iw99mnxZxWIOKlcwCANlOPGNxOQ3wwJITYStSniBWIwS+51yjlWL1KOhRFWi3m8tFa/eGd4dO13jUb00GPRSluzGXevhtXX78niOB53a6GLT1uObx+zsStvDJeH6HEaXzamvQFMIPtwTCIPlM90AYCaktcgrIfJeRzjG8TOsWz/DuISsRKuuZ5N+yUKp8etD1YzgR3CqQq/NqeNp8TgsKwmifLFiOv75kCvKSvDpRvNjeimwW7jI+EzM0VKewdpJGSMywhHCWTEk3qZ0Vajma6OQcV7FjpwUfheSAAs4j6vYy4/EsKcfAQ9S9eEM85yOlM2NdoNgoQsxUNSM0z01wpxP5c70bgsA3eZRSXIdPXXrd4AuyMzN/o9gkxiTSeWASE4r+OqIJfoXDXYbIH+FtGBgJAE1oPbFDolXC6HNb3C2VwsMrEJP5FMHeqy5FNqLiy0cyl4GfxzNFQz/mIPA/QOpZ80UFIfOl8ptPn2tDloV4mO9TRiE0eXHbr4UOoVH677ew=
+node_js: 4
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+script:
+  - xvfb-run 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 :)
+-->
+# 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: [http://jsbin.com/cagaye](http://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 using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, #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!
-paper-scroll-header-panel
-========================
-`paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the rest of the scrollable content. Upon scrolling slightly up at any point, the header scrolls back into view. This saves screen space and allows users to access important controls by easily moving them back to the view.
+<!---
-Important: The `paper-scroll-header-panel` will not display if its parent does not have a height. Using layout classes, you can easily make the `paper-scroll-header-panel` fill the screen
+This README is automatically generated from the comments in these files:
+paper-scroll-header-panel.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+-->
+
+[![Build Status](https://travis-ci.org/PolymerElements/paper-scroll-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-scroll-header-panel)
+
+_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-scroll-header-panel)_
+
+
+##&lt;paper-scroll-header-panel&gt;
+
+
+Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
+
+`paper-scroll-header-panel` contains a header section and a content section.  The
+header is initially on the top part of the view but it scrolls away with the
+rest of the scrollable content.  Upon scrolling slightly up at any point, the
+header scrolls back into view.  This saves screen space and allows users to
+access important controls by easily moving them back to the view.
+
+__Important:__ The `paper-scroll-header-panel` will not display if its parent does not have a height.
+
+Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
 ```html
 <body class="fullbleed layout vertical">
   <paper-scroll-header-panel class="flex">
     <paper-toolbar>
-      Hello World!
+      <div>Hello World!</div>
     </paper-toolbar>
   </paper-scroll-header-panel>
 </body>
 ```
-or, if you would prefer to do it in CSS, just give html, body, and `paper-scroll-header-panel` a height of 100%:
+
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
+
 ```css
 html, body {
   height: 100%;
@@ -24,7 +50,9 @@ paper-scroll-header-panel {
   height: 100%;
 }
 ```
-`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element that represents a header by adding a `paper-header` class to it.
+
+`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
+that represents a header by adding a `paper-header` class to it.
 ```html
 <paper-scroll-header-panel>
@@ -33,24 +61,15 @@ paper-scroll-header-panel {
 </paper-scroll-header-panel>
 ```
-### Styling scroll-header-panel:
+### Styling
+=======
-To change background for toolbar when it is at its full size:
+The following custom properties and mixins are available for styling:
-```css
-paper-scroll-header-panel {
-  --paper-scroll-header-panel-full-header: {
-    background-color: red;
-  };
-}
-```
+Custom property | Description | Default
+----------------|-------------|----------
+--paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {}
+--paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {}
+--paper-scroll-header-container | To override or add container styles | {}
-To change the background for toolbar when it is condensed:
-```css
-paper-scroll-header-panel {
-  --paper-scroll-header-panel-condensed-header: {
-    background-color: #f4b400;
-  };
-}
-```
 {
   "name": "paper-scroll-header-panel",
   "description": "A header bar with scrolling behavior",
-  "version": "1.0.8",
+  "version": "1.0.14",
   "license": "http://polymer.github.io/LICENSE.txt",
   "private": true,
   "authors": "The Polymer Authors",
@@ -11,20 +11,18 @@
     "layout",
     "responsive"
   ],
-  "main": [
-    "paper-scroll-header-panel.html"
-  ],
+  "main": "paper-scroll-header-panel.html",
   "repository": {
     "type": "git",
     "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
   },
   "dependencies": {
     "polymer": "Polymer/polymer#^1.0.0",
-    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
   },
   "devDependencies": {
     "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
@@ -34,5 +32,6 @@
     "test-fixture": "PolymerElements/test-fixture#^1.0.0",
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
-  }
+  },
+  "ignore": []
 }
+<!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.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>paper-scroll-header-panel: Combine with paper-drawer-panel</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-drawer-panel/paper-drawer-panel.html">
+
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+    }
+
+    paper-toolbar {
+      background-color: var(--google-blue-500, #4285f4);
+    }
+
+    paper-toolbar .title {
+      margin: 0 8px;
+    }
+
+    paper-scroll-header-panel .content {
+      padding: 8px;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+
+  <paper-drawer-panel>
+    <paper-header-panel drawer>
+      <paper-toolbar>Menu</paper-toolbar>
+    </paper-header-panel>
+   
+
+    <paper-scroll-header-panel main>
+
+    <paper-toolbar>
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="flex title">Title</div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+  </paper-drawer-panel>
+
+  
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: demo3</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg2.jpg);
+        background-position: top left;
+      };
+    }
+
+    paper-toolbar {
+      background-color: transparent;
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel condenses no-reveal no-dissolve>
+
+    <paper-toolbar class="tall">
+
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+</body>
+</html>
@@ -22,6 +22,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
   <link rel="import" href="sample-content.html">
   <link rel="stylesheet" href="../../paper-styles/demo.css">
@@ -38,15 +40,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       /* background for toolbar when it is at its full size */
       --paper-scroll-header-panel-full-header: {
-        background-image: url(images/bg6.jpg);
+        background-image: url(images/bg1.jpg);
+        background-position: left center;
       };
       /* background for toolbar when it is condensed */
       --paper-scroll-header-panel-condensed-header: {
-        background-color: var(--paper-deep-orange-500, #ff5722);
+        background-color: var(--paper-deep-purple-500);
       };
     }
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
     paper-toolbar.tall {
       background-color: transparent;
     }
@@ -63,6 +70,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       padding: 8px;
     }
+    .spacer {
+      @apply(--layout-flex);
+    }
+
   </style>
 </head>
@@ -71,13 +82,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <paper-scroll-header-panel condenses>
     <paper-toolbar class="tall">
-
       <paper-icon-button icon="arrow-back"></paper-icon-button>
-      <div class="flex"></div>
+      <div class="spacer"></div>
       <paper-icon-button icon="search"></paper-icon-button>
       <paper-icon-button icon="more-vert"></paper-icon-button>
       <div class="bottom title">Title</div>
-
     </paper-toolbar>
     <div class="content">
+<!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.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>paper-scroll-header-panel: demo1</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);;
+    }
+
+    paper-toolbar {
+      background-color: var(--google-blue-500, #4285f4);
+    }
+
+    paper-toolbar .title {
+      margin: 0 8px;
+    }
+
+    paper-scroll-header-panel .content {
+      padding: 8px;
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel fixed>
+
+    <paper-toolbar>
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer title">Title</div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: demo7</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../iron-media-query/iron-media-query.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg2.jpg);
+        background-position: left bottom;
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: var(--google-yellow-500, #f4b400);
+      };
+    }
+
+    paper-toolbar.tall {
+      background-color: transparent;
+    }
+
+    paper-toolbar.tall .title {
+      font-size: 40px;
+      margin-left: 60px;
+
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel condenses>
+
+    <paper-toolbar class="tall">
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+      <div class="bottom indent title">Title</div>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <h3>Resize window to toggle between fixed header and scrolled header</h3>
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+  <iron-media-query id="mquery" query="min-width: 600px"></iron-media-query>
+
+  <script>
+
+    // toggle fixed header based on screen size
+    var panel = document.querySelector('paper-scroll-header-panel');
+    var mquery = document.querySelector('#mquery');
+
+    mquery.addEventListener('query-matches-changed', function() {
+      panel.fixed = mquery.queryMatches;
+    });
+
+    panel.fixed = mquery.queryMatches;
+
+    // custom transformation: scale header's title
+    var title = document.querySelector('.title');
+    addEventListener('paper-header-transform', function(e) {
+      var d = e.detail;
+      var m = d.height - d.condensedHeight;
+      var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
+
+      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
+    });
+
+  </script>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: Transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg1.jpg);
+        background-position: left center;
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: var(--paper-deep-purple-500);
+      };
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    paper-toolbar.tall {
+      background-color: transparent;
+    }
+
+    paper-toolbar.tall .title {
+      font-size: 40px;
+      margin-left: 60px;
+
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel condenses>
+
+    <paper-toolbar class="tall">
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+      <div class="bottom title">Title</div>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+  <script>
+
+    // custom transformation: scale header's title
+    var title = document.querySelector('.title');
+    addEventListener('paper-header-transform', function(e) {
+      var d = e.detail;
+      var m = d.height - d.condensedHeight;
+      var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
+
+      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
+    });
+
+  </script>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+  <link rel="import" href="sample-content.html">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+    }
+
+    paper-toolbar {
+      background-color: var(--google-blue-500, #4285f4);
+    }
+
+    paper-toolbar .title {
+      margin-left: 60px;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel condenses>
+
+    <paper-toolbar class="tall">
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+
+      <div class="bottom title">Title</div>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg4.jpg);
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: var(--paper-light-blue-600);
+      };
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    paper-toolbar.tall {
+      background-color: transparent;
+    }
+
+    paper-toolbar.tall .title {
+      font-size: 40px;
+      margin-left: 60px;
+
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <paper-scroll-header-panel condenses>
+
+    <paper-toolbar class="tall">
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+      <div class="bottom title">Title</div>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+  <script>
+
+    // custom transformation: scale header's title
+    var title = document.querySelector('.title');
+    addEventListener('paper-header-transform', function(e) {
+      var d = e.detail;
+      var m = d.height - d.condensedHeight;
+      var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
+
+      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
+    });
+
+  </script>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg1.jpg);
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-image: url(images/bg4.jpg);
+      };
+    }
+
+    paper-toolbar.tall {
+      /* custom toolbar height */
+      height: 256px;
+      background-color: transparent;
+    }
+
+    paper-toolbar.tall .title {
+      font-size: 40px;
+      margin-left: 60px;
+      -webkit-transform-origin: left center;
+      transform-origin: left center;
+    }
+
+    paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <!-- By default condensedHeaderHeight is 1/3 of the header's height.  Here
+       we want to set the condensed header's height to be 64px. -->
+  <paper-scroll-header-panel condenses header-height="256" condensed-header-height="64">
+
+    <paper-toolbar class="tall">
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="search"></paper-icon-button>
+      <paper-icon-button icon="more-vert"></paper-icon-button>
+      <div class="bottom title">Title</div>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+  <script>
+
+    // custom transformation: scale header's title
+    var title = document.querySelector('.title');
+    addEventListener('paper-header-transform', function(e) {
+      var d = e.detail;
+      var m = d.height - d.condensedHeight;
+      var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
+
+      Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
+    });
+
+  </script>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg4.jpg);
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: var(--paper-light-blue-600);
+      };
+    }
+
+    paper-toolbar {
+      /* custom toolbar height */
+      height: 256px;
+      background-color: transparent;
+      overflow: visible;
+    }
+
+    paper-icon-button {
+      margin: 0 8px;
+      --paper-icon-button-ink-color: white;
+    }
+
+    .bottom-text {
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+
+      font-size: 20px;
+      padding-bottom: 10px;
+    }
+
+    .subtitle {
+      padding-top: 4px;
+      font-size: 16px;
+      color: #ccc;
+    }
+
+    .bookmark {
+      position: absolute;
+      bottom: -24px;
+      right: 24px;
+      fill: #4285f4;
+      height: 48px;
+      width: 48px;
+    }
+
+    .content {
+      padding: 16px 10px 16px 50px;
+    }
+
+    .indent {
+      margin-left: 60px;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <!-- `keepCondensedHeader` makes the condensed header to not scroll away -->
+  <paper-scroll-header-panel condenses keep-condensed-header header-height="256" condensed-header-height="140">
+
+    <paper-toolbar>
+
+      <paper-icon-button icon="arrow-back"></paper-icon-button>
+      <div class="spacer"></div>
+      <paper-icon-button icon="thumb-up"></paper-icon-button>
+      <paper-icon-button icon="mail"></paper-icon-button>
+      <div class="bottom indent bottom-text" self-end>
+        <div>Lorem ipsum dolor sit amet</div>
+        <div class="subtitle">Iisque perfecto dissentiet cum et</div>
+      </div>
+      <iron-icon class="bottom bookmark" icon="bookmark"></iron-icon>
+
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+</body>
+</html>
+<!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.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>paper-scroll-header-panel: transform header</title>
+
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, 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="../paper-scroll-header-panel.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-icons/av-icons.html">
+  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
+  <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="sample-content.html">
+
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+
+
+  <style is="custom-style">
+
+    paper-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--paper-grey-200, #eee);
+
+      /* background for toolbar when it is at its full size */
+      --paper-scroll-header-panel-full-header: {
+        background-image: url(images/bg2.jpg);
+      };
+
+      /* background for toolbar when it is condensed */
+      --paper-scroll-header-panel-condensed-header: {
+        background-color: transparent;
+      };
+    }
+
+    paper-toolbar {
+      background-color: transparent;
+    }
+
+    .search-box {
+      background-color: #fff;
+      border: 1px solid #eee;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      height: 40px;
+    }
+
+    .search-box iron-icon {
+      color: var(--google-grey-700);
+      fill: var(--google-grey-700);
+      margin: 0 8px;
+    }
+    
+    .search-box input {
+      font-size: 20px;
+      outline: 0;
+      border: none;
+      margin-left: 20px;
+    }
+
+    .content {
+      padding: 8px;
+    }
+
+    .search-box {
+      @apply(--layout-flex);
+      @apply(--layout-center);
+      @apply(--layout-horizontal);
+    }
+
+    .search-box input {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <!-- Instead of using 1/3 of the header's height, we want to manually set the
+       condensed header's height to 64px -->
+  <paper-scroll-header-panel condenses condensed-header-height="64">
+
+    <paper-toolbar class="medium-tall">
+      
+      <div class="search-box bottom">
+        <iron-icon icon="menu"></iron-icon>
+        <input>
+        <iron-icon icon="av:mic"></iron-icon>
+      </div>
+    </paper-toolbar>
+
+    <div class="content">
+
+      <sample-content size="100"></sample-content>
+
+    </div>
+
+  </paper-scroll-header-panel>
+
+</body>
+</html>
@@ -12,6 +12,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <!--
+Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
+
 `paper-scroll-header-panel` contains a header section and a content section.  The
 header is initially on the top part of the view but it scrolls away with the
 rest of the scrollable content.  Upon scrolling slightly up at any point, the
@@ -22,53 +24,61 @@ __Important:__ The `paper-scroll-header-panel` will not display if its parent do
 Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
-    <body class="fullbleed layout vertical">
-      <paper-scroll-header-panel class="flex">
-        <paper-toolbar>
-          <div>Hello World!</div>
-        </paper-toolbar>
-      </paper-scroll-header-panel>
-    </body>
+```html
+<body class="fullbleed layout vertical">
+  <paper-scroll-header-panel class="flex">
+    <paper-toolbar>
+      <div>Hello World!</div>
+    </paper-toolbar>
+  </paper-scroll-header-panel>
+</body>
+```
 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
-    html, body {
-      height: 100%;
-      margin: 0;
-    }
-    paper-scroll-header-panel {
-      height: 100%;
-    }
+```css
+html, body {
+  height: 100%;
+  margin: 0;
+}
+paper-scroll-header-panel {
+  height: 100%;
+}
+```
 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
 that represents a header by adding a `paper-header` class to it.
-    <paper-scroll-header-panel>
-      <paper-toolbar>Header</paper-toolbar>
-      <div>Content goes here...</div>
-    </paper-scroll-header-panel>
+```html
+<paper-scroll-header-panel>
+  <paper-toolbar>Header</paper-toolbar>
+  <div>Content goes here...</div>
+</paper-scroll-header-panel>
+```
-Styling scroll-header-panel:
+### Styling
+=======
-To change background for toolbar when it is at its full size:
+The following custom properties and mixins are available for styling:
-    paper-scroll-header-panel {
-      --paper-scroll-header-panel-full-header: {
-        background-color: red;
-      };
-    }
-
-To change the background for toolbar when it is condensed:
-
-    paper-scroll-header-panel {
-      --paper-scroll-header-panel-condensed-header: {
-        background-color: #f4b400;
-      };
-    }
+Custom property | Description | Default
+----------------|-------------|----------
+--paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {}
+--paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {}
+--paper-scroll-header-container | To override or add container styles | {}
 @group Paper Element
 @element paper-scroll-header-panel
-@demo demo/index.html
+@demo demo/transform-header-1.html Transform header 1
+@demo demo/transform-header-2.html Transform header 2
+@demo demo/transform-header-3.html Transform header 3
+@demo demo/transform-header-4.html Transform header 4
+@demo demo/transform-header-5.html Transform header 5
+@demo demo/transform-header-6.html Transform header 6
+@demo demo/keep-header.html Keep header
+@demo demo/hide-header.html Hide header
+@demo demo/toggle-fixed-header.html Toggle fixed header
+@demo demo/drawer-panel.html Combine with paper-drawer-panel
 @hero hero.svg
 -->
@@ -90,11 +100,12 @@ To change the background for toolbar when it is condensed:
       -moz-box-sizing: border-box;
       box-sizing: border-box;
-
       -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
       overflow-y: auto;
+
+      @apply(--paper-scroll-header-container);
     }
     #headerContainer {
@@ -155,7 +166,7 @@ To change the background for toolbar when it is condensed:
   'use strict';
-  Polymer({
+  Polymer.PaperScrollHeaderPanel = Polymer({
     /**
      * Fired when the content has been scrolled.
@@ -252,24 +263,17 @@ To change the background for toolbar when it is condensed:
       },
       /**
-       * The state of the header. The initial value is `HEADER_STATE_EXPANDED`.
-       * Depending on the configuration and the `scrollTop` value,
+       * The state of the header. Depending on the configuration and the `scrollTop` value,
        * the header state could change to
-       * `HEADER_STATE_HIDDEN`, `HEADER_STATE_CONDENSED` and `HEADER_STATE_INTERPOLATED`
+       *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED
+       *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN
+       *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED
+       *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED
        */
       headerState: {
         type: Number,
         readOnly: true,
-        value: 0
-      },
-
-      _prevScrollTop: {
-        type: Number,
-        value: 0
-      },
-
-      _y: {
-        type: Number,
+        notify:true,
         value: 0
       },
@@ -292,43 +296,13 @@ To change the background for toolbar when it is condensed:
     },
     ready: function() {
-      this.async(this.measureHeaderHeight, 5);
       this._scrollHandler = this._scroll.bind(this);
       this.scroller.addEventListener('scroll', this._scrollHandler);
     },
-    /**
-     * The header's initial state
-     *
-     * @property HEADER_STATE_EXPANDED
-     * @type number
-     */
-    HEADER_STATE_EXPANDED: 0,
-
-    /**
-     * The header's state when it's hidden.
-     *
-     * @property HEADER_STATE_HIDDEN
-     * @type number
-     */
-    HEADER_STATE_HIDDEN: 1,
-
-    /**
-     * The header's state when it's condensed.
-     *
-     * @property HEADER_STATE_CONDENSED
-     * @type number
-     */
-    HEADER_STATE_CONDENSED: 2,
-
-    /**
-     * The header's state when its progress is somewhere between
-     * the `hidden` and `condensed` state.
-     *
-     * @property HEADER_STATE_INTERPOLATED
-     * @type number
-     */
-    HEADER_STATE_INTERPOLATED: 3,
+    attached: function() {
+      this.async(this.measureHeaderHeight, 1);
+    },
     /**
      * Returns the header element.
@@ -393,7 +367,7 @@ To change the background for toolbar when it is condensed:
      * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
      */
     scroll: function(top, smooth) {
-      // the scroll event will trigger _updateScrollState directly, 
+      // the scroll event will trigger _updateScrollState directly,
       // However, _updateScrollState relies on the previous `scrollTop` to update the states.
       // Calling _updateScrollState will ensure that the states are synced correctly.
@@ -439,13 +413,14 @@ To change the background for toolbar when it is condensed:
      * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
      */
     condense: function(smooth) {
+      var ctx = Polymer.PaperScrollHeaderPanel;
       if (this.condenses && !this.fixed && !this.noReveal) {
         switch (this.headerState) {
-          case this.HEADER_STATE_HIDDEN:
+          case ctx.HEADER_STATE_HIDDEN:
             this.scroll(this.scroller.scrollTop - (this._headerMaxDelta - this._headerMargin), smooth);
           break;
-          case this.HEADER_STATE_EXPANDED:
-          case this.HEADER_STATE_INTERPOLATED:
+          case ctx.HEADER_STATE_EXPANDED:
+          case ctx.HEADER_STATE_INTERPOLATED:
             this.scroll(this._headerMargin, smooth);
           break;
         }
@@ -564,22 +539,27 @@ To change the background for toolbar when it is condensed:
     },
     _updateScrollState: function(scrollTop) {
+      var ctx = Polymer.PaperScrollHeaderPanel;
       var deltaScrollTop = scrollTop - this._prevScrollTop;
       var y = Math.max(0, (this.noReveal) ? scrollTop : this._y + deltaScrollTop);
       if (y > this._headerMaxDelta) {
         y = this._headerMaxDelta;
-        this._setHeaderState(this.HEADER_STATE_HIDDEN);
-      } else if (this.condenses && this._prevScrollTop >= scrollTop && scrollTop >= this._headerMargin) {
+        if (this.keepCondensedHeader) {
+          this._setHeaderState(ctx.HEADER_STATE_CONDENSED);
+        } else {
+          this._setHeaderState(ctx.HEADER_STATE_HIDDEN);
+        }
+      } else if (this.condenses && scrollTop >= this._headerMargin) {
         y = Math.max(y, this._headerMargin);
-        this._setHeaderState(this.HEADER_STATE_CONDENSED);
+        this._setHeaderState(ctx.HEADER_STATE_CONDENSED);
       } else if (y === 0) {
-        this._setHeaderState(this.HEADER_STATE_EXPANDED);
+        this._setHeaderState(ctx.HEADER_STATE_EXPANDED);
       } else {
-        this._setHeaderState(this.HEADER_STATE_INTERPOLATED);
+        this._setHeaderState(ctx.HEADER_STATE_INTERPOLATED);
       }
       if (!this.fixed && y !== this._y) {
@@ -591,6 +571,11 @@ To change the background for toolbar when it is condensed:
     }
   });
+  Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED = 0;
+  Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN = 1;
+  Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED = 2;
+  Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED = 3;
+
 })();
 </script>
@@ -58,6 +58,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         assert.typeOf(scrollHeaderPanel.scroller, 'object');
         assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
         assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
+
+        scrollHeaderPanel.measureHeaderHeight();
         assert.equal(scrollHeaderPanel.headerHeight, toolbar.offsetHeight);
         assert.equal(scrollHeaderPanel.condensedHeaderHeight, Math.round(toolbar.offsetHeight * 1/3));
       });
@@ -28,8 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <test-fixture id="trivialProgress">
     <template>
       <paper-scroll-header-panel condenses>
-        <paper-toolbar class="tall">
-        </paper-toolbar>
+        <paper-toolbar class="tall"></paper-toolbar>
         <div class="content">
         <sample-content size="100"></sample-content>
         </div>
@@ -45,43 +44,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       setup(function() {
         scrollHeaderPanel = fixture('trivialProgress');
         toolbar = Polymer.dom(scrollHeaderPanel).querySelector('paper-toolbar');
+        scrollHeaderPanel.measureHeaderHeight();
+        scrollHeaderPanel.scroll(0);
       });
       test('HEADER_STATE_EXPANDED', function(done) {
-        assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_EXPANDED);
+        assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED);
-        scrollHeaderPanel.scroller.scrollTop = 1;
+        scrollHeaderPanel.scroll(1);
         flush(function() {
-          assert.notEqual(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_EXPANDED);
+          assert.notEqual(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED);
           done();
         });
       });
       test('HEADER_STATE_HIDDEN', function(done) {
-        scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 2;
+        scrollHeaderPanel.scroll(toolbar.offsetHeight + 1);
-        flush(function() {
-          assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_HIDDEN);
+        //flush(function() {
+          assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN);
           done();
-        });
+        //});
       });
       test('HEADER_STATE_CONDENSED', function(done) {
-        scrollHeaderPanel._prevScrollTop = toolbar.offsetHeight * 10;
-        scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 5;
+        scrollHeaderPanel.scroll(toolbar.offsetHeight - scrollHeaderPanel.condensedHeaderHeight);
-        flush(function() {
-            assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_CONDENSED);
-            done();
-        });
+        setTimeout(function() {
+          assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED);
+          done();
+        }, 100);
       });
       test('HEADER_STATE_INTERPOLATED', function(done) {
-        scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 0.5;
+        scrollHeaderPanel.scroll(1);
         flush(function() {
-          assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_INTERPOLATED);
+          assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED);
           done();
         });
       });
-<!doctype html>
-<!--
+<!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
@@ -7,9 +6,7 @@ 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>
+--><html><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Tests</title>
@@ -20,8 +17,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     WCT.loadSuites([
       'basic.html',
       'header-state.html',
-      'scroll.html'
+      'scroll.html',
+      'basic.html?dom=shadow',
+      'header-state.html?dom=shadow',
+      'scroll.html?dom=shadow'
     ]);
   </script>
-</body>
-</html>
+
+
+</body></html>
@@ -27,7 +27,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <test-fixture id="trivialProgress">
     <template>
-      <paper-scroll-header-panel>
+      <paper-scroll-header-panel condenses>
         <paper-toolbar>
         </paper-toolbar>
         <div class="content">
@@ -44,6 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       setup(function() {
         scrollHeaderPanel = fixture('trivialProgress');
+        scrollHeaderPanel.measureHeaderHeight();
+      });
+
+      teardown(function() {
+        scrollHeaderPanel.scroll(0);
       });
       test('scroll smoothly', function(done) {
@@ -54,6 +59,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           if (scrollHeaderPanel.scroller.scrollTop === destination) {
             assert.notEqual(adjustments, 0);
             done();
+            return;
           }
           adjustments++;
           setTimeout(check, 0);
@@ -63,18 +69,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       });
       test('condense smoothly', function(done) {
-        scrollHeaderPanel.condenses = true;
-
         flush(function() {
           var destination = 100;
           var adjustments = 0;
           function check() {
-            if (scrollHeaderPanel.headerState === scrollHeaderPanel.HEADER_STATE_CONDENSED) {
+            if (scrollHeaderPanel.headerState === Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED) {
               assert.notEqual(adjustments, 0);
               done();
+              return;
             }
             adjustments++;
-            setTimeout(check, 0);
+            setTimeout(check, 1);
           }
           scrollHeaderPanel.condense(true);
           check();
@@ -82,15 +87,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       });
       test('condense immediately', function(done) {
-        scrollHeaderPanel.condenses = true;
-
         flush(function() {
           scrollHeaderPanel.condense();
-
-          Polymer.Base.async(function() {
-            assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_CONDENSED);
-            done();
-          }, 100);
+          assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED);
+          done();
         });
       });
@@ -103,6 +103,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
             if (scrollHeaderPanel.scroller.scrollTop === 0) {
               assert.notEqual(adjustments, 0);
               done();
+              return;
             }
             adjustments++;
             setTimeout(check, 0);
@@ -75,7 +75,10 @@ Example:
             presentData: function(){
                 var t = this;
-                this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true});
+                try{
+                    this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true});
+                }catch(e){}
+
                 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 18,
@@ -111,7 +114,7 @@ Example:
                     t._component.map._onResize();
                     t._component.map.invalidateSize(false);
                     t._component.map.fitBounds(coordinates);
-                }, 1000)
+                }, 1)
             }
         };