From 4dc5d83d93bf8d0dedf1fea14f68cdc4f025b49a Mon Sep 17 00:00:00 2001
From: Sam <sam@jig.space>
Date: Thu, 26 Apr 2018 11:50:11 +1000
Subject: [PATCH 1/6] Port to pure 2.0 component.

---
 PUBLISH.md                |   6 +-
 bower.json                |  37 +-
 iron-swipeable-pages.html | 841 +++++++++++++++++++-------------------
 3 files changed, 451 insertions(+), 433 deletions(-)

diff --git a/PUBLISH.md b/PUBLISH.md
index 6e216f2..b24fa65 100644
--- a/PUBLISH.md
+++ b/PUBLISH.md
@@ -1,14 +1,14 @@
 ## Registering to Bower
 
-`bower register iron-swipeable-pages git://github.com/GeoloeG/iron-swipeable-pages.git`
+`bower register iron-swipeable-pages git://github.com/socceroos/iron-swipeable-pages.git`
 
 ## Registering to Gemnasium
 
-https://gemnasium.com/GeoloeG/
+https://gemnasium.com/socceroos/
 
 ## Registering to Waffle
 
-https://waffle.io/GeoloeG/iron-swipeable-pages
+https://waffle.io/socceroos/iron-swipeable-pages
 
 ## Registering to Travis
 
diff --git a/bower.json b/bower.json
index da5f246..03108bf 100644
--- a/bower.json
+++ b/bower.json
@@ -1,10 +1,11 @@
 {
   "name": "iron-swipeable-pages",
-  "version": "1.2.10",
+  "version": "2.0",
   "authors": [
-    "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>"
+    "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>",
+    "Sam Duff <skduff@gmail.com>"
   ],
-  "description": "[Polymer 1.x] Element that enables switching between different pages by swiping gesture.",
+  "description": "[Polymer 2.x] Element that enables switching between different pages by swiping gesture.",
   "keywords": [
     "web-component",
     "web-components",
@@ -26,30 +27,30 @@
   "private": false,
   "repository": {
     "type": "git",
-    "url": "git://github.com/GeoloeG/iron-swipeable-pages.git"
+    "url": "git://github.com/socceroos/iron-swipeable-pages.git"
   },
   "license": "MIT",
-  "homepage": "https://github.com/GeoloeG/iron-swipeable-pages/",
+  "homepage": "https://github.com/socceroos/iron-swipeable-pages/",
   "ignore": [
     "/.*",
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^1.4.0"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^2.0.0"
   },
   "devDependencies": {
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
     "web-component-tester": "^4.0.0",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^1.1.0",
-    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
-    "paper-input": "PolymerElements/paper-input#^1.1.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^1.3.0",
-    "app-route": "PolymerElements/app-route#v1.0.1",
-    "dom-repeat-n": "dom-repeat-n#^1.0.0"
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^2.1.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "app-route": "PolymerElements/app-route#v2.0.0",
+    "dom-repeat-n": "dom-repeat-n#^2.0.0"
   }
 }
diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html
index 2ab4deb..62eabbf 100644
--- a/iron-swipeable-pages.html
+++ b/iron-swipeable-pages.html
@@ -1,80 +1,54 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../iron-selector/iron-selectable.html">
 
-<!--
-`<iron-swipeable-pages>` manages a set of pages and and provides the ability to switch
-between them by swiping gesture.
-
-Example:
-
-    <iron-swipeable-pages selected="0">
-      <div>One</div>
-      <div>Two</div>
-      <div>Three</div>
-    </iron-swipeable-pages>
-
-Additionnally, you can specify the following properties regarding the sensitivity of the swipe,
-the transition used, and the possibility of cycling. For more details, see below.
-
-It could be a good idea to disable text selection on any of the children that you
-want to be swiped:
-
-    .swipe {
-      -moz-user-select: none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      cursor: default;
-    }
-
-Note: if you are using a `<paper-drawer-panel>`, it might be wise to use the following property: edgeSwipeSensitivity.
-
-@demo demo/index.html Standard Demo
-@demo demo/mobile.html Mobile Demo
-@demo demo/conditional.html Conditional Demo
-@demo demo/repeat.html Configurable Repeat Demo
-@demo demo/drawerpanel.html Drawer Panel Demo
-@demo demo/routing.html Routing Demo
-@demo demo/disabled.html Disabled Demo
-@hero hero.svg
--->
-
 <dom-module id="iron-swipeable-pages">
-  <style>
-    :host {
+  <template>
+    <style>
+      :host {
       position: relative;
       display: block;
       overflow-x: hidden;
-    }
-    :host > ::content > * {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      will-change: left, transform;
-    }
-    :host > ::content > :not(.iron-selected):not(.iron-swiping) {
-      left: -100% !important;
-    }
-  </style>
+      }
+      :host > ::slotted > * {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        will-change: left, transform;
+      }
+      :host > ::slotted > :not(.iron-selected):not(.iron-swiping) {
+        left: -100% !important;
+      }
+    </style>
+
+    <slot></slot>
 
-  <template>
-    <content></content>
   </template>
 
   <script>
-    (function() {
-      Polymer({
-        is: 'iron-swipeable-pages',
-
-        behaviors: [
-          Polymer.IronResizableBehavior,
-          Polymer.IronSelectableBehavior
-        ],
-
-        properties: {
+    /**
+     * `iron-swipeable-pages` Description
+     *
+     * @summary ShortDescription.
+     * @customElement
+     * @polymer
+     * @extends {Polymer.Element}
+     */
+    class IronSwipeablePages extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior], Polymer.Element) {
+      /**
+       * String providing the tag name to register the element under.
+       */
+      static get is() {
+        return 'iron-swipeable-pages';
+      }
+
+      /**
+       * Object describing property-related metadata used by Polymer features
+       */
+      static get properties() {
+        return {
           // as the selected page is the only one visible, activateEvent
           // is both non-sensical and problematic; e.g. in cases where a user
           // handler attempts to change the page and the activateEvent
@@ -180,388 +154,431 @@
             type: Boolean,
             value: false
           }
-
-        },
-
-        observers: [
-          '_onFallbackSelectionChange(fallbackSelection)'
-        ],
-
-        listeners: {
-          'iron-items-changed': '_onItemsChanged',
-          'iron-deselect': '_onIronDeselectItem',
-          'iron-select': '_onIronSelectItem',
-          'track': '_onTrack',
-          'iron-resize': '_onResize'
-        },
-
-        // Element Lifecycle
-
-        ready: function() {
+        };
+      }
+
+      /**
+       * Instance of the element is created/upgraded. Use: initializing state,
+       * set up event listeners, create shadow dom.
+       * @constructor
+       */
+      constructor() {
+        super();
+      }
+
+      /**
+       * Use for one-time configuration of your component after local DOM is initialized. 
+       */
+      ready() {
+        super.ready();
+
+        Polymer.RenderStatus.afterNextRender(this, function() {
           this.setScrollDirection('y');
           this._animatedPages = [];
-        },
-
-        // Element page set up
-
-        _onItemsChanged: function(event) {
-          var mutations = event.detail;
-          for (var i = 0; i < mutations.addedNodes.length; i++) {
-            this._addPage(mutations.addedNodes[i]);
-          }
-          for (var j = 0; j < mutations.removedNodes.length; j++) {
-            this._removePage(mutations.removedNodes[j]);
-          }
-        },
-
-        _addPage: function(page) {
-            if (!page || page.nodeType !== Node.ELEMENT_NODE)
-              return;
-            page.setAttribute('aria-hidden', !page.classList.contains('iron-selected'));
-            this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd');
-            this.listen(page, 'transitionend', '_onTransitionEnd');
-        },
-
-        _removePage: function(page) {
-            if (!page || page.nodeType !== Node.ELEMENT_NODE)
-              return;
-            this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd');
-            this.unlisten(page, 'transitionend', '_onTransitionEnd');
-        },
-
-        _onFallbackSelectionChange: function(event) {
-          if (!this.fallbackSelection) {
-            this.unlisten(this, 'dom-change', '_onDomChange');
-          }
-          else {
-            this.listen(this, 'dom-change', '_onDomChange');
-          }
-        },
-
-        _onDomChange: function(event) {
-          if ( this.selectedItem && this.selectedItem.offsetWidth == 0 ) {
-            this.selected = this.fallbackSelection;
-          }
-        },
-
-        // Element tracking
-        _onTrack: function(event) {
-          var track = event.detail;
+        });
+      }
+
+      /**
+        * Called every time the element is inserted into the DOM. Useful for 
+        * running setup code, such as fetching resources or rendering.
+        * Generally, you should try to delay work until this time.
+        */
+      connectedCallback() {
+        super.connectedCallback();
+      
+        this.addEventListener('iron-resize', e => _onResize);
+        this.addEventListener('iron-items-changed', e => _onItemsChanged);
+        this.addEventListener('iron-deselect', e => _onIronDeselectItem);
+        this.addEventListener('iron-select', e => _onIronSelectItem);
+        this.addEventListener('track', e => _onTrack);
+      }
+
+      /**
+        * Called every time the element is removed from the DOM. Useful for 
+        * running clean up code (removing event listeners, etc.).
+        */
+      disconnectedCallback() {
+        super.disconnectedCallback();
+      
+        this.removeEventListener('iron-resize', e => _onResize);
+        this.removeEventListener('iron-items-changed', e => _onItemsChanged);
+        this.removeEventListener('iron-deselect', e => _onIronDeselectItem);
+        this.removeEventListener('iron-select', e => _onIronSelectItem);
+        this.removeEventListener('track', e => _onTrack);
+      }
+
+      /**
+        * Array of strings describing multi-property observer methods and their
+        * dependant properties
+        */
+      static get observers() {
+        return [
+        '_onFallbackSelectionChange(fallbackSelection)'
+        ];
+      }
+
+      // Element page set up
+
+      _onItemsChanged(event) {
+        var mutations = event.detail;
+        for (var i = 0; i < mutations.addedNodes.length; i++) {
+          this._addPage(mutations.addedNodes[i]);
+        }
+        for (var j = 0; j < mutations.removedNodes.length; j++) {
+          this._removePage(mutations.removedNodes[j]);
+        }
+      }
 
-          if (this._isSwipeDisabled() || (this.noCycle && !this._canCycle(track))) {
+      _addPage(page) {
+          if (!page || page.nodeType !== Node.ELEMENT_NODE)
             return;
-          }
+          page.setAttribute('aria-hidden', !page.classList.contains('iron-selected'));
+          this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd');
+          this.listen(page, 'transitionend', '_onTransitionEnd');
+      }
 
-          if ((track.x - track.dx) < this.edgeSwipeSensitivity || (track.x - track.dx) > this.offsetWidth - this.edgeSwipeSensitivity) {
+      _removePage(page) {
+          if (!page || page.nodeType !== Node.ELEMENT_NODE)
             return;
-          }
+          this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd');
+          this.unlisten(page, 'transitionend', '_onTransitionEnd');
+      }
 
-          if (track.state === 'start' && Math.abs(track.dy) < Math.abs(track.dx)) {
-            // if we don't have at least 2 items, no need to swipe...
-            if (this.items.length < 2) {
-              return;
-            }
-            this._trackStart(track);
+      _onFallbackSelectionChange(event) {
+        if (!this.fallbackSelection) {
+          this.unlisten(this, 'dom-change', '_onDomChange');
+        }
+        else {
+          this.listen(this, 'dom-change', '_onDomChange');
+        }
+      }
 
-            this._swipeStarted = true;
-          } else if (track.state === 'track' && this._swipeStarted) {
-            this._trackMove(track);
-          } else if (track.state === 'end' && this._swipeStarted) {
-            this._trackEnd(track);
-          }
-        },
+      _onDomChange(event) {
+        if ( this.selectedItem && this.selectedItem.offsetWidth == 0 ) {
+          this.selected = this.fallbackSelection;
+        }
+      }
 
-        _isSwipeDisabled: function() {
-          return this.disabled || this.swipeDisabled;
-        },
+      // Element tracking
+      _onTrack(event) {
+        var track = event.detail;
 
-        _trackStart: function(trackData) {
-          if (this._transitionRunning) {
-            // reset pages state
-            this._resetPages();
-          }
-          this._setUpSwipePages();
-          this._animatePages(trackData.dx);
-          this._switchPageIfNecessary(trackData.dx);
-          // Prevent regular touchmove event (disables vertical scroll)
-          window.addEventListener('touchmove', this._preventTouchMove);
-        },
-
-        _trackMove: function(trackData) {
-          this._animatePages(trackData.dx);
-          this._switchPageIfNecessary(trackData.dx);
-        },
-
-        _trackEnd: function(trackData) {
-          if (!this._swipeStarted) {
-            return;
-          }
-          // Activate transition
-          for (var i = 0; i < this._animatedPages.length; i++) {
-            this._animatedPages[i].style.webkitTransition = this._computeTransition(1);
-            this._animatedPages[i].style.transition = this._computeTransition(1);
-          }
-          this._transitionRunning = true;
-
-          // The element is swiped away if the swiping get passed the treshold.
-          this._completeSwipe = Math.abs(trackData.dx) > this._getOffsetWidth() * this.threshold;
-          if (this._completeSwipe) {
-            this.isGesture = true;
-            var direction = trackData.dx > 0;
-            // we are swipping, therefore update selected
-            direction ? this._selectPage(this._leftCandidate) : this._selectPage(this._rightCandidate);
-            // trigger the animation in the proper direction
-            this._animatePages(direction ? this._getOffsetWidth() : -this._getOffsetWidth());
-          } else {
-            this._animatePages(0);
-          }
-          // Enable regular touchmove event (enables vertical scroll again)
-          window.removeEventListener('touchmove', this._preventTouchMove);
-        },
+        if (this._isSwipeDisabled() || (this.noCycle && !this._canCycle(track))) {
+          return;
+        }
 
-        _preventTouchMove: function (e) {
-          return e && e.preventDefault();
-        },
+        if ((track.x - track.dx) < this.edgeSwipeSensitivity || (track.x - track.dx) > this.offsetWidth - this.edgeSwipeSensitivity) {
+          return;
+        }
 
-        _onIronDeselectItem: function(event) {
-          // Prevent bubbling of same event on child elements
-          if (event.target !== this) {
+        if (track.state === 'start' && Math.abs(track.dy) < Math.abs(track.dx)) {
+          // if we don't have at least 2 items, no need to swipe...
+          if (this.items.length < 2) {
             return;
           }
+          this._trackStart(track);
 
-          this._lastIndex = this.indexOf(event.detail.item);
-        },
+          this._swipeStarted = true;
+        } else if (track.state === 'track' && this._swipeStarted) {
+          this._trackMove(track);
+        } else if (track.state === 'end' && this._swipeStarted) {
+          this._trackEnd(track);
+        }
+      }
 
-        _onIronSelectItem: function(event) {
-          // Prevent bubbling of same event on child elements
-          if (event.target !== this) {
-            return;
-          }
+      _isSwipeDisabled() {
+        return this.disabled || this.swipeDisabled;
+      }
 
-          // might happen at init of the component when first selected value is set and ready not called....
-          // or when a "selected" page disappear from the dom because of a "dom-if" with restamp option active
-          if (this._lastIndex === undefined || this._lastIndex === -1) {
-            return;
-          }
-          var index = this.indexOf(event.detail.item);
+      _trackStart(trackData) {
+        if (this._transitionRunning) {
+          // reset pages state
+          this._resetPages();
+        }
+        this._setUpSwipePages();
+        this._animatePages(trackData.dx);
+        this._switchPageIfNecessary(trackData.dx);
+        // Prevent regular touchmove event (disables vertical scroll)
+        window.addEventListener('touchmove', this._preventTouchMove);
+      }
+
+      _trackMove(trackData) {
+        this._animatePages(trackData.dx);
+        this._switchPageIfNecessary(trackData.dx);
+      }
+
+      _trackEnd(trackData) {
+        if (!this._swipeStarted) {
+          return;
+        }
+        // Activate transition
+        for (var i = 0; i < this._animatedPages.length; i++) {
+          this._animatedPages[i].style.webkitTransition = this._computeTransition(1);
+          this._animatedPages[i].style.transition = this._computeTransition(1);
+        }
+        this._transitionRunning = true;
+
+        // The element is swiped away if the swiping get passed the treshold.
+        this._completeSwipe = Math.abs(trackData.dx) > this._getOffsetWidth() * this.threshold;
+        if (this._completeSwipe) {
+          this.isGesture = true;
+          var direction = trackData.dx > 0;
+          // we are swipping, therefore update selected
+          direction ? this._selectPage(this._leftCandidate) : this._selectPage(this._rightCandidate);
+          // trigger the animation in the proper direction
+          this._animatePages(direction ? this._getOffsetWidth() : -this._getOffsetWidth());
+        } else {
+          this._animatePages(0);
+        }
+        // Enable regular touchmove event (enables vertical scroll again)
+        window.removeEventListener('touchmove', this._preventTouchMove);
+      }
+
+      _preventTouchMove (e) {
+        return e && e.preventDefault();
+      }
+
+      _onIronDeselectItem(event) {
+        // Prevent bubbling of same event on child elements
+        if (event.target !== this) {
+          return;
+        }
+
+        this._lastIndex = this.indexOf(event.detail.item);
+      }
+
+      _onIronSelectItem(event) {
+        // Prevent bubbling of same event on child elements
+        if (event.target !== this) {
+          return;
+        }
+
+        // might happen at init of the component when first selected value is set and ready not called....
+        // or when a "selected" page disappear from the dom because of a "dom-if" with restamp option active
+        if (this._lastIndex === undefined || this._lastIndex === -1) {
+          return;
+        }
+        var index = this.indexOf(event.detail.item);
 
-          if (this._completeSwipe) {
-            // we just need to reset the flag, the transformation happened already by swiping
-            this._completeSwipe = false;
+        if (this._completeSwipe) {
+          // we just need to reset the flag, the transformation happened already by swiping
+          this._completeSwipe = false;
+        } else {
+          // check if a transition is currently running
+          if (this._transitionRunning) {
+            // reset pages state and we don't trigger any new animation because lastIndex is not valid anymore
+            this._resetPages();
           } else {
-            // check if a transition is currently running
-            if (this._transitionRunning) {
-              // reset pages state and we don't trigger any new animation because lastIndex is not valid anymore
-              this._resetPages();
-            } else {
-              // reset the animated page list
-              this._animatedPages = [];
-              // skipped is used to filter the hidden element since they have a width == 0
-              // we use a negative value if we translate to the right
-              var skipped = 0;
-              // in this case, selected has been modify w/o swiping, we need to apply the transformation
-
-              // This stuff supports carousel style wrap-around animation
-              var translateRight;
-              var virtualLastIndex = this._lastIndex;
-              var virtualIndex = index;
-              var len = this.items.length;
-
-              if (index == 0 && this._lastIndex == len - 1) {
-                // wrap-around
-                translateRight = true;
-                if (this.carousel) {
-                  translateRight = false;
-                  virtualIndex = len;
-                }
-              }
-              else if (index == len - 1 && this._lastIndex == 0) {
-                // wrap-around
+            // reset the animated page list
+            this._animatedPages = [];
+            // skipped is used to filter the hidden element since they have a width == 0
+            // we use a negative value if we translate to the right
+            var skipped = 0;
+            // in this case, selected has been modify w/o swiping, we need to apply the transformation
+
+            // This stuff supports carousel style wrap-around animation
+            var translateRight;
+            var virtualLastIndex = this._lastIndex;
+            var virtualIndex = index;
+            var len = this.items.length;
+
+            if (index == 0 && this._lastIndex == len - 1) {
+              // wrap-around
+              translateRight = true;
+              if (this.carousel) {
                 translateRight = false;
-                if (this.carousel) {
-                  translateRight = true;
-                  virtualLastIndex = len;
-                }
+                virtualIndex = len;
               }
-              else if (index > this._lastIndex) {
-                translateRight = false;
-              }
-              else {
+            }
+            else if (index == len - 1 && this._lastIndex == 0) {
+              // wrap-around
+              translateRight = false;
+              if (this.carousel) {
                 translateRight = true;
+                virtualLastIndex = len;
               }
+            }
+            else if (index > this._lastIndex) {
+              translateRight = false;
+            }
+            else {
+              translateRight = true;
+            }
 
-              if (translateRight) {
-                // we translate to the right
-                for (var i = virtualLastIndex; i >= virtualIndex; i--) {
-                  var item = this.items[i % len];
-                  this._initPage(
-                    item,
-                    this._computeTransition(virtualLastIndex - virtualIndex),
-                    this._getOffsetWidth()*(i - skipped - virtualLastIndex));
-                  // Need for dom.flush()?
-                  if (item.offsetWidth == 0) {
-                    this._resetPage(item);
-                    skipped--;
-                  }
+            if (translateRight) {
+              // we translate to the right
+              for (var i = virtualLastIndex; i >= virtualIndex; i--) {
+                var item = this.items[i % len];
+                this._initPage(
+                  item,
+                  this._computeTransition(virtualLastIndex - virtualIndex),
+                  this._getOffsetWidth()*(i - skipped - virtualLastIndex));
+                // Need for dom.flush()?
+                if (item.offsetWidth == 0) {
+                  this._resetPage(item);
+                  skipped--;
                 }
-              } else {
-                skipped = 0;
-                // we translate to the left
-                for (var j = virtualLastIndex; j <= virtualIndex; j++) {
-                  var item = this.items[j % len];
-                  this._initPage(
-                    item,
-                    this._computeTransition(virtualIndex - virtualLastIndex),
-                    this._getOffsetWidth()*(j - skipped - virtualLastIndex));
-                  // Need for dom.flush()?
-                  if (item.offsetWidth == 0) {
-                    this._resetPage(item);
-                    skipped++;
-                  }
+              }
+            } else {
+              skipped = 0;
+              // we translate to the left
+              for (var j = virtualLastIndex; j <= virtualIndex; j++) {
+                var item = this.items[j % len];
+                this._initPage(
+                  item,
+                  this._computeTransition(virtualIndex - virtualLastIndex),
+                  this._getOffsetWidth()*(j - skipped - virtualLastIndex));
+                // Need for dom.flush()?
+                if (item.offsetWidth == 0) {
+                  this._resetPage(item);
+                  skipped++;
                 }
               }
-              this._transitionRunning = true;
-
-              // before animating, we need to be sure style are updated correctly
-              this.async( function() {
-                this._animatePages((virtualLastIndex - virtualIndex + skipped) * this._getOffsetWidth());
-              });
             }
-          }
-        },
+            this._transitionRunning = true;
 
-        // Element page management
-        _setUpSwipePages: function() {
-          // reset the animated page list
-          this._animatedPages = [];
-          // selected page
-          this._initPage(this.selectedItem, 'none', 0);
-          // left candidate
-          var skipped = 0;
-          var found = false;
-          while (!found) {
-            var leftIndex = (Number(this.indexOf(this.selectedItem)) - 1 - skipped + this.items.length) % this.items.length;
-            this._leftCandidate = this.items[leftIndex];
-            this._initPage(this._leftCandidate, 'none', -this._getOffsetWidth());
-            // Need for dom.flush()?
-            if (this._leftCandidate.offsetWidth > 0) {
-              found = true;
-            } else {
-              this._resetPage(this._leftCandidate);
-              skipped++;
-            }
+            // before animating, we need to be sure style are updated correctly
+            this.async( function() {
+              this._animatePages((virtualLastIndex - virtualIndex + skipped) * this._getOffsetWidth());
+            });
           }
-          // right candidate
-          skipped = 0;
-          found = false;
-          while (!found) {
-            var rightIndex = (Number(this.indexOf(this.selectedItem)) + 1 + skipped) % this.items.length;
-            this._rightCandidate = this.items[rightIndex];
-            this._initPage(this._rightCandidate, 'none', this._getOffsetWidth());
-            // Need for dom.flush()?
-            if (this._rightCandidate.offsetWidth > 0) {
-              found = true;
-            } else {
-              this._resetPage(this._rightCandidate);
-              skipped++;
-            }
+        }
+      }
+
+      // Element page management
+      _setUpSwipePages() {
+        // reset the animated page list
+        this._animatedPages = [];
+        // selected page
+        this._initPage(this.selectedItem, 'none', 0);
+        // left candidate
+        var skipped = 0;
+        var found = false;
+        while (!found) {
+          var leftIndex = (Number(this.indexOf(this.selectedItem)) - 1 - skipped + this.items.length) % this.items.length;
+          this._leftCandidate = this.items[leftIndex];
+          this._initPage(this._leftCandidate, 'none', -this._getOffsetWidth());
+          // Need for dom.flush()?
+          if (this._leftCandidate.offsetWidth > 0) {
+            found = true;
+          } else {
+            this._resetPage(this._leftCandidate);
+            skipped++;
           }
-        },
-
-        // prepare the page for animation and add it to the list of pages to be animated
-        _initPage: function(page, transition, left) {
-          if (!page) {
-            return;
+        }
+        // right candidate
+        skipped = 0;
+        found = false;
+        while (!found) {
+          var rightIndex = (Number(this.indexOf(this.selectedItem)) + 1 + skipped) % this.items.length;
+          this._rightCandidate = this.items[rightIndex];
+          this._initPage(this._rightCandidate, 'none', this._getOffsetWidth());
+          // Need for dom.flush()?
+          if (this._rightCandidate.offsetWidth > 0) {
+            found = true;
+          } else {
+            this._resetPage(this._rightCandidate);
+            skipped++;
           }
-          page.style.left = left + "px";
-          page.style.webkitTransition = transition;
-          page.style.transition = transition;
-          this.toggleClass('iron-swiping', true, page);
+        }
+      }
 
-          this._animatedPages.push(page);
-        },
+      // prepare the page for animation and add it to the list of pages to be animated
+      _initPage(page, transition, left) {
+        if (!page) {
+          return;
+        }
+        page.style.left = left + "px";
+        page.style.webkitTransition = transition;
+        page.style.transition = transition;
+        this.toggleClass('iron-swiping', true, page);
 
-        _animatePages: function(x) {
-          for (var i = 0; i < this._animatedPages.length; i++) {
-            this.translate3d(x+'px', '0px', '0px', this._animatedPages[i]);
-          }
-        },
-
-        // this function is useful if only 2 pages are available and we need to switch the next/previous page
-        // on the left/right side depending on the direction of the swipe given with `dx`
-        _switchPageIfNecessary: function(dx) {
-          if (this._leftCandidate && this._rightCandidate && this._leftCandidate === this._rightCandidate) {
-            var direction = dx > 0 ? -1 : 1;
-            this._rightCandidate.style.left = (direction * this._getOffsetWidth()) + "px";
-          }
-        },
-
-        _selectPage: function(page) {
-          var index = this.indexOf(page);
-          // TODO: should be replaced with this.selectIndex when merged in master:
-          // https://github.com/PolymerElements/iron-selector/issues/87
-          this.selected = this._indexToValue(index);
-        },
-
-        _resetPage: function(page) {
-          page.style.left = "0px";
-          page.style.webkitTransition = 'none';
-          page.style.transition = 'none';
-          this.toggleClass('iron-swiping', false, page);
-
-          this._animatedPages.pop();
-        },
-
-        // remove the iron-swiping class and transition
-        _resetPages: function() {
-          for (var i = 0; i < this._animatedPages.length; i++) {
-            this._animatedPages[i].style.left = '0px';
-            this._animatedPages[i].style.webkitTransition = 'none';
-            this._animatedPages[i].style.transition = 'none';
-            this._animatedPages[i].setAttribute('aria-hidden', !this._animatedPages[i].classList.contains('iron-selected'));
-            this.toggleClass('iron-swiping', false, this._animatedPages[i]);
-            this.transform('none', this._animatedPages[i]);
-          }
-          this._transitionRunning = false;
-          this._swipeStarted = false;
-          this.isGesture = false;
-        },
+        this._animatedPages.push(page);
+      }
 
-        _onTransitionEnd: function(event) {
-          // reset pages state
-          this._resetPages();
-        },
+      _animatePages(x) {
+        for (var i = 0; i < this._animatedPages.length; i++) {
+          this.translate3d(x+'px', '0px', '0px', this._animatedPages[i]);
+        }
+      }
+
+      // this function is useful if only 2 pages are available and we need to switch the next/previous page
+      // on the left/right side depending on the direction of the swipe given with `dx`
+      _switchPageIfNecessary(dx) {
+        if (this._leftCandidate && this._rightCandidate && this._leftCandidate === this._rightCandidate) {
+          var direction = dx > 0 ? -1 : 1;
+          this._rightCandidate.style.left = (direction * this._getOffsetWidth()) + "px";
+        }
+      }
+
+      _selectPage(page) {
+        var index = this.indexOf(page);
+        // TODO: should be replaced with this.selectIndex when merged in master:
+        // https://github.com/PolymerElements/iron-selector/issues/87
+        this.selected = this._indexToValue(index);
+      }
+
+      _resetPage(page) {
+        page.style.left = "0px";
+        page.style.webkitTransition = 'none';
+        page.style.transition = 'none';
+        this.toggleClass('iron-swiping', false, page);
+
+        this._animatedPages.pop();
+      }
+
+      // remove the iron-swiping class and transition
+      _resetPages() {
+        for (var i = 0; i < this._animatedPages.length; i++) {
+          this._animatedPages[i].style.left = '0px';
+          this._animatedPages[i].style.webkitTransition = 'none';
+          this._animatedPages[i].style.transition = 'none';
+          this._animatedPages[i].setAttribute('aria-hidden', !this._animatedPages[i].classList.contains('iron-selected'));
+          this.toggleClass('iron-swiping', false, this._animatedPages[i]);
+          this.transform('none', this._animatedPages[i]);
+        }
+        this._transitionRunning = false;
+        this._swipeStarted = false;
+        this.isGesture = false;
+      }
+
+      _onTransitionEnd(event) {
+        // reset pages state
+        this._resetPages();
+      }
+
+      // Element utility functions
+      _canCycle(trackData) {
+        var index = this._valueToIndex(this.selected);
+
+        if (index === 0 && trackData.dx > 0) {
+          return false;
+        }
+        if (index === this.items.length - 1 && trackData.dx < 0) {
+          return false;
+        }
+        return true;
+      }
+
+      _getOffsetWidth () {
+        this._offsetWidth = this._offsetWidth || this.offsetWidth + (2 * this.padding);
+        return this._offsetWidth;
+      }
+
+      _onResize() {
+        this._offsetWidth = this.offsetWidth + (2 * this.padding);
+      }
+
+      _computeTransition(factor) {
+        var duration = factor * this.transitionDuration;
+        if (this.maximumTransitionDuration) {
+          duration = Math.min(this.maximumTransitionDuration, duration);
+        }
+        return 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
+      }
 
-        // Element utility functions
-        _canCycle: function(trackData) {
-          var index = this._valueToIndex(this.selected);
+    }
 
-          if (index === 0 && trackData.dx > 0) {
-            return false;
-          }
-          if (index === this.items.length - 1 && trackData.dx < 0) {
-            return false;
-          }
-          return true;
-        },
-
-        _getOffsetWidth: function () {
-          this._offsetWidth = this._offsetWidth || this.offsetWidth + (2 * this.padding);
-          return this._offsetWidth;
-        },
-
-        _onResize: function() {
-          this._offsetWidth = this.offsetWidth + (2 * this.padding);
-        },
-
-        _computeTransition: function(factor) {
-          var duration = factor * this.transitionDuration;
-          if (this.maximumTransitionDuration) {
-            duration = Math.min(this.maximumTransitionDuration, duration);
-          }
-          return 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
-        }
-      });
-    }());
+    window.customElements.define(IronSwipeablePages.is, IronSwipeablePages);
   </script>
-</dom-module>
+</dom-module>
\ No newline at end of file

From 1d79c1921b4c4c51b361593039043b9d26ff04f4 Mon Sep 17 00:00:00 2001
From: Sam <sam@jig.space>
Date: Thu, 26 Apr 2018 12:34:31 +1000
Subject: [PATCH 2/6] New 2.0.1 release

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 03108bf..068d3da 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-swipeable-pages",
-  "version": "2.0",
+  "version": "2.0.1",
   "authors": [
     "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>",
     "Sam Duff <skduff@gmail.com>"

From 8c0c59c0e98f43448ec7fe407b9a992313adea8c Mon Sep 17 00:00:00 2001
From: Sam <sam@jig.space>
Date: Thu, 26 Apr 2018 12:35:11 +1000
Subject: [PATCH 3/6] Added Gesture Events dependency, fixed listener bugs.

---
 iron-swipeable-pages.html | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html
index 62eabbf..cfa1ea1 100644
--- a/iron-swipeable-pages.html
+++ b/iron-swipeable-pages.html
@@ -1,4 +1,5 @@
-<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
 
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../iron-selector/iron-selectable.html">
@@ -11,14 +12,14 @@
       display: block;
       overflow-x: hidden;
       }
-      :host > ::slotted > * {
+      :host > ::slotted(*) {
         position: absolute;
         width: 100%;
         height: 100%;
         overflow-y: auto;
         will-change: left, transform;
       }
-      :host > ::slotted > :not(.iron-selected):not(.iron-swiping) {
+      :host > ::slotted(:not(.iron-selected):not(.iron-swiping)) {
         left: -100% !important;
       }
     </style>
@@ -36,7 +37,7 @@
      * @polymer
      * @extends {Polymer.Element}
      */
-    class IronSwipeablePages extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior], Polymer.Element) {
+    class IronSwipeablePages extends Polymer.GestureEventListeners(Polymer.mixinBehaviors([Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior], Polymer.Element)) {
       /**
        * String providing the tag name to register the element under.
        */
@@ -186,11 +187,11 @@
       connectedCallback() {
         super.connectedCallback();
       
-        this.addEventListener('iron-resize', e => _onResize);
-        this.addEventListener('iron-items-changed', e => _onItemsChanged);
-        this.addEventListener('iron-deselect', e => _onIronDeselectItem);
-        this.addEventListener('iron-select', e => _onIronSelectItem);
-        this.addEventListener('track', e => _onTrack);
+        this.addEventListener('iron-resize', e => this._onResize(e));
+        this.addEventListener('iron-items-changed', e => this._onItemsChanged(e));
+        this.addEventListener('iron-deselect', e => this._onIronDeselectItem(e));
+        this.addEventListener('iron-select', e => this._onIronSelectItem(e));
+        Polymer.Gestures.addListener(this, 'track', e => this._onTrack(e));
       }
 
       /**
@@ -200,11 +201,11 @@
       disconnectedCallback() {
         super.disconnectedCallback();
       
-        this.removeEventListener('iron-resize', e => _onResize);
-        this.removeEventListener('iron-items-changed', e => _onItemsChanged);
-        this.removeEventListener('iron-deselect', e => _onIronDeselectItem);
-        this.removeEventListener('iron-select', e => _onIronSelectItem);
-        this.removeEventListener('track', e => _onTrack);
+        this.removeEventListener('iron-resize', e => this._onResize(e));
+        this.removeEventListener('iron-items-changed', e => this._onItemsChanged(e));
+        this.removeEventListener('iron-deselect', e => this._onIronDeselectItem(e));
+        this.removeEventListener('iron-select', e => this._onIronSelectItem(e));
+        this.removeEventListener('track', e => this._onTrack(e));
       }
 
       /**

From 8fffb69a8015f10efa0b5c37e871760038f6c0fa Mon Sep 17 00:00:00 2001
From: Sam <sam@jig.space>
Date: Thu, 26 Apr 2018 13:56:26 +1000
Subject: [PATCH 4/6] Revert

---
 PUBLISH.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/PUBLISH.md b/PUBLISH.md
index b24fa65..6e216f2 100644
--- a/PUBLISH.md
+++ b/PUBLISH.md
@@ -1,14 +1,14 @@
 ## Registering to Bower
 
-`bower register iron-swipeable-pages git://github.com/socceroos/iron-swipeable-pages.git`
+`bower register iron-swipeable-pages git://github.com/GeoloeG/iron-swipeable-pages.git`
 
 ## Registering to Gemnasium
 
-https://gemnasium.com/socceroos/
+https://gemnasium.com/GeoloeG/
 
 ## Registering to Waffle
 
-https://waffle.io/socceroos/iron-swipeable-pages
+https://waffle.io/GeoloeG/iron-swipeable-pages
 
 ## Registering to Travis
 

From bf3bab934392ab7a9acacbd40916dfc94eda193f Mon Sep 17 00:00:00 2001
From: Sam <sam@jig.space>
Date: Thu, 26 Apr 2018 14:57:09 +1000
Subject: [PATCH 5/6] Fixed bower for pull request.

---
 bower.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bower.json b/bower.json
index 068d3da..01ee495 100644
--- a/bower.json
+++ b/bower.json
@@ -27,10 +27,10 @@
   "private": false,
   "repository": {
     "type": "git",
-    "url": "git://github.com/socceroos/iron-swipeable-pages.git"
+    "url": "git://github.com/GeoloeG/iron-swipeable-pages.git"
   },
   "license": "MIT",
-  "homepage": "https://github.com/socceroos/iron-swipeable-pages/",
+  "homepage": "https://github.com/GeoloeG/iron-swipeable-pages/",
   "ignore": [
     "/.*",
     "/test/"

From 39981804a91a05a96be43e92bd21c4d5453b0c3c Mon Sep 17 00:00:00 2001
From: Ben Hermans <benhermans50@gmail.com>
Date: Sat, 1 Sep 2018 02:21:14 +0200
Subject: [PATCH 6/6] Converted to a Polymer 3 element

---
 .gitignore                |   2 +
 .travis.yml               |  11 +-
 bower.json                |  56 ---
 demo/conditional.html     | 265 +++++-----
 demo/disabled.html        | 118 +++--
 demo/drawerpanel.html     | 158 +++---
 demo/index.html           | 115 ++---
 demo/mobile.html          | 120 +++--
 demo/repeat.html          | 139 +++---
 demo/routing.html         | 216 +++++----
 index.html                |  21 +-
 iron-swipeable-pages.html | 585 ----------------------
 iron-swipeable-pages.js   | 579 ++++++++++++++++++++++
 package-lock.json         | 989 ++++++++++++++++++++++++++++++++++++++
 package.json              |  55 +++
 test/basic-test.html      |  79 +--
 test/index.html           |  38 +-
 17 files changed, 2389 insertions(+), 1157 deletions(-)
 delete mode 100644 bower.json
 delete mode 100644 iron-swipeable-pages.html
 create mode 100644 iron-swipeable-pages.js
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
index 66595f4..aba835a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 bower_components/
 tmp-*
+
+node_modules
diff --git a/.travis.yml b/.travis.yml
index 8137a3c..cc2912a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,8 +1,9 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
+  - npm install
+  - npm install -g polylint
+  - npm install -g polymer-cli
   - polylint
 env:
   global:
@@ -10,12 +11,12 @@ env:
     - secure: nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA=
 node_js: stable
 addons:
-  firefox: '46.0'
+  chrome: stable
+  firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
       - google-chrome-stable
-script:
-  - xvfb-run wct
+script: xvfb-run polymer test --module-resolution=node --npm
 dist: trusty
\ No newline at end of file
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 01ee495..0000000
--- a/bower.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "name": "iron-swipeable-pages",
-  "version": "2.0.1",
-  "authors": [
-    "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>",
-    "Sam Duff <skduff@gmail.com>"
-  ],
-  "description": "[Polymer 2.x] Element that enables switching between different pages by swiping gesture.",
-  "keywords": [
-    "web-component",
-    "web-components",
-    "web",
-    "component",
-    "components",
-    "custom",
-    "element",
-    "polymer",
-    "iron",
-    "page",
-    "pages",
-    "swipe",
-    "swipeable",
-    "content",
-    "mobile"
-  ],
-  "main": "iron-swipeable-pages.html",
-  "private": false,
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/GeoloeG/iron-swipeable-pages.git"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/GeoloeG/iron-swipeable-pages/",
-  "ignore": [
-    "/.*",
-    "/test/"
-  ],
-  "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.0",
-    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^2.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^2.0.0"
-  },
-  "devDependencies": {
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
-    "paper-checkbox": "PolymerElements/paper-checkbox#^2.1.0",
-    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^2.0.0",
-    "paper-input": "PolymerElements/paper-input#^2.0.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
-    "app-route": "PolymerElements/app-route#v2.0.0",
-    "dom-repeat-n": "dom-repeat-n#^2.0.0"
-  }
-}
diff --git a/demo/conditional.html b/demo/conditional.html
index 6d5a4c6..c5ea793 100644
--- a/demo/conditional.html
+++ b/demo/conditional.html
@@ -1,37 +1,40 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: conditional with `dom-if`s</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: conditional with `dom-if`s</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
-    <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-checkbox/paper-checkbox.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+  </script>
 
-    <style is="custom-style">
+  <custom-style>
+    <style>
       body {
         overflow: hidden;
-        @apply(--layout-fullbleed);
-        @apply(--layout-vertical);
+        @apply --layout-fullbleed;
+        @apply --layout-vertical;
       }
 
       span {
         background: var(--paper-grey-500);
-        @apply(--paper-font-title);
+        @apply --paper-font-title;
         padding: 8px;
       }
-  
+
       .checkboxContainer {
-        @apply(--layout-horizontal);
-        @apply(--layout-around-justified);
+        @apply --layout-horizontal;
+        @apply --layout-around-justified;
       }
 
       paper-checkbox:nth-child(1) {
@@ -55,14 +58,18 @@
       }
 
       iron-swipeable-pages {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
         height: 100%;
       }
@@ -72,33 +79,39 @@
         font-size: 2rem;
       }
 
-      iron-swipeable-pages > div {
+      iron-swipeable-pages>div {
         background: var(--paper-grey-500);
-        @apply(--layout-flex);
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-flex;
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
       }
 
       .red {
         background: var(--paper-red-500);
       }
+
       .blue {
         background: var(--paper-blue-500);
       }
+
       .orange {
         background: var(--paper-orange-500);
       }
+
       .green {
         background: var(--paper-green-500);
       }
+
       .purple {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+  </custom-style>
+</head>
+
+<body>
+  <dom-bind>
+    <template>
       <span>You can select which page will be displayed (dom-if do NOT restamp)</span>
       <div class="checkboxContainer">
         <paper-checkbox checked="{{!page11}}"> page 1</paper-checkbox>
@@ -107,26 +120,33 @@
         <paper-checkbox checked="{{!page14}}"> page 4</paper-checkbox>
         <paper-checkbox checked="{{!page15}}"> page 5</paper-checkbox>
       </div>
-      <iron-swipeable-pages 
-        selected="0" 
-        fallback-selection="0"
-        threshold="0.1" force-update>
+      <iron-swipeable-pages selected="0" fallback-selection="0" threshold="0.1" force-update>
         <div class="grey">Page 0</div>
-        <template is="dom-if" if="[[page11]]">
-          <div class="red">Page 1</div>
-        </template>
-        <template is="dom-if" if="[[page12]]">
-          <div class="blue">Page 2</div>
-        </template>
-        <template is="dom-if" if="[[page13]]">
-          <div class="orange">Page 3</div>
-        </template>
-        <template is="dom-if" if="[[page14]]">
-          <div class="green">Page 4</div>
-        </template>
-        <template is="dom-if" if="[[page15]]">
-          <div class="purple">Page 5</div>
-        </template>
+        <dom-if if="[[page11]]">
+          <template>
+            <div class="red">Page 1</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page12]]">
+          <template>
+            <div class="blue">Page 2</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page13]]">
+          <template>
+            <div class="orange">Page 3</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page14]]">
+          <template>
+            <div class="green">Page 4</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page15]]">
+          <template>
+            <div class="purple">Page 5</div>
+          </template>
+        </dom-if>
       </iron-swipeable-pages>
       <span>You can select which page will be displayed (dom-if DO restamp)</span>
       <div class="checkboxContainer">
@@ -136,26 +156,33 @@
         <paper-checkbox checked="{{!page24}}"> page 4</paper-checkbox>
         <paper-checkbox checked="{{!page25}}"> page 5</paper-checkbox>
       </div>
-      <iron-swipeable-pages 
-        selected="0" 
-        fallback-selection="0"
-        threshold="0.1" force-update>
+      <iron-swipeable-pages selected="0" fallback-selection="0" threshold="0.1" force-update>
         <div class="grey">Page 0</div>
-        <template is="dom-if" if="[[page21]]" restamp>
-          <div class="red">Page 1</div>
-        </template>
-        <template is="dom-if" if="[[page22]]" restamp>
-          <div class="blue">Page 2</div>
-        </template>
-        <template is="dom-if" if="[[page23]]" restamp>
-          <div class="orange">Page 3</div>
-        </template>
-        <template is="dom-if" if="[[page24]]" restamp>
-          <div class="green">Page 4</div>
-        </template>
-        <template is="dom-if" if="[[page25]]" restamp>
-          <div class="purple">Page 5</div>
-        </template>
+        <dom-if if="[[page21]]" restamp>
+          <template>
+            <div class="red">Page 1</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page22]]" restamp>
+          <template>
+            <div class="blue">Page 2</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page23]]" restamp>
+          <template>
+            <div class="orange">Page 3</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page24]]" restamp>
+          <template>
+            <div class="green">Page 4</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page25]]" restamp>
+          <template>
+            <div class="purple">Page 5</div>
+          </template>
+        </dom-if>
       </iron-swipeable-pages>
       <span>You can select (with attr-for-selected and fallback-selection) which page will be displayed (dom-if do NOT restamp)</span>
       <div class="checkboxContainer">
@@ -165,27 +192,33 @@
         <paper-checkbox checked="{{!page34}}"> page 4</paper-checkbox>
         <paper-checkbox checked="{{!page35}}"> page 5</paper-checkbox>
       </div>
-      <iron-swipeable-pages 
-        attr-for-selected="page" 
-        fallback-selection="page30"
-        selected="page30" 
-        threshold="0.1">
+      <iron-swipeable-pages attr-for-selected="page" fallback-selection="page30" selected="page30" threshold="0.1">
         <div class="grey" page="page30">Page 0</div>
-        <template is="dom-if" if="[[page31]]">
-          <div class="red" page="page31">Page 1</div>
-        </template>
-        <template is="dom-if" if="[[page32]]">
-          <div class="blue" page="page32">Page 2</div>
-        </template>
-        <template is="dom-if" if="[[page33]]">
-          <div class="orange" page="page33">Page 3</div>
-        </template>
-        <template is="dom-if" if="[[page34]]">
-          <div class="green" page="page34">Page 4</div>
-        </template>
-        <template is="dom-if" if="[[page35]]">
-          <div class="purple" page="page35">Page 5</div>
-        </template>
+        <dom-if if="[[page31]]">
+          <template>
+            <div class="red" page="page31">Page 1</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page32]]">
+          <template>
+            <div class="blue" page="page32">Page 2</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page33]]">
+          <template>
+            <div class="orange" page="page33">Page 3</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page34]]">
+          <template>
+            <div class="green" page="page34">Page 4</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page35]]">
+          <template>
+            <div class="purple" page="page35">Page 5</div>
+          </template>
+        </dom-if>
       </iron-swipeable-pages>
       <span>You can select (with attr-for-selected and fallback-selection) which page will be displayed (dom-if DO restamp)</span>
       <div class="checkboxContainer">
@@ -195,28 +228,36 @@
         <paper-checkbox checked="{{!page44}}"> page 4</paper-checkbox>
         <paper-checkbox checked="{{!page45}}"> page 5</paper-checkbox>
       </div>
-      <iron-swipeable-pages 
-        attr-for-selected="page" 
-        fallback-selection="page40"
-        selected="page40" 
-        threshold="0.1">
+      <iron-swipeable-pages attr-for-selected="page" fallback-selection="page40" selected="page40" threshold="0.1">
         <div class="grey" page="page40">Page 0</div>
-        <template is="dom-if" if="[[page41]]" restamp>
-          <div class="red" page="page41">Page 1</div>
-        </template>
-        <template is="dom-if" if="[[page42]]" restamp>
-          <div class="blue" page="page42">Page 2</div>
-        </template>
-        <template is="dom-if" if="[[page43]]" restamp>
-          <div class="orange" page="page43">Page 3</div>
-        </template>
-        <template is="dom-if" if="[[page44]]" restamp>
-          <div class="green" page="page44">Page 4</div>
-        </template>
-        <template is="dom-if" if="[[page45]]" restamp>
-          <div class="purple" page="page45">Page 5</div>
-        </template>
+        <dom-if if="[[page41]]" restamp>
+          <template>
+            <div class="red" page="page41">Page 1</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page42]]" restamp>
+          <template>
+            <div class="blue" page="page42">Page 2</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page43]]" restamp>
+          <template>
+            <div class="orange" page="page43">Page 3</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page44]]" restamp>
+          <template>
+            <div class="green" page="page44">Page 4</div>
+          </template>
+        </dom-if>
+        <dom-if if="[[page45]]" restamp>
+          <template>
+            <div class="purple" page="page45">Page 5</div>
+          </template>
+        </dom-if>
       </iron-swipeable-pages>
     </template>
-  </body>
-</html>
+  </dom-bind>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/disabled.html b/demo/disabled.html
index d13be93..6b28c77 100644
--- a/demo/disabled.html
+++ b/demo/disabled.html
@@ -1,35 +1,42 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: disabled</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: disabled</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+  </script>
 
-    <style is="custom-style">
+  <custom-style>
+    <style>
       body {
-        @apply(--layout-fullbleed);
-        @apply(--layout-vertical);
+        @apply --layout-fullbleed;
+        @apply --layout-vertical;
       }
 
       iron-swipeable-pages {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
       }
 
@@ -57,34 +64,69 @@
       div:nth-child(5) {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+  </custom-style>
+</head>
 
+<body>
+  <dom-bind>
+    <template>
       <iron-swipeable-pages selected="0" threshold="0.1" disabled>
         <div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div>
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
       </iron-swipeable-pages>
 
     </template>
-  </body>
-</html>
+  </dom-bind>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/drawerpanel.html b/demo/drawerpanel.html
index 2e2c317..06d13cb 100644
--- a/demo/drawerpanel.html
+++ b/demo/drawerpanel.html
@@ -1,46 +1,54 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: mobile with &lt;paper-drawer-panel&gt;</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: mobile with &lt;app-drawer&gt;</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-drawer-panel/paper-drawer-panel.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-checkbox/paper-checkbox.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+    import '@polymer/app-layout/app-drawer/app-drawer.js';
+    import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
+  </script>
 
-    <style is="custom-style">
+  <custom-style>
+    <style>
       body {
         margin: 0;
         height: 100vh;
+        color: white;
+        font-size: 2rem;
       }
 
       iron-swipeable-pages {
         height: 100%;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
       }
 
-      div {
-        color: white;
-        font-size: 2rem;
-      }
-
-      div.drawer {
-        background: var(--paper-grey-500)!important;
+      .drawer {
+        --app-drawer-content-container: {
+          background: var(--paper-grey-500);
+        }
       }
 
       div:nth-child(1) {
@@ -62,37 +70,75 @@
       div:nth-child(5) {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
-      <paper-drawer-panel>
-        <div drawer class="drawer"> Drawer panel... </div>
-        <div main>
-          <iron-swipeable-pages edge-swipe-sensitivity="35" selected="0" threshold="0.1">
-            <div page="page1">
-              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-              <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
-            </div>
-            <div page="page2">
-              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-              <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
-            </div>
-            <div page="page3">
-              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-              <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
-            </div>
-          </iron-swipeable-pages>
-        </div>
-      </paper-drawer-panel>
+  </custom-style>
+</head>
+
+<body>
+  <dom-bind>
+    <template>
+      <app-drawer-layout fullbleed>
+        <app-drawer slot="drawer" class="drawer" position="left">
+          Drawer panel...
+        </app-drawer>
+        <iron-swipeable-pages edge-swipe-sensitivity="35" selected="0" threshold="0.1">
+          <div page="page1">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+              takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+              diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+              et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+              dolor sit amet.</p>
+
+            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+              delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+              sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+              ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+              vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+              luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          </div>
+          <div page="page2">
+            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+              delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+              sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+              ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+              vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+              luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          </div>
+          <div page="page3">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+              consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+              takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+              diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+              et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+              dolor sit amet.</p>
+
+            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
+              eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+              delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+              sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+              ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+              vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+              luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          </div>
+        </iron-swipeable-pages>
+      </app-drawer-layout>
     </template>
-  </body>
-</html>
+  </dom-bind>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 7eaad5c..08c422b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,29 +1,33 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: declarative</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: declarative</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-tabs/paper-tab.html">
-    <link rel="import" href="../../paper-tabs/paper-tabs.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-tabs/paper-tab.js';
+    import '@polymer/paper-tabs/paper-tabs.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+  </script>
 
-    <style is="custom-style">
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
       body {
         @apply --layout-fullbleed;
         @apply --layout-vertical;
       }
 
-      #toolbar1, #toolbar2 {
+      #toolbar1,
+      #toolbar2 {
         background: var(--paper-grey-500);
         @apply --paper-font-headline;
         padding: 8px;
@@ -37,16 +41,20 @@
         @apply --layout-flex;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
       }
 
       .page {
-        height: 100%;        
+        height: 100%;
       }
 
       div {
@@ -75,12 +83,13 @@
       div:nth-child(5) {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+  </custom-style>
+</head>
 
+<body>
+  <dom-bind>
+    <template>
       <div id="toolbar1">
         <button on-click="_onPrevClick1">&lt;&lt;</button>
         Cycling by swipe enabled
@@ -125,34 +134,30 @@
       </iron-swipeable-pages>
 
     </template>
-    <script>
-
-      var scope = document.querySelector('template[is="dom-bind"]');
-      scope.selected1 = 0;
-      scope.selected2 = 0;
-      scope.selected3 = 0;
-
-      scope._onSelectedChanged = function(e) {
-        var target = e.target;
-        target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
-      };
-
-      scope._onPrevClick1 = function() {
-        scope.selected1 = scope.selected1 === 0 ? 4 : (scope.selected1 - 1);
-      };
-
-      scope._onNextClick1 = function() {
-        scope.selected1 = scope.selected1 === 4 ? 0 : (scope.selected1 + 1);
-      };
-
-      scope._onPrevClick2 = function() {
-        scope.selected2 = scope.selected2 === 0 ? 4 : (scope.selected2 - 1);
-      };
-
-      scope._onNextClick2 = function() {
-        scope.selected2 = scope.selected2 === 4 ? 0 : (scope.selected2 + 1);
-      };
-
-    </script>
-  </body>
-</html>
+  </dom-bind>
+  <script>
+    var scope = document.querySelector('dom-bind');
+    scope.selected1 = 0;
+    scope.selected2 = 0;
+    scope.selected3 = 0;
+
+    scope._onSelectedChanged = function (e) {
+      var target = e.target;
+      target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
+    };
+
+    scope._onPrevClick1 = function () {
+      scope.selected1 = scope.selected1 === 0 ? 4 : (scope.selected1 - 1);
+    };
+
+    scope._onNextClick1 = function () {
+      scope.selected1 = scope.selected1 === 4 ? 0 : (scope.selected1 + 1);
+    };
+
+    scope._onPrevClick2 = function () {
+      scope.selected2 = scope.selected2 === 0 ? 4 : (scope.selected2 - 1);
+    };
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/mobile.html b/demo/mobile.html
index d9b1084..98d294a 100644
--- a/demo/mobile.html
+++ b/demo/mobile.html
@@ -1,35 +1,43 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: declarative</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: declarative</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+  </script>
 
-    <style is="custom-style">
+  <cusotm-style>
+    <style>
       body {
-        @apply(--layout-fullbleed);
-        @apply(--layout-vertical);
+        @apply --layout-fullbleed;
+        @apply --layout-vertical;
       }
 
       iron-swipeable-pages {
-        @apply(--layout-flex);
+        @apply --layout-flex;
+        position: static;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
       }
 
@@ -57,34 +65,68 @@
       div:nth-child(5) {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+  </cusotm-style>
+</head>
 
+<body>
+  <dom-bind>
+    <template>
       <iron-swipeable-pages selected="0" threshold="0.1">
         <div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div>
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div>
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
       </iron-swipeable-pages>
-
     </template>
-  </body>
-</html>
+  </dom-bind>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/repeat.html b/demo/repeat.html
index b43cfdf..a6f4a81 100644
--- a/demo/repeat.html
+++ b/demo/repeat.html
@@ -1,55 +1,61 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: configurable</title>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages demo: configurable</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
-    <link rel="import" href="../../paper-tabs/paper-tab.html">
-    <link rel="import" href="../../paper-tabs/paper-tabs.html">
-    <link rel="import" href="../../paper-input/paper-input.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
-    <link rel="import" href="../../dom-repeat-n/dom-repeat-n.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
-    <link rel="import" href="../iron-swipeable-pages.html">
+  <script type="module">
+    import '../iron-swipeable-pages.js';
+    import '@polymer/iron-flex-layout/iron-flex-layout.js';
+    import '@polymer/paper-checkbox/paper-checkbox.js';
+    import '@polymer/paper-tabs/paper-tabs.js';
+    import '@polymer/paper-tabs/paper-tab.js';
+    import '@polymer/paper-input/paper-input.js';
+    import '@polymer/paper-styles/typography.js';
+    import '@polymer/paper-styles/color.js';
+  </script>
 
-    <style is="custom-style">
+  <custom-style>
+    <style>
       body {
         overflow: hidden;
-        @apply(--layout-fullbleed);
-        @apply(--layout-vertical);
+        @apply --layout-fullbleed;
+        @apply --layout-vertical;
       }
 
       iron-swipeable-pages {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
 
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
+      iron-swipeable-pages>* {
+        -webkit-user-select: none;
+        /* Chrome all / Safari all */
+        -moz-user-select: none;
+        /* Firefox all */
+        -ms-user-select: none;
+        /* IE 10+ */
+        user-select: none;
+        /* Likely future */
         cursor: default;
         height: 100%;
       }
 
       div {
         color: white;
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
-        @apply(--paper-font-display4);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
+        @apply --paper-font-display4;
       }
 
       div.checkboxContainer {
-        background: var(--paper-grey-500)!important;
-        @apply(--paper-font-display1);
+        background: var(--paper-grey-500) !important;
+        @apply --paper-font-display1;
       }
 
       div:nth-child(5n+1) {
@@ -71,56 +77,69 @@
       div:nth-child(5n) {
         background: var(--paper-purple-500);
       }
-
     </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+  </custom-style>
+</head>
 
+<body>
+  <dom-bind>
+    <template>
       <paper-input label="Number of pages" type="number" value="{{initCount}}" on-value-changed="_rebootArray"></paper-input>
 
       <paper-tabs selected="{{selected}}" scrollable>
         <paper-tab>Begin Tab</paper-tab>
-        <template is="dom-repeat" items="[[pageArray]]" as="page">
-          <template is="dom-if" if="[[page.checked]]">
-            <paper-tab>Tab [[index]]</paper-tab>
+        <dom-repeat items="[[pageArray]]" as="page">
+          <template>
+            <dom-if if="[[page.checked]]">
+              <template>
+                <paper-tab>Tab [[index]]</paper-tab>
+              </template>
+            </dom-if>
           </template>
-        </template>
+        </dom-repeat>
         <paper-tab>End Tab</paper-tab>
       </paper-tabs>
       <iron-swipeable-pages selected="{{selected}}" threshold="0.1">
         <div>Begin Page</div>
-        <template is="dom-repeat" items="{{pageArray}}" as="page">
-          <template is="dom-if" if="[[page.checked]]">
-            <div>Page [[index]]</div>            
+        <dom-repeat items="{{pageArray}}" as="page">
+          <template>
+            <dom-if if="[[page.checked]]">
+              <template>
+                <div>Page [[index]]</div>
+              </template>
+            </dom-if>
           </template>
-        </template>
+        </dom-repeat>
         <div>End Page</div>
       </iron-swipeable-pages>
       <div class="checkboxContainer">
-        <template is="dom-repeat" items="{{pageArray}}" as="page">
-          <paper-checkbox checked="{{page.checked}}">Page [[index]]</paper-checkbox>
-        </template>
+        <dom-repeat items="{{pageArray}}" as="page">
+          <template>
+            <paper-checkbox checked="{{page.checked}}">Page [[index]]</paper-checkbox>
+          </template>
+        </dom-repeat>
       </div>
 
     </template>
-    <script>
+  </dom-bind>
+  <script>
 
-      var scope = document.querySelector('template[is="dom-bind"]');
-      scope.selected = 0;
-      scope.initCount = 0;
-      scope.pageArray = [];
+    var scope = document.querySelector('dom-bind');
+    scope.selected = 0;
+    scope.initCount = 0;
+    scope.pageArray = [];
 
-      scope._computeCount = function(value) {
-        return Number(value);
-      }
+    scope._computeCount = function (value) {
+      return Number(value);
+    }
 
-      scope._rebootArray = function(event) {
-        scope.pageArray = [];
-        for (var i=0; i < Number(event.detail.value); i++) {
-          scope.push('pageArray', {checked: true});
-        }
+    scope._rebootArray = function (event) {
+      scope.pageArray = [];
+      for (var i = 0; i < Number(event.detail.value); i++) {
+        scope.push('pageArray', { checked: true });
       }
-    </script>
-  </body>
-</html>
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/routing.html b/demo/routing.html
index e60e88b..7a22049 100644
--- a/demo/routing.html
+++ b/demo/routing.html
@@ -1,102 +1,148 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages demo: routing</title>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
-
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="../../paper-styles/typography.html">
-    <link rel="import" href="../../paper-styles/color.html">
-    <link rel="import" href="../../app-route/app-location.html">
-    <link rel="import" href="../../app-route/app-route.html">
-
-    <link rel="import" href="../iron-swipeable-pages.html">
-
-    <style is="custom-style">
-      body {
-        @apply(--layout-fullbleed);
-        @apply(--layout-vertical);
-      }
-
-      iron-swipeable-pages {
-        @apply(--layout-flex);
-      }
-
-      iron-swipeable-pages > * {
-        -webkit-user-select: none;  /* Chrome all / Safari all */
-        -moz-user-select: none;     /* Firefox all */
-        -ms-user-select: none;      /* IE 10+ */
-        user-select: none;          /* Likely future */
-        cursor: default;
-      }
-
-      div {
-        color: white;
-        font-size: 2rem;
-      }
-
-      div:nth-child(1) {
-        background: var(--paper-red-500);
-      }
-
-      div:nth-child(2) {
-        background: var(--paper-blue-500);
-      }
-
-      div:nth-child(3) {
-        background: var(--paper-orange-500);
-      }
-
-      div:nth-child(4) {
-        background: var(--paper-green-500);
-      }
-
-      div:nth-child(5) {
-        background: var(--paper-purple-500);
-      }
-
-    </style>
-  </head>
-  <body>
-    <template is="dom-bind">
+
+<head>
+  <title>iron-swipeable-pages demo: routing</title>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="../../paper-styles/typography.html">
+  <link rel="import" href="../../paper-styles/color.html">
+  <link rel="import" href="../../app-route/app-location.html">
+  <link rel="import" href="../../app-route/app-route.html">
+
+  <script type="module" src="../iron-swipeable-pages.js"></script>
+
+  <style is="custom-style">
+    body {
+      @apply --layout-fullbleed;
+      @apply --layout-vertical;
+    }
+
+    iron-swipeable-pages {
+      @apply --layout-flex;
+    }
+
+    iron-swipeable-pages>* {
+      -webkit-user-select: none;
+      /* Chrome all / Safari all */
+      -moz-user-select: none;
+      /* Firefox all */
+      -ms-user-select: none;
+      /* IE 10+ */
+      user-select: none;
+      /* Likely future */
+      cursor: default;
+    }
+
+    div {
+      color: white;
+      font-size: 2rem;
+    }
+
+    div:nth-child(1) {
+      background: var(--paper-red-500);
+    }
+
+    div:nth-child(2) {
+      background: var(--paper-blue-500);
+    }
+
+    div:nth-child(3) {
+      background: var(--paper-orange-500);
+    }
+
+    div:nth-child(4) {
+      background: var(--paper-green-500);
+    }
+
+    div:nth-child(5) {
+      background: var(--paper-purple-500);
+    }
+  </style>
+</head>
+
+<body>
+  <dom-bind>
+    <template>
       <app-location use-hash-as-path route="{{route}}"></app-location>
 
       <app-route route="{{route}}" pattern="/:page" data="{{pageData}}"></app-route>
 
       <iron-swipeable-pages attr-for-selected="page" selected="{{pageData.page}}" threshold="0.1">
         <div page="page1">
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div page="page2">
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
         <div page="page3">
-          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
-          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
-
-          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
+          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+            sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
+            feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
+            delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
+          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+            commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
+            illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
+            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
         </div>
       </iron-swipeable-pages>
 
     </template>
-    <script>
-      window.addEventListener('WebComponentsReady', function() {
-        var scope = document.querySelector('template[is="dom-bind"]');
-
-        scope.set('route.path', '/page1');
-      });
-    </script>
-  </body>
+  </dom-bind>
+  <script>
+    window.addEventListener('WebComponentsReady', function () {
+      var scope = document.querySelector('template[is="dom-bind"]');
+
+      scope.set('route.path', '/page1');
+    });
+  </script>
+</body>
+
 </html>
+<script type="module">
+  import '../iron-swipeable-pages.js';
+  var scope = document.querySelector('template[is="dom-bind"]');
+
+  scope.set('route.path', '/page1');
+</script>
\ No newline at end of file
diff --git a/index.html b/index.html
index de0655c..bd60973 100644
--- a/index.html
+++ b/index.html
@@ -9,23 +9,22 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html>
+
 <head>
 
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="refresh" content="0;url=demo/" />
 
   <title>iron-swipeable-pages</title>
 
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
-
 </head>
-<body unresolved>
-  <!-- Note: if the main element for this repository doesn't
-       match the folder name, add a src="&lt;main-component&gt;.html" attribute,
-       where &lt;main-component&gt;.html" is a file that imports all of the
-       components you want documented. -->
-  <iron-component-page></iron-component-page>
 
+<body unresolved>
+  <!--
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html
deleted file mode 100644
index cfa1ea1..0000000
--- a/iron-swipeable-pages.html
+++ /dev/null
@@ -1,585 +0,0 @@
-<link rel="import" href="../polymer/polymer-element.html">
-<link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
-
-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../iron-selector/iron-selectable.html">
-
-<dom-module id="iron-swipeable-pages">
-  <template>
-    <style>
-      :host {
-      position: relative;
-      display: block;
-      overflow-x: hidden;
-      }
-      :host > ::slotted(*) {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        will-change: left, transform;
-      }
-      :host > ::slotted(:not(.iron-selected):not(.iron-swiping)) {
-        left: -100% !important;
-      }
-    </style>
-
-    <slot></slot>
-
-  </template>
-
-  <script>
-    /**
-     * `iron-swipeable-pages` Description
-     *
-     * @summary ShortDescription.
-     * @customElement
-     * @polymer
-     * @extends {Polymer.Element}
-     */
-    class IronSwipeablePages extends Polymer.GestureEventListeners(Polymer.mixinBehaviors([Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior], Polymer.Element)) {
-      /**
-       * String providing the tag name to register the element under.
-       */
-      static get is() {
-        return 'iron-swipeable-pages';
-      }
-
-      /**
-       * Object describing property-related metadata used by Polymer features
-       */
-      static get properties() {
-        return {
-          // as the selected page is the only one visible, activateEvent
-          // is both non-sensical and problematic; e.g. in cases where a user
-          // handler attempts to change the page and the activateEvent
-          // handler immediately changes it back
-          activateEvent: {
-            type: String,
-            readOnly: true,
-            value: null
-          },
-
-          /**
-           * Add extra padding to the offsetWidth while swiping
-           * Useful if the element is nested within other elements that enforce a padding
-           */
-          padding: {
-            type: Number,
-            value: 0
-          },
-
-          /**
-           * The value used to decide if a transition is effective and therefore
-           * if the page get swiped.
-           */
-          threshold: {
-            type: Number,
-            value: 0.3
-          },
-
-          /**
-           * Prevent cycling between first and last pages by swiping.
-           */
-          noCycle: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * animate wrap-around between first and last as a direct transition
-           * like a carousel. this animation is only used when iron-select is
-           * fired from something OTHER a swipe. e.g. a call to selectNext()
-           * like you might make from a button or an a11y arrow-key binding.
-           * if false the wrap around flips backwards across all the pages.
-           */
-          carousel: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * The CSS transition duration applied swiping to next/previous page
-           */
-          transitionDuration: {
-            type: Number,
-            value: 250
-          },
-
-          /**
-           * The maximum global CSS transition duration applied if swiping involves more than one
-           * page transition using selection instead of manual swiping.
-           */
-          maximumTransitionDuration: {
-            type: Number,
-            value: 0
-          },
-
-          /**
-           * The CSS transition timing function applied.
-           */
-          transitionTimingFunction: {
-            type: String,
-            value: 'cubic-bezier(0.4, 0.0, 0.2, 1)'
-          },
-
-          /**
-           * This option could be used for example to check in `on-selected-changed` that
-           * the selection was initiated by gesture or via data-binding or programmatically
-           */
-          isGesture: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * How many pixels on the side of the screen are not sensitive to edge swipes.
-           */
-          edgeSwipeSensitivity: {
-            type: Number,
-            value: 0
-          },
-
-          /**
-           * This option could be used to disable swiping.
-           */
-          swipeDisabled: {
-            type: Boolean,
-            value: false
-          },
-
-          /**
-           * This option could also be used to disable swiping. (Warning : it could have side effect on IE, like disable scroll)
-           */
-          disabled: {
-            type: Boolean,
-            value: false
-          }
-        };
-      }
-
-      /**
-       * Instance of the element is created/upgraded. Use: initializing state,
-       * set up event listeners, create shadow dom.
-       * @constructor
-       */
-      constructor() {
-        super();
-      }
-
-      /**
-       * Use for one-time configuration of your component after local DOM is initialized. 
-       */
-      ready() {
-        super.ready();
-
-        Polymer.RenderStatus.afterNextRender(this, function() {
-          this.setScrollDirection('y');
-          this._animatedPages = [];
-        });
-      }
-
-      /**
-        * Called every time the element is inserted into the DOM. Useful for 
-        * running setup code, such as fetching resources or rendering.
-        * Generally, you should try to delay work until this time.
-        */
-      connectedCallback() {
-        super.connectedCallback();
-      
-        this.addEventListener('iron-resize', e => this._onResize(e));
-        this.addEventListener('iron-items-changed', e => this._onItemsChanged(e));
-        this.addEventListener('iron-deselect', e => this._onIronDeselectItem(e));
-        this.addEventListener('iron-select', e => this._onIronSelectItem(e));
-        Polymer.Gestures.addListener(this, 'track', e => this._onTrack(e));
-      }
-
-      /**
-        * Called every time the element is removed from the DOM. Useful for 
-        * running clean up code (removing event listeners, etc.).
-        */
-      disconnectedCallback() {
-        super.disconnectedCallback();
-      
-        this.removeEventListener('iron-resize', e => this._onResize(e));
-        this.removeEventListener('iron-items-changed', e => this._onItemsChanged(e));
-        this.removeEventListener('iron-deselect', e => this._onIronDeselectItem(e));
-        this.removeEventListener('iron-select', e => this._onIronSelectItem(e));
-        this.removeEventListener('track', e => this._onTrack(e));
-      }
-
-      /**
-        * Array of strings describing multi-property observer methods and their
-        * dependant properties
-        */
-      static get observers() {
-        return [
-        '_onFallbackSelectionChange(fallbackSelection)'
-        ];
-      }
-
-      // Element page set up
-
-      _onItemsChanged(event) {
-        var mutations = event.detail;
-        for (var i = 0; i < mutations.addedNodes.length; i++) {
-          this._addPage(mutations.addedNodes[i]);
-        }
-        for (var j = 0; j < mutations.removedNodes.length; j++) {
-          this._removePage(mutations.removedNodes[j]);
-        }
-      }
-
-      _addPage(page) {
-          if (!page || page.nodeType !== Node.ELEMENT_NODE)
-            return;
-          page.setAttribute('aria-hidden', !page.classList.contains('iron-selected'));
-          this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd');
-          this.listen(page, 'transitionend', '_onTransitionEnd');
-      }
-
-      _removePage(page) {
-          if (!page || page.nodeType !== Node.ELEMENT_NODE)
-            return;
-          this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd');
-          this.unlisten(page, 'transitionend', '_onTransitionEnd');
-      }
-
-      _onFallbackSelectionChange(event) {
-        if (!this.fallbackSelection) {
-          this.unlisten(this, 'dom-change', '_onDomChange');
-        }
-        else {
-          this.listen(this, 'dom-change', '_onDomChange');
-        }
-      }
-
-      _onDomChange(event) {
-        if ( this.selectedItem && this.selectedItem.offsetWidth == 0 ) {
-          this.selected = this.fallbackSelection;
-        }
-      }
-
-      // Element tracking
-      _onTrack(event) {
-        var track = event.detail;
-
-        if (this._isSwipeDisabled() || (this.noCycle && !this._canCycle(track))) {
-          return;
-        }
-
-        if ((track.x - track.dx) < this.edgeSwipeSensitivity || (track.x - track.dx) > this.offsetWidth - this.edgeSwipeSensitivity) {
-          return;
-        }
-
-        if (track.state === 'start' && Math.abs(track.dy) < Math.abs(track.dx)) {
-          // if we don't have at least 2 items, no need to swipe...
-          if (this.items.length < 2) {
-            return;
-          }
-          this._trackStart(track);
-
-          this._swipeStarted = true;
-        } else if (track.state === 'track' && this._swipeStarted) {
-          this._trackMove(track);
-        } else if (track.state === 'end' && this._swipeStarted) {
-          this._trackEnd(track);
-        }
-      }
-
-      _isSwipeDisabled() {
-        return this.disabled || this.swipeDisabled;
-      }
-
-      _trackStart(trackData) {
-        if (this._transitionRunning) {
-          // reset pages state
-          this._resetPages();
-        }
-        this._setUpSwipePages();
-        this._animatePages(trackData.dx);
-        this._switchPageIfNecessary(trackData.dx);
-        // Prevent regular touchmove event (disables vertical scroll)
-        window.addEventListener('touchmove', this._preventTouchMove);
-      }
-
-      _trackMove(trackData) {
-        this._animatePages(trackData.dx);
-        this._switchPageIfNecessary(trackData.dx);
-      }
-
-      _trackEnd(trackData) {
-        if (!this._swipeStarted) {
-          return;
-        }
-        // Activate transition
-        for (var i = 0; i < this._animatedPages.length; i++) {
-          this._animatedPages[i].style.webkitTransition = this._computeTransition(1);
-          this._animatedPages[i].style.transition = this._computeTransition(1);
-        }
-        this._transitionRunning = true;
-
-        // The element is swiped away if the swiping get passed the treshold.
-        this._completeSwipe = Math.abs(trackData.dx) > this._getOffsetWidth() * this.threshold;
-        if (this._completeSwipe) {
-          this.isGesture = true;
-          var direction = trackData.dx > 0;
-          // we are swipping, therefore update selected
-          direction ? this._selectPage(this._leftCandidate) : this._selectPage(this._rightCandidate);
-          // trigger the animation in the proper direction
-          this._animatePages(direction ? this._getOffsetWidth() : -this._getOffsetWidth());
-        } else {
-          this._animatePages(0);
-        }
-        // Enable regular touchmove event (enables vertical scroll again)
-        window.removeEventListener('touchmove', this._preventTouchMove);
-      }
-
-      _preventTouchMove (e) {
-        return e && e.preventDefault();
-      }
-
-      _onIronDeselectItem(event) {
-        // Prevent bubbling of same event on child elements
-        if (event.target !== this) {
-          return;
-        }
-
-        this._lastIndex = this.indexOf(event.detail.item);
-      }
-
-      _onIronSelectItem(event) {
-        // Prevent bubbling of same event on child elements
-        if (event.target !== this) {
-          return;
-        }
-
-        // might happen at init of the component when first selected value is set and ready not called....
-        // or when a "selected" page disappear from the dom because of a "dom-if" with restamp option active
-        if (this._lastIndex === undefined || this._lastIndex === -1) {
-          return;
-        }
-        var index = this.indexOf(event.detail.item);
-
-        if (this._completeSwipe) {
-          // we just need to reset the flag, the transformation happened already by swiping
-          this._completeSwipe = false;
-        } else {
-          // check if a transition is currently running
-          if (this._transitionRunning) {
-            // reset pages state and we don't trigger any new animation because lastIndex is not valid anymore
-            this._resetPages();
-          } else {
-            // reset the animated page list
-            this._animatedPages = [];
-            // skipped is used to filter the hidden element since they have a width == 0
-            // we use a negative value if we translate to the right
-            var skipped = 0;
-            // in this case, selected has been modify w/o swiping, we need to apply the transformation
-
-            // This stuff supports carousel style wrap-around animation
-            var translateRight;
-            var virtualLastIndex = this._lastIndex;
-            var virtualIndex = index;
-            var len = this.items.length;
-
-            if (index == 0 && this._lastIndex == len - 1) {
-              // wrap-around
-              translateRight = true;
-              if (this.carousel) {
-                translateRight = false;
-                virtualIndex = len;
-              }
-            }
-            else if (index == len - 1 && this._lastIndex == 0) {
-              // wrap-around
-              translateRight = false;
-              if (this.carousel) {
-                translateRight = true;
-                virtualLastIndex = len;
-              }
-            }
-            else if (index > this._lastIndex) {
-              translateRight = false;
-            }
-            else {
-              translateRight = true;
-            }
-
-            if (translateRight) {
-              // we translate to the right
-              for (var i = virtualLastIndex; i >= virtualIndex; i--) {
-                var item = this.items[i % len];
-                this._initPage(
-                  item,
-                  this._computeTransition(virtualLastIndex - virtualIndex),
-                  this._getOffsetWidth()*(i - skipped - virtualLastIndex));
-                // Need for dom.flush()?
-                if (item.offsetWidth == 0) {
-                  this._resetPage(item);
-                  skipped--;
-                }
-              }
-            } else {
-              skipped = 0;
-              // we translate to the left
-              for (var j = virtualLastIndex; j <= virtualIndex; j++) {
-                var item = this.items[j % len];
-                this._initPage(
-                  item,
-                  this._computeTransition(virtualIndex - virtualLastIndex),
-                  this._getOffsetWidth()*(j - skipped - virtualLastIndex));
-                // Need for dom.flush()?
-                if (item.offsetWidth == 0) {
-                  this._resetPage(item);
-                  skipped++;
-                }
-              }
-            }
-            this._transitionRunning = true;
-
-            // before animating, we need to be sure style are updated correctly
-            this.async( function() {
-              this._animatePages((virtualLastIndex - virtualIndex + skipped) * this._getOffsetWidth());
-            });
-          }
-        }
-      }
-
-      // Element page management
-      _setUpSwipePages() {
-        // reset the animated page list
-        this._animatedPages = [];
-        // selected page
-        this._initPage(this.selectedItem, 'none', 0);
-        // left candidate
-        var skipped = 0;
-        var found = false;
-        while (!found) {
-          var leftIndex = (Number(this.indexOf(this.selectedItem)) - 1 - skipped + this.items.length) % this.items.length;
-          this._leftCandidate = this.items[leftIndex];
-          this._initPage(this._leftCandidate, 'none', -this._getOffsetWidth());
-          // Need for dom.flush()?
-          if (this._leftCandidate.offsetWidth > 0) {
-            found = true;
-          } else {
-            this._resetPage(this._leftCandidate);
-            skipped++;
-          }
-        }
-        // right candidate
-        skipped = 0;
-        found = false;
-        while (!found) {
-          var rightIndex = (Number(this.indexOf(this.selectedItem)) + 1 + skipped) % this.items.length;
-          this._rightCandidate = this.items[rightIndex];
-          this._initPage(this._rightCandidate, 'none', this._getOffsetWidth());
-          // Need for dom.flush()?
-          if (this._rightCandidate.offsetWidth > 0) {
-            found = true;
-          } else {
-            this._resetPage(this._rightCandidate);
-            skipped++;
-          }
-        }
-      }
-
-      // prepare the page for animation and add it to the list of pages to be animated
-      _initPage(page, transition, left) {
-        if (!page) {
-          return;
-        }
-        page.style.left = left + "px";
-        page.style.webkitTransition = transition;
-        page.style.transition = transition;
-        this.toggleClass('iron-swiping', true, page);
-
-        this._animatedPages.push(page);
-      }
-
-      _animatePages(x) {
-        for (var i = 0; i < this._animatedPages.length; i++) {
-          this.translate3d(x+'px', '0px', '0px', this._animatedPages[i]);
-        }
-      }
-
-      // this function is useful if only 2 pages are available and we need to switch the next/previous page
-      // on the left/right side depending on the direction of the swipe given with `dx`
-      _switchPageIfNecessary(dx) {
-        if (this._leftCandidate && this._rightCandidate && this._leftCandidate === this._rightCandidate) {
-          var direction = dx > 0 ? -1 : 1;
-          this._rightCandidate.style.left = (direction * this._getOffsetWidth()) + "px";
-        }
-      }
-
-      _selectPage(page) {
-        var index = this.indexOf(page);
-        // TODO: should be replaced with this.selectIndex when merged in master:
-        // https://github.com/PolymerElements/iron-selector/issues/87
-        this.selected = this._indexToValue(index);
-      }
-
-      _resetPage(page) {
-        page.style.left = "0px";
-        page.style.webkitTransition = 'none';
-        page.style.transition = 'none';
-        this.toggleClass('iron-swiping', false, page);
-
-        this._animatedPages.pop();
-      }
-
-      // remove the iron-swiping class and transition
-      _resetPages() {
-        for (var i = 0; i < this._animatedPages.length; i++) {
-          this._animatedPages[i].style.left = '0px';
-          this._animatedPages[i].style.webkitTransition = 'none';
-          this._animatedPages[i].style.transition = 'none';
-          this._animatedPages[i].setAttribute('aria-hidden', !this._animatedPages[i].classList.contains('iron-selected'));
-          this.toggleClass('iron-swiping', false, this._animatedPages[i]);
-          this.transform('none', this._animatedPages[i]);
-        }
-        this._transitionRunning = false;
-        this._swipeStarted = false;
-        this.isGesture = false;
-      }
-
-      _onTransitionEnd(event) {
-        // reset pages state
-        this._resetPages();
-      }
-
-      // Element utility functions
-      _canCycle(trackData) {
-        var index = this._valueToIndex(this.selected);
-
-        if (index === 0 && trackData.dx > 0) {
-          return false;
-        }
-        if (index === this.items.length - 1 && trackData.dx < 0) {
-          return false;
-        }
-        return true;
-      }
-
-      _getOffsetWidth () {
-        this._offsetWidth = this._offsetWidth || this.offsetWidth + (2 * this.padding);
-        return this._offsetWidth;
-      }
-
-      _onResize() {
-        this._offsetWidth = this.offsetWidth + (2 * this.padding);
-      }
-
-      _computeTransition(factor) {
-        var duration = factor * this.transitionDuration;
-        if (this.maximumTransitionDuration) {
-          duration = Math.min(this.maximumTransitionDuration, duration);
-        }
-        return 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
-      }
-
-    }
-
-    window.customElements.define(IronSwipeablePages.is, IronSwipeablePages);
-  </script>
-</dom-module>
\ No newline at end of file
diff --git a/iron-swipeable-pages.js b/iron-swipeable-pages.js
new file mode 100644
index 0000000..4b1adde
--- /dev/null
+++ b/iron-swipeable-pages.js
@@ -0,0 +1,579 @@
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import { IronSelectableBehavior } from '@polymer/iron-selector/iron-selectable.js';
+import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
+
+/**
+ * `iron-swipeable-pages` Description
+ *
+ * @summary ShortDescription.
+ * @customElement
+ * @polymer
+ * @demo demo/index.html
+ * @extends {PolymerElement}
+ */
+class IronSwipeablePages extends GestureEventListeners(mixinBehaviors([IronResizableBehavior, IronSelectableBehavior], PolymerElement)) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          position: relative;
+          display: block;
+          overflow-x: hidden;
+        }
+        
+        :host > ::slotted(*) {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          will-change: left, transform;
+        }
+
+        :host > ::slotted(:not(.iron-selected):not(.iron-swiping)) {
+          left: -100% !important;
+        }
+      </style>
+
+      <slot></slot>
+`;
+  }
+
+  /**
+   * Object describing property-related metadata used by Polymer features
+   */
+  static get properties() {
+    return {
+      // as the selected page is the only one visible, activateEvent
+      // is both non-sensical and problematic; e.g. in cases where a user
+      // handler attempts to change the page and the activateEvent
+      // handler immediately changes it back
+      activateEvent: {
+        type: String,
+        readOnly: true,
+        value: null
+      },
+
+      /**
+       * Add extra padding to the offsetWidth while swiping
+       * Useful if the element is nested within other elements that enforce a padding
+       */
+      padding: {
+        type: Number,
+        value: 0
+      },
+
+      /**
+       * The value used to decide if a transition is effective and therefore
+       * if the page get swiped.
+       */
+      threshold: {
+        type: Number,
+        value: 0.3
+      },
+
+      /**
+       * Prevent cycling between first and last pages by swiping.
+       */
+      noCycle: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * animate wrap-around between first and last as a direct transition
+       * like a carousel. this animation is only used when iron-select is
+       * fired from something OTHER a swipe. e.g. a call to selectNext()
+       * like you might make from a button or an a11y arrow-key binding.
+       * if false the wrap around flips backwards across all the pages.
+       */
+      carousel: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * The CSS transition duration applied swiping to next/previous page
+       */
+      transitionDuration: {
+        type: Number,
+        value: 250
+      },
+
+      /**
+       * The maximum global CSS transition duration applied if swiping involves more than one
+       * page transition using selection instead of manual swiping.
+       */
+      maximumTransitionDuration: {
+        type: Number,
+        value: 0
+      },
+
+      /**
+       * The CSS transition timing function applied.
+       */
+      transitionTimingFunction: {
+        type: String,
+        value: 'cubic-bezier(0.4, 0.0, 0.2, 1)'
+      },
+
+      /**
+       * This option could be used for example to check in `on-selected-changed` that
+       * the selection was initiated by gesture or via data-binding or programmatically
+       */
+      isGesture: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * How many pixels on the side of the screen are not sensitive to edge swipes.
+       */
+      edgeSwipeSensitivity: {
+        type: Number,
+        value: 0
+      },
+
+      /**
+       * This option could be used to disable swiping.
+       */
+      swipeDisabled: {
+        type: Boolean,
+        value: false
+      },
+
+      /**
+       * This option could also be used to disable swiping. (Warning : it could have side effect on IE, like disable scroll)
+       */
+      disabled: {
+        type: Boolean,
+        value: false
+      }
+    };
+  }
+
+  /**
+   * Instance of the element is created/upgraded. Use: initializing state,
+   * set up event listeners, create shadow dom.
+   * @constructor
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * Use for one-time configuration of your component after local DOM is initialized. 
+   */
+  ready() {
+    super.ready();
+
+    afterNextRender(this, function () {
+      this.setScrollDirection('y');
+      this._animatedPages = [];
+    });
+  }
+
+  /**
+    * Called every time the element is inserted into the DOM. Useful for 
+    * running setup code, such as fetching resources or rendering.
+    * Generally, you should try to delay work until this time.
+    */
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('iron-resize', e => this._onResize(e));
+    this.addEventListener('iron-items-changed', e => this._onItemsChanged(e));
+    this.addEventListener('iron-deselect', e => this._onIronDeselectItem(e));
+    this.addEventListener('iron-select', e => this._onIronSelectItem(e));
+    addListener(this, 'track', e => this._onTrack(e));
+  }
+
+  /**
+    * Called every time the element is removed from the DOM. Useful for 
+    * running clean up code (removing event listeners, etc.).
+    */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('iron-resize', e => this._onResize(e));
+    this.removeEventListener('iron-items-changed', e => this._onItemsChanged(e));
+    this.removeEventListener('iron-deselect', e => this._onIronDeselectItem(e));
+    this.removeEventListener('iron-select', e => this._onIronSelectItem(e));
+    this.removeEventListener('track', e => this._onTrack(e));
+  }
+
+  /**
+    * Array of strings describing multi-property observer methods and their
+    * dependant properties
+    */
+  static get observers() {
+    return [
+      '_onFallbackSelectionChange(fallbackSelection)'
+    ];
+  }
+
+  // Element page set up
+
+  _onItemsChanged(event) {
+    var mutations = event.detail;
+    for (var i = 0; i < mutations.addedNodes.length; i++) {
+      this._addPage(mutations.addedNodes[i]);
+    }
+    for (var j = 0; j < mutations.removedNodes.length; j++) {
+      this._removePage(mutations.removedNodes[j]);
+    }
+  }
+
+  _addPage(page) {
+    if (!page || page.nodeType !== Node.ELEMENT_NODE)
+      return;
+    page.setAttribute('aria-hidden', !page.classList.contains('iron-selected'));
+    this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd');
+    this.listen(page, 'transitionend', '_onTransitionEnd');
+  }
+
+  _removePage(page) {
+    if (!page || page.nodeType !== Node.ELEMENT_NODE)
+      return;
+    this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd');
+    this.unlisten(page, 'transitionend', '_onTransitionEnd');
+  }
+
+  _onFallbackSelectionChange(event) {
+    if (!this.fallbackSelection) {
+      this.unlisten(this, 'dom-change', '_onDomChange');
+    }
+    else {
+      this.listen(this, 'dom-change', '_onDomChange');
+    }
+  }
+
+  _onDomChange(event) {
+    if (this.selectedItem && this.selectedItem.offsetWidth == 0) {
+      this.selected = this.fallbackSelection;
+    }
+  }
+
+  // Element tracking
+  _onTrack(event) {
+    var track = event.detail;
+
+    if (this._isSwipeDisabled() || (this.noCycle && !this._canCycle(track))) {
+      return;
+    }
+
+    if ((track.x - track.dx) < this.edgeSwipeSensitivity || (track.x - track.dx) > this.offsetWidth - this.edgeSwipeSensitivity) {
+      return;
+    }
+
+    if (track.state === 'start' && Math.abs(track.dy) < Math.abs(track.dx)) {
+      // if we don't have at least 2 items, no need to swipe...
+      if (this.items.length < 2) {
+        return;
+      }
+      this._trackStart(track);
+
+      this._swipeStarted = true;
+    } else if (track.state === 'track' && this._swipeStarted) {
+      this._trackMove(track);
+    } else if (track.state === 'end' && this._swipeStarted) {
+      this._trackEnd(track);
+    }
+  }
+
+  _isSwipeDisabled() {
+    return this.disabled || this.swipeDisabled;
+  }
+
+  _trackStart(trackData) {
+    if (this._transitionRunning) {
+      // reset pages state
+      this._resetPages();
+    }
+    this._setUpSwipePages();
+    this._animatePages(trackData.dx);
+    this._switchPageIfNecessary(trackData.dx);
+    // Prevent regular touchmove event (disables vertical scroll)
+    window.addEventListener('touchmove', this._preventTouchMove);
+  }
+
+  _trackMove(trackData) {
+    this._animatePages(trackData.dx);
+    this._switchPageIfNecessary(trackData.dx);
+  }
+
+  _trackEnd(trackData) {
+    if (!this._swipeStarted) {
+      return;
+    }
+    // Activate transition
+    for (var i = 0; i < this._animatedPages.length; i++) {
+      this._animatedPages[i].style.webkitTransition = this._computeTransition(1);
+      this._animatedPages[i].style.transition = this._computeTransition(1);
+    }
+    this._transitionRunning = true;
+
+    // The element is swiped away if the swiping get passed the treshold.
+    this._completeSwipe = Math.abs(trackData.dx) > this._getOffsetWidth() * this.threshold;
+    if (this._completeSwipe) {
+      this.isGesture = true;
+      var direction = trackData.dx > 0;
+      // we are swipping, therefore update selected
+      direction ? this._selectPage(this._leftCandidate) : this._selectPage(this._rightCandidate);
+      // trigger the animation in the proper direction
+      this._animatePages(direction ? this._getOffsetWidth() : -this._getOffsetWidth());
+    } else {
+      this._animatePages(0);
+    }
+    // Enable regular touchmove event (enables vertical scroll again)
+    window.removeEventListener('touchmove', this._preventTouchMove);
+  }
+
+  _preventTouchMove(e) {
+    return e && e.preventDefault();
+  }
+
+  _onIronDeselectItem(event) {
+    // Prevent bubbling of same event on child elements
+    if (event.target !== this) {
+      return;
+    }
+
+    this._lastIndex = this.indexOf(event.detail.item);
+  }
+
+  _onIronSelectItem(event) {
+    // Prevent bubbling of same event on child elements
+    if (event.target !== this) {
+      return;
+    }
+
+    // might happen at init of the component when first selected value is set and ready not called....
+    // or when a "selected" page disappear from the dom because of a "dom-if" with restamp option active
+    if (this._lastIndex === undefined || this._lastIndex === -1) {
+      return;
+    }
+    var index = this.indexOf(event.detail.item);
+
+    if (this._completeSwipe) {
+      // we just need to reset the flag, the transformation happened already by swiping
+      this._completeSwipe = false;
+    } else {
+      // check if a transition is currently running
+      if (this._transitionRunning) {
+        // reset pages state and we don't trigger any new animation because lastIndex is not valid anymore
+        this._resetPages();
+      } else {
+        // reset the animated page list
+        this._animatedPages = [];
+        // skipped is used to filter the hidden element since they have a width == 0
+        // we use a negative value if we translate to the right
+        var skipped = 0;
+        // in this case, selected has been modify w/o swiping, we need to apply the transformation
+
+        // This stuff supports carousel style wrap-around animation
+        var translateRight;
+        var virtualLastIndex = this._lastIndex;
+        var virtualIndex = index;
+        var len = this.items.length;
+
+        if (index == 0 && this._lastIndex == len - 1) {
+          // wrap-around
+          translateRight = true;
+          if (this.carousel) {
+            translateRight = false;
+            virtualIndex = len;
+          }
+        }
+        else if (index == len - 1 && this._lastIndex == 0) {
+          // wrap-around
+          translateRight = false;
+          if (this.carousel) {
+            translateRight = true;
+            virtualLastIndex = len;
+          }
+        }
+        else if (index > this._lastIndex) {
+          translateRight = false;
+        }
+        else {
+          translateRight = true;
+        }
+
+        if (translateRight) {
+          // we translate to the right
+          for (var i = virtualLastIndex; i >= virtualIndex; i--) {
+            var item = this.items[i % len];
+            this._initPage(
+              item,
+              this._computeTransition(virtualLastIndex - virtualIndex),
+              this._getOffsetWidth() * (i - skipped - virtualLastIndex));
+            // Need for dom.flush()?
+            if (item.offsetWidth == 0) {
+              this._resetPage(item);
+              skipped--;
+            }
+          }
+        } else {
+          skipped = 0;
+          // we translate to the left
+          for (var j = virtualLastIndex; j <= virtualIndex; j++) {
+            var item = this.items[j % len];
+            this._initPage(
+              item,
+              this._computeTransition(virtualIndex - virtualLastIndex),
+              this._getOffsetWidth() * (j - skipped - virtualLastIndex));
+            // Need for dom.flush()?
+            if (item.offsetWidth == 0) {
+              this._resetPage(item);
+              skipped++;
+            }
+          }
+        }
+        this._transitionRunning = true;
+
+        // before animating, we need to be sure style are updated correctly
+        this.async(function () {
+          this._animatePages((virtualLastIndex - virtualIndex + skipped) * this._getOffsetWidth());
+        });
+      }
+    }
+  }
+
+  // Element page management
+  _setUpSwipePages() {
+    // reset the animated page list
+    this._animatedPages = [];
+    // selected page
+    this._initPage(this.selectedItem, 'none', 0);
+    // left candidate
+    var skipped = 0;
+    var found = false;
+    while (!found) {
+      var leftIndex = (Number(this.indexOf(this.selectedItem)) - 1 - skipped + this.items.length) % this.items.length;
+      this._leftCandidate = this.items[leftIndex];
+      this._initPage(this._leftCandidate, 'none', -this._getOffsetWidth());
+      // Need for dom.flush()?
+      if (this._leftCandidate.offsetWidth > 0) {
+        found = true;
+      } else {
+        this._resetPage(this._leftCandidate);
+        skipped++;
+      }
+    }
+    // right candidate
+    skipped = 0;
+    found = false;
+    while (!found) {
+      var rightIndex = (Number(this.indexOf(this.selectedItem)) + 1 + skipped) % this.items.length;
+      this._rightCandidate = this.items[rightIndex];
+      this._initPage(this._rightCandidate, 'none', this._getOffsetWidth());
+      // Need for dom.flush()?
+      if (this._rightCandidate.offsetWidth > 0) {
+        found = true;
+      } else {
+        this._resetPage(this._rightCandidate);
+        skipped++;
+      }
+    }
+  }
+
+  // prepare the page for animation and add it to the list of pages to be animated
+  _initPage(page, transition, left) {
+    if (!page) {
+      return;
+    }
+    page.style.left = left + "px";
+    page.style.webkitTransition = transition;
+    page.style.transition = transition;
+    this.toggleClass('iron-swiping', true, page);
+
+    this._animatedPages.push(page);
+  }
+
+  _animatePages(x) {
+    for (var i = 0; i < this._animatedPages.length; i++) {
+      this.translate3d(x + 'px', '0px', '0px', this._animatedPages[i]);
+    }
+  }
+
+  // this function is useful if only 2 pages are available and we need to switch the next/previous page
+  // on the left/right side depending on the direction of the swipe given with `dx`
+  _switchPageIfNecessary(dx) {
+    if (this._leftCandidate && this._rightCandidate && this._leftCandidate === this._rightCandidate) {
+      var direction = dx > 0 ? -1 : 1;
+      this._rightCandidate.style.left = (direction * this._getOffsetWidth()) + "px";
+    }
+  }
+
+  _selectPage(page) {
+    var index = this.indexOf(page);
+    // TODO: should be replaced with this.selectIndex when merged in master:
+    // https://github.com/PolymerElements/iron-selector/issues/87
+    this.selected = this._indexToValue(index);
+  }
+
+  _resetPage(page) {
+    page.style.left = "0px";
+    page.style.webkitTransition = 'none';
+    page.style.transition = 'none';
+    this.toggleClass('iron-swiping', false, page);
+
+    this._animatedPages.pop();
+  }
+
+  // remove the iron-swiping class and transition
+  _resetPages() {
+    for (var i = 0; i < this._animatedPages.length; i++) {
+      this._animatedPages[i].style.left = '0px';
+      this._animatedPages[i].style.webkitTransition = 'none';
+      this._animatedPages[i].style.transition = 'none';
+      this._animatedPages[i].setAttribute('aria-hidden', !this._animatedPages[i].classList.contains('iron-selected'));
+      this.toggleClass('iron-swiping', false, this._animatedPages[i]);
+      this.transform('none', this._animatedPages[i]);
+    }
+    this._transitionRunning = false;
+    this._swipeStarted = false;
+    this.isGesture = false;
+  }
+
+  _onTransitionEnd(event) {
+    // reset pages state
+    this._resetPages();
+  }
+
+  // Element utility functions
+  _canCycle(trackData) {
+    var index = this._valueToIndex(this.selected);
+
+    if (index === 0 && trackData.dx > 0) {
+      return false;
+    }
+    if (index === this.items.length - 1 && trackData.dx < 0) {
+      return false;
+    }
+    return true;
+  }
+
+  _getOffsetWidth() {
+    this._offsetWidth = this._offsetWidth || this.offsetWidth + (2 * this.padding);
+    return this._offsetWidth;
+  }
+
+  _onResize() {
+    this._offsetWidth = this.offsetWidth + (2 * this.padding);
+  }
+
+  _computeTransition(factor) {
+    var duration = factor * this.transitionDuration;
+    if (this.maximumTransitionDuration) {
+      duration = Math.min(this.maximumTransitionDuration, duration);
+    }
+    return 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
+  }
+}
+
+window.customElements.define("iron-swipeable-pages", IronSwipeablePages);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..d043f6b
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,989 @@
+{
+  "name": "@polymer/iron-swipeable-pages",
+  "version": "3.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@polymer/app-layout": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/app-layout/-/app-layout-3.0.0-pre.25.tgz",
+      "integrity": "sha512-ylCBk3yNvzfIDm7LZxdSc8SCTzPkcrNxMib2QwfY5iWMJtjyS4aDUAnbfkHQ4ry5VTqJJ3b6s+/Gqh7BfwqClA==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-media-query": "^3.0.0-pre.24",
+        "@polymer/iron-resizable-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/app-route": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/app-route/-/app-route-3.0.0-pre.25.tgz",
+      "integrity": "sha512-MzSjbOFhFmwkNdvcntmMAA+ZMZh6+4YYZ+H4vgCkCvZcvMudDrnphkmKI24l7tUZafvp7rV8g2mZdjnKzvZyXA==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-location": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/font-roboto": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.0-pre.25.tgz",
+      "integrity": "sha512-wO/GVqgFDVbKlXvBvsM10mod10XF+cJCjeQh8IltXEZy9SIiWMtdOz/ILqceRPkAZV9xyAXcn4mfunZ/MYPJaA==",
+      "dev": true
+    },
+    "@polymer/iron-a11y-announcer": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.0.0-pre.25.tgz",
+      "integrity": "sha512-wtp0pAUbtAAidLD3Skchr9KG3X6lNkpsEoMsrqc8bNNm5zcHzcQ6wzxtskNhuAwgyjDbBEM+DANmNtj/Jl9Z8A==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-a11y-keys-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-nLEu/Mr0nHI9QosG6k75TyScQVUnuwEn6hFBubFravU0QQ8o2+TTwvK5XAVlW2fcNieEvmgC8EhI6FZJCUsCig==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-ajax": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-ajax/-/iron-ajax-3.0.0-pre.25.tgz",
+      "integrity": "sha512-9IXraUniNYRjL10FBnx9MQo1wxsrIGFMupZ/avLtmmvKRlQ7OF7THQ5jpSr8Y7uaT0FOLY5EvXC5XGSno6+2PQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-autogrow-textarea": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-autogrow-textarea/-/iron-autogrow-textarea-3.0.0-pre.25.tgz",
+      "integrity": "sha512-FC2jPZgVAxKxUFfnEhMhqENmXTxbMNBMw52Kw0Kbd8EUOEmG+9u+BqNSvYryNKjUzxqL0mj/iFjnuBcdz+d8pA==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-behaviors": "^3.0.0-pre.24",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-validatable-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-behaviors": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.0-pre.25.tgz",
+      "integrity": "sha512-+oo+Ac+NiSi5SwiyqrTPzwXG15nJkHtjhDwI8cOw61AkkH7sjcytTAyrgrXD/ePsd7+TvWGM6yQfcLH5YhQe5A==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-checked-element-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-BBIITYvJKHbWFpwNFzJNLi+smtb3t+iRiExsu72SnpphHpZqoU0Gao6KUXH74Din6ddKoiNhzwr5j7ihv1XIbw==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-form-element-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-validatable-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-component-page": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-component-page/-/iron-component-page-3.0.0-pre.21.tgz",
+      "integrity": "sha512-dc7P/wCY6J/ApVvQd6gZXVbB3ZGt/pmFtn/uaTbiSNRitzu9Fu+HaQsAtWLu4QbaZjSALTY70i7Im7LGUi6qFA==",
+      "dev": true,
+      "requires": {
+        "@polymer/app-layout": "^3.0.0-pre.21",
+        "@polymer/iron-ajax": "^3.0.0-pre.21",
+        "@polymer/iron-doc-viewer": "^3.0.0-pre.21",
+        "@polymer/iron-icons": "^3.0.0-pre.21",
+        "@polymer/paper-icon-button": "^3.0.0-pre.21",
+        "@polymer/paper-styles": "^3.0.0-pre.21",
+        "@polymer/paper-toast": "^3.0.0-pre.21",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-demo-helpers": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-demo-helpers/-/iron-demo-helpers-3.0.0-pre.25.tgz",
+      "integrity": "sha512-hgQJa/GVYmcm5OmeB+qUGn23NC03cSwOppwaU90EKxCDbTcnnOJUpGpSVMMAtmhB+Ws3/qKa1LGhbdxyittC4Q==",
+      "dev": true,
+      "requires": {
+        "@polymer/font-roboto": "^3.0.0-pre.24",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-location": "^3.0.0-pre.24",
+        "@polymer/marked-element": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0",
+        "@polymer/prism-element": "^3.0.0-pre.24"
+      }
+    },
+    "@polymer/iron-doc-viewer": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-doc-viewer/-/iron-doc-viewer-3.0.0-pre.21.tgz",
+      "integrity": "sha512-9U4Xia/swdrk2BmXx0VUzkOZhncveQDWDZZ2DYFiW3TCSl4zU57o+5bSlZyRXsvr7ddOgqRr5Yw1zhGgFSxGEQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-location": "^3.0.0-pre.21",
+        "@polymer/marked-element": "^3.0.0-pre.21",
+        "@polymer/paper-styles": "^3.0.0-pre.21",
+        "@polymer/polymer": "^3.0.0",
+        "@polymer/prism-element": "^3.0.0-pre.21"
+      }
+    },
+    "@polymer/iron-fit-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-fit-behavior/-/iron-fit-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-9zbkliuMDfTMaShhU/Z/aLn+aSfwKePJq5gH2LlS67JeiyOspsk71wpvmNoXz2apFjH23TiNw79TKE4SAVJ4CA==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-flex-layout": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.0-pre.25.tgz",
+      "integrity": "sha512-ykYxrF6UlnWP0jcbXV51BG3Ts6XD6BWg7HOzkt60YWNkB69QUf3grESUkfT/SERj7WySlGom4no/tdpOPRtwAw==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-form-element-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-YBbURxfnKYbDhqvhMc5P9arv0NI8nQkpj+Vg8yCJ/dwXTeKv2Olxl5/+CaslsaGsOKWQl1o4iITRwcF5cwQ6aQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-icon": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-icon/-/iron-icon-3.0.0-pre.25.tgz",
+      "integrity": "sha512-qPN74NM/EA0+yh0m2QgxI7tUXq9Lg6xdPLbEu3KBiNdOod/36o/MJp0uHSN77D15S4zPD4oWB065w8h94j4RPg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-meta": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-icons": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-icons/-/iron-icons-3.0.0-pre.25.tgz",
+      "integrity": "sha512-1NuyHfRcefraTz0cf7AsY4HMhcf/t1AABTCVIg1UMmORpooWdFuxGPl4uViRQf/pBIzh25Tgj1WbwtvuEj/a8g==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-icon": "^3.0.0-pre.24",
+        "@polymer/iron-iconset-svg": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-iconset-svg": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-iconset-svg/-/iron-iconset-svg-3.0.0-pre.25.tgz",
+      "integrity": "sha512-VFttgxS07p1Qxb4xhxA5hFNYkWzy2FAE2TFjakEJ/bKgJwOVgZ4oMkk9e0+6xkb/xWiHS4FuGpoTbS4PRhtQZQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-meta": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-input": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-input/-/iron-input-3.0.0-pre.25.tgz",
+      "integrity": "sha512-ShAX1CQjm/w86TXPEcqoHUXCeok2cuFqFPyLDDRH9PxvnMs30GOjqRlbyB0nsfaWXBDg43GWcA7aTQTVITkY+Q==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-announcer": "^3.0.0-pre.24",
+        "@polymer/iron-validatable-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-location": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-location/-/iron-location-3.0.0-pre.25.tgz",
+      "integrity": "sha512-vsfhU72F9XimKfF50OUSnIOHG+ZjHPm3hzWoCxRu9+nOhe7Ms20EBY3Jd01Y1EjviBSsJCbg3IY6lbfB2i3SJw==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-media-query": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-media-query/-/iron-media-query-3.0.0-pre.25.tgz",
+      "integrity": "sha512-pC90SR3wZoLXESvJWn827dWby8aVpwt5CJad8ehb9CEtcW7Y/lS1zut4v2f7e2nxqOqJp7UAmCgtFh69GE4n4A==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-menu-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-menu-behavior/-/iron-menu-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-Mxk9pGNRKxLVw5yiJfvMmiMRih/6RPAhy957lnPYjxSRM/fQIcC8Nylls96HyPVbgEeelW6PX2tJCZ6WWxxpkA==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-selector": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-meta": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.0-pre.25.tgz",
+      "integrity": "sha512-Pot2n+3fINPAS97erAwg1Ps0CRISomGQQZvJeuqeUjgdrdfKuDaWnGdASY6ndmdcEgcwaSJfJrBpTUCBIZmtJw==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-overlay-behavior": {
+      "version": "3.0.0-pre.26",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-overlay-behavior/-/iron-overlay-behavior-3.0.0-pre.26.tgz",
+      "integrity": "sha512-SJDgsz3gQfkdZAaa9sH4Sd9rSAyKN6s1Ndjkf3N/X6h2gj9sbrVbM+v83TLI2I0bv/bvSR3V0+5+T0w2Z2+Wfg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-fit-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-resizable-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-resizable-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-resizable-behavior/-/iron-resizable-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-6C9s5pkjNpTekJFEu/cbEpftC12080ncMekAhIYzbDDa56VVDxWqH2f5M3l2XM55fWkMlfUh3JCiPwlxO4vDCw==",
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-scroll-target-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-scroll-target-behavior/-/iron-scroll-target-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-2w7ZxBnRpHuZ/p+Zj4p3u8j49/SLBZJ6kc+LAtabjgA+yqd81kaF+tIVxZLIwRtkmeqQSNUbqpAVzMIqWcuAmg==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-selector": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-selector/-/iron-selector-3.0.0-pre.25.tgz",
+      "integrity": "sha512-EWysNFBT0d+5YzX/tF7KShdqnccDJCnuCnY33egfY/Y7zq2/qXg6jU1M9NTRn48eb/P3ZkzrEMlbodd54rDBXQ==",
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-test-helpers": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-test-helpers/-/iron-test-helpers-3.0.0-pre.25.tgz",
+      "integrity": "sha512-DPF5lxQvTyDexjaFsAKzYv0xllgaAMSYthnHazT2TnXi9jDLrVmHCO4wjs39oKZRETEG9N3/nrM2jVAl3vRLEA==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-validatable-behavior": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.0-pre.25.tgz",
+      "integrity": "sha512-xTUUYkQy4D5zoIm9IurtCAMJrew2Atubu87XNwZzySBjrcMHSxU98VtItpCYfWsFlld8Kqk2AQ2EUONo3TLAdw==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-meta": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/marked-element": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/marked-element/-/marked-element-3.0.0-pre.25.tgz",
+      "integrity": "sha512-IVXHRPzR5LW9KyWFDKYyRR9pdPXsllA461sJ0j3+W9ltVrvPAWwdwoamZzSaYILFjn0T4M6+fGj7b1LH5Vnzdg==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0",
+        "marked": "~0.3.9"
+      }
+    },
+    "@polymer/paper-behaviors": {
+      "version": "3.0.0-pre.26",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.0-pre.26.tgz",
+      "integrity": "sha512-qp7Anu8kE8qoXhvGmWk/Su91b6fgyz2Us2UrrYPZGzldzispt52YjV/5UnGpHffhTfosxvBNPhNWzC2OcpLciQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-behaviors": "^3.0.0-pre.24",
+        "@polymer/iron-checked-element-behavior": "^3.0.0-pre.24",
+        "@polymer/paper-ripple": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-checkbox": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-checkbox/-/paper-checkbox-3.0.0-pre.25.tgz",
+      "integrity": "sha512-OZ1jOTnyhHncuTaQy3CHOQJ57hHzypiWmzLIA9scKg/UDVfCUFY9ImDI+0hAYidXSRKdrv+m+PyLXuK0h4TaRQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-checked-element-behavior": "^3.0.0-pre.24",
+        "@polymer/paper-behaviors": "^3.0.0-pre.25",
+        "@polymer/paper-ripple": "^3.0.0-pre.24",
+        "@polymer/paper-styles": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-drawer-panel": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-drawer-panel/-/paper-drawer-panel-3.0.0-pre.25.tgz",
+      "integrity": "sha512-nwEwOsMrj0PaVWQZBc2SH0ieMeB8r2VJ7LVgM7gKH33bwO/TWQwkDiE+O2rlKLdtEkUg6cenUwMlCVrZcM1bsg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-media-query": "^3.0.0-pre.24",
+        "@polymer/iron-resizable-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-selector": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-icon-button": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-icon-button/-/paper-icon-button-3.0.0-pre.25.tgz",
+      "integrity": "sha512-fC+BLKb9BHuuHzGU3nGSoOrYSIidQrMp0FhaBYyWmU14fxB8c/1VE9uoIV4gP+vxCi/R4rDIKoNWSlKG1t1nfg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-icon": "^3.0.0-pre.24",
+        "@polymer/paper-behaviors": "^3.0.0-pre.25",
+        "@polymer/paper-styles": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-input": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-input/-/paper-input-3.0.0-pre.25.tgz",
+      "integrity": "sha512-y4mBehkXzeSh+Vw/fjnNAVyOau/7QqqH+6fwwzFnr0PuFt1o4jcfanYSDCKn+exgYERlR7M5df1Zb2KrcXw62w==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-autogrow-textarea": "^3.0.0-pre.24",
+        "@polymer/iron-behaviors": "^3.0.0-pre.24",
+        "@polymer/iron-form-element-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-input": "^3.0.0-pre.24",
+        "@polymer/paper-styles": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-ripple": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.0-pre.25.tgz",
+      "integrity": "sha512-Scjqdzgsx5giEL7BgOLi0TclVjZjqbxPKmzjCbb58WeMI3hqWtR/AchTu4a94M9BuxYJkq4QQNp9lKInyqqKQg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-styles": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.0-pre.25.tgz",
+      "integrity": "sha512-WgbPo5K6GINEJsWwwothtNJbcj9S/B1t8GmzBxBZ6fMwLK9CbxNn4nAgkwgT1VOc1MspcXz4sOoOtCLeu5a8tw==",
+      "dev": true,
+      "requires": {
+        "@polymer/font-roboto": "^3.0.0-pre.24",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-tabs": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-tabs/-/paper-tabs-3.0.0-pre.25.tgz",
+      "integrity": "sha512-OVWQZmg2EDiMyHMwLtajOoKHsrruc4TtM3LVNZ0xGiC3U7pbxewy+Kr9hiJORDDUwxlpeU6CRz/7Q459ELydVw==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-behaviors": "^3.0.0-pre.24",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.24",
+        "@polymer/iron-icon": "^3.0.0-pre.24",
+        "@polymer/iron-iconset-svg": "^3.0.0-pre.24",
+        "@polymer/iron-menu-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-resizable-behavior": "^3.0.0-pre.24",
+        "@polymer/paper-behaviors": "^3.0.0-pre.25",
+        "@polymer/paper-icon-button": "^3.0.0-pre.24",
+        "@polymer/paper-styles": "^3.0.0-pre.24",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-toast": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-toast/-/paper-toast-3.0.0-pre.25.tgz",
+      "integrity": "sha512-dZcfyCmmNQFc3TXXilrk3Kp9foY6UIdapQEvF22HiZsBv1SbHLLrX601XejZQO7/M6InKlNKhjsn9TZGRXROBg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-announcer": "^3.0.0-pre.24",
+        "@polymer/iron-fit-behavior": "^3.0.0-pre.24",
+        "@polymer/iron-overlay-behavior": "^3.0.0-pre.25",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/polymer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.0.5.tgz",
+      "integrity": "sha512-Zbmhtr5vZ3NoHWwFYLKI4ff7yfE6DZopI8vaS7HvmUIuNqsv/EpEDXfNEYjqePQmkMX5LU9OIKV1eX/+9aveow==",
+      "requires": {
+        "@webcomponents/shadycss": "^1.2.0"
+      }
+    },
+    "@polymer/prism-element": {
+      "version": "3.0.0-pre.25",
+      "resolved": "https://registry.npmjs.org/@polymer/prism-element/-/prism-element-3.0.0-pre.25.tgz",
+      "integrity": "sha512-W5wXUz9mKPbG6V1HeRjjl1kIiwmxffrjvuYSdrWI8665o6nQU3zjf/aeWHrnXBMHKxcw41Bmf+Nzh9Lu3rXgEA==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0",
+        "prismjs": "^1.11.0"
+      }
+    },
+    "@polymer/sinonjs": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@polymer/sinonjs/-/sinonjs-1.17.1.tgz",
+      "integrity": "sha512-/U8F/cOTrbF2iVVYgINYmvKbtbexs+89Q3v8AaHADRYabTg7aOZGOb0RyWpOI+sUJt04kj63U4FwMhzW5r4wZA==",
+      "dev": true
+    },
+    "@polymer/test-fixture": {
+      "version": "3.0.0-pre.21",
+      "resolved": "https://registry.npmjs.org/@polymer/test-fixture/-/test-fixture-3.0.0-pre.21.tgz",
+      "integrity": "sha512-IxzUe6YzaORzUksafHAXHprV29YncOJgr0+1zNAifl0/f+cb5iAd4IWUrnsnVFHG5UGTLjvis5RgV6vvIZPDrA==",
+      "dev": true
+    },
+    "@webcomponents/shadycss": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.5.0.tgz",
+      "integrity": "sha512-jNuC7alo3EfiqZPosCruJuMAaUI9qgiuGxFcFyPWjOpo4BP+vgC7hxpTzQYxbIWUgrqkn9lnfPup2hE9c/h/PQ=="
+    },
+    "@webcomponents/webcomponentsjs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.1.1.tgz",
+      "integrity": "sha512-CgXV1O94jruR0YVijA55bP4SQBRvRKDmByWce47vCZIJ3HPHOph0VtjpO5vYEUyZzfadqfjICBMkZOagTT9XQw==",
+      "dev": true
+    },
+    "accessibility-developer-tools": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/accessibility-developer-tools/-/accessibility-developer-tools-2.12.0.tgz",
+      "integrity": "sha1-PaDM6dbsY3OWS4TzXbfPw996tRQ=",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
+    },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
+    "async": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "browser-stdout": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.0.tgz",
+      "integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8=",
+      "dev": true
+    },
+    "chai": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-3.5.0.tgz",
+      "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.0.1",
+        "deep-eql": "^0.1.3",
+        "type-detect": "^1.0.0"
+      }
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
+    "clipboard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz",
+      "integrity": "sha512-7yhQBmtN+uYZmfRjjVjKa0dZdWuabzpSKGtyQZN+9C8xlC788SSJjOHWh7tzurfwTqTD5UDYAhIv5fRJg3sHjQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+      "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+      "dev": true,
+      "requires": {
+        "graceful-readlink": ">= 1.0.0"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "debug": {
+      "version": "2.6.8",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
+      "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
+      "dev": true,
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "deep-eql": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
+      "integrity": "sha1-71WKyrjeJSBs1xOQbXTlaTDrafI=",
+      "dev": true,
+      "requires": {
+        "type-detect": "0.1.1"
+      },
+      "dependencies": {
+        "type-detect": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.1.tgz",
+          "integrity": "sha1-C6XsKohWQORw6k6FBZcZANrFiCI=",
+          "dev": true
+        }
+      }
+    },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
+    "diff": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
+      "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "formatio": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz",
+      "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=",
+      "dev": true,
+      "requires": {
+        "samsam": "~1.1"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "glob": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
+      "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.2",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+      "dev": true
+    },
+    "growl": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
+      "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
+      "dev": true
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "has-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+      "dev": true
+    },
+    "he": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "json3": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
+      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
+      "dev": true
+    },
+    "lodash": {
+      "version": "3.10.1",
+      "resolved": "http://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+      "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
+      "dev": true
+    },
+    "lodash._baseassign": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
+      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+      "dev": true
+    },
+    "lodash._basecreate": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz",
+      "integrity": "sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE=",
+      "dev": true
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "dev": true
+    },
+    "lodash._isiterateecall": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
+      "dev": true
+    },
+    "lodash.create": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.create/-/lodash.create-3.1.1.tgz",
+      "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=",
+      "dev": true,
+      "requires": {
+        "lodash._baseassign": "^3.0.0",
+        "lodash._basecreate": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0"
+      }
+    },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "dev": true
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "dev": true,
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
+    "lolex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
+      "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=",
+      "dev": true
+    },
+    "marked": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
+      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "0.0.8",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8"
+      }
+    },
+    "mocha": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-3.5.3.tgz",
+      "integrity": "sha512-/6na001MJWEtYxHOV1WLfsmR4YIynkUEhBwzsb+fk2qmQ3iqsi258l/Q2MWHJMImAcNpZ8DEdYAK72NHoIQ9Eg==",
+      "dev": true,
+      "requires": {
+        "browser-stdout": "1.3.0",
+        "commander": "2.9.0",
+        "debug": "2.6.8",
+        "diff": "3.2.0",
+        "escape-string-regexp": "1.0.5",
+        "glob": "7.1.1",
+        "growl": "1.9.2",
+        "he": "1.1.1",
+        "json3": "3.3.2",
+        "lodash.create": "3.1.1",
+        "mkdirp": "0.5.1",
+        "supports-color": "3.1.2"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "prismjs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
+      "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
+    "samsam": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
+      "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=",
+      "dev": true
+    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
+    "sinon": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz",
+      "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=",
+      "dev": true,
+      "requires": {
+        "formatio": "1.1.1",
+        "lolex": "1.3.2",
+        "samsam": "1.1.2",
+        "util": ">=0.10.3 <1"
+      }
+    },
+    "sinon-chai": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/sinon-chai/-/sinon-chai-2.14.0.tgz",
+      "integrity": "sha512-9stIF1utB0ywNHNT7RgiXbdmen8QDCRsrTjw+G9TgKt1Yexjiv8TOWZ6WHsTPz57Yky3DIswZvEqX8fpuHNDtQ==",
+      "dev": true
+    },
+    "stacky": {
+      "version": "1.3.1",
+      "resolved": "http://registry.npmjs.org/stacky/-/stacky-1.3.1.tgz",
+      "integrity": "sha1-PxF+UYe5pz0j+HbWnwXIWxGAShI=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.1",
+        "lodash": "^3.0.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz",
+      "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=",
+      "dev": true,
+      "requires": {
+        "has-flag": "^1.0.0"
+      }
+    },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+      "dev": true,
+      "optional": true
+    },
+    "type-detect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-1.0.0.tgz",
+      "integrity": "sha1-diIXzAbbJY7EiQihKY6LlRIejqI=",
+      "dev": true
+    },
+    "util": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.0.tgz",
+      "integrity": "sha512-5n12uMzKCjvB2HPFHnbQSjaqAa98L5iIXmHrZCLavuZVe0qe/SJGbDGWlpaHk5lnBkWRDO+dRu1/PgmUYKPPTw==",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
+    "wct-browser-legacy": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wct-browser-legacy/-/wct-browser-legacy-1.0.1.tgz",
+      "integrity": "sha512-+HmZ5C2WNksNcti41ZihUL5b8ms8q6mOanXKK2jm3aBTnx7vqtkvdFPVJUbapglLWC0RReScBbhT0YuYbdoEOw==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0",
+        "@polymer/sinonjs": "^1.14.1",
+        "@polymer/test-fixture": "^3.0.0-pre.1",
+        "@webcomponents/webcomponentsjs": "^2.0.0",
+        "accessibility-developer-tools": "^2.12.0",
+        "async": "^1.5.2",
+        "chai": "^3.5.0",
+        "lodash": "^3.10.1",
+        "mocha": "^3.4.2",
+        "sinon": "^1.17.1",
+        "sinon-chai": "^2.10.0",
+        "stacky": "^1.3.1"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c7ee3fb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,55 @@
+{
+  "description": "[Polymer 3.x] Element that enables switching between different pages by swiping gesture.",
+  "keywords": [
+    "web-component",
+    "web-components",
+    "web",
+    "component",
+    "components",
+    "custom",
+    "element",
+    "polymer",
+    "iron",
+    "page",
+    "pages",
+    "swipe",
+    "swipeable",
+    "content",
+    "mobile"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/GeoloeG/iron-swipeable-pages.git"
+  },
+  "homepage": "https://github.com/GeoloeG/iron-swipeable-pages/",
+  "name": "@polymer/iron-swipeable-pages",
+  "version": "3.0.0",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
+  },
+  "main": "iron-swipeable-pages.js",
+  "contributors": [
+    "Pascal Gula aka MeTaNoV <pascal.gula@gmail.com>",
+    "Sam Duff <skduff@gmail.com>"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0",
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.18",
+    "@polymer/iron-selector": "^3.0.0-pre.18"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1",
+    "@polymer/iron-component-page": "^3.0.0-pre.18",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/paper-checkbox": "^3.0.0-pre.18",
+    "@polymer/paper-input": "^3.0.0-pre.18",
+    "@polymer/paper-tabs": "^3.0.0-pre.18",
+    "@polymer/app-route": "^3.0.0-pre.18"
+  }
+}
\ No newline at end of file
diff --git a/test/basic-test.html b/test/basic-test.html
index c932636..9a2e361 100644
--- a/test/basic-test.html
+++ b/test/basic-test.html
@@ -1,56 +1,57 @@
 <!doctype html>
 <html>
-  <head>
-    <title>iron-swipeable-pages tests</title>
 
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<head>
+  <title>iron-swipeable-pages tests</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-    <script src="../../iron-test-helpers/test-helpers.js"></script>
-    <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
 
-    <!-- Step 1: import the element to test -->
-    <link rel="import" href="../iron-swipeable-pages.html">
-  </head>
-  <body>
+  <script type="module">
+    import '@polymer/iron-test-helpers/test-helpers.js';
+    import '@polymer/iron-test-helpers/mock-interactions.js';
+  </script>
 
-    <!-- You can use the document as a place to set up your fixtures. -->
-    <test-fixture id="iron-swipeable-pages-fixture">
-      <template>
-        <iron-swipeable-pages>
-          <div>Page 1</div>
-          <div>Page 2</div>
-          <div>Page 3</div>
-        </iron-swipeable-pages>
-      </template>
-    </test-fixture>
+  <!-- Step 1: import the element to test -->
+  <script type="module" src="../iron-swipeable-pages.js"></script>
+</head>
 
-    <script>
-      suite('<iron-swipeable-pages>', function() {
+<body>
 
-        var myEl;
+  <!-- You can use the document as a place to set up your fixtures. -->
+  <test-fixture id="iron-swipeable-pages-fixture">
+    <template>
+      <iron-swipeable-pages>
+        <div>Page 1</div>
+        <div>Page 2</div>
+        <div>Page 3</div>
+      </iron-swipeable-pages>
+    </template>
+  </test-fixture>
 
-        setup(function() {
-          myEl = fixture('iron-swipeable-pages-fixture');
-        });
+  <script>
+    suite('<iron-swipeable-pages>', function () {
 
-        test('check swipe is working', function() {
-        });
+      var myEl;
 
-        test('check selected is working', function() {
-        });
+      setup(function () {
+        myEl = fixture('iron-swipeable-pages-fixture');
+      });
 
-        test('check no-cycle is working', function() {
-        });
+      test('check swipe is working', function () {
+      });
 
-        test('check dynamic content is working', function() {
-        });
+      test('check selected is working', function () {
+      });
+
+      test('check no-cycle is working', function () {
+      });
 
+      test('check dynamic content is working', function () {
       });
-    </script>
 
-  </body>
-</html>
+    });
+  </script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 96f7552..0139ec2 100644
--- a/test/index.html
+++ b/test/index.html
@@ -1,4 +1,5 @@
-<!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.txt
@@ -6,20 +7,25 @@
 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">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+-->
+<html>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <script src="../../web-component-tester/browser.js"></script>
-  </head>
-  <body>
-    <script>
-      // Load and run all tests (.html, .js):
-      WCT.loadSuites([
-        'basic-test.html',
-        'basic-test.html?dom=shadow'
-      ]);
-    </script>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-</body></html>
+  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
+</head>
+
+<body>
+  <script>
+    // Load and run all tests (.html, .js):
+    WCT.loadSuites([
+      'basic-test.html',
+      'basic-test.html?dom=shadow'
+    ]);
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file