diff --git a/README.md b/README.md
index 97b3132..1c4b503 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# UniFlow for Polymer
+# UniFlow for Polymer 2.x
 
-Set of behaviors to enable uni-directional data flow in Polymer application.
+Set of mixins to enable uni-directional data flow in Polymer application.
 
 **Important!**
 
@@ -22,7 +22,7 @@ This library implements the architectural pattern called 'unidirectional data fl
 
 ## Implementation
 
-UniFlow is implemented as a set of behaviors that developers assign to their elements. It is assumed that each application has a singleton application element that maintains state of entire application. Each element that needs access to the data is bound, directly or indirectly, to sub-tree of application state tree. Two way data binding is never used to send data up, from child to parent, so only parent elements send data to children using one way data binding. Child elements, in turn, send the events (emit actions) responding to user actions, indicating that the data may need to be modified. Special non-visual elements called action dispatchers mutate the data, then all elements listening to the data changes render new data. 
+UniFlow is implemented as a set of mixins that developers apply to their elements. It is assumed that each application has a singleton application element that maintains state of entire application. Each element that needs access to the data is bound, directly or indirectly, to sub-tree of application state tree. Two way data binding is never used to send data up, from child to parent, so only parent elements send data to children using one way data binding. Child elements, in turn, send the events (emit actions) responding to user actions, indicating that the data may need to be modified. Special non-visual elements called action dispatchers mutate the data, then all elements listening to the data changes render new data. 
 
 # API Documentation
 
@@ -54,32 +54,31 @@ hierarchical organization of action dispatchers.
 #### JavaScript:
 
 ```javascript
-Polymer({
-  is: 'parent-dispatcher',
-  
-  behaviors: [
-   UniFlow.ActionDispatcher
-  ],
+class ParentDispatcher extends UniFlow.ActionDispatcher(Polymer.Element) {
+
+  static get is() { return 'parent-dispatcher'; }
   
   MY_ACTION(detail) {
    // do MY_ACTION processing here
    // return false if you want to prevent other action dispatchers from
    // further processing of this action
   };
-});
+}
+
+customElements.define(ParentDispatcher.is, ParentDispatcher);
 ```
 
 ## Action Emitter
 
-Whenever element needs to emit an action, this behavior should be used. Action object must always include type property.
+Whenever element needs to emit an action, this mixin should be used. Action object must always include type property.
 
 ## Application State
 
-Assign this behavior to your main application element. It provides global
-state and functionality to maintain individual elements states. This behavior
+Assign this mixin to your main application element. It provides global
+state and functionality to maintain individual elements states. This mixin
 is responsible for notifying all state-aware elements about their state
 changes (provided those elements have `statePath` property defined).
-Only one element in the application is supposed to have this behavior.
+Only one element in the application is supposed to have this mixin.
 
 ### Example:
 
@@ -97,19 +96,19 @@ Only one element in the application is supposed to have this behavior.
 #### JavaScript:
 
 ```javascript
-Polymer({
-  is: 'my-app',
+class MyApp extends UniFlow.ApplicationState(Polymer.Element) {
 
-  behaviors: [
-    UniFlow.ApplicationState
-  ],
+  static get is() { return 'my-app'; }
 
-  attached() {
+  connectedCallback() {
+    super.connectedCallback();
     this.state = {
       someElement: {}
     }
   }
-});
+}
+
+customElements.define(MayApp.is, MyApp);
 ```
 
 In the example above, `<some-element>` will receive notification of any changes to the state,
@@ -136,9 +135,9 @@ changes.
 
 ## List View
 
-This behavior used by elements that need to render multiple models backed
+This mixin used by elements that need to render multiple models backed
 by 'list' array. You may want to use ModelView to render individual
-models in the list. The behavior supports element selection by setting predefined
+models in the list. The mixin supports element selection by setting predefined
 $selected property on list elements.
 
 ### Example:
@@ -161,20 +160,17 @@ Selected: [[selectedCount]] items
 #### JavaScript:
 
 ```javascript
-Polymer({
-
-  is: "list-element",
+class ListElement extends Polymer.GestureEventListeners(UniFlow.ListView(UniFlow.StateAware(Polymer.Element))) {
 
-  behaviors: [
-    UniFlow.ListView,
-    UniFlow.StateAware
-  ],
+  static get is() { return "list-element"; }
 
   onDeleteTap() {
     this.deleteSelected();
   }
 
-});
+}
+
+customElements.define(ListElement.is, ListElement);
 ```
 
 In the example above list view element is also state-aware, meaning it has its own place
@@ -191,7 +187,7 @@ within dom-repeat template will have `state-path` property  set to
 ## Model View
 
 Element rendering data represented by a single object (model) in the
-application state should use ModelView behavior. Model View is a powerful
+application state should use ModelView mixin. Model View is a powerful
 concept that encapsulates model data (likely the data received from the
 server and to be persisted to the server if modified as a result of user
 actions), status (validity of the data, flag that data was modified,
@@ -199,13 +195,13 @@ notifications for the user, etc.). Auxiliary data supplied by action
 dispatchers and needed for display purposes or element's logic
 should be defined as element’s properties. Same applies to data
 created/modified by the element but not intended to be persisted.
-If `StateAware` behavior is used along with `ModelView`, you can take advantage
+If `StateAware` mixin is used along with `ModelView`, you can take advantage
 of statePath property that indicates path to the element's state in the
 application state tree. Whenever any data is mutated by action dispatchers
 at statePath or below, the element will receive notification of its
 properties' change (even if there is no explicit binding for those
 properties). See `UniFlow.StateAware` for more details and example.
-ModelView behavior defines some properties that are intended to be overridden
+ModelView mixin defines some properties that are intended to be overridden
 in the elements:
 
 + `validation` property allows to specify validation rules
@@ -237,22 +233,24 @@ string for given error code (to translate validation error code to message)
 #### JavaScript:
 
 ```javascript
-Polymer({
-  is: "my-model",
-  saveAction: 'MY_SAVE',
-  behaviors: [
-   UniFlow.ModelView
-  ],
+class MyModel extends Polymer.GestureEventListeners(UniFlow.ModelView(Polymer.Element)) {
+
+  static get is() { return "my-model"; }
   
-  validation: {
-   name: (value) => {
-     if (!value || !value.trim()) {
-       return 'Name is not specified';
-     }
-   }
-  },
+  get saveAction() { return 'MY_SAVE'; }
   
-  attached() {
+  get validation() { 
+    return {
+      name: (value) => {
+        if (!value || !value.trim()) {
+          return 'Name is not specified';
+        }
+      }
+    }
+  }
+  
+  connectedCallback() {
+   super.connectedCallback();
    this.fetchData();
   },
   
@@ -266,12 +264,14 @@ Polymer({
   onSaveTap() {
    this.validateAndSave();
   }
-});
+}
+
+customElements.define(MyModel.is, MyModel);
 ```
 
 In the example above model view has input field for `name` property and Save button. On
 element attach the action is emitted to fetch the model's data. Note that in `emitAction()` method
-the path is specified as `'model'`. ActionEmitter behavior is responsible of expanding the path
+the path is specified as `'model'`. ActionEmitter mixin is responsible of expanding the path
 with element's state path, ensuring that when action dispatcher gets to process the action, the
 path contains full path in the state tree. So assuming that `my-model` is declared as follows:
 
@@ -297,7 +297,7 @@ path.
 
 ## State Aware
 
- Key behavior that must be assigned to all elements that need to access
+ Key mixin that must be assigned to all elements that need to access
  application state and/or have access to the application element. The element is
  notified of any changes to application's state, as well as all its properties
  when they're modified by state mutator elements. `state-path` property must
@@ -318,17 +318,16 @@ path.
 #### JavaScript:
 
 ```javascript
-Polymer({
-  is: 'my-element',
+class MyElement extends UniFlow.StateAware(Polymer.Element) {
+
+  static get is() { return 'my-element'; }
   
   properties: {
     valueB: String
-  },
-  
-  behaviors: [
-    UniFlow.StateAware
-  ]
-});
+  }
+}
+
+customElements.define(MyElement.is, MyElement);
 ```
 
 When above element is declared as follows:
@@ -344,7 +343,7 @@ elements.
 ## State Mutator
 
 Some non-visual elements, like action dispatchers, need to modify application
-state, in which case they should have this behavior assigned. Implements state-
+state, in which case they should have this mixin assigned. Implements state-
 aware and re-declares state property with notify attribute. State mutator elements
 are only supposed to exist at the application level.
 
diff --git a/action-dispatcher.html b/action-dispatcher.html
index fba6c6a..34c6897 100644
--- a/action-dispatcher.html
+++ b/action-dispatcher.html
@@ -14,91 +14,97 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="state-aware.html">
 <link rel="import" href="state-mutator.html">
 
 
-<script type="text/javascript" type="text/ecmascript-6">
-
+<script type="text/javascript">
   var UniFlow = window.UniFlow || {};
 
-/**
- Use UniFlow.ActionDispatcher for non-visual elements that process actions emitted by visual
- elements. Action dispatchers usually placed at the application level. Each action dispatcher
- element gets a chance to process the action in the order the elements are present in the
- DOM tree. It is important that action dispatcher elements get two-way data binding to
- application state as follows:
-
-    <action-dispatcher state="{{state}}"></action-dispatcher>
-
- Action dispatcher elements can include nested action dispatchers, so you can have a
- hierarchical organization of action dispatchers.
-
- ### Example:
-
- #### HTML:
-
-    <dom-module id="parent-dispatcher">
-      <template>
-        <child-dispatcher-a state="{{state}}"></child-dispatcher-a>
-        <child-dispatcher-b state="{{state}}"></child-dispatcher-b>
-      </template>
-    </dom-module>
-
- #### JavaScript:
-
-     Polymer({
-       is: 'parent-dispatcher',
-
-       behaviors: [
-         UniFlow.ActionDispatcher
-       ],
-
-       MY_ACTION(detail) {
-         // do MY_ACTION processing here
-         // return false if you want to prevent other action dispatchers from
-         // further processing of this action
-       };
-     });
-
- @polymerBehavior UniFlow.ActionDispatcher
-*/
-
-  UniFlow.ActionDispatcherImpl = {
-
-    hostAttributes: {
-      'action-dispatcher': true
-    },
-
-    /**
-     * Dispatches action by invoking the method with the name that matches
-     * action type (`detail.type`) passing detail object as a parameter;
-     * also selects all children action dispatchers in the element's DOM tree and
-     * invokes dispatchAction method on them. False returned by an action dispatcher method
-     * results in dispatchAction method returning false (which in turn stops further processing
-     * of the action by other action dispatchers).
-     *
-     * @param {{type: string}} detail
-     * @return {boolean}
-     */
-    dispatchAction(detail) {
-      if (this[detail.type] && typeof this[detail.type] === 'function') {
-        if (this[detail.type](detail) === false) {
-          return false;
+  /**
+   Use UniFlow.ActionDispatcher for non-visual elements that process actions emitted by visual
+   elements. Action dispatchers usually placed at the application level. Each action dispatcher
+   element gets a chance to process the action in the order the elements are present in the
+   DOM tree. It is important that action dispatcher elements get two-way data binding to
+   application state as follows:
+
+      <action-dispatcher state="{{state}}"></action-dispatcher>
+
+   Action dispatcher elements can include nested action dispatchers, so you can have a
+   hierarchical organization of action dispatchers.
+
+   ### Example:
+
+   #### HTML:
+
+      <dom-module id="parent-dispatcher">
+        <template>
+          <child-dispatcher-a state="{{state}}"></child-dispatcher-a>
+          <child-dispatcher-b state="{{state}}"></child-dispatcher-b>
+        </template>
+      </dom-module>
+
+   #### JavaScript:
+       class ParentDispatcher extends UniFlow.ActionDispatcher(Polymer.Element) {
+         static get is() { return 'parent-dispatcher'; }
+
+         MY_ACTION(detail) {
+           // do MY_ACTION processing here
+           // return false if you want to prevent other action dispatchers from
+           // further processing of this action
+         };
+       }
+
+       customElements.define(ParentDispatcher.is, ParentDispatcher);
+
+   @polymer
+   @mixinFunction
+   @appliesMixin UniFlow.StateMutator
+  */
+  UniFlow.ActionDispatcher = Polymer.dedupingMixin((base) =>
+    class extends UniFlow.StateMutator(base) {
+      static get properties() {
+        return {
+          actionDispatcher: {
+            type: Boolean,
+            value: true,
+            reflectToAttribute: true
+          }
         }
       }
-      return Polymer.dom(this.root).querySelectorAll('[action-dispatcher]')
-          .every((element) => element.dispatchAction(detail) !== false);
-    }
 
-  };
+      /**
+       * Dispatches action by invoking the method with the name that matches
+       * action type (`detail.type`) passing detail object as a parameter;
+       * also selects all children action dispatchers in the element's DOM tree and
+       * invokes dispatchAction method on them. False returned by an action dispatcher method
+       * results in dispatchAction method returning false (which in turn stops further processing
+       * of the action by other action dispatchers).
+       *
+       * @param {{type: string}} detail
+       * @return {boolean}
+       */
+      dispatchAction(detail) {
+        if (this[detail.type] && typeof this[detail.type] === 'function') {
+          if (this[detail.type](detail) === false) {
+            return false;
+          }
+        }
+
+        var result = true;
+
+        //dispatch action on nested dispatchers
+        if (this.root) {
+          var nodes = this.root.querySelectorAll('[action-dispatcher]');
 
-  /** @polymerBehavior */
-  UniFlow.ActionDispatcher = [
-    UniFlow.StateAware,
-    UniFlow.StateMutator,
-    UniFlow.ActionDispatcherImpl
-  ];
+          for (var node of nodes) {
+            result = result & node.dispatchAction(detail);
+          }
+        }
+
+        return result;
+      }
 
-</script>
+    });
+</script>
\ No newline at end of file
diff --git a/action-emitter.html b/action-emitter.html
index ce5d2c6..761168a 100644
--- a/action-emitter.html
+++ b/action-emitter.html
@@ -14,48 +14,53 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 
 
 <script>
-
   var UniFlow = window.UniFlow || {};
 
-/**
- Whenever element needs to emit an action, this behavior should be used.
- Action object must always include type property.
-
- @polymerBehavior
-*/
-  UniFlow.ActionEmitter = {
-
-    /**
-     * Fired when action is emitted to be processed by action dispatcher.
-     *
-     * @event dispatch-action
-     */
-
-    /**
-     * Emits the action described by detail parameter. Detail object must always
-     * include type property. To emit the action we use Polymer custom event
-     * mechanism. Application element listens to the `dispatch-action` event and
-     * invokes `dispatchAction` methods for all action dispatchers associated with
-     * the application. Make sure your element is attached to DOM tree, otherwise
-     * event will never reach your application element. It is a good practice to
-     * ensure that `state` property is initialized (for state-aware elements) before
-     * emitting any actions (as `state` property is initialized on attach).
-     *
-     * @param {*} detail
-     */
-    emitAction: function(detail) {
-      if (detail.path && this.statePath) {
-        if (!detail.path.startsWith('state.')) {
-          detail.path = this.statePath + '.' + detail.path;
+  /**
+   Whenever element needs to emit an action, this mixin should be applied.
+   Action object must always include type property.
+
+   @polymer
+   @mixinFunction
+  */
+  UniFlow.ActionEmitter = Polymer.dedupingMixin((base) =>
+    class extends base {
+
+      /**
+       * Fired when action is emitted to be processed by action dispatcher.
+       *
+       * @event dispatch-action
+       */
+
+      /**
+       * Emits the action described by detail parameter. Detail object must always
+       * include type property. To emit the action we use custom event
+       * mechanism. Application element listens to the `dispatch-action` event and
+       * invokes `dispatchAction` methods for all action dispatchers associated with
+       * the application. Make sure your element is attached to DOM tree, otherwise
+       * event will never reach your application element. It is a good practice to
+       * ensure that `state` property is initialized (for state-aware elements) before
+       * emitting any actions (as `state` property is initialized on attach).
+       *
+       * @param {*} detail
+       */
+      emitAction(detail) {
+        if (detail.path && this.statePath) {
+          if (!detail.path.startsWith('state.')) {
+            detail.path = this.statePath + '.' + detail.path;
+          }
         }
+        
+        this.dispatchEvent(new CustomEvent('dispatch-action', {
+          detail: detail,
+          bubbles: true,
+          composed: true
+        }));
       }
-      this.fire('dispatch-action', detail);
-    }
-
-  };
 
-</script>
+    });
+</script>
\ No newline at end of file
diff --git a/analysis.json b/analysis.json
new file mode 100644
index 0000000..337efdc
--- /dev/null
+++ b/analysis.json
@@ -0,0 +1,2644 @@
+{
+  "schema_version": "1.0.0",
+  "elements": [
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-header.html",
+      "properties": [],
+      "methods": [
+        {
+          "name": "onInputKeyDown",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 30,
+              "column": 6
+            },
+            "end": {
+              "line": 38,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 19,
+          "column": 4
+        },
+        "end": {
+          "line": 39,
+          "column": 5
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodoHeader",
+      "attributes": [],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-header"
+    },
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-item.html",
+      "properties": [
+        {
+          "name": "filterBy",
+          "type": "string",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 129,
+              "column": 10
+            },
+            "end": {
+              "line": 129,
+              "column": 26
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "isEditing",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 130,
+              "column": 10
+            },
+            "end": {
+              "line": 133,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "false"
+        }
+      ],
+      "methods": [
+        {
+          "name": "onCompletedChange",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 137,
+              "column": 6
+            },
+            "end": {
+              "line": 143,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "name": "_removeTodo",
+          "description": "",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 145,
+              "column": 6
+            },
+            "end": {
+              "line": 150,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "onDestroyTap",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 152,
+              "column": 6
+            },
+            "end": {
+              "line": 154,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "name": "onViewDblClick",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 156,
+              "column": 6
+            },
+            "end": {
+              "line": 160,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "name": "onInputBlur",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 162,
+              "column": 6
+            },
+            "end": {
+              "line": 166,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        },
+        {
+          "name": "_confirmEdit",
+          "description": "",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 168,
+              "column": 6
+            },
+            "end": {
+              "line": 178,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "onInputKeyDown",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 180,
+              "column": 6
+            },
+            "end": {
+              "line": 186,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "e"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 120,
+          "column": 4
+        },
+        "end": {
+          "line": 187,
+          "column": 5
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodoItem",
+      "attributes": [
+        {
+          "name": "filter-by",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 129,
+              "column": 10
+            },
+            "end": {
+              "line": 129,
+              "column": 26
+            }
+          },
+          "metadata": {},
+          "type": "string"
+        },
+        {
+          "name": "is-editing",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 130,
+              "column": 10
+            },
+            "end": {
+              "line": 133,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-item"
+    },
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-items.html",
+      "properties": [],
+      "methods": [
+        {
+          "name": "filterList",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 39,
+              "column": 6
+            },
+            "end": {
+              "line": 50,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "filterBy"
+            }
+          ]
+        },
+        {
+          "name": "onAllCompletedChange",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 52,
+              "column": 6
+            },
+            "end": {
+              "line": 58,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "event"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 34,
+          "column": 4
+        },
+        "end": {
+          "line": 59,
+          "column": 5
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodoItems",
+      "attributes": [],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-items"
+    },
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-footer.html",
+      "properties": [
+        {
+          "name": "filterBy",
+          "type": "string",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 47,
+              "column": 10
+            },
+            "end": {
+              "line": 47,
+              "column": 26
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "completedCount",
+          "type": "number",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 48,
+              "column": 10
+            },
+            "end": {
+              "line": 51,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "readOnly": true
+            }
+          }
+        }
+      ],
+      "methods": [
+        {
+          "name": "isEqual",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 55,
+              "column": 6
+            },
+            "end": {
+              "line": 57,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "val1"
+            },
+            {
+              "name": "val2"
+            }
+          ]
+        },
+        {
+          "name": "getCompletedCount",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 59,
+              "column": 6
+            },
+            "end": {
+              "line": 61,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "totalCount"
+            },
+            {
+              "name": "activeCount"
+            }
+          ]
+        },
+        {
+          "name": "onClearCompletedButtonTap",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 63,
+              "column": 6
+            },
+            "end": {
+              "line": 67,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 39,
+          "column": 4
+        },
+        "end": {
+          "line": 68,
+          "column": 5
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodoFooter",
+      "attributes": [
+        {
+          "name": "filter-by",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 47,
+              "column": 10
+            },
+            "end": {
+              "line": 47,
+              "column": 26
+            }
+          },
+          "metadata": {},
+          "type": "string"
+        },
+        {
+          "name": "completed-count",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 48,
+              "column": 10
+            },
+            "end": {
+              "line": 51,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "number"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-footer"
+    },
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-action-dispatcher.html",
+      "properties": [],
+      "methods": [
+        {
+          "name": "_updateAllCompleted",
+          "description": "",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 11,
+              "column": 12
+            },
+            "end": {
+              "line": 18,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "_updateActiveCount",
+          "description": "",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 20,
+              "column": 12
+            },
+            "end": {
+              "line": 23,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "todo.actions.INIT_APPLICATION",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 25,
+              "column": 12
+            },
+            "end": {
+              "line": 28,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        },
+        {
+          "name": "todo.actions.ADD_TODO",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 30,
+              "column": 12
+            },
+            "end": {
+              "line": 36,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        },
+        {
+          "name": "todo.actions.UPDATE_TODO",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 38,
+              "column": 12
+            },
+            "end": {
+              "line": 41,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        },
+        {
+          "name": "todo.actions.REMOVE_TODO",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 43,
+              "column": 12
+            },
+            "end": {
+              "line": 48,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        },
+        {
+          "name": "todo.actions.SELECTION_CHANGED",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 50,
+              "column": 12
+            },
+            "end": {
+              "line": 65,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        },
+        {
+          "name": "todo.actions.CLEAR_COMPLETED",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 67,
+              "column": 12
+            },
+            "end": {
+              "line": 75,
+              "column": 13
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "details"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 6,
+          "column": 8
+        },
+        "end": {
+          "line": 76,
+          "column": 9
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodpActionDispatcher",
+      "attributes": [],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-action-dispatcher"
+    },
+    {
+      "description": "",
+      "summary": "",
+      "path": "todomvc/elements/todo-app.html",
+      "properties": [
+        {
+          "name": "route",
+          "type": "Object",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 50,
+              "column": 10
+            },
+            "end": {
+              "line": 50,
+              "column": 23
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "routeData",
+          "type": "Object",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 51,
+              "column": 10
+            },
+            "end": {
+              "line": 51,
+              "column": 27
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        }
+      ],
+      "methods": [
+        {
+          "name": "ready",
+          "description": "",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 55,
+              "column": 6
+            },
+            "end": {
+              "line": 61,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "onStorageLoadEmpty",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 63,
+              "column": 6
+            },
+            "end": {
+              "line": 65,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "onStorageLoad",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 67,
+              "column": 6
+            },
+            "end": {
+              "line": 71,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 43,
+          "column": 4
+        },
+        "end": {
+          "line": 72,
+          "column": 5
+        }
+      },
+      "privacy": "public",
+      "superclass": "HTMLElement",
+      "name": "TodoApp",
+      "attributes": [
+        {
+          "name": "route",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 50,
+              "column": 10
+            },
+            "end": {
+              "line": 50,
+              "column": 23
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        },
+        {
+          "name": "route-data",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 51,
+              "column": 10
+            },
+            "end": {
+              "line": 51,
+              "column": 27
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "tagname": "todo-app"
+    }
+  ],
+  "mixins": [
+    {
+      "description": "   Key mixin that must be assigned to all elements that need to access\n   application state and/or have access to the application element. The element is\n   notified of any changes to application's state, as well as all its properties\n   when they're modified by state mutator elements. `state-path` property must\n   be used to identify path to element's state in application state tree. \n\n   ### Example:\n\n   #### HTML:\n\n      <template>\n\n        <div>Value A: [[state.valueA]]</div>\n        <div>Value B: [[valueB]]</div>\n\n      </template>\n\n   #### JavaScript:\n\n      class MyElement extends UniFlow.StateAware(Polymer.Element) {\n        static get is() { return 'my-element'; }\n\n        static get properties() {\n          return {\n            valueB: String\n          }\n        }\n      }\n\n      customElement.define(MyElement.is, MyElement);\n\n   When above element is declared as follows:\n\n      <my-element state-path=\"state.myElement\"></my-element>\n\n   it will be notified about changes (and render those) to `state.valueA` or\n   `state.myElement.valueB` in action dispatchers or other state mutating\n   elements.\n\n   ",
+      "summary": "",
+      "path": "state-aware.html",
+      "properties": [
+        {
+          "name": "state",
+          "type": "Object",
+          "description": "Application state, shared among application and all state-aware elements.\nThis property is initialized when element is attached.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 74,
+              "column": 10
+            },
+            "end": {
+              "line": 76,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "statePath",
+          "type": "string",
+          "description": "Path to element state in the application state tree.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "stateAware",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true"
+        },
+        {
+          "name": "application",
+          "type": "Object",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        }
+      ],
+      "methods": [
+        {
+          "name": "connectedCallback",
+          "description": "Adds this element to the list of state-aware elements in the application.\nSets the value of state property to the state of the application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 116,
+              "column": 6
+            },
+            "end": {
+              "line": 132,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "disconnectedCallback",
+          "description": "Removes this element from the list of state-aware elements in the\napplication.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 138,
+              "column": 6
+            },
+            "end": {
+              "line": 145,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "getApplication",
+          "description": "Returns application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 151,
+              "column": 6
+            },
+            "end": {
+              "line": 153,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "return": {
+            "type": "Element"
+          }
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 65,
+          "column": 2
+        },
+        "end": {
+          "line": 155,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.StateAware",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "Application state, shared among application and all state-aware elements.\nThis property is initialized when element is attached.",
+          "sourceRange": {
+            "start": {
+              "line": 74,
+              "column": 10
+            },
+            "end": {
+              "line": 76,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        },
+        {
+          "name": "state-path",
+          "description": "Path to element state in the application state tree.",
+          "sourceRange": {
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "string"
+        },
+        {
+          "name": "state-aware",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        },
+        {
+          "name": "application",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "sourceRange": {
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": []
+    },
+    {
+      "description": "   Some non-visual elements, like action dispatchers, need to modify application\n   state, in which case they should have this mixin applied. Implements state-\n   aware and re-declares state property with notify attribute. State mutator elements\n   are only supposed to exist at the application level.\n\n   ",
+      "summary": "",
+      "path": "state-mutator.html",
+      "properties": [
+        {
+          "name": "state",
+          "type": "Object",
+          "description": "Application state.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "notify": true
+            }
+          }
+        },
+        {
+          "name": "statePath",
+          "type": "string",
+          "description": "Path to element state in the application state tree.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "stateAware",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "type": "Object",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        }
+      ],
+      "methods": [
+        {
+          "name": "connectedCallback",
+          "description": "Adds this element to the list of state-aware elements in the application.\nSets the value of state property to the state of the application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 116,
+              "column": 6
+            },
+            "end": {
+              "line": 132,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "disconnectedCallback",
+          "description": "Removes this element from the list of state-aware elements in the\napplication.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 138,
+              "column": 6
+            },
+            "end": {
+              "line": 145,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "getApplication",
+          "description": "Returns application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 151,
+              "column": 6
+            },
+            "end": {
+              "line": 153,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "return": {
+            "type": "Element"
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 33,
+          "column": 2
+        },
+        "end": {
+          "line": 48,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.StateMutator",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "Application state.",
+          "sourceRange": {
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        },
+        {
+          "name": "state-path",
+          "description": "Path to element state in the application state tree.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "string",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "state-aware",
+          "description": "",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object",
+          "inheritedFrom": "UniFlow.StateAware"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "mixins": [
+        "UniFlow.StateAware"
+      ]
+    },
+    {
+      "description": "   Use UniFlow.ActionDispatcher for non-visual elements that process actions emitted by visual\n   elements. Action dispatchers usually placed at the application level. Each action dispatcher\n   element gets a chance to process the action in the order the elements are present in the\n   DOM tree. It is important that action dispatcher elements get two-way data binding to\n   application state as follows:\n\n      <action-dispatcher state=\"{{state}}\"></action-dispatcher>\n\n   Action dispatcher elements can include nested action dispatchers, so you can have a\n   hierarchical organization of action dispatchers.\n\n   ### Example:\n\n   #### HTML:\n\n      <dom-module id=\"parent-dispatcher\">\n        <template>\n          <child-dispatcher-a state=\"{{state}}\"></child-dispatcher-a>\n          <child-dispatcher-b state=\"{{state}}\"></child-dispatcher-b>\n        </template>\n      </dom-module>\n\n   #### JavaScript:\n       class ParentDispatcher extends UniFlow.ActionDispatcher(Polymer.Element) {\n         static get is() { return 'parent-dispatcher'; }\n\n         MY_ACTION(detail) {\n           // do MY_ACTION processing here\n           // return false if you want to prevent other action dispatchers from\n           // further processing of this action\n         };\n       }\n\n       customElements.define(ParentDispatcher.is, ParentDispatcher);\n\n   ",
+      "summary": "",
+      "path": "action-dispatcher.html",
+      "properties": [
+        {
+          "name": "state",
+          "type": "Object",
+          "description": "Application state.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-mutator.html",
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "notify": true
+            }
+          },
+          "inheritedFrom": "UniFlow.StateMutator"
+        },
+        {
+          "name": "statePath",
+          "type": "string",
+          "description": "Path to element state in the application state tree.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "stateAware",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "type": "Object",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "actionDispatcher",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 68,
+              "column": 10
+            },
+            "end": {
+              "line": 72,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true"
+        }
+      ],
+      "methods": [
+        {
+          "name": "connectedCallback",
+          "description": "Adds this element to the list of state-aware elements in the application.\nSets the value of state property to the state of the application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 116,
+              "column": 6
+            },
+            "end": {
+              "line": 132,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "disconnectedCallback",
+          "description": "Removes this element from the list of state-aware elements in the\napplication.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 138,
+              "column": 6
+            },
+            "end": {
+              "line": 145,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "getApplication",
+          "description": "Returns application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 151,
+              "column": 6
+            },
+            "end": {
+              "line": 153,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "return": {
+            "type": "Element"
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "dispatchAction",
+          "description": "Dispatches action by invoking the method with the name that matches\naction type (`detail.type`) passing detail object as a parameter;\nalso selects all children action dispatchers in the element's DOM tree and\ninvokes dispatchAction method on them. False returned by an action dispatcher method\nresults in dispatchAction method returning false (which in turn stops further processing\nof the action by other action dispatchers).",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 87,
+              "column": 6
+            },
+            "end": {
+              "line": 106,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "detail",
+              "type": "{type: string}"
+            }
+          ],
+          "return": {
+            "type": "boolean"
+          }
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 64,
+          "column": 2
+        },
+        "end": {
+          "line": 108,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.ActionDispatcher",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "Application state.",
+          "sourceRange": {
+            "file": "state-mutator.html",
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object",
+          "inheritedFrom": "UniFlow.StateMutator"
+        },
+        {
+          "name": "state-path",
+          "description": "Path to element state in the application state tree.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "string",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "state-aware",
+          "description": "",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "action-dispatcher",
+          "description": "",
+          "sourceRange": {
+            "start": {
+              "line": 68,
+              "column": 10
+            },
+            "end": {
+              "line": 72,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "mixins": [
+        "UniFlow.StateMutator"
+      ]
+    },
+    {
+      "description": "   Whenever element needs to emit an action, this mixin should be applied.\n   Action object must always include type property.\n\n   ",
+      "summary": "",
+      "path": "action-emitter.html",
+      "properties": [],
+      "methods": [
+        {
+          "name": "emitAction",
+          "description": "Emits the action described by detail parameter. Detail object must always\ninclude type property. To emit the action we use custom event\nmechanism. Application element listens to the `dispatch-action` event and\ninvokes `dispatchAction` methods for all action dispatchers associated with\nthe application. Make sure your element is attached to DOM tree, otherwise\nevent will never reach your application element. It is a good practice to\nensure that `state` property is initialized (for state-aware elements) before\nemitting any actions (as `state` property is initialized on attach).",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 50,
+              "column": 6
+            },
+            "end": {
+              "line": 62,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "detail",
+              "type": "*"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 29,
+          "column": 2
+        },
+        "end": {
+          "line": 64,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.ActionEmitter",
+      "attributes": [],
+      "events": [
+        {
+          "type": "CustomEvent",
+          "name": "dispatch-action",
+          "description": "dispatch-action",
+          "metadata": {}
+        }
+      ],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": []
+    },
+    {
+      "description": "   Apply this mixin to your main application element. It provides global\n   state and functionality to maintain individual elements states. This mixin\n   is responsible for notifying all state-aware elements about their state\n   changes (provided those elements have `statePath` property defined).\n   Only one element in the application is supposed to have this mixin.\n\n   ### Example:\n\n   #### HTML:\n\n       <template>\n\n         <!-- action dispatchers in the order of action processing -->\n         <action-dispatcher-a state=\"{{state}}\"></action-dispatcher-a>\n         <action-dispatcher-b state=\"{{state}}\"></action-dispatcher-b>\n\n         <!-- state-aware elements -->\n         <some-element state-path=\"state.someElement\"></some-element>\n\n       </template>\n\n   #### JavaScript:\n       class MyApp extends UniFlow.ApplicationState(Polymer.Element) {\n         static get is() { return 'my-app'; }\n\n         connectedCallback() {\n           super.ConnectedCallback();\n\n           this.state = {\n             someElement: {}\n           }\n         }\n       }\n\n       customElements.define(MyApp.is,MyApp);\n\n   In the example above, `<some-element>` will receive notification of any changes to the state,\n   as if it was declared as follows:\n\n       <some-element state=\"[[state]]\"></some-element>\n\n   Also, if `<some-element>` has `propertyA`, on element attach this property will be assigned\n   the value of `state.someElement.propertyA`, and receive all notification of the property change\n   whenever the corresponding data in state tree changes. This essentially translates to following\n   declaration:\n\n       <some-element state=\"[[state]]\"\n                     propertyA=\"[[state.someElement.propertyA]]\">\n       </some-element>\n\n   Note that data binding is one-way in both cases. Although state-aware elements can modify their\n   own state, it is considered their private state and no other elements will be notified of those\n   changes.\n\n   ",
+      "summary": "",
+      "path": "application-state.html",
+      "properties": [
+        {
+          "name": "state",
+          "type": "Object",
+          "description": "Application state.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-mutator.html",
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "notify": true
+            }
+          },
+          "inheritedFrom": "UniFlow.StateMutator"
+        },
+        {
+          "name": "statePath",
+          "type": "string",
+          "description": "Path to element state in the application state tree.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "stateAware",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "type": "Object",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "actionDispatcher",
+          "type": "boolean",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "action-dispatcher.html",
+            "start": {
+              "line": 68,
+              "column": 10
+            },
+            "end": {
+              "line": 72,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "true",
+          "inheritedFrom": "UniFlow.ActionDispatcher"
+        }
+      ],
+      "methods": [
+        {
+          "name": "connectedCallback",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 100,
+              "column": 6
+            },
+            "end": {
+              "line": 103,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "disconnectedCallback",
+          "description": "",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 105,
+              "column": 6
+            },
+            "end": {
+              "line": 108,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "getApplication",
+          "description": "Returns application element.",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 151,
+              "column": 6
+            },
+            "end": {
+              "line": 153,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "return": {
+            "type": "Element"
+          },
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "dispatchAction",
+          "description": "Dispatches action by invoking the method with the name that matches\naction type (`detail.type`) passing detail object as a parameter;\nalso selects all children action dispatchers in the element's DOM tree and\ninvokes dispatchAction method on them. False returned by an action dispatcher method\nresults in dispatchAction method returning false (which in turn stops further processing\nof the action by other action dispatchers).",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "action-dispatcher.html",
+            "start": {
+              "line": 87,
+              "column": 6
+            },
+            "end": {
+              "line": 106,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "detail",
+              "type": "{type: string}"
+            }
+          ],
+          "return": {
+            "type": "boolean"
+          },
+          "inheritedFrom": "UniFlow.ActionDispatcher"
+        },
+        {
+          "name": "onDispatchAction_",
+          "description": "Application state listens to dispatch-action method and invokes\ndispatchAction method on itself (which in turn invokes dispatchAction\non all action dispatchers declared within application element).",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 119,
+              "column": 6
+            },
+            "end": {
+              "line": 121,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "event",
+              "type": "!Event"
+            }
+          ]
+        },
+        {
+          "name": "stateChanged_",
+          "description": "Called when state.* changes. Notifies state-aware elements of their\nstate changes, if applicable.",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 130,
+              "column": 6
+            },
+            "end": {
+              "line": 132,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "change",
+              "type": "!Object",
+              "description": "the Polymer change event for the path"
+            }
+          ]
+        },
+        {
+          "name": "notifyStateAwareElements_",
+          "description": "Iterates through the array of state-aware elements in the application\nand notifies them about their state change, if applicable. Note that\nstate-aware elements must be attached to DOM tree in order to receive\nnotifications.",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 143,
+              "column": 6
+            },
+            "end": {
+              "line": 166,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "change"
+            }
+          ]
+        },
+        {
+          "name": "ready",
+          "description": "Sets application.element value to this element (so all state-aware elements\nhave access to application element).",
+          "privacy": "protected",
+          "sourceRange": {
+            "start": {
+              "line": 172,
+              "column": 6
+            },
+            "end": {
+              "line": 175,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 85,
+          "column": 2
+        },
+        "end": {
+          "line": 177,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.ApplicationState",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "Application state.",
+          "sourceRange": {
+            "file": "state-mutator.html",
+            "start": {
+              "line": 41,
+              "column": 10
+            },
+            "end": {
+              "line": 44,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object",
+          "inheritedFrom": "UniFlow.StateMutator"
+        },
+        {
+          "name": "state-path",
+          "description": "Path to element state in the application state tree.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 81,
+              "column": 10
+            },
+            "end": {
+              "line": 83,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "string",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "state-aware",
+          "description": "",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 85,
+              "column": 10
+            },
+            "end": {
+              "line": 89,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "application",
+          "description": "Application-level object that allows all state-aware objects access\nto application element. This property is shared among all state-aware\nelements and has element field initialized with reference to application\nelement. Any state-aware element can access application element using\n`getApplication()` method. Also, all state-aware elements\nadd themselves to `application.stateAwareElements` array on attach (and\nremove on detach); this list is used to send notification about\nelement state changes.",
+          "sourceRange": {
+            "file": "state-aware.html",
+            "start": {
+              "line": 101,
+              "column": 10
+            },
+            "end": {
+              "line": 107,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object",
+          "inheritedFrom": "UniFlow.StateAware"
+        },
+        {
+          "name": "action-dispatcher",
+          "description": "",
+          "sourceRange": {
+            "file": "action-dispatcher.html",
+            "start": {
+              "line": 68,
+              "column": 10
+            },
+            "end": {
+              "line": 72,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "boolean",
+          "inheritedFrom": "UniFlow.ActionDispatcher"
+        }
+      ],
+      "events": [],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "mixins": [
+        "UniFlow.ActionDispatcher"
+      ]
+    },
+    {
+      "description": "   This mixin used by elements that need to render multiple models backed\n   by 'list' array. You may want to use ModelView to render individual\n   models in the list. The mixin supports element selection by setting predefined\n   $selected property on list elements.\n\n   ### Example:\n\n   #### HTML:\n\n       <ul>\n         <template id=\"list-template\" is=\"dom-repeat\" items=\"[[list]]\">\n           <li id=\"[[item.id]]\">\n             <paper-checkbox checked=\"{{item.$selected}}\">\n             <model-view state-path=\"[[statePath]].list.#[[index]]\"></model-view>\n           </li>\n         </template>\n       </ul>\n       Selected: [[selectedCount]] items\n       <paper-button on-tap=\"onDeleteTap\">Delete</paper-button>\n\n   #### JavaScript:\n       class ListElement extends UniFlow.StateAware(UniFlow.ListView(Polymer.Element)) {\n         static get is() { return \"list-element\"; }\n\n         onDeleteTap() {\n           this.deleteSelected();\n         }\n       }\n\n       customElements.define(ListElement.is, ListElement);\n\n   In the example above list view element is also state-aware, meaning it has its own place\n   in the application state tree. Assuming it has been declared as follows:\n\n       <list-element state-path=\"state.listElement\"></list-element>\n\n   it will be rendering `state.listElement.list` and observing changes to it. Each `model-view`\n   within dom-repeat template will have `state-path` property  set to\n   `state.listElement.list.#<index>`  where `index` is the element's index in the array.\n\n\n   ",
+      "summary": "",
+      "path": "list-view.html",
+      "properties": [
+        {
+          "name": "list",
+          "type": "Array",
+          "description": "Array which data is to be rendered by the element.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 78,
+              "column": 10
+            },
+            "end": {
+              "line": 81,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          },
+          "defaultValue": "[]"
+        },
+        {
+          "name": "selectedCount",
+          "type": "number",
+          "description": "If element supports item selection (using meta-property $selected) then\nselectedCount property will keep track of number of selected items.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 87,
+              "column": 10
+            },
+            "end": {
+              "line": 91,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {
+              "notify": true
+            }
+          },
+          "defaultValue": "0"
+        },
+        {
+          "name": "deleteAction",
+          "type": "string",
+          "description": "Action name that will be emitted when deleteSelected method is called\nwithout parameter.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 97,
+              "column": 10
+            },
+            "end": {
+              "line": 97,
+              "column": 30
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        }
+      ],
+      "methods": [
+        {
+          "name": "emitAction",
+          "description": "Emits the action described by detail parameter. Detail object must always\ninclude type property. To emit the action we use custom event\nmechanism. Application element listens to the `dispatch-action` event and\ninvokes `dispatchAction` methods for all action dispatchers associated with\nthe application. Make sure your element is attached to DOM tree, otherwise\nevent will never reach your application element. It is a good practice to\nensure that `state` property is initialized (for state-aware elements) before\nemitting any actions (as `state` property is initialized on attach).",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "action-emitter.html",
+            "start": {
+              "line": 50,
+              "column": 6
+            },
+            "end": {
+              "line": 62,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "detail",
+              "type": "*"
+            }
+          ],
+          "inheritedFrom": "UniFlow.ActionEmitter"
+        },
+        {
+          "name": "itemChanged_",
+          "description": "Whenever list is set or mutated (elements added/removed), as well as\nmeta-property $selected is modified, updates selectedCount.",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 114,
+              "column": 6
+            },
+            "end": {
+              "line": 121,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "change",
+              "type": "!Object"
+            }
+          ]
+        },
+        {
+          "name": "updateSelectedCount_",
+          "description": "Updates selectedCount property of the element by iterating the list and\ncounting each item that has meta-property $selected set.",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 128,
+              "column": 6
+            },
+            "end": {
+              "line": 134,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "deleteSelected",
+          "description": "Emits deleteAction for each selected element in the list (for which\nmeta-property $selected is set).",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 143,
+              "column": 6
+            },
+            "end": {
+              "line": 157,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "deleteAction",
+              "type": "string=",
+              "description": "Action type for the action that  will be emitted\n    for each selected element. If not specified, `deleteAction` property of the element\n    will be used."
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 70,
+          "column": 2
+        },
+        "end": {
+          "line": 159,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.ListView",
+      "attributes": [
+        {
+          "name": "list",
+          "description": "Array which data is to be rendered by the element.",
+          "sourceRange": {
+            "start": {
+              "line": 78,
+              "column": 10
+            },
+            "end": {
+              "line": 81,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Array"
+        },
+        {
+          "name": "selected-count",
+          "description": "If element supports item selection (using meta-property $selected) then\nselectedCount property will keep track of number of selected items.",
+          "sourceRange": {
+            "start": {
+              "line": 87,
+              "column": 10
+            },
+            "end": {
+              "line": 91,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "number"
+        },
+        {
+          "name": "delete-action",
+          "description": "Action name that will be emitted when deleteSelected method is called\nwithout parameter.",
+          "sourceRange": {
+            "start": {
+              "line": 97,
+              "column": 10
+            },
+            "end": {
+              "line": 97,
+              "column": 30
+            }
+          },
+          "metadata": {},
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "type": "CustomEvent",
+          "name": "dispatch-action",
+          "description": "dispatch-action",
+          "metadata": {},
+          "inheritedFrom": "UniFlow.ActionEmitter"
+        }
+      ],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "mixins": [
+        "UniFlow.ActionEmitter"
+      ]
+    },
+    {
+      "description": "   Element rendering data represented by a single object (model) in the\n   application state should use ModelView mixin. Model View is a powerful\n   concept that encapsulates model data (likely the data received from the\n   server and to be persisted to the server if modified as a result of user\n   actions), status (validity of the data, flag that data was modified,\n   notifications for the user, etc.). Auxiliary data supplied by action\n   dispatchers and needed for display purposes or element's logic\n   should be defined as element’s properties. Same applies to data\n   created/modified by the element but not intended to be persisted.\n   If `StateAware` mixin is used along with `ModelView`, you can take advantage\n   of statePath property that indicates path to the element's state in the\n   application state tree. Whenever any data is mutated by action dispatchers\n   at statePath or below, the element will receive notification of its\n   properties' change (even if there is no explicit binding for those\n   properties). See `UniFlow.StateAware` for more details and example.\n   ModelView mixin defines some properties that are intended to be overridden\n   in the elements:\n\n   + `validation` property allows to specify validation rules\n   that will be applied when validateModel() method is called. As a result of\n   this method validation status will be updated to indicate result for each\n   model field that has validation rule associated with it.\n   + `saveAction` property indicates which action should be emitted when\n   saveModel method is called to perform save of the model.\n   + `getMessage` should be overridden with the function returning message\n   string for given error code (to translate validation error code to message)\n\n\n   ### Example:\n\n   #### HTML:\n\n      <template>\n        Model: [[model.id]]\n        <paper-input value=\"{{model.name}}\"\n                     label=\"Name\"\n                     invalid=\"[[status.validation.name.invalid]]\"\n                     error-message=\"[[status.validation.name.errorMessage]]\">\n        </paper-input>\n        <paper-button on-tap=\"onSaveTap\">Save</paper-button>\n      </template>\n\n   #### JavaScript:\n      class MyModel extends UniFlow.ModelView(Polymer.Element) {\n        static get is() { return \"my-model\"; }\n        \n        get saveAction() { return 'MY_SAVE' }\n\n        get validation() { return {\n          name: (value) => {\n            if (!value || !value.trim()) {\n              return 'Name is not specified';\n            }\n          }\n        }}\n\n        connectedCallback() {\n          this.super();\n          this.fetchData();\n        },\n\n        fetchData() {\n          this.emitAction({\n            type: 'MY_FETCH',\n            path: 'model'\n          });\n        },\n\n        onSaveTap() {\n          this.validateAndSave();\n        }\n      }\n\n      customElements.define(MyModel.is, MyModel);\n\n   In the example above model view has input field for `name` property and Save button. On\n   element attach the action is emitted to fetch the model's data. Note that in `emitAction()` method\n   the path is specified as `'model'`. ActionEmitter mixin is responsible of expanding the path\n   with element's state path, ensuring that when action dispatcher gets to process the action, the\n   path contains full path in the state tree. So assuming that `my-model` is declared as follows:\n\n      <my-model state-path=\"state.myModel\"></my-model>\n\n   the path in `MY_FETCH` action gets expanded to `state.myModel.model`.\n\n   `validation` property is an object that contains methods for fields validation. The keys in\n   this object should match model field names, the values are validation methods. Method receives\n   current value of the field and should return non-falsy value (string or error code) if the value\n   of the field didn't pass validation. `status.validation` object will be populated with the results\n   of validation with the keys matching field names and values being objects containing two fields:\n   - `invalid`: true when the value is not valid\n   - `errorMessage`: the message to show to user\n\n\n   So in the example above if user clicks on Save button with name not entered, they will get\n   'Name is not specified' error message on the input element. When the name is non-empty, validation\n   will pass and `MY_SAVE` action will be emitted with model passed as a parameter and `'model'` as\n   path.\n\n\n   ",
+      "summary": "",
+      "path": "model-view.html",
+      "properties": [
+        {
+          "name": "model",
+          "type": "Object",
+          "description": "Object containing model data, usually mirroring server-side object.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 138,
+              "column": 10
+            },
+            "end": {
+              "line": 140,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        },
+        {
+          "name": "status",
+          "type": "Object",
+          "description": "Object to contain model status, including validity of the data,\nflag that data was modified, notifications for the user, etc.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 146,
+              "column": 10
+            },
+            "end": {
+              "line": 148,
+              "column": 11
+            }
+          },
+          "metadata": {
+            "polymer": {}
+          }
+        }
+      ],
+      "methods": [
+        {
+          "name": "emitAction",
+          "description": "Emits the action described by detail parameter. Detail object must always\ninclude type property. To emit the action we use custom event\nmechanism. Application element listens to the `dispatch-action` event and\ninvokes `dispatchAction` methods for all action dispatchers associated with\nthe application. Make sure your element is attached to DOM tree, otherwise\nevent will never reach your application element. It is a good practice to\nensure that `state` property is initialized (for state-aware elements) before\nemitting any actions (as `state` property is initialized on attach).",
+          "privacy": "public",
+          "sourceRange": {
+            "file": "action-emitter.html",
+            "start": {
+              "line": 50,
+              "column": 6
+            },
+            "end": {
+              "line": 62,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "detail",
+              "type": "*"
+            }
+          ],
+          "inheritedFrom": "UniFlow.ActionEmitter"
+        },
+        {
+          "name": "getMessage",
+          "description": "Function that translates error code (numeric or text) into human readable\nerror message (used to translate validation error code into error text).",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 180,
+              "column": 6
+            },
+            "end": {
+              "line": 182,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "saveModel",
+          "description": "Method emitting passed action or this.saveAction, sending model with\nthe action options.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 195,
+              "column": 6
+            },
+            "end": {
+              "line": 211,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "action",
+              "type": "(Object|string)="
+            }
+          ]
+        },
+        {
+          "name": "initValidationStatus_",
+          "description": "Method initializes status.validation object with invalid = false for all\nkeys defined in this.validation object. This is needed for proper UI\nbinding (if the value of invalid attribute is undefined, paper-input is\nmisbehaving).",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 220,
+              "column": 6
+            },
+            "end": {
+              "line": 230,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": []
+        },
+        {
+          "name": "validateModel",
+          "description": "Performs validation of model object according to rules defined in\nthis.validation object. Sets status.validation.<property-name> fields with\ntwo properties: invalid and errorMessage.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 240,
+              "column": 6
+            },
+            "end": {
+              "line": 260,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [],
+          "return": {
+            "type": "boolean",
+            "desc": "True if all fields validated successfully (or\n    this.validation is not defined in the element)."
+          }
+        },
+        {
+          "name": "validateAndSave",
+          "description": "Validates and saves model if there were no validation errors.",
+          "privacy": "public",
+          "sourceRange": {
+            "start": {
+              "line": 266,
+              "column": 6
+            },
+            "end": {
+              "line": 270,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "action",
+              "type": "string=",
+              "description": "Optional action type to emit for save action."
+            }
+          ]
+        },
+        {
+          "name": "modelViewModelChanged_",
+          "description": "Observer of any changes to the model. Resets status object and initializes\nvalidation status.",
+          "privacy": "private",
+          "sourceRange": {
+            "start": {
+              "line": 278,
+              "column": 6
+            },
+            "end": {
+              "line": 292,
+              "column": 7
+            }
+          },
+          "metadata": {},
+          "params": [
+            {
+              "name": "change",
+              "type": "!Object"
+            }
+          ]
+        }
+      ],
+      "staticMethods": [],
+      "demos": [],
+      "metadata": {},
+      "sourceRange": {
+        "start": {
+          "line": 129,
+          "column": 2
+        },
+        "end": {
+          "line": 294,
+          "column": 6
+        }
+      },
+      "privacy": "public",
+      "name": "UniFlow.ModelView",
+      "attributes": [
+        {
+          "name": "model",
+          "description": "Object containing model data, usually mirroring server-side object.",
+          "sourceRange": {
+            "start": {
+              "line": 138,
+              "column": 10
+            },
+            "end": {
+              "line": 140,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        },
+        {
+          "name": "status",
+          "description": "Object to contain model status, including validity of the data,\nflag that data was modified, notifications for the user, etc.",
+          "sourceRange": {
+            "start": {
+              "line": 146,
+              "column": 10
+            },
+            "end": {
+              "line": 148,
+              "column": 11
+            }
+          },
+          "metadata": {},
+          "type": "Object"
+        }
+      ],
+      "events": [
+        {
+          "type": "CustomEvent",
+          "name": "dispatch-action",
+          "description": "dispatch-action",
+          "metadata": {},
+          "inheritedFrom": "UniFlow.ActionEmitter"
+        }
+      ],
+      "styling": {
+        "cssVariables": [],
+        "selectors": []
+      },
+      "slots": [],
+      "mixins": [
+        "UniFlow.ActionEmitter"
+      ]
+    }
+  ]
+}
diff --git a/application-state.html b/application-state.html
index 8a85f05..7a9a171 100644
--- a/application-state.html
+++ b/application-state.html
@@ -14,161 +14,166 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="action-dispatcher.html">
 <link rel="import" href="state-aware.html">
 <link rel="import" href="state-mutator.html">
 
 
-<script type="text/javascript" type="text/ecmascript-6">
-
+<script type="text/javascript">
   var UniFlow = window.UniFlow || {};
 
-/**
-
- Assign this behavior to your main application element. It provides global
- state and functionality to maintain individual elements states. This behavior
- is responsible for notifying all state-aware elements about their state
- changes (provided those elements have `statePath` property defined).
- Only one element in the application is supposed to have this behavior.
+  /**
 
- ### Example:
+   Apply this mixin to your main application element. It provides global
+   state and functionality to maintain individual elements states. This mixin
+   is responsible for notifying all state-aware elements about their state
+   changes (provided those elements have `statePath` property defined).
+   Only one element in the application is supposed to have this mixin.
 
- #### HTML:
+   ### Example:
 
-     <template>
+   #### HTML:
 
-       <!-- action dispatchers in the order of action processing -->
-       <action-dispatcher-a state="{{state}}"></action-dispatcher-a>
-       <action-dispatcher-b state="{{state}}"></action-dispatcher-b>
+       <template>
 
-       <!-- state-aware elements -->
-       <some-element state-path="state.someElement"></some-element>
+         <!-- action dispatchers in the order of action processing -->
+         <action-dispatcher-a state="{{state}}"></action-dispatcher-a>
+         <action-dispatcher-b state="{{state}}"></action-dispatcher-b>
 
-     </template>
+         <!-- state-aware elements -->
+         <some-element state-path="state.someElement"></some-element>
 
- #### JavaScript:
+       </template>
 
-     Polymer({
-       is: 'my-app',
+   #### JavaScript:
+       class MyApp extends UniFlow.ApplicationState(Polymer.Element) {
+         static get is() { return 'my-app'; }
 
-       behaviors: [
-         UniFlow.ApplicationState
-       ],
+         connectedCallback() {
+           super.ConnectedCallback();
 
-       attached() {
-         this.state = {
-           someElement: {}
+           this.state = {
+             someElement: {}
+           }
          }
        }
-     });
-
- In the example above, `<some-element>` will receive notification of any changes to the state,
- as if it was declared as follows:
-
-     <some-element state="[[state]]"></some-element>
-
- Also, if `<some-element>` has `propertyA`, on element attach this property will be assigned
- the value of `state.someElement.propertyA`, and receive all notification of the property change
- whenever the corresponding data in state tree changes. This essentially translates to following
- declaration:
-
-     <some-element state="[[state]]"
-                   propertyA="[[state.someElement.propertyA]]">
-     </some-element>
-
- Note that data binding is one-way in both cases. Although state-aware elements can modify their
- own state, it is considered their private state and no other elements will be notified of those
- changes.
-
- @polymerBehavior UniFlow.ApplicationState
-*/
-
-
-  UniFlow.ApplicationStateImpl = {
-
-    observers: [
-      'stateChanged_(state.*)'
-    ],
-
-    listeners: {
-      'dispatch-action': 'onDispatchAction_'
-    },
-
-    /**
-     * Application state listens to dispatch-action method and invokes
-     * dispatchAction method on itself (which in turn invokes dispatchAction
-     * on all action dispatchers declared within application element).
-     *
-     * @param {!Event} event
-     * @param {!Object} detail
-     * @private
-     */
-    onDispatchAction_: function(event, detail) {
-      this.dispatchAction(detail);
-    },
-
-    /**
-     * Called when state.* changes. Notifies state-aware elements of their
-     * state changes, if applicable.
-     *
-     * @param {!Object} change the Polymer change event for the path
-     * @private
-     */
-    stateChanged_(change) {
-      this.notifyStateAwareElements_(change);
-    },
-
-    /**
-     * Iterates through the array of state-aware elements in the application
-     * and notifies them about their state change, if applicable. Note that
-     * state-aware elements must be attached to DOM tree in order to receive
-     * notifications.
-     *
-     * @param change
-     * @private
-     */
-    notifyStateAwareElements_(change) {
-      this.get('application.stateAwareElements').forEach(element => {
-        element.notifyPath(change.path, change.value, true);
-        if (element.statePath && change.path.startsWith(element.statePath)) {
-          let pathToNotify = change.path.slice(element.statePath.length + 1);
-          if (pathToNotify) {
-            if (element.get(pathToNotify) !== change.value &&
-              !change.path.endsWith('.splices')) {
-              element.set(pathToNotify, change.value);
+
+       customElements.define(MyApp.is,MyApp);
+
+   In the example above, `<some-element>` will receive notification of any changes to the state,
+   as if it was declared as follows:
+
+       <some-element state="[[state]]"></some-element>
+
+   Also, if `<some-element>` has `propertyA`, on element attach this property will be assigned
+   the value of `state.someElement.propertyA`, and receive all notification of the property change
+   whenever the corresponding data in state tree changes. This essentially translates to following
+   declaration:
+
+       <some-element state="[[state]]"
+                     propertyA="[[state.someElement.propertyA]]">
+       </some-element>
+
+   Note that data binding is one-way in both cases. Although state-aware elements can modify their
+   own state, it is considered their private state and no other elements will be notified of those
+   changes.
+
+   @polymer
+   @mixinFunction
+   @appliesMixin UniFlow.ActionDispatcher
+  */
+  UniFlow.ApplicationState = Polymer.dedupingMixin((base) =>
+    class extends UniFlow.ActionDispatcher(base) {
+
+      static get observers() {
+        return [
+          'stateChanged_(state.*)'
+        ]
+      }
+
+      constructor() {
+        super();
+        
+        this.onDispatchAction_bound = this.onDispatchAction_.bind(this);
+      }
+
+      connectedCallback() {
+        super.connectedCallback();       
+        window.addEventListener("dispatch-action", this.onDispatchAction_bound)
+      }
+
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("dispatch-action", this.onDispatchAction_bound);
+      }
+
+      /**
+       * Application state listens to dispatch-action method and invokes
+       * dispatchAction method on itself (which in turn invokes dispatchAction
+       * on all action dispatchers declared within application element).
+       *
+       * @param {!Event} event
+       * @param {!Object} detail
+       * @private
+       */
+      onDispatchAction_(event) {
+        this.dispatchAction(event.detail);
+      }
+
+      /**
+       * Called when state.* changes. Notifies state-aware elements of their
+       * state changes, if applicable.
+       *
+       * @param {!Object} change the Polymer change event for the path
+       * @private
+       */
+      stateChanged_(change) {
+        this.notifyStateAwareElements_(change);
+      }
+
+      /**
+       * Iterates through the array of state-aware elements in the application
+       * and notifies them about their state change, if applicable. Note that
+       * state-aware elements must be attached to DOM tree in order to receive
+       * notifications.
+       *
+       * @param change
+       * @private
+       */
+      notifyStateAwareElements_(change) {
+        this.get('application.stateAwareElements').forEach(element => {
+          element.notifyPath(change.path, change.value, true);
+          if (element.statePath && change.path.startsWith(element.statePath)) {
+            let pathToNotify = change.path.slice(element.statePath.length + 1);
+            if (pathToNotify) {
+              if (element.get(pathToNotify) !== change.value &&
+                !change.path.endsWith('.splices')) {
+                element.set(pathToNotify, change.value);
+              } else {
+                element.notifyPath(pathToNotify, change.value, true);
+              }
             } else {
-              element.notifyPath(pathToNotify, change.value, true);
+              // If pathToNotify empty, that means the whole element state need
+              // to be replaced. Iterating through the keys of new value (which
+              // has to be an object) and setting element properties with the same
+              // name.
+              Object.keys(change.value).forEach((key) => {
+                element.set(key, change.value[key]);
+              });
             }
-          } else {
-            // If pathToNotify empty, that means the whole element state need
-            // to be replaced. Iterating through the keys of new value (which
-            // has to be an object) and setting element properties with the same
-            // name.
-            Object.keys(change.value).forEach((key) => {
-              element.set(key, change.value[key]);
-          });
           }
-        }
-      });
-    },
-
-    /**
-     * Sets application.element value to this element (so all state-aware elements
-     * have access to application element).
-     */
-    ready() {
-      this.set('application.element', this);
-    }
-
-  };
-
-  /** @polymerBehavior */
-  UniFlow.ApplicationState = [
-    UniFlow.StateAware,
-    UniFlow.StateMutator,
-    UniFlow.ActionDispatcher,
-    UniFlow.ApplicationStateImpl
-  ];
-
-</script>
+        });
+      }
+
+      /**
+       * Sets application.element value to this element (so all state-aware elements
+       * have access to application element).
+       */
+      ready() {
+        super.ready();
+        this.set('application.element', this);
+      }
+
+    });
+</script>
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 8563e2d..28365d2 100644
--- a/bower.json
+++ b/bower.json
@@ -19,17 +19,19 @@
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.5.0"
+    "polymer": "Polymer/polymer#^2.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^5.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "app-route": "PolymerElements/app-route#^2.0.2",
+    "iron-component-page": "PolymerElements/iron-component-page#^3.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^2.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^2.0.0",
+    "test-fixture": "PolymerElements/test-fixture#3.0.0-rc.1",
+    "web-component-tester": "^v6.0.0",
+    "todomvc-app-css": "^2.1.0",
+    "iron-localstorage": "PolymerElements/iron-localstorage#^2.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index 5f0286e..1c36a30 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../webcomponentsjs/webcomponents-loader.js"></script>
   <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
diff --git a/list-view.html b/list-view.html
index e7bf192..89b0fed 100644
--- a/list-view.html
+++ b/list-view.html
@@ -14,154 +14,148 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="action-emitter.html">
 
 
-<script type="text/javascript" type="text/ecmascript-6">
-
+<script type="text/javascript">
   var UniFlow = window.UniFlow || {};
 
-/**
-
- This behavior used by elements that need to render multiple models backed
- by 'list' array. You may want to use ModelView to render individual
- models in the list. The behavior supports element selection by setting predefined
- $selected property on list elements.
-
- ### Example:
-
- #### HTML:
+  /**
 
-     <ul>
-       <template id="list-template" is="dom-repeat" items="[[list]]">
-         <li id="[[item.id]]">
-           <paper-checkbox checked="{{item.$selected}}">
-           <model-view state-path="[[statePath]].list.#[[index]]"></model-view>
-         </li>
-       </template>
-     </ul>
-     Selected: [[selectedCount]] items
-     <paper-button on-tap="onDeleteTap">Delete</paper-button>
+   This mixin used by elements that need to render multiple models backed
+   by 'list' array. You may want to use ModelView to render individual
+   models in the list. The mixin supports element selection by setting predefined
+   $selected property on list elements.
 
- #### JavaScript:
+   ### Example:
 
-     Polymer({
+   #### HTML:
 
-       is: "list-element",
+       <ul>
+         <template id="list-template" is="dom-repeat" items="[[list]]">
+           <li id="[[item.id]]">
+             <paper-checkbox checked="{{item.$selected}}">
+             <model-view state-path="[[statePath]].list.#[[index]]"></model-view>
+           </li>
+         </template>
+       </ul>
+       Selected: [[selectedCount]] items
+       <paper-button on-tap="onDeleteTap">Delete</paper-button>
 
-       behaviors: [
-         UniFlow.ListView,
-         UniFlow.StateAware
-       ],
+   #### JavaScript:
+       class ListElement extends UniFlow.StateAware(UniFlow.ListView(Polymer.Element)) {
+         static get is() { return "list-element"; }
 
-       onDeleteTap() {
-         this.deleteSelected();
+         onDeleteTap() {
+           this.deleteSelected();
+         }
        }
 
-     });
-
- In the example above list view element is also state-aware, meaning it has its own place
- in the application state tree. Assuming it has been declared as follows:
-
-     <list-element state-path="state.listElement"></list-element>
-
- it will be rendering `state.listElement.list` and observing changes to it. Each `model-view`
- within dom-repeat template will have `state-path` property  set to
- `state.listElement.list.#<index>`  where `index` is the element's index in the array.
-
+       customElements.define(ListElement.is, ListElement);
+
+   In the example above list view element is also state-aware, meaning it has its own place
+   in the application state tree. Assuming it has been declared as follows:
+
+       <list-element state-path="state.listElement"></list-element>
+
+   it will be rendering `state.listElement.list` and observing changes to it. Each `model-view`
+   within dom-repeat template will have `state-path` property  set to
+   `state.listElement.list.#<index>`  where `index` is the element's index in the array.
+
+
+   @polymer
+   @mixinFunction
+   @appliesMixin UniFlow.ActionEmitter
+  */
+  UniFlow.ListView = Polymer.dedupingMixin((base) =>
+    class extends UniFlow.ActionEmitter(base) {
+      static get properties() {
+        return {
+
+          /**
+           * Array which data is to be rendered by the element.
+           */
+          list: {
+            type: Array,
+            value: () => []
+          },
+
+          /**
+           * If element supports item selection (using meta-property $selected) then
+           * selectedCount property will keep track of number of selected items.
+           */
+          selectedCount: {
+            type: Number,
+            notify: true,
+            value: 0,
+          },
+
+          /**
+           * Action name that will be emitted when deleteSelected method is called
+           * without parameter.
+           */
+          deleteAction: String
+
+        }
+      }
 
- @polymerBehavior UniFlow.ListView
-*/
-  UniFlow.ListViewImpl = {
-    properties: {
+      static get observers() {
+        return [
+          'itemChanged_(list.*)',
+        ]
+      }
 
       /**
-       * Array which data is to be rendered by the element.
+       * Whenever list is set or mutated (elements added/removed), as well as
+       * meta-property $selected is modified, updates selectedCount.
+       * @param {!Object} change
+       * @private
        */
-      list: {
-        type: Array,
-        value: () => []
-      },
+      itemChanged_(change) {
+        if (this.get('list') &&
+          (change.path == 'list' ||
+            change.path == 'list.splices' ||
+            change.path.endsWith('$selected'))) {
+          this.updateSelectedCount_();
+        }
+      }
 
       /**
-       * If element supports item selection (using meta-property $selected) then
-       * selectedCount property will keep track of number of selected items.
+       * Updates selectedCount property of the element by iterating the list and
+       * counting each item that has meta-property $selected set.
+       * @private
        */
-      selectedCount: {
-        type: Number,
-        notify: true,
-        value: 0,
-      },
+      updateSelectedCount_() {
+        let selectedCount = 0;
+        this.get('list').forEach((elem) => {
+          selectedCount += elem.$selected ? 1 : 0;
+        });
+        this.selectedCount = selectedCount;
+      }
 
       /**
-       * Action name that will be emitted when deleteSelected method is called
-       * without parameter.
+       * Emits deleteAction for each selected element in the list (for which
+       * meta-property $selected is set).
+       * @param {string=} deleteAction Action type for the action that  will be emitted
+       *     for each selected element. If not specified, `deleteAction` property of the element
+       *     will be used.
        */
-      deleteAction: String
-
-    },
-
-    observers: [
-      'itemChanged_(list.*)',
-    ],
-
-    /**
-     * Whenever list is set or mutated (elements added/removed), as well as
-     * meta-property $selected is modified, updates selectedCount.
-     * @param {!Object} change
-     * @private
-     */
-    itemChanged_(change) {
-      if (this.get('list') &&
-        (change.path == 'list' ||
-        change.path == 'list.splices' ||
-        change.path.endsWith('$selected'))) {
-        this.updateSelectedCount_();
-      }
-    },
-
-    /**
-     * Updates selectedCount property of the element by iterating the list and
-     * counting each item that has meta-property $selected set.
-     * @private
-     */
-    updateSelectedCount_() {
-      let selectedCount = 0;
-      this.get('list').forEach((elem) => {
-        selectedCount += elem.$selected ? 1 : 0;
-      });
-      this.selectedCount = selectedCount;
-    },
-
-    /**
-     * Emits deleteAction for each selected element in the list (for which
-     * meta-property $selected is set).
-     * @param {string=} deleteAction Action type for the action that  will be emitted
-     *     for each selected element. If not specified, `deleteAction` property of the element
-     *     will be used.
-     */
-    deleteSelected(deleteAction) {
-      deleteAction = deleteAction || this.deleteAction;
-      if (deleteAction) {
-        this.list.forEach(item => {
-          if (item.$selected) {
-            this.emitAction({
-              type: deleteAction,
-              item: item
-            });
-          }
-        });
-      } else {
-        console.warn('delete action is not defined');
+      deleteSelected(deleteAction) {
+        deleteAction = deleteAction || this.deleteAction;
+        if (deleteAction) {
+          this.list.forEach(item => {
+            if (item.$selected) {
+              this.emitAction({
+                type: deleteAction,
+                item: item
+              });
+            }
+          });
+        } else {
+          console.warn('delete action is not defined');
+        }
       }
-    }
-
-  };
 
-  /** @polymerBehavior */
-  UniFlow.ListView = [
-    UniFlow.ActionEmitter,
-    UniFlow.ListViewImpl
-  ];
-</script>
+    });
+</script>
\ No newline at end of file
diff --git a/model-view.html b/model-view.html
index f85b19e..1f5d67e 100644
--- a/model-view.html
+++ b/model-view.html
@@ -14,274 +14,283 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="action-emitter.html">
 
 
 <script>
-
   var UniFlow = window.UniFlow || {};
 
-/**
-
- Element rendering data represented by a single object (model) in the
- application state should use ModelView behavior. Model View is a powerful
- concept that encapsulates model data (likely the data received from the
- server and to be persisted to the server if modified as a result of user
- actions), status (validity of the data, flag that data was modified,
- notifications for the user, etc.). Auxiliary data supplied by action
- dispatchers and needed for display purposes or element's logic
- should be defined as element’s properties. Same applies to data
- created/modified by the element but not intended to be persisted.
- If `StateAware` behavior is used along with `ModelView`, you can take advantage
- of statePath property that indicates path to the element's state in the
- application state tree. Whenever any data is mutated by action dispatchers
- at statePath or below, the element will receive notification of its
- properties' change (even if there is no explicit binding for those
- properties). See `UniFlow.StateAware` for more details and example.
- ModelView behavior defines some properties that are intended to be overridden
- in the elements:
-
- + `validation` property allows to specify validation rules
- that will be applied when validateModel() method is called. As a result of
- this method validation status will be updated to indicate result for each
- model field that has validation rule associated with it.
- + `saveAction` property indicates which action should be emitted when
- saveModel method is called to perform save of the model.
- + `getMessage` should be overridden with the function returning message
- string for given error code (to translate validation error code to message)
-
-
- ### Example:
-
- #### HTML:
-
-    <template>
-      Model: [[model.id]]
-      <paper-input value="{{model.name}}"
-                   label="Name"
-                   invalid="[[status.validation.name.invalid]]"
-                   error-message="[[status.validation.name.errorMessage]]">
-      </paper-input>
-      <paper-button on-tap="onSaveTap">Save</paper-button>
-    </template>
-
- #### JavaScript:
-
-    Polymer({
-      is: "my-model",
-      saveAction: 'MY_SAVE',
-      behaviors: [
-        UniFlow.ModelView
-      ],
-
-      validation: {
-        name: (value) => {
-          if (!value || !value.trim()) {
-            return 'Name is not specified';
+  /**
+
+   Element rendering data represented by a single object (model) in the
+   application state should use ModelView mixin. Model View is a powerful
+   concept that encapsulates model data (likely the data received from the
+   server and to be persisted to the server if modified as a result of user
+   actions), status (validity of the data, flag that data was modified,
+   notifications for the user, etc.). Auxiliary data supplied by action
+   dispatchers and needed for display purposes or element's logic
+   should be defined as element’s properties. Same applies to data
+   created/modified by the element but not intended to be persisted.
+   If `StateAware` mixin is used along with `ModelView`, you can take advantage
+   of statePath property that indicates path to the element's state in the
+   application state tree. Whenever any data is mutated by action dispatchers
+   at statePath or below, the element will receive notification of its
+   properties' change (even if there is no explicit binding for those
+   properties). See `UniFlow.StateAware` for more details and example.
+   ModelView mixin defines some properties that are intended to be overridden
+   in the elements:
+
+   + `validation` property allows to specify validation rules
+   that will be applied when validateModel() method is called. As a result of
+   this method validation status will be updated to indicate result for each
+   model field that has validation rule associated with it.
+   + `saveAction` property indicates which action should be emitted when
+   saveModel method is called to perform save of the model.
+   + `getMessage` should be overridden with the function returning message
+   string for given error code (to translate validation error code to message)
+
+
+   ### Example:
+
+   #### HTML:
+
+      <template>
+        Model: [[model.id]]
+        <paper-input value="{{model.name}}"
+                     label="Name"
+                     invalid="[[status.validation.name.invalid]]"
+                     error-message="[[status.validation.name.errorMessage]]">
+        </paper-input>
+        <paper-button on-tap="onSaveTap">Save</paper-button>
+      </template>
+
+   #### JavaScript:
+      class MyModel extends UniFlow.ModelView(Polymer.Element) {
+        static get is() { return "my-model"; }
+        
+        get saveAction() { return 'MY_SAVE' }
+
+        get validation() { return {
+          name: (value) => {
+            if (!value || !value.trim()) {
+              return 'Name is not specified';
+            }
           }
+        }}
+
+        connectedCallback() {
+          this.super();
+          this.fetchData();
+        },
+
+        fetchData() {
+          this.emitAction({
+            type: 'MY_FETCH',
+            path: 'model'
+          });
+        },
+
+        onSaveTap() {
+          this.validateAndSave();
         }
-      },
+      }
 
-      attached() {
-        this.fetchData();
-      },
+      customElements.define(MyModel.is, MyModel);
 
-      fetchData() {
-        this.emitAction({
-          type: 'MY_FETCH',
-          path: 'model'
-        });
-      },
+   In the example above model view has input field for `name` property and Save button. On
+   element attach the action is emitted to fetch the model's data. Note that in `emitAction()` method
+   the path is specified as `'model'`. ActionEmitter mixin is responsible of expanding the path
+   with element's state path, ensuring that when action dispatcher gets to process the action, the
+   path contains full path in the state tree. So assuming that `my-model` is declared as follows:
 
-      onSaveTap() {
-        this.validateAndSave();
-      }
-    });
+      <my-model state-path="state.myModel"></my-model>
 
- In the example above model view has input field for `name` property and Save button. On
- element attach the action is emitted to fetch the model's data. Note that in `emitAction()` method
- the path is specified as `'model'`. ActionEmitter behavior is responsible of expanding the path
- with element's state path, ensuring that when action dispatcher gets to process the action, the
- path contains full path in the state tree. So assuming that `my-model` is declared as follows:
+   the path in `MY_FETCH` action gets expanded to `state.myModel.model`.
 
-    <my-model state-path="state.myModel"></my-model>
+   `validation` property is an object that contains methods for fields validation. The keys in
+   this object should match model field names, the values are validation methods. Method receives
+   current value of the field and should return non-falsy value (string or error code) if the value
+   of the field didn't pass validation. `status.validation` object will be populated with the results
+   of validation with the keys matching field names and values being objects containing two fields:
+   - `invalid`: true when the value is not valid
+   - `errorMessage`: the message to show to user
 
- the path in `MY_FETCH` action gets expanded to `state.myModel.model`.
 
- `validation` property is an object that contains methods for fields validation. The keys in
- this object should match model field names, the values are validation methods. Method receives
- current value of the field and should return non-falsy value (string or error code) if the value
- of the field didn't pass validation. `status.validation` object will be populated with the results
- of validation with the keys matching field names and values being objects containing two fields:
- - `invalid`: true when the value is not valid
- - `errorMessage`: the message to show to user
+   So in the example above if user clicks on Save button with name not entered, they will get
+   'Name is not specified' error message on the input element. When the name is non-empty, validation
+   will pass and `MY_SAVE` action will be emitted with model passed as a parameter and `'model'` as
+   path.
 
 
- So in the example above if user clicks on Save button with name not entered, they will get
- 'Name is not specified' error message on the input element. When the name is non-empty, validation
- will pass and `MY_SAVE` action will be emitted with model passed as a parameter and `'model'` as
- path.
+   @polymer
+   @mixinFunction
+   @appliesMixin UniFlow.ActionEmitter
+  */
+  UniFlow.ModelView = Polymer.dedupingMixin((base) =>
+    class extends UniFlow.ActionEmitter(base) {
 
+      static get properties() {
+        return {
 
- @polymerBehavior UniFlow.ModelView
-*/
-  UniFlow.ModelViewImpl = {
+          /**
+           * Object containing model data, usually mirroring server-side object.
+           */
+          model: {
+            type: Object
+          },
 
-    properties: {
+          /**
+           * Object to contain model status, including validity of the data,
+           * flag that data was modified, notifications for the user, etc.
+           */
+          status: {
+            type: Object
+          }
+
+        }
+      }
 
       /**
-       * Object containing model data, usually mirroring server-side object.
+       * Validation rules for model properties (optional), should be defined in the
+       * element.
+       * @type {Object|undefined}
        */
-      model: {
-        type: Object
-      },
+      get validation() {
+        return this._validation;
+      }
+
+      set validation(value) {
+        this._validation = value;
+      }
 
       /**
-       * Object to contain model status, including validity of the data,
-       * flag that data was modified, notifications for the user, etc.
+       * Save action that will be emitted when saveModel() method is called without
+       * parameters.
+       * @type {string|undefined}
        */
-      status: {
-        type: Object
+      get saveAction() {
+        return undefined;
       }
 
-    },
-
-    /**
-     * Validation rules for model properties (optional), should be defined in the
-     * element.
-     * @type {Object|undefined}
-     */
-    validation: undefined,
-
-    /**
-     * Save action that will be emitted when saveModel() method is called without
-     * parameters.
-     * @type {string|undefined}
-     */
-    saveAction: undefined,
-
-    /**
-     * Function that translates error code (numeric or text) into human readable
-     * error message (used to translate validation error code into error text).
-     * @type {Function|undefined}
-     */
-    getMessage: undefined,
-
-    observers: [
-      'modelViewModelChanged_(model.*)'
-    ],
-
-    /**
-     * Method emitting passed action or this.saveAction, sending model with
-     * the action options.
-     * @param {Object|string=} action
-     */
-    saveModel(action) {
-      let actionToEmit = {
-        model: this.model
-      };
-      if (typeof action === 'object') {
-        Object.assign(actionToEmit, action);
-      } else {
-        actionToEmit.type = action;
-      }
-      if (!actionToEmit.type) {
-        actionToEmit.type = this.saveAction;
+      /**
+       * Function that translates error code (numeric or text) into human readable
+       * error message (used to translate validation error code into error text).
+       * @type {Function|undefined}
+       */
+      getMessage() {
+        return undefined;
       }
-      if (!actionToEmit.path) {
-        actionToEmit.path = 'model';
+
+      static get observers() {
+        return [
+          'modelViewModelChanged_(model.*)'
+        ]
       }
-      this.emitAction(actionToEmit);
-    },
-
-    /**
-     * Method initializes status.validation object with invalid = false for all
-     * keys defined in this.validation object. This is needed for proper UI
-     * binding (if the value of invalid attribute is undefined, paper-input is
-     * misbehaving).
-     * @private
-     */
-    initValidationStatus_() {
-      let validationStatus = {};
-      if (this.validation) {
-        for (let key of Object.keys(this.validation)) {
-          validationStatus[key] = {
-            invalid: false
-          };
+
+      /**
+       * Method emitting passed action or this.saveAction, sending model with
+       * the action options.
+       * @param {Object|string=} action
+       */
+      saveModel(action) {
+        let actionToEmit = {
+          model: this.model
+        };
+        if (typeof action === 'object') {
+          Object.assign(actionToEmit, action);
+        } else {
+          actionToEmit.type = action;
+        }
+        if (!actionToEmit.type) {
+          actionToEmit.type = this.saveAction;
+        }
+        if (!actionToEmit.path) {
+          actionToEmit.path = 'model';
         }
+        this.emitAction(actionToEmit);
       }
-      this.set('status.validation', validationStatus);
-    },
-
-    /**
-     * Performs validation of model object according to rules defined in
-     * this.validation object. Sets status.validation.<property-name> fields with
-     * two properties: invalid and errorMessage.
-     *
-     * @return {boolean} True if all fields validated successfully (or
-     *     this.validation is not defined in the element).
-     */
-    validateModel() {
-      if (!this.validation) {
-        return true;
+
+      /**
+       * Method initializes status.validation object with invalid = false for all
+       * keys defined in this.validation object. This is needed for proper UI
+       * binding (if the value of invalid attribute is undefined, paper-input is
+       * misbehaving).
+       * @private
+       */
+      initValidationStatus_() {
+        let validationStatus = {};
+        if (this.validation) {
+          for (let key of Object.keys(this.validation)) {
+            validationStatus[key] = {
+              invalid: false
+            };
+          }
+        }
+        this.set('status.validation', validationStatus);
       }
-      let isValid = true;
-      for (let key of Object.keys(this.validation)) {
-        let result = this.validation[key].call(this,
-          this.get('model.' + key));
-        let errorMessage = !result || typeof result === 'string' ?
-          result : (this.getMessage ? this.getMessage(result) :
-        'Message Code ' + result);
-        this.set('status.validation.' + key, {
-          invalid: !!result,
-          errorMessage
-        });
-        if (result) {
-          isValid = false;
+
+      /**
+       * Performs validation of model object according to rules defined in
+       * this.validation object. Sets status.validation.<property-name> fields with
+       * two properties: invalid and errorMessage.
+       *
+       * @return {boolean} True if all fields validated successfully (or
+       *     this.validation is not defined in the element).
+       */
+      validateModel() {
+        if (!this.validation) {
+          return true;
+        }
+        let isValid = true;
+        for (let key of Object.keys(this.validation)) {
+          let result = this.validation[key].call(this,
+            this.get('model.' + key));
+          let errorMessage = !result || typeof result === 'string' ?
+            result : (this.getMessage ? this.getMessage(result) :
+              'Message Code ' + result);
+          this.set('status.validation.' + key, {
+            invalid: !!result,
+            errorMessage
+          });
+          if (result) {
+            isValid = false;
+          }
         }
+        return isValid;
       }
-      return isValid;
-    },
-
-    /**
-     * Validates and saves model if there were no validation errors.
-     * @param {string=} action Optional action type to emit for save action.
-     */
-    validateAndSave(action) {
-      if (this.validateModel()) {
-        this.saveModel(action);
+
+      /**
+       * Validates and saves model if there were no validation errors.
+       * @param {string=} action Optional action type to emit for save action.
+       */
+      validateAndSave(action) {
+        if (this.validateModel()) {
+          this.saveModel(action);
+        }
       }
-    },
-
-    /**
-     * Observer of any changes to the model. Resets status object and initializes
-     * validation status.
-     * @param {!Object} change
-     * @private
-     */
-    modelViewModelChanged_(change) {
-      // Resetting status when model changed
-      if (change.path === 'model' && this.get('model')) {
-        this.set('status', {
-          isModified: false
-        });
-        this.initValidationStatus_();
-      } else {
-        if (this.get('model')) {
-          this.set('status.isModified', true);
+
+      /**
+       * Observer of any changes to the model. Resets status object and initializes
+       * validation status.
+       * @param {!Object} change
+       * @private
+       */
+      modelViewModelChanged_(change) {
+        // Resetting status when model changed
+        if (change.path === 'model' && this.get('model')) {
+          this.set('status', {
+            isModified: false
+          });
+          this.initValidationStatus_();
         } else {
-          this.set('status', {});
+          if (this.get('model')) {
+            this.set('status.isModified', true);
+          } else {
+            this.set('status', {});
+          }
         }
       }
-    }
-
-  };
 
-  /** @polymerBehavior */
-  UniFlow.ModelView = [
-    UniFlow.ActionEmitter,
-    UniFlow.ModelViewImpl
-  ];
-
-</script>
+    });
+</script>
\ No newline at end of file
diff --git a/state-aware.html b/state-aware.html
index dff76d5..02835f5 100644
--- a/state-aware.html
+++ b/state-aware.html
@@ -14,136 +14,144 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 
 
-<script type="text/javascript" type="text/ecmascript-6">
-
+<script type="text/javascript">
   var UniFlow = window.UniFlow || {};
 
-/**
- Key behavior that must be assigned to all elements that need to access
- application state and/or have access to the application element. The element is
- notified of any changes to application's state, as well as all its properties
- when they're modified by state mutator elements. `state-path` property must
- be used to identify path to element's state in application state tree. 
-
- ### Example:
-
- #### HTML:
+  /**
+   Key mixin that must be assigned to all elements that need to access
+   application state and/or have access to the application element. The element is
+   notified of any changes to application's state, as well as all its properties
+   when they're modified by state mutator elements. `state-path` property must
+   be used to identify path to element's state in application state tree. 
 
-    <template>
+   ### Example:
 
-      <div>Value A: [[state.valueA]]</div>
-      <div>Value B: [[valueB]]</div>
+   #### HTML:
 
-    </template>
+      <template>
 
- #### JavaScript:
+        <div>Value A: [[state.valueA]]</div>
+        <div>Value B: [[valueB]]</div>
 
-    Polymer({
-      is: 'my-element',
+      </template>
 
-      properties: {
-        valueB: String
-      },
-
-      behaviors: [
-        UniFlow.StateAware
-      ]
-
-    });
+   #### JavaScript:
 
- When above element is declared as follows:
+      class MyElement extends UniFlow.StateAware(Polymer.Element) {
+        static get is() { return 'my-element'; }
 
-    <my-element state-path="state.myElement"></my-element>
-
- it will be notified about changes (and render those) to `state.valueA` or
- `state.myElement.valueB` in action dispatchers or other state mutating
- elements.
-
- @polymerBehavior
-*/
+        static get properties() {
+          return {
+            valueB: String
+          }
+        }
+      }
 
-  UniFlow.StateAware = {
+      customElement.define(MyElement.is, MyElement);
+
+   When above element is declared as follows:
+
+      <my-element state-path="state.myElement"></my-element>
+
+   it will be notified about changes (and render those) to `state.valueA` or
+   `state.myElement.valueB` in action dispatchers or other state mutating
+   elements.
+
+   @polymer
+   @mixinFunction
+  */
+  UniFlow.StateAware = Polymer.dedupingMixin((base) =>
+    class extends base {
+      static get properties() {
+        return {
+
+          /**
+           * Application state, shared among application and all state-aware elements.
+           * This property is initialized when element is attached.
+           */
+          state: {
+            type: Object
+          },
+
+          /**
+           * Path to element state in the application state tree.
+           */
+          statePath: {
+            type: String
+          },
+
+          stateAware: {
+            type: Boolean,
+            value: true,
+            reflectToAttribute: true
+          },
+
+          /**
+           * Application-level object that allows all state-aware objects access
+           * to application element. This property is shared among all state-aware
+           * elements and has element field initialized with reference to application
+           * element. Any state-aware element can access application element using
+           * `getApplication()` method. Also, all state-aware elements
+           * add themselves to `application.stateAwareElements` array on attach (and
+           * remove on detach); this list is used to send notification about
+           * element state changes.
+           */
+          application: {
+            type: Object,
+            value: {
+              element: null,
+              stateAwareElements: []
+            }
+          }
 
-    properties: {
+        }
+      }
 
       /**
-       * Application state, shared among application and all state-aware elements.
-       * This property is initialized when element is attached.
+       * Adds this element to the list of state-aware elements in the application.
+       * Sets the value of state property to the state of the application element.
        */
-      state: {
-        type: Object
-      },
+      connectedCallback() {
+        super.connectedCallback();
+
+        this.push('application.stateAwareElements', this);
+        // Copying application's element state to this element. ApplicationState behavior is
+        // responsible of notifying state aware elements about application's state changes.
+        if (!this.get('state') && this.get('application.element.state')) {
+          this.set('state', this.get('application.element.state'));
+        }
+        // If this element's state exists, the properties ot the element are
+        // initialized from state.
+        if (this.statePath && this.get(this.statePath)) {
+          Object.keys(this.get(this.statePath)).forEach((key) => {
+            this.set(key, this.get([this.statePath, key]));
+          });
+        }
+      }
 
       /**
-       * Path to element state in the application state tree.
+       * Removes this element from the list of state-aware elements in the
+       * application.
        */
-      statePath: {
-        type: String
-      },
+      disconnectedCallback() {
+        const index = this.application.stateAwareElements.indexOf(this);
+        if (index !== -1) {
+          this.application.stateAwareElements.splice(index, 1);
+        }
 
-      hostAttributes: {
-        'state-aware': true
-      },
+        super.disconnectedCallback();
+      }
 
       /**
-       * Application-level object that allows all state-aware objects access
-       * to application element. This property is shared among all state-aware
-       * elements and has element field initialized with reference to application
-       * element. Any state-aware element can access application element using
-       * `getApplication()` method. Also, all state-aware elements
-       * add themselves to `application.stateAwareElements` array on attach (and
-       * remove on detach); this list is used to send notification about
-       * element state changes.
+       * Returns application element.
+       * @return {Element}
        */
-      application: {
-        type: Object,
-        value: {
-          element: null,
-          stateAwareElements: []
-        }
+      getApplication() {
+        return this.get('application.element');
       }
 
-    },
-
-    /**
-     * Adds this element to the list of state-aware elements in the application.
-     * Sets the value of state property to the state of the application element.
-     */
-    attached() {
-      this.push('application.stateAwareElements', this);
-      // Copying application's element state to this element. ApplicationState behavior is
-      // responsible of notifying state aware elements about application's state changes.
-      if (!this.get('state') && this.get('application.element.state')) {
-        this.set('state', this.get('application.element.state'));
-      }
-      // If this element's state exists, the properties ot the element are
-      // initialized from state.
-      if (this.statePath && this.get(this.statePath)) {
-        Object.keys(this.get(this.statePath)).forEach((key) => {
-          this.set(key, this.get([this.statePath, key]));
-      });
-      }
-    },
-
-    /**
-     * Removes this element from the list of state-aware elements in the
-     * application.
-     */
-    detached() {
-      this.arrayDelete('application.stateAwareElements', this);
-    },
-
-    /**
-     * Returns application element.
-     * @return {Element}
-     */
-    getApplication() {
-      return this.get('application.element');
-    }
-
-  };
-
-</script>
+    });
+</script>
\ No newline at end of file
diff --git a/state-mutator.html b/state-mutator.html
index a56c2fa..6346775 100644
--- a/state-mutator.html
+++ b/state-mutator.html
@@ -14,42 +14,37 @@
 limitations under the License.
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="state-aware.html">
 
 <script>
-
   var UniFlow = window.UniFlow || {};
 
-/**
-
- Some non-visual elements, like action dispatchers, need to modify application
- state, in which case they should have this behavior assigned. Implements state-
- aware and re-declares state property with notify attribute. State mutator elements
- are only supposed to exist at the application level.
-
- @polymerBehavior UniFlow.StateMutator
-*/
-
-  UniFlow.StateMutatorImpl = {
-
-    properties: {
-      /**
-       * Application state.
-       */
-      state: {
-        type: Object,
-        notify: true
-      }
-
-    }
-
-  };
-
-  /** @polymerBehavior */
-  UniFlow.StateMutator = [
-    UniFlow.StateAware,
-    UniFlow.StateMutatorImpl
-  ];
-
-</script>
+  /**
+
+   Some non-visual elements, like action dispatchers, need to modify application
+   state, in which case they should have this mixin applied. Implements state-
+   aware and re-declares state property with notify attribute. State mutator elements
+   are only supposed to exist at the application level.
+
+   @polymer
+   @mixinFunction
+   @appliesMixin UniFlow.StateAware
+  */
+  UniFlow.StateMutator = Polymer.dedupingMixin((base) =>
+    class extends UniFlow.StateAware(base) {
+
+      static get properties() {
+        return {
+          /**
+           * Application state.
+           */
+          state: {
+            type: Object,
+            notify: true
+          }
+        }
+
+      };
+    });
+</script>
\ No newline at end of file
diff --git a/test/action-dispatcher_test.html b/test/action-dispatcher_test.html
index 1ba79e5..01bf986 100644
--- a/test/action-dispatcher_test.html
+++ b/test/action-dispatcher_test.html
@@ -15,27 +15,30 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.ActionDispatcher tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/action-dispatcher.html">
+  <link rel="import" href="../action-dispatcher.html">
 
 </head>
+
 <body>
 
   <dom-module id="action-dispatcher-test">
     <script>
-      Polymer({
-        is: 'action-dispatcher-test',
-        behaviors: [
-          UniFlow.ActionDispatcher,
-        ]
-      });
+      class ActionDispatcherTest extends UniFlow.ActionDispatcher(Polymer.Element) {
+        static get is() {
+          return 'action-dispatcher-test';
+        }
+      }
+
+      customElements.define(ActionDispatcherTest.is, ActionDispatcherTest);
     </script>
   </dom-module>
 
@@ -44,12 +47,13 @@
       <action-dispatcher-test id="inner"></action-dispatcher-test>
     </template>
     <script>
-      Polymer({
-        is: 'nested-action-dispatcher-test',
-        behaviors: [
-          UniFlow.ActionDispatcher,
-        ]
-      });
+      class NestedActionDispatcherTest extends UniFlow.ActionDispatcher(Polymer.Element) {
+        static get is() {
+          return 'nested-action-dispatcher-test';
+        }
+      }
+
+      customElements.define(NestedActionDispatcherTest.is, NestedActionDispatcherTest);
     </script>
   </dom-module>
 
@@ -81,26 +85,34 @@
       });
 
       test('dispatchAction calls method with name that matches action ' +
-          'type', () => {
-        actionDispatcher.MY_ACTION = sinon.spy();
-        const detail = {type: 'MY_ACTION', foo: 'bar'};
-        actionDispatcher.dispatchAction(detail);
-        expect(actionDispatcher.MY_ACTION).to.be.calledWith(detail);
-      });
+        'type', () => {
+          actionDispatcher.MY_ACTION = sinon.spy();
+          const detail = {
+            type: 'MY_ACTION',
+            foo: 'bar'
+          };
+          actionDispatcher.dispatchAction(detail);
+          expect(actionDispatcher.MY_ACTION).to.be.calledWith(detail);
+        });
 
       test('dispatchAction returns false when action processor method' +
         ' returns false', () => {
-        actionDispatcher.MY_ACTION = () => false;
-        const detail = {type: 'MY_ACTION'};
-        expect(actionDispatcher.dispatchAction(detail)).to.be.false;
-      });
+          actionDispatcher.MY_ACTION = () => false;
+          const detail = {
+            type: 'MY_ACTION'
+          };
+          expect(actionDispatcher.dispatchAction(detail)).to.be.false;
+        });
 
       test('nested action dispatcher\'s method is invoked', () => {
         actionDispatcher = fixture('nested');
         expect(actionDispatcher).to.be.ok;
         expect(actionDispatcher.$.inner).to.be.ok;
         actionDispatcher.$.inner.MY_ACTION = sinon.spy();
-        const detail = {type: 'MY_ACTION', foo: 'bar'};
+        const detail = {
+          type: 'MY_ACTION',
+          foo: 'bar'
+        };
         actionDispatcher.dispatchAction(detail);
         expect(actionDispatcher.$.inner.MY_ACTION).to.be.calledWith(detail);
       });
@@ -109,4 +121,5 @@
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/action-emitter_test.html b/test/action-emitter_test.html
index d824120..34d1a68 100644
--- a/test/action-emitter_test.html
+++ b/test/action-emitter_test.html
@@ -15,27 +15,30 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.ActionEmitter tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/action-emitter.html">
+  <link rel="import" href="../action-emitter.html">
 
 </head>
+
 <body>
 
   <dom-module id="action-emitter-test">
     <script>
-      Polymer({
-        is: 'action-emitter-test',
-        behaviors: [
-          UniFlow.ActionEmitter,
-        ],
-      });
+      class ActionEmitterTest extends UniFlow.ActionEmitter(Polymer.Element) {
+        static get is() {
+          return 'action-emitter-test';
+        }
+      }
+
+      customElements.define(ActionEmitterTest.is, ActionEmitterTest);
     </script>
   </dom-module>
 
@@ -61,29 +64,42 @@
       });
 
       test('fires a dispatch-action event on action emit', () => {
-        sinon.spy(actionEmitter, 'fire');
+        sinon.spy(actionEmitter, 'dispatchEvent');
         let action = 'detail';
         actionEmitter.emitAction(action);
-        expect(actionEmitter.fire).to.be.calledWith('dispatch-action', action);
+        expect(actionEmitter.dispatchEvent).to.be.calledWithMatch({
+          type: 'dispatch-action',
+          detail: action
+        });
       });
 
       test('prepends statePath to detail.path', () => {
-        sinon.spy(actionEmitter, 'fire');
-        let action = {path: 'my.path'};
+        sinon.spy(actionEmitter, 'dispatchEvent');
+        let action = {
+          path: 'my.path'
+        };
         actionEmitter.statePath = 'state';
         actionEmitter.emitAction(action);
-        expect(actionEmitter.fire).to.be.calledWith('dispatch-action', {
-          path: 'state.my.path'
+        expect(actionEmitter.dispatchEvent).to.be.calledWithMatch({
+          type: 'dispatch-action',
+          detail: {
+            path: 'state.my.path'
+          }
         });
       });
 
       test('does not change detail.path if it starts with "state."', () => {
-        sinon.spy(actionEmitter, 'fire');
-        let action = {path: 'state.my.path'};
+        sinon.spy(actionEmitter, 'dispatchEvent');
+        let action = {
+          path: 'state.my.path'
+        };
         actionEmitter.statePath = 'some.state.path';
         actionEmitter.emitAction(action);
-        expect(actionEmitter.fire).to.be.calledWith('dispatch-action', {
-          path: 'state.my.path'
+        expect(actionEmitter.dispatchEvent).to.be.calledWithMatch({
+          type: 'dispatch-action',
+          detail: {
+            path: 'state.my.path'
+          }
         });
       });
 
@@ -91,4 +107,5 @@
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/application-state_test.html b/test/application-state_test.html
index 8ec770e..6266ad6 100644
--- a/test/application-state_test.html
+++ b/test/application-state_test.html
@@ -15,34 +15,42 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.ApplicationState tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/application-state.html">
-  <link rel="import" href="../../uniflow-polymer/state-aware.html">
+  <link rel="import" href="../application-state.html">
+  <link rel="import" href="../state-aware.html">
 
 </head>
+
 <body>
 
   <dom-module id="application-state-test">
     <script>
-      Polymer({
-        is: 'application-state-test',
-        behaviors: [
-          UniFlow.ApplicationState,
-        ],
-        attached() {
+      class ApplicationStateTest extends UniFlow.ApplicationState(Polymer.Element) {
+        static get is() {
+          return 'application-state-test';
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+
           this.state = {
-            a: {innerValue: 'aaa'},
+            a: {
+              innerValue: 'aaa'
+            },
             b: {}
           };
         }
-      });
+      }
+
+      customElements.define(ApplicationStateTest.is, ApplicationStateTest);
     </script>
   </dom-module>
 
@@ -51,12 +59,13 @@
       <div id="inner">[[innerValue]]</div>
     </template>
     <script>
-      Polymer({
-        is: 'state-aware-a',
-        behaviors: [
-          UniFlow.StateAware,
-        ],
-      });
+      class StateAwareA extends UniFlow.StateAware(Polymer.Element) {
+        static get is() {
+          return 'state-aware-a';
+        }
+      }
+
+      customElements.define(StateAwareA.is, StateAwareA);
     </script>
   </dom-module>
 
@@ -67,12 +76,13 @@
       <state-aware-a id="a" state-path="state.a"></state-aware-a>
     </template>
     <script>
-      Polymer({
-        is: 'state-aware-b',
-        behaviors: [
-          UniFlow.StateAware,
-        ],
-      });
+      class StateAwareB extends UniFlow.StateAware(Polymer.Element) {
+        static get is() {
+          return 'state-aware-b';
+        }
+      }
+
+      customElements.define(StateAwareB.is, StateAwareB);
     </script>
   </dom-module>
 
@@ -98,57 +108,64 @@
 
       test('is ok', () => {
         expect(applicationState).to.be.ok;
-        expect(applicationState.$$('#b')).to.be.ok;
-        expect(applicationState.$$('#b').$$('#a')).to.be.ok;
+        expect(applicationState.querySelector('#b')).to.be.ok;
+        expect(applicationState.querySelector('#b').root.querySelector('#a')).to.be.ok;
       });
 
       test('dispatchAction is called on dispatch-action event', () => {
         sinon.spy(applicationState, 'dispatchAction');
-        applicationState.fire('dispatch-action', 'detail');
+        applicationState.dispatchEvent(new CustomEvent('dispatch-action', {
+          detail: 'detail',
+          bubbles: true,
+          composed: true
+        }));
         expect(applicationState.dispatchAction)
-            .to.have.been.calledWith('detail');
+          .to.have.been.calledWith('detail');
       });
 
       test('application.element is set to element itself', () => {
         expect(applicationState.get('application.element'))
-            .to.equal(applicationState);
+          .to.equal(applicationState);
       });
 
       test('state aware elements receive initial element state', () => {
-        expect(applicationState.$$('#b').$$('#a').$$('#inner').innerText)
-            .to.equal('aaa');
+        expect(applicationState.querySelector('#b').root.querySelector('#a').root.querySelector('#inner').innerText)
+          .to.equal('aaa');
       });
 
       test('state aware elements listen to application state', () => {
         applicationState.set('state.value', 'something');
-        expect(applicationState.$$('#b').$$('#inner-state').innerText)
-            .to.equal('something');
+        expect(applicationState.querySelector('#b').root.querySelector('#inner-state').innerText)
+          .to.equal('something');
       });
 
       test('state aware elements listen to element state changes', () => {
         applicationState.set('state.a.innerValue', 'aaa.modified');
-        expect(applicationState.$$('#b').$$('#a').$$('#inner').innerText)
-            .to.equal('aaa.modified');
+        expect(applicationState.querySelector('#b').root.querySelector('#a').root.querySelector('#inner').innerText)
+          .to.equal('aaa.modified');
         applicationState.set('state.b.innerValue', 'bbb');
-        expect(applicationState.$$('#b').$$('#inner').innerText)
-            .to.equal('bbb');
+        expect(applicationState.querySelector('#b').root.querySelector('#inner').innerText)
+          .to.equal('bbb');
       });
 
       test('state aware elements handle entire element state replacement', () => {
-        applicationState.set('state.a', {innerValue: 'aaa.new'});
-        expect(applicationState.$$('#b').$$('#a').$$('#inner').innerText)
-            .to.equal('aaa.new');
+        applicationState.set('state.a', {
+          innerValue: 'aaa.new'
+        });
+        expect(applicationState.querySelector('#b').root.querySelector('#a').root.querySelector('#inner').innerText)
+          .to.equal('aaa.new');
       });
 
-//      test('fires a dispatch-action event on action emit', () => {
-//        sinon.spy(applicationState, 'fire');
-//        let action = 'detail';
-//        applicationState.emitAction(action);
-//        expect(applicationState.fire).to.be.calledWith('dispatch-action', action);
-//      });
+      //      test('fires a dispatch-action event on action emit', () => {
+      //        sinon.spy(applicationState, 'fire');
+      //        let action = 'detail';
+      //        applicationState.emitAction(action);
+      //        expect(applicationState.fire).to.be.calledWith('dispatch-action', action);
+      //      });
 
     });
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/list-view_test.html b/test/list-view_test.html
index d21e687..c1efa6c 100644
--- a/test/list-view_test.html
+++ b/test/list-view_test.html
@@ -15,47 +15,44 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.ListView tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/list-view.html">
+  <link rel="import" href="../list-view.html">
 
 </head>
+
 <body>
 
   <dom-module id="list-view-test">
     <script>
-      Polymer({
-        is: 'list-view-test',
-        behaviors: [
-          UniFlow.ListView,
-        ],
-      });
+      class ListViewTest extends UniFlow.ListView(Polymer.Element) {
+        static get is() {
+          return 'list-view-test';
+        }
+      }
+
+      customElements.define(ListViewTest.is, ListViewTest);
     </script>
   </dom-module>
 
-  <test-fixture id="basic">
-    <template is="dom-template">
-      <list-view-test list="[[list]]">
-      </list-view-test>
-    </template>
-  </test-fixture>
-
   <script>
     'use strict';
 
     suite('UniFlow.ListView', () => {
 
-      let listView, list;
+      let listl, listView;
 
       setup(() => {
-        list = [];
-        listView = fixture('basic', {list});
+        listView = document.createElement("list-view-test");
+        listView.list = []; 
+        document.body.appendChild(listView);
       });
 
       test('is ok', () => {
@@ -64,19 +61,25 @@
 
       test('updates selected count on new list', () => {
         sinon.spy(listView, 'updateSelectedCount_');
-        listView.set('list', [{foo: 'bar'}]);
+        listView.set('list', [{
+          foo: 'bar'
+        }]);
         expect(listView.updateSelectedCount_).to.be.called;
       });
 
       test('updates selected count on element added/removed', () => {
         sinon.spy(listView, 'updateSelectedCount_');
-        listView.push('list', {foo: 'bar'});
+        listView.push('list', {
+          foo: 'bar'
+        });
         listView.splice('list', 0, 1);
         expect(listView.updateSelectedCount_).to.be.calledTwice;
       });
 
       test('updates selected count on $selected changed', () => {
-        listView.set('list', [{foo: 'bar'}]);
+        listView.set('list', [{
+          foo: 'bar'
+        }]);
         sinon.spy(listView, 'updateSelectedCount_');
         listView.set(['list', 0, '$selected'], true);
         listView.set(['list', 0, '$selected'], false);
@@ -84,9 +87,14 @@
       });
 
       test('calculates selectedCount', () => {
-        listView.set('list', [
-          {foo: 'bar', $selected: true},
-          {foo: 'baz', $selected: false},
+        listView.set('list', [{
+            foo: 'bar',
+            $selected: true
+          },
+          {
+            foo: 'baz',
+            $selected: false
+          },
           {},
         ]);
         expect(listView.selectedCount).to.equal(1);
@@ -94,16 +102,24 @@
 
       test('emits delete action for selected', () => {
         sinon.spy(listView, 'emitAction');
-        listView.set('list', [
-          {foo: 'bar', $selected: true},
-          {foo: 'baz', $selected: false},
+        listView.set('list', [{
+            foo: 'bar',
+            $selected: true
+          },
+          {
+            foo: 'baz',
+            $selected: false
+          },
           {},
         ]);
         listView.deleteSelected('DELETE');
         expect(listView.emitAction).to.be.calledOnce;
         expect(listView.emitAction).to.be.calledWith({
           type: 'DELETE',
-          item: {foo: 'bar', $selected: true}
+          item: {
+            foo: 'bar',
+            $selected: true
+          }
         });
       });
 
@@ -111,4 +127,5 @@
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/model-view_test.html b/test/model-view_test.html
index e8413de..ae0edc3 100644
--- a/test/model-view_test.html
+++ b/test/model-view_test.html
@@ -15,43 +15,49 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.ModelView tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/model-view.html">
+  <link rel="import" href="../model-view.html">
 
 </head>
+
 <body>
 
   <dom-module id="model-view-test">
     <script>
-      Polymer({
-        is: 'model-view-test',
-        behaviors: [
-          UniFlow.ModelView,
-        ],
-        saveAction: 'SAVE',
-        validation: {
-          'foo': (value) => !value ? 'bad foo' : '',
-          'xxx': (value) => value == 'yyy' ? 123 : ''
-        },
-        getMessage: (code) => code === 123 ? 'error 123' : ''
-      });
+      class ModelViewTest extends UniFlow.ModelView(Polymer.Element) {
+        static get is() {
+          return 'model-view-test';
+        }
+        
+        constructor() {
+          super();
+          this.validation = {
+            'foo': (value) => !value ? 'bad foo' : '',
+            'xxx': (value) => value == 'yyy' ? 123 : ''
+          };
+        }
+        
+        get saveAction() {
+          return 'SAVE';
+        }
+
+        getMessage(code) {
+          return code === 123 ? 'error 123' : '';
+        }
+      }
+
+      customElements.define(ModelViewTest.is, ModelViewTest);
     </script>
   </dom-module>
 
-  <test-fixture id="basic">
-    <template is="dom-template">
-      <model-view-test model="[[model]]">
-      </model-view-test>
-    </template>
-  </test-fixture>
-
   <script>
     'use strict';
 
@@ -60,9 +66,15 @@
       let modelView, model, status;
 
       setup(() => {
-        model = {foo: 'bar'};
+        modelView = document.createElement("model-view-test");
+        document.body.appendChild(modelView);
+
+        model = {
+          foo: 'bar'
+        };
         status = {};
-        modelView = fixture('basic', {model, status});
+        
+        modelView.model = model;
       });
 
       test('is ok', () => {
@@ -91,7 +103,10 @@
 
       test('saves model with custom action', () => {
         sinon.spy(modelView, 'emitAction');
-        modelView.saveModel({type: 'XXX', path: 'my.model'});
+        modelView.saveModel({
+          type: 'XXX',
+          path: 'my.model'
+        });
         expect(modelView.emitAction).to.be.calledWith({
           model,
           path: 'my.model',
@@ -101,8 +116,14 @@
 
       test('initializes validation status', () => {
         modelView.initValidationStatus_();
-        expect(modelView.get('status.validation')).to.deep.equal(
-            {foo: {invalid: false}, xxx: {invalid: false}});
+        expect(modelView.get('status.validation')).to.deep.equal({
+          foo: {
+            invalid: false
+          },
+          xxx: {
+            invalid: false
+          }
+        });
       });
 
       test('validates model when validation not specified', () => {
@@ -112,23 +133,34 @@
 
       test('validates model to true', () => {
         expect(modelView.validateModel()).to.be.true;
-        expect(modelView.get('status.validation')).to.deep.equal(
-            {foo: {invalid: false, errorMessage: ''},
-              xxx: {invalid: false, errorMessage: ''}});
+        expect(modelView.get('status.validation')).to.deep.equal({
+          foo: {
+            invalid: false,
+            errorMessage: ''
+          },
+          xxx: {
+            invalid: false,
+            errorMessage: ''
+          }
+        });
       });
 
       test('validates model to false with error text', () => {
         modelView.set('model.foo', '');
         expect(modelView.validateModel()).to.be.false;
-        expect(modelView.get('status.validation.foo')).to.deep.equal(
-            {invalid: true, errorMessage: 'bad foo'});
+        expect(modelView.get('status.validation.foo')).to.deep.equal({
+          invalid: true,
+          errorMessage: 'bad foo'
+        });
       });
 
       test('validates model to false with error code', () => {
         modelView.set('model.xxx', 'yyy');
         expect(modelView.validateModel()).to.be.false;
-        expect(modelView.get('status.validation.xxx')).to.deep.equal(
-            {invalid: true, errorMessage: 'error 123'});
+        expect(modelView.get('status.validation.xxx')).to.deep.equal({
+          invalid: true,
+          errorMessage: 'error 123'
+        });
       });
 
       test('validates to true and saves', () => {
@@ -146,13 +178,19 @@
 
       test('handles model change', () => {
         sinon.spy(modelView, 'initValidationStatus_');
-        modelView.set('model', {foo: 'bar'});
+        modelView.set('model', {
+          foo: 'bar'
+        });
         expect(modelView.initValidationStatus_).to.have.been.called;
         expect(modelView.get('status')).to.deep.equal({
           isModified: false,
           validation: {
-            foo: {invalid: false},
-            xxx: {invalid: false}
+            foo: {
+              invalid: false
+            },
+            xxx: {
+              invalid: false
+            }
           }
         });
       });
@@ -175,4 +213,5 @@
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/test/state-aware_test.html b/test/state-aware_test.html
index 5846469..97fbf06 100644
--- a/test/state-aware_test.html
+++ b/test/state-aware_test.html
@@ -15,27 +15,30 @@
 limitations under the License.
 -->
 <html>
+
 <head>
   <meta charset="UTF-8">
-  <title>paper-toolbar basic tests</title>
+  <title>UniFlow.StateAware tests</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <script src="../../web-component-tester/browser.js"></script>
 
-  <link rel="import" href="../../uniflow-polymer/state-aware.html">
+  <link rel="import" href="../state-aware.html">
 
 </head>
+
 <body>
 
   <dom-module id="state-aware-test">
     <script>
-      Polymer({
-        is: 'state-aware-test',
-        behaviors: [
-          UniFlow.StateAware,
-        ],
-      });
+      class StateAwareTest extends UniFlow.StateAware(Polymer.Element) {
+        static get is() {
+          return 'state-aware-test';
+        }
+      }
+
+      customElements.define(StateAwareTest.is, StateAwareTest);
     </script>
   </dom-module>
 
@@ -63,18 +66,18 @@
 
       test('added to application.stateAwareElements', () => {
         expect(stateAware.get('application.stateAwareElements')).to.deep.equal(
-            [stateAware]);
+          [stateAware]);
       });
 
       test('removed from application.stateAwareElements', () => {
         stateAware.parentNode.removeChild(stateAware);
         expect(stateAware.get('application.stateAwareElements'))
-            .to.deep.equal([]);
+          .to.deep.equal([]);
       });
 
       test('added to application.stateAwareElements', () => {
         sinon.stub(stateAware, 'get').withArgs('application.element')
-            .returns('my-app');
+          .returns('my-app');
         expect(stateAware.getApplication()).to.equal('my-app');
       });
 
@@ -82,4 +85,5 @@
   </script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/todomvc/README.md b/todomvc/README.md
index 5e5809b..4157e78 100644
--- a/todomvc/README.md
+++ b/todomvc/README.md
@@ -1,6 +1,6 @@
 # \<todo\>
 
-ToDo MVC application implemented with UniFlow for Polymer
+ToDo MVC application implemented with UniFlow for Polymer 2.x
 
 ## Install Bower Dependencies
 
@@ -13,3 +13,7 @@ Make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli)
 ## Run the Application
 
 Run `polymer serve` to serve your application locally.
+
+Open the by adding todomvc to the url, for example:
+
+http://127.0.0.1:8081/components/uniflow-polymer/todomvc
\ No newline at end of file
diff --git a/todomvc/bower.json b/todomvc/bower.json
deleted file mode 100644
index 818f5f1..0000000
--- a/todomvc/bower.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "todo",
-  "description": "ToDo MVC application implemented with UniFlow for Polymer",
-  "main": "index.html",
-  "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0",
-    "iron-localstorage": "PolymerElements/iron-localstorage#^1.0.6"
-  },
-  "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "todomvc-app-css": "^2.0.0",
-    "todomvc-common": "^1.0.0",
-    "app-route": "PolymerElements/app-route#^0.9.2",
-    "app-layout": "PolymerElements/app-layout#^0.9.1",
-    "app-storage": "PolymerElements/app-storage#^0.9.4",
-    "uniflow-polymer": "google/uniflow-polymer"
-  }
-}
diff --git a/todomvc/elements/todo-action-dispatcher.html b/todomvc/elements/todo-action-dispatcher.html
index 9736fb1..dbe24cf 100644
--- a/todomvc/elements/todo-action-dispatcher.html
+++ b/todomvc/elements/todo-action-dispatcher.html
@@ -1,8 +1,81 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/action-dispatcher.html">
-<link rel="import" href="../bower_components/uniflow-polymer/action-emitter.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../action-dispatcher.html">
+<link rel="import" href="../../action-emitter.html">
 
 <dom-module id="todo-action-dispatcher">
-</dom-module>
+    <script>
+        class TodpActionDispatcher extends UniFlow.ActionEmitter(UniFlow.ActionDispatcher(Polymer.Element)) {
+            static get is() {
+                return 'todo-action-dispatcher';
+            }
 
-<script src="todo-action-dispatcher.js"></script>
\ No newline at end of file
+            _updateAllCompleted() {
+                if (this.get('state.todoList') && this.get('state.todoList').length) {
+                    this.set('state.allCompleted',
+                        this.get('state.todoList').every((item) => item.completed));
+                } else {
+                    this.set('state.allCompleted', false);
+                }
+            }
+
+            _updateActiveCount() {
+                this.set('state.activeCount', this.get('state.todoList').reduce((count, todoItem) => count + (
+                    todoItem.completed ? 0 : 1), 0));
+            }
+
+            [todo.actions.INIT_APPLICATION](details) {
+                this._updateAllCompleted();
+                this._updateActiveCount();
+            }
+
+            [todo.actions.ADD_TODO](details) {
+                this.push('state.todoList', {
+                    text: details.text,
+                    completed: false
+                });
+                this._updateAllCompleted();
+            }
+
+            [todo.actions.UPDATE_TODO](details) {
+                let index = this.get('state.todoList').indexOf(details.model);
+                this.set(['state.todoList', index, 'text'], details.text);
+            }
+
+            [todo.actions.REMOVE_TODO](details) {
+                let index = this.state.todoList.indexOf(details.model);
+                this.splice('state.todoList', index, 1);
+                this._updateAllCompleted();
+                this._updateActiveCount();
+            }
+
+            [todo.actions.SELECTION_CHANGED](details) {
+                if (details.applyToAll) {
+                    this.set('state.allCompleted', details.value);
+                    this.get('state.todoList').forEach((item, index) => {
+                        this.set(['state.todoList', index, 'completed'],
+                            details.value);
+                    });
+                } else {
+                    if (details.model) {
+                        let index = this.get('state.todoList').indexOf(details.model);
+                        this.set(['state.todoList', index, 'completed'], details.completed);
+                    }
+                    this._updateAllCompleted();
+                }
+                this._updateActiveCount();
+            }
+
+            [todo.actions.CLEAR_COMPLETED](details) {
+                let completed = this.get('state.todoList').filter(
+                    elem => elem.completed);
+                completed.forEach(elem => {
+                    let index = this.state.todoList.indexOf(elem);
+                    this.splice('state.todoList', index, 1);
+                });
+                this._updateAllCompleted();
+            }
+        }
+
+        customElements.define(TodpActionDispatcher.is, TodpActionDispatcher);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-action-dispatcher.js b/todomvc/elements/todo-action-dispatcher.js
deleted file mode 100644
index d64cf10..0000000
--- a/todomvc/elements/todo-action-dispatcher.js
+++ /dev/null
@@ -1,74 +0,0 @@
-Polymer({
-
-  is: 'todo-action-dispatcher',
-
-  behaviors: [
-    UniFlow.ActionDispatcher,
-    UniFlow.ActionEmitter
-  ],
-
-  _updateAllCompleted() {
-    if (this.get('state.todoList') && this.get('state.todoList').length) {
-      this.set('state.allCompleted',
-               this.get('state.todoList').every((item) => item.completed));
-    } else {
-      this.set('state.allCompleted', false);
-    }
-  },
-
-  _updateActiveCount() {
-    this.set('state.activeCount', this.get('state.todoList').
-        reduce((count, todoItem) => count + (todoItem.completed ? 0 : 1), 0));
-  },
-
-  [todo.actions.INIT_APPLICATION](details) {
-    this._updateAllCompleted();
-    this._updateActiveCount();
-  },
-
-  [todo.actions.ADD_TODO](details) {
-    this.push('state.todoList', {
-      text: details.text,
-      completed: false
-    });
-    this._updateAllCompleted();
-  },
-
-  [todo.actions.UPDATE_TODO](details) {
-    let index = this.get('state.todoList').indexOf(details.model);
-    this.set(['state.todoList', index, 'text'], details.text);
-  },
-
-  [todo.actions.REMOVE_TODO](details) {
-    this.arrayDelete('state.todoList', details.model);
-    this._updateAllCompleted();
-    this._updateActiveCount();
-  },
-
-  [todo.actions.SELECTION_CHANGED](details) {
-    if (details.applyToAll) {
-      this.set('state.allCompleted', details.value);
-      this.get('state.todoList').forEach((item, index) => {
-        this.set(['state.todoList', index, 'completed'],
-                 details.value);
-      });
-    } else {
-      if (details.model) {
-        let index = this.get('state.todoList').indexOf(details.model);
-        this.set(['state.todoList', index, 'completed'], details.completed);
-      }
-      this._updateAllCompleted();
-    }
-    this._updateActiveCount();
-  },
-
-  [todo.actions.CLEAR_COMPLETED](details) {
-    let completed = this.get('state.todoList').filter(
-        elem => elem.completed);
-    completed.forEach(elem => {
-      this.arrayDelete('state.todoList', elem);
-    });
-    this._updateAllCompleted();
-  }
-
-});
diff --git a/todomvc/elements/todo-app.html b/todomvc/elements/todo-app.html
index b3ceb84..b90d2d4 100644
--- a/todomvc/elements/todo-app.html
+++ b/todomvc/elements/todo-app.html
@@ -1,9 +1,9 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/action-emitter.html">
-<link rel="import" href="../bower_components/uniflow-polymer/application-state.html">
-<link rel="import" href="../bower_components/app-route/app-route.html">
-<link rel="import" href="../bower_components/app-route/app-location.html">
-<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../action-emitter.html">
+<link rel="import" href="../../application-state.html">
+<link rel="import" href="../../../app-route/app-route.html">
+<link rel="import" href="../../../app-route/app-location.html">
+<link rel="import" href="../../../iron-localstorage/iron-localstorage.html">
 
 <link rel="import" href="todo-header.html">
 <link rel="import" href="todo-items.html">
@@ -14,28 +14,25 @@
 
 <dom-module id="todo-app">
   <template>
-    <style is="custom-style" include="todo-styles">
+    <style include="todo-styles">
+
     </style>
 
     <todo-action-dispatcher state="{{state}}"></todo-action-dispatcher>
     <section class="todoapp">
       <app-location route="{{route}}" use-hash-as-path></app-location>
-      <app-route route="{{route}}"
-                 pattern="/:filterBy"
-                 data="{{routeData}}"></app-route>
-      <iron-localstorage name="todo-list"
-                         value="{{state.todoList}}"
-                         on-iron-localstorage-load-empty="onStorageLoadEmpty"
-                         on-iron-localstorage-load="onStorageLoad">
+      <app-route route="{{route}}" pattern="/:filterBy" data="{{routeData}}"></app-route>
+      <iron-localstorage name="todo-list" value="{{state.todoList}}" on-iron-localstorage-load-empty="onStorageLoadEmpty" on-iron-localstorage-load="onStorageLoad">
       </iron-localstorage>
       <todo-header></todo-header>
       <template is="dom-if" if="[[state.todoList.length]]">
         <!-- This section should be hidden by default and shown when there are todos -->
-        <todo-items id="list"
-                    class="main"
-                    list="[[state.todoList]]"
-                    filter-by="[[routeData.filterBy]]">
-        </todo-items>
+        <section class="main">
+          <input class="toggle-all" type="checkbox" checked="[[state.allCompleted]]" on-change="onAllCompletedChange">
+          <label for="toggle-all">Mark all as complete</label>
+          <todo-items id="list" list="[[state.todoList]]" filter-by="[[routeData.filterBy]]">
+          </todo-items>
+        </section>
         <!-- This footer should hidden by default and shown when there are todos -->
         <todo-footer filter-by="[[routeData.filterBy]]">
         </todo-footer>
@@ -43,6 +40,38 @@
     </section>
 
   </template>
-</dom-module>
+  <script>
+    class TodoApp extends UniFlow.ActionEmitter(UniFlow.ApplicationState(Polymer.Element)) {
+      static get is() {
+        return 'todo-app';
+      }
+
+      static get properties() {
+        return {
+          route: Object,
+          routeData: Object
+        }
+      }
+
+      ready() {
+        super.ready();
+        this.set('state', {
+          allCompleted: false,
+          activeCount: 0
+        });
+      }
+
+      onStorageLoadEmpty() {
+        this.set('state.todoList', []);
+      }
+
+      onStorageLoad() {
+        this.emitAction({
+          type: todo.actions.INIT_APPLICATION
+        });
+      }
+    }
 
-<script src="todo-app.js"></script>
+    customElements.define(TodoApp.is, TodoApp);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-app.js b/todomvc/elements/todo-app.js
deleted file mode 100644
index 0378b62..0000000
--- a/todomvc/elements/todo-app.js
+++ /dev/null
@@ -1,32 +0,0 @@
-Polymer({
-
-  is: 'todo-app',
-
-  behaviors: [
-    UniFlow.ActionEmitter,
-    UniFlow.ApplicationState,
-  ],
-
-  properties: {
-    route: Object,
-    routeData: Object
-  },
-
-  ready() {
-    this.set('state', {
-      allCompleted: false,
-      activeCount: 0
-    });
-  },
-
-  onStorageLoadEmpty() {
-    this.set('state.todoList', []);
-  },
-
-  onStorageLoad() {
-    this.emitAction({
-      type: todo.actions.INIT_APPLICATION
-    });
-  }
-
-});
\ No newline at end of file
diff --git a/todomvc/elements/todo-footer.html b/todomvc/elements/todo-footer.html
index 3329739..da99b0a 100644
--- a/todomvc/elements/todo-footer.html
+++ b/todomvc/elements/todo-footer.html
@@ -1,21 +1,16 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/action-emitter.html">
-<link rel="import" href="../bower_components/uniflow-polymer/state-aware.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../../polymer/lib/mixins/gesture-event-listeners.html">
+<link rel="import" href="../../action-emitter.html">
+<link rel="import" href="../../state-aware.html">
 
 <link rel="import" href="todo-styles.html">
 
 <dom-module id="todo-footer">
   <template>
-    <style is="custom-style" include="todo-styles">
-
-      .filters li a:hover {
-        border-color: rgba(175, 47, 47, 0.1);
-      }
-
+    <style include="todo-styles">
       .filters li a[selected] {
         border-color: rgba(175, 47, 47, 0.2);
       }
-
     </style>
 
     <footer class="footer">
@@ -36,12 +31,43 @@
       </ul>
       <!-- Hidden if no completed items are left -->
       <template is="dom-if" if="[[completedCount]]">
-        <button class="clear-completed"
-                on-tap="onClearCompletedButtonTap">Clear completed</button>
+        <button class="clear-completed" on-tap="onClearCompletedButtonTap">Clear completed</button>
       </template>
     </footer>
 
   </template>
-</dom-module>
+  <script>
+    class TodoFooter extends Polymer.GestureEventListeners(UniFlow.ActionEmitter(UniFlow.StateAware(Polymer.Element))) {
+
+      static get is() {
+        return 'todo-footer';
+      }
+
+      static get properties() {
+        return {
+          filterBy: String,
+          completedCount: {
+            type: Number,
+            computed: 'getCompletedCount(state.todoList.length, state.activeCount)'
+          }
+        }
+      }
+
+      isEqual(val1, val2) {
+        return val1 == val2;
+      }
+
+      getCompletedCount(totalCount, activeCount) {
+        return totalCount - activeCount;
+      }
+
+      onClearCompletedButtonTap() {
+        this.emitAction({
+          type: todo.actions.CLEAR_COMPLETED
+        })
+      }
+    }
 
-<script src="todo-footer.js"></script>
+    customElements.define(TodoFooter.is, TodoFooter);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-footer.js b/todomvc/elements/todo-footer.js
deleted file mode 100644
index 2633038..0000000
--- a/todomvc/elements/todo-footer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-Polymer({
-
-  is: 'todo-footer',
-
-  behaviors: [
-    UniFlow.ActionEmitter,
-    UniFlow.StateAware
-  ],
-
-  properties: {
-    filterBy: String,
-    completedCount: {
-      type: Number,
-      computed: 'getCompletedCount(state.todoList.length, state.activeCount)'
-    }
-  },
-
-  isEqual(val1, val2) {
-    return val1 == val2;
-  },
-
-  getCompletedCount(totalCount, activeCount) {
-    return totalCount - activeCount;
-  },
-
-  onClearCompletedButtonTap() {
-    this.emitAction({
-      type: todo.actions.CLEAR_COMPLETED
-    })
-  },
-
-});
\ No newline at end of file
diff --git a/todomvc/elements/todo-header.html b/todomvc/elements/todo-header.html
index aa3a386..c6c1aa6 100644
--- a/todomvc/elements/todo-header.html
+++ b/todomvc/elements/todo-header.html
@@ -1,68 +1,44 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/action-emitter.html">
-<link rel="import" href="../bower_components/uniflow-polymer/state-aware.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../action-emitter.html">
+<link rel="import" href="../../state-aware.html">
 
 <link rel="import" href="todo-styles.html">
 
 <dom-module id="todo-header">
   <template>
-    <style is="custom-style" include="todo-styles">
-
-      .toggle-all {
-        position: absolute;
-        top: 14px;
-        z-index: 1;
-      }
-
-      input::-webkit-input-placeholder {
-        font-style: italic;
-        font-weight: 300;
-        color: #e6e6e6;
-      }
-
-      input::-moz-placeholder {
-        font-style: italic;
-        font-weight: 300;
-        color: #e6e6e6;
-      }
-
-      input::input-placeholder {
-        font-style: italic;
-        font-weight: 300;
-        color: #e6e6e6;
-      }
-
-      h1 {
-        position: absolute;
-        top: -140px;
-        width: 100%;
-        font-size: 100px;
-        font-weight: 100;
-        text-align: center;
-        color: rgba(175, 47, 47, 0.15);
-        -webkit-text-rendering: optimizeLegibility;
-        -moz-text-rendering: optimizeLegibility;
-        text-rendering: optimizeLegibility;
-      }
+    <style include="todo-styles">
 
     </style>
 
     <header class="header">
       <h1>todos</h1>
-      <template is="dom-if" if="[[state.todoList.length]]">
-        <input class="toggle-all"
-               type="checkbox"
-               checked="[[state.allCompleted]]"
-               on-change="onAllCompletedChange">
-      </template>
-      <input class="new-todo"
-             placeholder="What needs to be done?"
-             value="{{todoText::input}}"
-             on-keydown="onInputKeyDown"
-             autofocus>
+      <input class="new-todo" placeholder="What needs to be done?" value="{{todoText::input}}" on-keydown="onInputKeyDown" autofocus>
     </header>
 
   </template>
-</dom-module>
+  <script>
+    class TodoHeader extends UniFlow.ActionEmitter(UniFlow.StateAware(Polymer.Element)) {
+      static get is() {
+        return 'todo-header';
+      }
+
+      static properties() {
+        return {
+          todoText: String
+        }
+      }
+
+      onInputKeyDown(e) {
+        if (e.keyCode == 13 && this.todoText.trim().length) {
+          this.emitAction({
+            type: todo.actions.ADD_TODO,
+            text: this.todoText
+          });
+          this.todoText = '';
+        }
+      }
+    }
 
-<script src="todo-header.js"></script>
+    customElements.define(TodoHeader.is, TodoHeader);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-header.js b/todomvc/elements/todo-header.js
deleted file mode 100644
index ea40130..0000000
--- a/todomvc/elements/todo-header.js
+++ /dev/null
@@ -1,33 +0,0 @@
-
-Polymer({
-
-  is: 'todo-header',
-
-  behaviors: [
-    UniFlow.ActionEmitter,
-    UniFlow.StateAware
-  ],
-
-  properties: {
-    todoText: String
-  },
-
-  onInputKeyDown(e) {
-    if (e.keyCode == 13 && this.todoText.trim().length) {
-      this.emitAction({
-        type: todo.actions.ADD_TODO,
-        text: this.todoText
-      });
-      this.todoText = '';
-    }
-  },
-
-  onAllCompletedChange(event) {
-    this.emitAction({
-      type: todo.actions.SELECTION_CHANGED,
-      applyToAll: true,
-      value: event.target.checked
-    })
-  },
-
-});
\ No newline at end of file
diff --git a/todomvc/elements/todo-item.html b/todomvc/elements/todo-item.html
index e2dfe90..f554a65 100644
--- a/todomvc/elements/todo-item.html
+++ b/todomvc/elements/todo-item.html
@@ -1,13 +1,13 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/model-view.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../../polymer/lib/mixins/gesture-event-listeners.html">
+<link rel="import" href="../../model-view.html">
 
 <link rel="import" href="todo-styles.html">
 
 <dom-module id="todo-item">
   <template>
-    <style is="custom-style" include="todo-styles">
-
-      :host {
+    <style include="todo-styles">
+       :host {
         display: block;
       }
 
@@ -40,7 +40,8 @@
         position: absolute;
         top: 9px;
         margin: auto 0;
-        border: none; /* Mobile Safari */
+        border: none;
+        /* Mobile Safari */
         -webkit-appearance: none;
         appearance: none;
       }
@@ -105,26 +106,87 @@
       li .toggle:checked:after {
         content: url('../resources/checked.svg');
       }
-
     </style>
 
     <li completed$="[[model.completed]]" editing$="[[isEditing]]">
       <div class="view">
-        <input class="toggle"
-               type="checkbox"
-               checked="[[model.completed]]"
-               on-change="onCompletedChange">
+        <input class="toggle" type="checkbox" checked="[[model.completed]]" on-change="onCompletedChange">
         <label on-dblclick="onViewDblClick">[[model.text]]</label>
         <button class="destroy" on-tap="onDestroyTap"></button>
       </div>
-      <input id="text-input"
-             class="edit"
-             hidden="[[!isEditing]]"
-             on-blur="onInputBlur"
-             on-keydown="onInputKeyDown">
+      <input id="text-input" class="edit" hidden="[[!isEditing]]" on-blur="onInputBlur" on-keydown="onInputKeyDown">
     </li>
-
   </template>
-</dom-module>
+  <script>
+    class TodoItem extends UniFlow.ModelView(Polymer.GestureEventListeners(Polymer.Element)) {
+
+      static get is() {
+        return 'todo-item';
+      }
+
+
+      static get properties() {
+        return {
+          filterBy: String,
+          isEditing: {
+            type: Boolean,
+            value: false
+          }
+        }
+      }
+
+      onCompletedChange(e) {
+        this.emitAction({
+          type: todo.actions.SELECTION_CHANGED,
+          model: this.model,
+          completed: e.target.checked
+        });
+      }
+
+      _removeTodo() {
+        this.emitAction({
+          type: todo.actions.REMOVE_TODO,
+          model: this.model
+        });
+      }
+
+      onDestroyTap(e) {
+        this._removeTodo();
+      }
+
+      onViewDblClick(e) {
+        this.$['text-input'].value = this.model.text;
+        this.isEditing = true;
+        this.$['text-input'].focus();
+      }
+
+      onInputBlur(e) {
+        if (this.isEditing) {
+          this._confirmEdit();
+        }
+      }
+
+      _confirmEdit() {
+        this.emitAction({
+          type: todo.actions.UPDATE_TODO,
+          model: this.model,
+          text: this.$['text-input'].value
+        });
+        this.isEditing = false;
+        if (!this.model.text.trim()) {
+          this._removeTodo();
+        }
+      }
+
+      onInputKeyDown(e) {
+        if (e.keyCode == 13) {
+          this.$['text-input'].blur();
+        } else if (e.keyCode == 27) {
+          this.isEditing = false;
+        }
+      }
+    }
 
-<script src="todo-item.js"></script>
+    customElements.define(TodoItem.is, TodoItem);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-item.js b/todomvc/elements/todo-item.js
deleted file mode 100644
index 021a592..0000000
--- a/todomvc/elements/todo-item.js
+++ /dev/null
@@ -1,66 +0,0 @@
-Polymer({
-
-  is: 'todo-item',
-
-  behaviors: [
-    UniFlow.ModelView
-  ],
-
-  properties: {
-    filterBy: String,
-    isEditing: {
-      type: Boolean,
-      value: false
-    },
-  },
-
-  onCompletedChange(e) {
-    this.emitAction({
-      type: todo.actions.SELECTION_CHANGED,
-      model: this.model,
-      completed: e.target.checked
-    });
-  },
-
-  _removeTodo() {
-    this.emitAction({
-      type: todo.actions.REMOVE_TODO,
-      model: this.model
-    });
-  },
-
-  onDestroyTap(e) {
-    this._removeTodo();
-  },
-
-  onViewDblClick(e) {
-    this.$['text-input'].value = this.model.text;
-    this.isEditing = true;
-    this.$['text-input'].focus();
-  },
-
-  onInputBlur(e) {
-    if (this.isEditing) {
-      this._confirmEdit();
-    }
-  },
-
-  _confirmEdit() {
-    this.emitAction({
-      type: todo.actions.UPDATE_TODO,
-      model: this.model,
-      text: this.$['text-input'].value
-    });
-    this.isEditing = false;
-    if (!this.model.text.trim()) { this._removeTodo(); }
-  },
-
-  onInputKeyDown(e) {
-    if (e.keyCode == 13) {
-      this.$['text-input'].blur();
-    } else if (e.keyCode == 27) {
-      this.isEditing = false;
-    }
-  },
-
-});
diff --git a/todomvc/elements/todo-items.html b/todomvc/elements/todo-items.html
index 63e0c9a..890b8d2 100644
--- a/todomvc/elements/todo-items.html
+++ b/todomvc/elements/todo-items.html
@@ -1,5 +1,5 @@
-<link rel="import" href="../bower_components/polymer/polymer.html">
-<link rel="import" href="../bower_components/uniflow-polymer/list-view.html">
+<link rel="import" href="../../../polymer/polymer-element.html">
+<link rel="import" href="../../list-view.html">
 
 <link rel="import" href="todo-item.html">
 
@@ -7,9 +7,8 @@
 
 <dom-module id="todo-items">
   <template>
-    <style is="custom-style" include="todo-styles">
-
-      :host {
+    <style include="todo-styles">
+       :host {
         display: block;
       }
 
@@ -20,21 +19,46 @@
       todo-item:first-child {
         border-top: none;
       }
-
     </style>
 
-    <ul class="todo-list">
-      <template is="dom-repeat"
-                id="list-template"
-                items="[[list]]"
-                as="todoItem"
-                filter="[[filterList(filterBy)]]"
-                observe="completed">
-        <todo-item model="[[todoItem]]"></todo-item>
-      </template>
-    </ul>
-
+    <section class="main">
+      <input id="ta" class="toggle-all" type="checkbox" checked="[[state.allCompleted]]" on-change="onAllCompletedChange">
+      <label for="ta">Mark all as complete</label>
+      <ul class="todo-list">
+        <template is="dom-repeat" id="list-template" items="[[list]]" as="todoItem" filter="[[filterList(filterBy)]]" observe="completed">
+          <todo-item model="[[todoItem]]"></todo-item>
+        </template>
+      </ul>
+    </section>
   </template>
-</dom-module>
+  <script>
+    class TodoItems extends UniFlow.ListView(Polymer.Element) {
+      static get is() {
+        return 'todo-items';
+      }
+
+      filterList(filterBy) {
+        return function (item) {
+          switch (filterBy) {
+            case 'active':
+              return !item.completed;
+            case 'completed':
+              return item.completed;
+            default:
+              return true;
+          }
+        };
+      }
+
+      onAllCompletedChange(event) {
+        this.emitAction({
+          type: todo.actions.SELECTION_CHANGED,
+          applyToAll: true,
+          value: event.target.checked
+        })
+      }
+    }
 
-<script src="todo-items.js"></script>
+    customElements.define(TodoItems.is, TodoItems);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/todomvc/elements/todo-items.js b/todomvc/elements/todo-items.js
deleted file mode 100644
index 05a20dc..0000000
--- a/todomvc/elements/todo-items.js
+++ /dev/null
@@ -1,19 +0,0 @@
-Polymer({
-
-  is: 'todo-items',
-
-  behaviors: [
-    UniFlow.ListView,
-  ],
-
-  filterList(filterBy) {
-    return function(item) {
-      switch (filterBy) {
-        case 'active': return !item.completed;
-        case 'completed': return item.completed;
-        default: return true;
-      }
-    };
-  }
-
-});
diff --git a/todomvc/elements/todo-styles.html b/todomvc/elements/todo-styles.html
index ad54b48..50ebca1 100644
--- a/todomvc/elements/todo-styles.html
+++ b/todomvc/elements/todo-styles.html
@@ -1,8 +1,365 @@
-
 <dom-module id="todo-styles">
-  <link rel="import" type="css" href="../bower_components/todomvc-app-css/index.css">
   <template>
-    <style is="custom-style">
+    <style>
+      button {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: none;
+        font-size: 100%;
+        vertical-align: baseline;
+        font-family: inherit;
+        font-weight: inherit;
+        color: inherit;
+        -webkit-appearance: none;
+        appearance: none;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      :focus {
+        outline: 0;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .todoapp {
+        background: #fff;
+        margin: 130px 0 40px 0;
+        position: relative;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+        0 25px 50px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      input::-webkit-input-placeholder {
+        font-style: italic;
+        font-weight: 300;
+        color: #e6e6e6;
+      }
+
+      input::-moz-placeholder {
+        font-style: italic;
+        font-weight: 300;
+        color: #e6e6e6;
+      }
+
+      input::input-placeholder {
+        font-style: italic;
+        font-weight: 300;
+        color: #e6e6e6;
+      }
+
+      h1 {
+        position: absolute;
+        top: -155px;
+        width: 100%;
+        font-size: 100px;
+        font-weight: 100;
+        text-align: center;
+        color: rgba(175, 47, 47, 0.15);
+        -webkit-text-rendering: optimizeLegibility;
+        -moz-text-rendering: optimizeLegibility;
+        text-rendering: optimizeLegibility;
+      }
+
+      .new-todo,
+      .edit {
+        position: relative;
+        margin: 0;
+        width: 100%;
+        font-size: 24px;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: 1.4em;
+        border: 0;
+        color: inherit;
+        padding: 6px;
+        border: 1px solid #999;
+        box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+        box-sizing: border-box;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      .new-todo {
+        padding: 16px 16px 16px 60px;
+        border: none;
+        background: rgba(0, 0, 0, 0.003);
+        box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+      }
+
+      .main {
+        position: relative;
+        z-index: 2;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .toggle-all {
+        text-align: center;
+        border: none;
+        /* Mobile Safari */
+        opacity: 0;
+        position: absolute;
+      }
+
+      .toggle-all+label {
+        width: 60px;
+        height: 34px;
+        font-size: 0;
+        position: absolute;
+        top: -52px;
+        left: -13px;
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+
+      .toggle-all+label:before {
+        content: '❯';
+        font-size: 22px;
+        color: #e6e6e6;
+        padding: 10px 27px 10px 27px;
+      }
+
+      .toggle-all:checked+label:before {
+        color: #737373;
+      }
+
+      .todo-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .todo-list li {
+        position: relative;
+        font-size: 24px;
+        border-bottom: 1px solid #ededed;
+      }
+
+      .todo-list li:last-child {
+        border-bottom: none;
+      }
+
+      .todo-list li.editing {
+        border-bottom: none;
+        padding: 0;
+      }
+
+      .todo-list li.editing .edit {
+        display: block;
+        width: 506px;
+        padding: 12px 16px;
+        margin: 0 0 0 43px;
+      }
+
+      .todo-list li.editing .view {
+        display: none;
+      }
+
+      .todo-list li .toggle {
+        text-align: center;
+        width: 40px;
+        /* auto, since non-WebKit browsers doesn't support input styling */
+        height: auto;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+        border: none;
+        /* Mobile Safari */
+        -webkit-appearance: none;
+        appearance: none;
+      }
+
+      .todo-list li .toggle {
+        opacity: 0;
+      }
+
+      .todo-list li .toggle+label {
+        /*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+        background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+        background-repeat: no-repeat;
+        background-position: center left;
+      }
+
+      .todo-list li .toggle:checked+label {
+        background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+      }
+
+      .todo-list li label {
+        word-break: break-all;
+        padding: 15px 15px 15px 60px;
+        display: block;
+        line-height: 1.2;
+        transition: color 0.4s;
+      }
+
+      .todo-list li.completed label {
+        color: #d9d9d9;
+        text-decoration: line-through;
+      }
+
+      .todo-list li .destroy {
+        display: none;
+        position: absolute;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+        width: 40px;
+        height: 40px;
+        margin: auto 0;
+        font-size: 30px;
+        color: #cc9a9a;
+        margin-bottom: 11px;
+        transition: color 0.2s ease-out;
+      }
+
+      .todo-list li .destroy:hover {
+        color: #af5b5e;
+      }
+
+      .todo-list li .destroy:after {
+        content: '×';
+      }
+
+      .todo-list li:hover .destroy {
+        display: block;
+      }
+
+      .todo-list li .edit {
+        display: none;
+      }
+
+      .todo-list li.editing:last-child {
+        margin-bottom: -1px;
+      }
+
+      .footer {
+        color: #777;
+        padding: 10px 15px;
+        height: 20px;
+        text-align: center;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .footer:before {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 50px;
+        overflow: hidden;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+        0 8px 0 -3px #f6f6f6,
+        0 9px 1px -3px rgba(0, 0, 0, 0.2),
+        0 16px 0 -6px #f6f6f6,
+        0 17px 2px -6px rgba(0, 0, 0, 0.2);
+      }
+
+      .todo-count {
+        float: left;
+        text-align: left;
+      }
+
+      .todo-count strong {
+        font-weight: 300;
+      }
+
+      .filters {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        position: absolute;
+        right: 0;
+        left: 0;
+      }
+
+      .filters li {
+        display: inline;
+      }
+
+      .filters li a {
+        color: inherit;
+        margin: 3px;
+        padding: 3px 7px;
+        text-decoration: none;
+        border: 1px solid transparent;
+        border-radius: 3px;
+      }
+
+      .filters li a:hover {
+        border-color: rgba(175, 47, 47, 0.1);
+      }
+
+      .filters li a.selected {
+        border-color: rgba(175, 47, 47, 0.2);
+      }
+
+      .clear-completed,
+      html .clear-completed:active {
+        float: right;
+        position: relative;
+        line-height: 20px;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .clear-completed:hover {
+        text-decoration: underline;
+      }
+
+      .info {
+        margin: 65px auto 0;
+        color: #bfbfbf;
+        font-size: 10px;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+        text-align: center;
+      }
+
+      .info p {
+        line-height: 1;
+      }
+
+      .info a {
+        color: inherit;
+        text-decoration: none;
+        font-weight: 400;
+      }
+
+      .info a:hover {
+        text-decoration: underline;
+      }
+      /*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+
+      @media screen and (-webkit-min-device-pixel-ratio:0) {
+        .toggle-all,
+        .todo-list li .toggle {
+          background: none;
+        }
+
+        .todo-list li .toggle {
+          height: 40px;
+        }
+      }
+
+      @media (max-width: 430px) {
+        .footer {
+          height: 50px;
+        }
+
+        .filters {
+          bottom: 10px;
+        }
+      }
     </style>
   </template>
 </dom-module>
\ No newline at end of file
diff --git a/todomvc/index.html b/todomvc/index.html
index dc71f41..b2dc6ed 100644
--- a/todomvc/index.html
+++ b/todomvc/index.html
@@ -4,23 +4,15 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>TodoMVC with UniFlow</title>
-    <link rel="stylesheet" href="/bower_components/todomvc-app-css/index.css">
+    <link rel="stylesheet" href="../../todomvc-app-css/index.css">
 
     <!-- See https://goo.gl/OOhYW5 -->
     <link rel="manifest" href="/manifest.json">
 
-    <script>
-      /* this script must run before Polymer is imported */
-      window.Polymer = {
-        dom: 'shadow',
-        lazyRegister: true
-      };
-    </script>
-
     <script src="scripts/actions.js"></script>
 
-    <script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="/elements/todo-app.html">
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <link rel="import" href="elements/todo-app.html">
 
   </head>
   <body>