diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..cc13518
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": 0
+  },
+  "env": {
+    "browser": true
+  },
+  "plugins": [
+    "html"
+  ],
+  "globals": {
+    "CustomElements": false,
+    "HTMLImports": false,
+    "Polymer": false,
+    "WeakMap": false
+  }
+}
diff --git a/.gitignore b/.gitignore
index f5a7e55..065ae23 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
 bower_components
-.yo-rc.json
\ No newline at end of file
+.vscode
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
index 75ac1d8..cc8e0b5 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,21 +1,22 @@
 language: node_js
 sudo: required
-node_js: stable
-dist: trusty
+before_script:
+  - npm install -g bower polylint web-component-tester eslint eslint-plugin-html
+  - bower install
+  - polylint
+  - eslint *.html test/*.html
+node_js: '6'
 addons:
   firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
-before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+      - google-chrome-stable
 script:
-  - xvfb-run wct --skip-plugin sauce
-  - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --skip-plugin local; fi
+  - xvfb-run wct
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+dist: trusty
 env:
   global:
   - secure: QrF9OBBaC4NMJy5YoHzlldFlSnwTjEJtTEC/5DgLf7KD+p5K6rY6224bOWwE5UPsPnkNkKGCl8rJ+P/CHqSqH8/2+zMnDrSI+owvZiYxXMdCpencnn2m2F3p2VDmYdVXlKRxXjWO/DyKOjGf3Zf12LB9I/tVEG2RwF9FTpZEzmSZXiiHyZfjY2/I5Ib0MGhNudunrp9OprrOJAliumvOhNYJzFhFSzSfzgpoo+vVFpv+K5WhlhkZ0WoctRWZQ4EUGLOo/ifpSNOFs2weHRL7di15w4blGiA7jGfKk4i+jEAQVQUV0XeDjkhX6LCnKUIkTJr9UzDjsffe/nJrusmQw8gD4SwlTTWjNtWiiKyRezjlMzq/nAvGIEzVjVrWDouznfNt/3tVQLSOXoqzJIrDWeLp3fwtdOUDGPcrp8CkHUxLEqkwtON8Xny5FG0bl5uqt88yfhmetscx512PQjZH/+aTrKJwrYz06i30qB8B//5PfN0/amrE/n/4ewWbYqmsjVfc9zBlDc0tNbJ7z3db7KxtjBPc3BHq3QrvfFxowlGmqTNVRur3MwD2wVmOo7GtyTy8/ZFT7f0hw8W49fML1BPreY25lzQf2lqR5J+XYtbyTt6H3GTUmWIoq0CfmFzTXToIVZkR2ETqDZXzxDKU+QU4Pf+veS6SkWCjjM/9ZMY=
diff --git a/README.md b/README.md
index 0a874a8..30dc980 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,27 @@
-[![Build Status](https://travis-ci.org/timeu/timeu-wizard.svg)](https://travis-ci.org/timeu/timeu-wizard)
+[![Build Status](https://travis-ci.org/timeu/timeu-wizard.svg)](https://travis-ci.org/timeu/timeu-wizard) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/timeu/timeu-wizard)
 
-_[Demo and API Docs](https://timeu.github.io/timeu-wizard/)_
+_[Demo and API Docs](https://www.webcomponents.org/element/timeu/canvas-piechart)_
 
 
 ## <timeu-wizard>
 
-
-The `timeu-wizard` element displaying the progress of a wizard as a series of connected circles.  
-By default the step number is displayed inside the circle and if provided a label below.  
+The `timeu-wizard` element displaying the progress of a wizard as a series of connected circles.
+By default the step number is displayed inside the circle and if provided a label below.
 The available steps are provided by either as an `array` of `Objects` or an `array` of `Strings`.
 
+
+**This branch (master) works only with Polymer 2.x. For a Polymer 1.x version check out the 1.x branch**
+
+## Versions (Polymer 2.x vs Polymer 1.x)
+The *master* branch and all *2.x.x* releases require `Polymer 2.x`.
+For `Polymer 1.x` support use *1.x.x* releases and the [1.x branch](https://github.com/timeu/timeu-wizard/tree/1.x).
+
+## How to use
+
 Simple example:
 
 
-    
+
 <!--
 ```
 <custom-element-demo>
@@ -21,7 +29,7 @@ Simple example:
       <script src="../webcomponentsjs/webcomponents-lite.js"></script>
       <link rel="import" href="timeu-wizard.html">
       <next-code-block></next-code-block>
-  </template>    
+  </template>
 </custom-element-demo>
 ```
 -->
@@ -35,9 +43,9 @@ Example with custom circle content:
 ```html
 <timeu-wizard steps='[{"label:Step1","content":"A"},{label:"Step2","content":"B"}]'></timeu-wizard>
 ```
-It is also possible to display a vertical progress by adding the `vertical` attribute: 
+It is also possible to display a vertical progress by adding the `vertical` attribute:
 ```html
-<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard> 
+<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
 ```
 ### Styling
 
diff --git a/bower.json b/bower.json
index c68a8b1..d6bc1f0 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "timeu-wizard",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "authors": [
     "Uemit Seren <uemit.seren@gmail.com>"
   ],
@@ -19,10 +19,12 @@
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.2.0"
+    "polymer": "Polymer/polymer#^1.9.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "^3.4.0"
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   }
 }
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index f9d2206..1d352e7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,49 +9,55 @@
 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">
-    <title>timeu-wizard Demo</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-    <link rel="import" href="../timeu-wizard.html">
-    <style>
-      .controls {
-        margin-top: 20px;
-        display: flex;
-        justify-content: center;
-        padding:10px;
-      }
-      .controls * {
-        margin: 10px;
-      }
-      .controls input  {
-        width:50px;
-      }
-    </style>
-    <style is="custom-style">
-        #css {
-          --timeu-wizard-line-color: yellow;
-          --timeu-wizard-line-size: 3px;
-          --timeu-wizard-circle-size: 60px;
-          --timeu-wizard-filling-color: red;
-          --timeu-wizard-anim-speed: 1s;
-          --timeu-wizard-active-color:blue;
-          --timeu-wizard-label-font-size:20px;
-          --timeu-wizard-step-font-size:30px;
-          --timeu-wizard-circle-border-size:2px;
-        }
-        #icon {
-          --timeu-wizard-step-font-family:FontAwesome;
-        }
-    </style>
-  </head>
-  <body unresolved>
-   <template is="dom-bind">
 
-    <p>Default styling of <code>&lt;timeu-wizard&gt;</code>:</p>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>timeu-wizard Demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+  <link rel="import" href="../timeu-wizard.html">
+  <style is="custom-style" include="demo-pages-shared-styles">
+    .controls {
+      margin-top: 20px;
+      display: flex;
+      justify-content: center;
+      padding: 10px;
+    }
+
+    .controls * {
+      margin: 10px;
+    }
+
+    .controls input {
+      width: 50px;
+    }
+
+    #css {
+      --timeu-wizard-line-color: yellow;
+      --timeu-wizard-line-size: 3px;
+      --timeu-wizard-circle-size: 60px;
+      --timeu-wizard-filling-color: red;
+      --timeu-wizard-anim-speed: 1s;
+      --timeu-wizard-active-color: blue;
+      --timeu-wizard-label-font-size: 20px;
+      --timeu-wizard-step-font-size: 30px;
+      --timeu-wizard-circle-border-size: 2px;
+    }
+
+    #icon {
+      --timeu-wizard-step-font-family: FontAwesome;
+    }
+  </style>
+</head>
 
+<body unresolved>
+  <template is="dom-bind">
+    <p>Default styling of <code>&lt;timeu-wizard&gt;</code>:</p>
     <timeu-wizard id="default" steps='["Step 1","Step 2","Step3","Step4","Step5"]' step="{{defaultWizardStep}}">
     </timeu-wizard>
     <div class="controls">
@@ -59,17 +65,18 @@
       <button data-type="next" data-wizard="default">Next</button>
       <input type="number" min="1" value="{{defaultWizardStep::input}}">
     </div>
-    
+
     <p>Example with icons (FontAwesome) <code>&lt;timeu-wizard&gt;</code>:</p>
-     
-    <timeu-wizard id="icon" steps='[{"label":"FIRST STEP","content":"&#xf007;"},{"label":"CHOOSE INTEREST","content":"&#xf132;"},{"label":"ADD FRIENDS","content":"&#xf041;"},{"label":"VIEW MAP","content":"&#xf07a;"}]' step="{{iconWizardStep}}">
+
+    <timeu-wizard id="icon" steps='[{"label":"FIRST STEP","content":"&#xf007;"},{"label":"CHOOSE INTEREST","content":"&#xf132;"},{"label":"ADD FRIENDS","content":"&#xf041;"},{"label":"VIEW MAP","content":"&#xf07a;"}]'
+      step="{{iconWizardStep}}">
     </timeu-wizard>
     <div class="controls">
       <button data-type="previous" data-wizard="icon">Previous</button>
       <button data-type="next" data-wizard="icon">Next</button>
       <input type="number" min="1" value="{{iconWizardStep::input}}">
     </div>
-    
+
     <p>Example with custom CSS variables <code>&lt;timeu-wizard&gt;</code>:</p>
     <p><code>--timeu-wizard-line-color: yellow;<br>
           --timeu-wizard-line-size: 3px;<br>
@@ -80,7 +87,7 @@
           --timeu-wizard-label-font-size: 20px;<br>
           --timeu-wizard-step-font-size: 30px;<br>
           --timeu-wizard-circle-border-size: 2px;<br></code></p>
-     
+
     <timeu-wizard id="css" steps='["Step 1","Step 2","Step3","Step4"]' step="{{customcssStep}}">
     </timeu-wizard>
     <div class="controls">
@@ -88,42 +95,42 @@
       <button data-type="next" data-wizard="css">Next</button>
       <input type="number" min="1" value="{{customcssStep::input}}">
     </div>
-    
-   <p>Example for vertical <code>&lt;timeu-wizard vertical&gt;</code>:</p>
-   <div style="height:500px;width:50px;">  
-    <timeu-wizard id="vertical" steps='["Step 1","Step 2","Step3","Step4"]' vertical step="{{verticalStep}}">
-    </timeu-wizard>
+
+    <p>Example for vertical <code>&lt;timeu-wizard vertical&gt;</code>:</p>
+    <div style="height:500px;width:50px;">
+      <timeu-wizard id="vertical" steps='["Step 1","Step 2","Step3","Step4"]' vertical step="{{verticalStep}}">
+      </timeu-wizard>
     </div>
     <div class="controls">
       <button data-type="previous" data-wizard="vertical">Previous</button>
       <button data-type="next" data-wizard="vertical">Next</button>
       <input type="number" min="1" value="{{verticalStep::input}}">
     </div>
-    
-   </template>
-    <script>
-      window.addEventListener('WebComponentsReady', function(e) {
-       var nextBtns = document.querySelectorAll('button[data-type=next]');
+
+  </template>
+  <script>
+    window.addEventListener('WebComponentsReady', function (e) {
+      var nextBtns = document.querySelectorAll('button[data-type=next]');
       var previousBtns = document.querySelectorAll('button[data-type=previous]');
-      for(i = 0; i < nextBtns.length;i++) {
+      for (i = 0; i < nextBtns.length; i++) {
         nextBtns[i].addEventListener('click', onNext);
       }
-      for(i = 0; i < previousBtns.length;i++) {
+      for (i = 0; i < previousBtns.length; i++) {
         previousBtns[i].addEventListener('click', onPrevious);
       }
       function onNext(event) {
-        var wzrd = document.querySelector('#'+event.srcElement.dataset.wizard);
+        var wzrd = document.querySelector('#' + event.srcElement.dataset.wizard);
         wzrd.increment();
       };
       function onPrevious(event) {
-        var wzrd = document.querySelector('#'+event.srcElement.dataset.wizard);
+        var wzrd = document.querySelector('#' + event.srcElement.dataset.wizard);
         wzrd.decrement();
       };
       var defaultWizard = document.querySelector('#default');
-      defaultWizard.step=2;
-      });
-      
-    </script>
+      defaultWizard.step = 2;
+    });
+  </script>
+
+</body>
 
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/polymer.json b/polymer.json
new file mode 100644
index 0000000..1ae44d6
--- /dev/null
+++ b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-1"
+    ]
+  }
+}
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
new file mode 100644
index 0000000..c94c159
--- /dev/null
+++ b/test/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "assert": true,
+    "WCT": true,
+    "fixture": true,
+    "Polymer": true,
+    "async": true,
+    "expect": true
+  }
+}
\ No newline at end of file
diff --git a/timeu-wizard.html b/timeu-wizard.html
index 0713c9a..3bf01d8 100644
--- a/timeu-wizard.html
+++ b/timeu-wizard.html
@@ -10,8 +10,8 @@
 <link rel="import" href="../polymer/polymer.html">
 
 <!--
-An element for displaying the progress of a wizard as a series of connected circles.  
-By default the step number is displayed inside the circle and if provided a label below.  
+An element for displaying the progress of a wizard as a series of connected circles.
+By default the step number is displayed inside the circle and if provided a label below.
 The available steps are provided by either as an `array` of `Objects` or an `array` of `Strings`.
 
 Simple example:
@@ -24,9 +24,9 @@
 
     <timeu-wizard steps='[{"label:Step1","content":"A"},{label:"Step2","content":"B"}]'></timeu-wizard>
 
-It is also possible to display a vertical progress by adding the `vertical` attribute: 
+It is also possible to display a vertical progress by adding the `vertical` attribute:
 
-    <timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard> 
+    <timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
 
 ### Styling
 
@@ -67,8 +67,7 @@
         box-sizing: border-box;
         width:100%;
         height:100%;
-
-        @apply(--timeu-wizard);
+        @apply --timeu-wizard ;
       }
 
       :host([horizotnal]) ul {
@@ -92,7 +91,7 @@
         padding:0;
         margin:0;
 
-        @apply(--timeu-wizard-list);
+        @apply --timeu-wizard-list;
       }
 
       #line{
@@ -145,7 +144,7 @@
         height:100%;
         position:relative;
 
-        @apply(--timeu-wizard-container);
+        @apply --timeu-wizard-container;
       }
 
       #wizard {
@@ -160,7 +159,7 @@
         text-align: center;
         color: var(--timeu-wizard-filling-color,#dfdfdf);
 
-        @apply(--timeu-wizard-list-item);
+        @apply --timeu-wizard-list-item;
       }
 
       #wizard li[data-content]:before {
@@ -185,16 +184,16 @@
         transition: background-colorvar(--timeu-wizard-anim-speed,0.5s), border-color var(--timeu-wizard-anim-speed,0.5s);
         font-size:var(--timeu-wizard-step-font-size,25px);
 
-        @apply(--timeu-wizard-list-item-icon);
+        @apply --timeu-wizard-list-item-icon;
       }
 
       #wizard li.active, #wizard li.done  {
         color: var(--timeu-wizard-active-color,#2db36f);
-        @apply(--timeu-wizard-list-item-active);
+        @apply --timeu-wizard-list-item-active;
       }
 
       #wizard li.done {
-        @apply(--timeu-wizard-list-item-done);
+        @apply --timeu-wizard-list-item-done;
       }
 
       #wizard li.done:before {
@@ -221,7 +220,7 @@
         transition: all var(--timeu-wizard-anim-speed,0.5s);
         -webkit-transition: all var(--timeu-wizard-anim-speed,0.5s);
 
-        @apply(--timeu-wizard-list-item-checkicon);
+        @apply --timeu-wizard-list-item-checkicon;
       }
 
       #wizard li.done .checkicon {
@@ -306,7 +305,7 @@
       // Element Behavior
 
       /**
-       * Increment the current step 
+       * Increment the current step
        *
        * Use this function for moving to the next step in the wizard
        */
@@ -319,7 +318,7 @@
       /**
        * Decrement the current step
        *
-       * Use this function for moving to the previous step in the wizard 
+       * Use this function for moving to the previous step in the wizard
        */
       decrement: function() {
         if (this.step > 1) {
@@ -366,7 +365,7 @@
       },
 
       _calculateFilling: function(steps,step,vertical) {
-          var ratio = this._caclulateRatio(steps,step); 
+          var ratio = this._caclulateRatio(steps,step);
           var scaleX = (vertical ? 1 : ratio);
           var scaleY = (vertical ? ratio : 1);
           return scaleX+","+scaleY;
diff --git a/wct.conf.json b/wct.conf.json
deleted file mode 100644
index 8f70a78..0000000
--- a/wct.conf.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "plugins": {
-    "sauce": {
-      "browsers": [{
-          "browserName": "microsoftedge",
-          "platform": "Windows 10",
-          "version": ""
-        }, {
-          "browserName": "internet explorer",
-          "platform": "Windows 8.1",
-          "version": "11"
-        },
-        {
-          "browserName": "safari",
-          "platform": "OS X 10.11",
-          "version": "9"
-        }
-      ]
-    }
-  }
-}
\ No newline at end of file