diff --git a/dist/amd/autocomplete/autocomplete.js b/dist/amd/autocomplete/autocomplete.js
index 007547c5..4ed63fc0 100644
--- a/dist/amd/autocomplete/autocomplete.js
+++ b/dist/amd/autocomplete/autocomplete.js
@@ -8,7 +8,9 @@ define(["require", "exports", "tslib", "../aurelia"], function (require, exports
             this.values = {};
         }
         MdAutoComplete.prototype.valuesChanged = function () {
-            this.instance.updateData(this.values);
+            if (this.instance) {
+                this.instance.updateData(this.values);
+            }
         };
         MdAutoComplete.prototype.bind = function () {
             // suppress initial change handler calls
diff --git a/dist/amd/autocomplete/autocomplete.js.map b/dist/amd/autocomplete/autocomplete.js.map
index d518722d..894607c6 100644
--- a/dist/amd/autocomplete/autocomplete.js.map
+++ b/dist/amd/autocomplete/autocomplete.js.map
@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;IAIA;QACC,wBAAoB,OAAgB;YAAhB,YAAO,GAAP,OAAO,CAAS;YAEpC,UAAK,GAAY,IAAI,CAAC;YAStB,WAAM,GAAQ,EAAE,CAAC;QAXuB,CAAC;QAYzC,sCAAa,GAAb;YACC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC;QAID,6BAAI,GAAJ;YACC,wCAAwC;QACzC,CAAC;QAED,iCAAQ,GAAR;YAAA,iBAoBC;YAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;gBACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;aAC1B;iBACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;gBAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;aACzD;iBACI;gBACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;aAC3F;YACD,IAAI,OAAO,GAAmC;gBAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,cAAc,EAAE,UAAA,IAAI;oBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;gBACjE,CAAC;aACD,CAAC;YACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACzD,CAAC;QAED,iCAAQ,GAAR;YACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACzB,CAAC;QAzCD;YADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACX;QAGd;YADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;yDACP;QAGlB;YADC,EAAE,CAAC,QAAQ;;sDACK;QAZL,cAAc;YAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;YACrC,EAAE,CAAC,UAAU;qDAEgB,OAAO;WADxB,cAAc,CAgD1B;QAAD,qBAAC;KAAA,AAhDD,IAgDC;IAhDY,wCAAc"}
\ No newline at end of file
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;IAIA;QACC,wBAAoB,OAAgB;YAAhB,YAAO,GAAP,OAAO,CAAS;YAEpC,UAAK,GAAY,IAAI,CAAC;YAStB,WAAM,GAAQ,EAAE,CAAC;QAXuB,CAAC;QAYzC,sCAAa,GAAb;YACC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACtC;QACF,CAAC;QAID,6BAAI,GAAJ;YACC,wCAAwC;QACzC,CAAC;QAED,iCAAQ,GAAR;YAAA,iBAoBC;YAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;gBACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;aAC1B;iBACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;gBAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;aACzD;iBACI;gBACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;aAC3F;YACD,IAAI,OAAO,GAAmC;gBAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,cAAc,EAAE,UAAA,IAAI;oBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;gBACjE,CAAC;aACD,CAAC;YACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACzD,CAAC;QAED,iCAAQ,GAAR;YACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACzB,CAAC;QA3CD;YADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACX;QAGd;YADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;yDACP;QAGlB;YADC,EAAE,CAAC,QAAQ;;sDACK;QAZL,cAAc;YAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;YACrC,EAAE,CAAC,UAAU;qDAEgB,OAAO;WADxB,cAAc,CAkD1B;QAAD,qBAAC;KAAA,AAlDD,IAkDC;IAlDY,wCAAc"}
\ No newline at end of file
diff --git a/dist/amd/breadcrumbs/breadcrumbs.html b/dist/amd/breadcrumbs/breadcrumbs.html
index edb1e190..06092d2f 100644
--- a/dist/amd/breadcrumbs/breadcrumbs.html
+++ b/dist/amd/breadcrumbs/breadcrumbs.html
@@ -1,15 +1,15 @@
-<template>
-	<require from="./breadcrumbs.css"></require>
-	<require from="./instructionFilter"></require>
-	<nav>
-		<div class="nav-wrapper">
-			<div class="col s12">
-				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
-					<a click.delegate="navigate(instruction)" class="breadcrumb">
-						${instruction.config.title}
-					</a>
-				</template>
-			</div>
-		</div>
-	</nav>
-</template>
+<template>
+	<require from="./breadcrumbs.css"></require>
+	<require from="./instructionFilter"></require>
+	<nav>
+		<div class="nav-wrapper">
+			<div class="col s12">
+				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
+					<a click.delegate="navigate(instruction)" class="breadcrumb">
+						${instruction.config.title}
+					</a>
+				</template>
+			</div>
+		</div>
+	</nav>
+</template>
diff --git a/dist/amd/carousel/carousel-item.html b/dist/amd/carousel/carousel-item.html
index 0622c18b..186ab282 100644
--- a/dist/amd/carousel/carousel-item.html
+++ b/dist/amd/carousel/carousel-item.html
@@ -1,7 +1,7 @@
-<template class="carousel-item">
-	<a if.bind="href" href.bind="href">
-		<img if.bind="image" src.bind="image" />
-	</a>
-	<img if.bind="!href && image" src.bind="image" />
-	<slot></slot>
-</template>
+<template class="carousel-item">
+	<a if.bind="href" href.bind="href">
+		<img if.bind="image" src.bind="image" />
+	</a>
+	<img if.bind="!href && image" src.bind="image" />
+	<slot></slot>
+</template>
diff --git a/dist/amd/checkbox/checkbox.html b/dist/amd/checkbox/checkbox.html
index 7b9eaeaa..940e8619 100644
--- a/dist/amd/checkbox/checkbox.html
+++ b/dist/amd/checkbox/checkbox.html
@@ -1,6 +1,6 @@
-<template>
-	<label for="${controlId}">
-		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
-		<span><slot></slot></span>
-	</label>
-</template>
+<template>
+	<label for="${controlId}">
+		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
+		<span><slot></slot></span>
+	</label>
+</template>
diff --git a/dist/amd/chip/chip.html b/dist/amd/chip/chip.html
index 5ae13efe..aebe7257 100644
--- a/dist/amd/chip/chip.html
+++ b/dist/amd/chip/chip.html
@@ -1,5 +1,5 @@
-<template class="chip">
-	<require from="./chip.css"></require>
-	<slot></slot>
-	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
-</template>
+<template class="chip">
+	<require from="./chip.css"></require>
+	<slot></slot>
+	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
+</template>
diff --git a/dist/amd/click-counter/click-counter.html b/dist/amd/click-counter/click-counter.html
index 17a8bfb7..a768c4d4 100644
--- a/dist/amd/click-counter/click-counter.html
+++ b/dist/amd/click-counter/click-counter.html
@@ -1,7 +1,7 @@
-<template>
-  <h2>Click counter</h2>
-
-  <button md-waves class="btn" click.delegate="increment()">Button</button>
-
-  <h2>Button was clicked ${count} times</h2>
-</template>
+<template>
+  <h2>Click counter</h2>
+
+  <button md-waves class="btn" click.delegate="increment()">Button</button>
+
+  <h2>Button was clicked ${count} times</h2>
+</template>
diff --git a/dist/amd/collection/md-collection-selector.html b/dist/amd/collection/md-collection-selector.html
index bff44f08..7a6bca30 100644
--- a/dist/amd/collection/md-collection-selector.html
+++ b/dist/amd/collection/md-collection-selector.html
@@ -1,8 +1,8 @@
-<template>
-	<require from="./md-collection-selector.css"></require>
-	<div class="md-collection-selector__checkbox">
-		<slot></slot>
-		<div>
-			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
-		</div>
-</template>
+<template>
+	<require from="./md-collection-selector.css"></require>
+	<div class="md-collection-selector__checkbox">
+		<slot></slot>
+		<div>
+			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
+		</div>
+</template>
diff --git a/dist/amd/colors/md-colors-legacy.html b/dist/amd/colors/md-colors-legacy.html
index e3c3168e..ef52c84f 100644
--- a/dist/amd/colors/md-colors-legacy.html
+++ b/dist/amd/colors/md-colors-legacy.html
@@ -1,441 +1,441 @@
-<template>
-	<require from="./color-value-converters"></require>
-
-	<!--
-		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
-		and using Materialize terminology (darken/lighten instead of hue numbers)
-		the used palettes here consist of:
-		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
-		Accent	- lighten-1 (400), lighten-3 (200)
-
-		These should optionally be defined by the user. At the moment, they are
-		calculated and even not exact (but close).
-
-		Focused elements are an exception, these use "lighten-0.5" which is
-		not specified anywhere.
-	-->
-
-	<style>
-	.primary {
-		background-color: ${primaryColor};
-		color: white;
-	}
-
-	.primary-text {
-		/*background-color: white;*/
-		color: ${primaryColor};
-	}
-
-	.waves-effect.waves-primary .waves-ripple {
-		background-color: ${primaryColor};
-	}
-
-	.waves-effect.waves-accent .waves-ripple {
-		background-color: ${accentColor};
-	}
-
-	.accent {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.accent-text {
-		/*background-color: white;*/
-		color: ${accentColor};
-	}
-
-	.error {
-		background-color: ${errorColor};
-	}
-
-	.error-text {
-		color: ${errorColor}
-	}
-
-	.success {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.success-text {
-		color: ${accentColor};
-	}
-
-	/* buttons */
-	.btn.primary, .btn-flat.primary, .btn-large.primary {
-		transition: .2s ease-out;
-	}
-	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
-		background-color: ${primaryColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
-		background-color: ${primaryColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-	.btn-flat:not(.disabled):hover {
-		/*background-color: ${accentColor | lighten:3};*/
-		background-color: rgba(50, 50, 50, .15);
-		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-	.btn-flat:focus {
-		/*background-color: ${accentColor | lighten:2};*/
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-
-	.btn.accent, .btn-flat.accent, .btn-large.accent {
-		transition: .2s ease-out;
-	}
-	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
-		background-color: ${accentColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
-		background-color: ${accentColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-
-	.btn.error, .btn-flat.error, .btn-large.error {
-		transition: .2s ease-out;
-	}
-	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
-		background-color: ${errorColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
-		background-color: ${errorColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-		
-	/* checkbox */
-	[type="checkbox"]:checked + label:before {
-		border-right-color: ${accentColor};
-		border-bottom-color: ${accentColor};
-	}
-
-	[type="checkbox"].filled-in:checked + label:after {
-		border-color: ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	[type="checkbox"]:indeterminate + label:before {
-		border-right-color: ${accentColor};
-	}
-
-	/* collection */
-	md-collection .collection md-collection-item.collection-item.active {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	md-collection .collection md-collection-item.collection-item .secondary-content {
-		color: ${accentColor};
-	}
-
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
-		background-color: ${primaryColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
-		background-color: ${errorColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
-		color: ${primaryColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
-		color: ${errorColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}	 
-
-
-	/* datepicker */
-	.datepicker-date-display {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-table td.is-today {
-		color: ${accentColor};
-	}
-
-	.datepicker-table td.is-selected {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-day-button:focus {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
-	}
-
-	.datepicker-cancel,
-	.datepicker-today,
-	.datepicker-done {
-		color: ${accentColor};
-	}
-	
-	.datepicker-clear {
-		color: ${errorColor};
-	}
-
-	.datepicker-controls .select-wrapper input.select-dropdown:focus {
-			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
-	}
-
-	/* text input */
-	input:not([type]):focus:not([readonly]),
-	input[type=text]:not(.browser-default):focus:not([readonly]),
-	input[type=password]:not(.browser-default):focus:not([readonly]),
-	input[type=email]:not(.browser-default):focus:not([readonly]),
-	input[type=url]:not(.browser-default):focus:not([readonly]),
-	input[type=time]:not(.browser-default):focus:not([readonly]),
-	input[type=date]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
-	input[type=tel]:not(.browser-default):focus:not([readonly]),
-	input[type=number]:not(.browser-default):focus:not([readonly]),
-	input[type=search]:not(.browser-default):focus:not([readonly]),
-	textarea.materialize-textarea:focus:not([readonly]) {
-		border-bottom: 1px solid ${accentColor};
-		box-shadow: 0 1px 0 0 ${accentColor};
-	}
-
-	.input-field .prefix.active {
-		color: ${accentColor}
-	}
-
-	/* text input label */
-	input:not([type]):focus:not([readonly]) + label,
-	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
-	textarea.materialize-textarea:focus:not([readonly]) + label {
-		color: ${accentColor}
-	}
-
-	/* text input error label */
-	md-input input:not([type]).invalid + label:after,
-	md-input input:not([type]):focus.invalid + label:after,
-	md-input input[type=text].invalid + label:after,
-	md-input input[type=text]:focus.invalid + label:after,
-	md-input input[type=password].invalid + label:after,
-	md-input input[type=password]:focus.invalid + label:after,
-	md-input input[type=email].invalid + label:after,
-	md-input input[type=email]:focus.invalid + label:after,
-	md-input input[type=url].invalid + label:after,
-	md-input input[type=url]:focus.invalid + label:after,
-	md-input input[type=time].invalid + label:after,
-	md-input input[type=time]:focus.invalid + label:after,
-	md-input input[type=date].invalid + label:after,
-	md-input input[type=date]:focus.invalid + label:after,
-	md-input input[type=datetime].invalid + label:after,
-	md-input input[type=datetime]:focus.invalid + label:after,
-	md-input input[type=datetime-local].invalid + label:after,
-	md-input input[type=datetime-local]:focus.invalid + label:after,
-	md-input input[type=tel].invalid + label:after,
-	md-input input[type=tel]:focus.invalid + label:after,
-	md-input input[type=number].invalid + label:after,
-	md-input input[type=number]:focus.invalid + label:after,
-	md-input input[type=search].invalid + label:after,
-	md-input input[type=search]:focus.invalid + label:after,
-	md-input textarea.materialize-textarea.invalid + label:after,
-	md-input textarea.materialize-textarea:focus.invalid + label:after
-	{
-		color: ${errorColor}
-	}
-
-	/* text input success border */
-	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
-		border-bottom: 1px solid ${successColor};
-		box-shadow: 0 1px 0 0 ${successColor};
-	}
-
-	/* validation helper-text tweaks */
-	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
-	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
-	input.valid ~ .helper-text:not([data-success]),
-	input.invalid ~ .helper-text:not([data-error]) {
-		display: none;
-	}
-
-	.input-field .helper-text {
-		/* original helper-text is too low */
-		transform: translateY(-7px); 
-	}
-
-	/* pagination */
-	md-pagination .pagination li.active {
-		background-color: ${primaryColor}
-	}
-
-	/* progress */
-	md-progress .progress {
-		background-color: ${accentColor | lighten:2};
-	}
-
-	md-progress .progress .determinate, md-progress .progress .indeterminate {
-		background-color: ${accentColor};
-	}
-
-	/* radio input */
-	md-radio input[type="radio"]:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:before {
-		border: 2px solid ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	/* range */
-	md-range .range-field input[type="range"]::-webkit-slider-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-moz-range-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-ms-thumb {
-		background: ${accentColor};
-	}
-	md-range input[type="range"] + .thumb {
-		background-color: ${accentColor} !important;
-	}
-
-	/* select */
-	.dropdown-content li > a, .dropdown-content li > span {
-		color: ${accentColor};
-	}
-
-	.select-wrapper input.select-dropdown:focus {
-		border-bottom: 1px solid ${accentColor};
-	}
-
-	/* side-nav */
-	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
-		background-color: ${primaryColor};
-	}
-
-	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
-		background-color: ${primaryColor};
-	}
-
-	/* slider */
-	.slider .indicators .indicator-item.active {
-		background-color: ${accentColor};
-	}
-
-	/* switch */
-	md-switch.switch label input[type=checkbox]:checked + .lever {
-		background-color: ${accentColor | lighten:1};
-	}
-	md-switch.switch label input[type=checkbox]:checked + .lever:after {
-		background-color: ${accentColor};
-	}
-
-	/* tabs */
-
-	.tab.primary-text a {
-		color: ${primaryColor};
-	}
-	.tab.primary-text a.active {
-		color: ${primaryColor};
-	}
-	.tab.waves-effect {
-		position: static;
-	}
-	.tab.primary-text a:hover {
-		color: ${primaryColor | lighten:2};
-	}
-	.tabs .indicator {
-		background-color: ${primaryColor | lighten:2};
-	}
-	.tabs .tab a:focus, .tabs .tab a:focus.active {
-		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
-		outline: none;
-	}
-
-	/* timepicker */
-	.timepicker-digital-display {
-		background-color: ${accentColor};
-	}
-	
-	.timepicker-tick.active,
-	.timepicker-tick:hover {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
-	}
-
-	.timepicker-canvas line {
-			stroke: ${accentColor};
-	}
-		
-	.timepicker-canvas-bearing {
-		fill: ${accentColor};
-	}
-
-	.timepicker-canvas-bg {
-		fill: ${accentColor};
-	}
-	
-	.timepicker-clear {
-		color: ${errorColor};
-	}
-	
-	.timepicker-close {
-		color: ${accentColor};
-	}
-		
-	/* well */
-	md-well li.active {
-		border-right: 2px solid ${primaryColor};
-		background-color: ${primaryColor | lighten:3};
-	}
-
-	/* footer */
-	footer.page-footer {
-		background-color: ${primaryColor};
-	}
-
-	/* lookup */
-	md-lookup .dropdown-div li {
-		color: ${accentColor};
-	}
-
-	md-lookup .dropdown-div li a {
-		color: ${accentColor};
-	}
-
-	/* tap target */
-	.tap-target {
-		background-color: ${primaryColor};
-	}
-
-	</style>
-</template>
+<template>
+	<require from="./color-value-converters"></require>
+
+	<!--
+		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
+		and using Materialize terminology (darken/lighten instead of hue numbers)
+		the used palettes here consist of:
+		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
+		Accent	- lighten-1 (400), lighten-3 (200)
+
+		These should optionally be defined by the user. At the moment, they are
+		calculated and even not exact (but close).
+
+		Focused elements are an exception, these use "lighten-0.5" which is
+		not specified anywhere.
+	-->
+
+	<style>
+	.primary {
+		background-color: ${primaryColor};
+		color: white;
+	}
+
+	.primary-text {
+		/*background-color: white;*/
+		color: ${primaryColor};
+	}
+
+	.waves-effect.waves-primary .waves-ripple {
+		background-color: ${primaryColor};
+	}
+
+	.waves-effect.waves-accent .waves-ripple {
+		background-color: ${accentColor};
+	}
+
+	.accent {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.accent-text {
+		/*background-color: white;*/
+		color: ${accentColor};
+	}
+
+	.error {
+		background-color: ${errorColor};
+	}
+
+	.error-text {
+		color: ${errorColor}
+	}
+
+	.success {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.success-text {
+		color: ${accentColor};
+	}
+
+	/* buttons */
+	.btn.primary, .btn-flat.primary, .btn-large.primary {
+		transition: .2s ease-out;
+	}
+	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
+		background-color: ${primaryColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
+		background-color: ${primaryColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+	.btn-flat:not(.disabled):hover {
+		/*background-color: ${accentColor | lighten:3};*/
+		background-color: rgba(50, 50, 50, .15);
+		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+	.btn-flat:focus {
+		/*background-color: ${accentColor | lighten:2};*/
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+
+	.btn.accent, .btn-flat.accent, .btn-large.accent {
+		transition: .2s ease-out;
+	}
+	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
+		background-color: ${accentColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
+		background-color: ${accentColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+
+	.btn.error, .btn-flat.error, .btn-large.error {
+		transition: .2s ease-out;
+	}
+	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
+		background-color: ${errorColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
+		background-color: ${errorColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+		
+	/* checkbox */
+	[type="checkbox"]:checked + label:before {
+		border-right-color: ${accentColor};
+		border-bottom-color: ${accentColor};
+	}
+
+	[type="checkbox"].filled-in:checked + label:after {
+		border-color: ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	[type="checkbox"]:indeterminate + label:before {
+		border-right-color: ${accentColor};
+	}
+
+	/* collection */
+	md-collection .collection md-collection-item.collection-item.active {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	md-collection .collection md-collection-item.collection-item .secondary-content {
+		color: ${accentColor};
+	}
+
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
+		background-color: ${primaryColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
+		background-color: ${errorColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
+		color: ${primaryColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
+		color: ${errorColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}	 
+
+
+	/* datepicker */
+	.datepicker-date-display {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-table td.is-today {
+		color: ${accentColor};
+	}
+
+	.datepicker-table td.is-selected {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-day-button:focus {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
+	}
+
+	.datepicker-cancel,
+	.datepicker-today,
+	.datepicker-done {
+		color: ${accentColor};
+	}
+	
+	.datepicker-clear {
+		color: ${errorColor};
+	}
+
+	.datepicker-controls .select-wrapper input.select-dropdown:focus {
+			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
+	}
+
+	/* text input */
+	input:not([type]):focus:not([readonly]),
+	input[type=text]:not(.browser-default):focus:not([readonly]),
+	input[type=password]:not(.browser-default):focus:not([readonly]),
+	input[type=email]:not(.browser-default):focus:not([readonly]),
+	input[type=url]:not(.browser-default):focus:not([readonly]),
+	input[type=time]:not(.browser-default):focus:not([readonly]),
+	input[type=date]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+	input[type=tel]:not(.browser-default):focus:not([readonly]),
+	input[type=number]:not(.browser-default):focus:not([readonly]),
+	input[type=search]:not(.browser-default):focus:not([readonly]),
+	textarea.materialize-textarea:focus:not([readonly]) {
+		border-bottom: 1px solid ${accentColor};
+		box-shadow: 0 1px 0 0 ${accentColor};
+	}
+
+	.input-field .prefix.active {
+		color: ${accentColor}
+	}
+
+	/* text input label */
+	input:not([type]):focus:not([readonly]) + label,
+	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
+	textarea.materialize-textarea:focus:not([readonly]) + label {
+		color: ${accentColor}
+	}
+
+	/* text input error label */
+	md-input input:not([type]).invalid + label:after,
+	md-input input:not([type]):focus.invalid + label:after,
+	md-input input[type=text].invalid + label:after,
+	md-input input[type=text]:focus.invalid + label:after,
+	md-input input[type=password].invalid + label:after,
+	md-input input[type=password]:focus.invalid + label:after,
+	md-input input[type=email].invalid + label:after,
+	md-input input[type=email]:focus.invalid + label:after,
+	md-input input[type=url].invalid + label:after,
+	md-input input[type=url]:focus.invalid + label:after,
+	md-input input[type=time].invalid + label:after,
+	md-input input[type=time]:focus.invalid + label:after,
+	md-input input[type=date].invalid + label:after,
+	md-input input[type=date]:focus.invalid + label:after,
+	md-input input[type=datetime].invalid + label:after,
+	md-input input[type=datetime]:focus.invalid + label:after,
+	md-input input[type=datetime-local].invalid + label:after,
+	md-input input[type=datetime-local]:focus.invalid + label:after,
+	md-input input[type=tel].invalid + label:after,
+	md-input input[type=tel]:focus.invalid + label:after,
+	md-input input[type=number].invalid + label:after,
+	md-input input[type=number]:focus.invalid + label:after,
+	md-input input[type=search].invalid + label:after,
+	md-input input[type=search]:focus.invalid + label:after,
+	md-input textarea.materialize-textarea.invalid + label:after,
+	md-input textarea.materialize-textarea:focus.invalid + label:after
+	{
+		color: ${errorColor}
+	}
+
+	/* text input success border */
+	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+		border-bottom: 1px solid ${successColor};
+		box-shadow: 0 1px 0 0 ${successColor};
+	}
+
+	/* validation helper-text tweaks */
+	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
+	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
+	input.valid ~ .helper-text:not([data-success]),
+	input.invalid ~ .helper-text:not([data-error]) {
+		display: none;
+	}
+
+	.input-field .helper-text {
+		/* original helper-text is too low */
+		transform: translateY(-7px); 
+	}
+
+	/* pagination */
+	md-pagination .pagination li.active {
+		background-color: ${primaryColor}
+	}
+
+	/* progress */
+	md-progress .progress {
+		background-color: ${accentColor | lighten:2};
+	}
+
+	md-progress .progress .determinate, md-progress .progress .indeterminate {
+		background-color: ${accentColor};
+	}
+
+	/* radio input */
+	md-radio input[type="radio"]:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:before {
+		border: 2px solid ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	/* range */
+	md-range .range-field input[type="range"]::-webkit-slider-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-moz-range-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-ms-thumb {
+		background: ${accentColor};
+	}
+	md-range input[type="range"] + .thumb {
+		background-color: ${accentColor} !important;
+	}
+
+	/* select */
+	.dropdown-content li > a, .dropdown-content li > span {
+		color: ${accentColor};
+	}
+
+	.select-wrapper input.select-dropdown:focus {
+		border-bottom: 1px solid ${accentColor};
+	}
+
+	/* side-nav */
+	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+		background-color: ${primaryColor};
+	}
+
+	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+		background-color: ${primaryColor};
+	}
+
+	/* slider */
+	.slider .indicators .indicator-item.active {
+		background-color: ${accentColor};
+	}
+
+	/* switch */
+	md-switch.switch label input[type=checkbox]:checked + .lever {
+		background-color: ${accentColor | lighten:1};
+	}
+	md-switch.switch label input[type=checkbox]:checked + .lever:after {
+		background-color: ${accentColor};
+	}
+
+	/* tabs */
+
+	.tab.primary-text a {
+		color: ${primaryColor};
+	}
+	.tab.primary-text a.active {
+		color: ${primaryColor};
+	}
+	.tab.waves-effect {
+		position: static;
+	}
+	.tab.primary-text a:hover {
+		color: ${primaryColor | lighten:2};
+	}
+	.tabs .indicator {
+		background-color: ${primaryColor | lighten:2};
+	}
+	.tabs .tab a:focus, .tabs .tab a:focus.active {
+		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
+		outline: none;
+	}
+
+	/* timepicker */
+	.timepicker-digital-display {
+		background-color: ${accentColor};
+	}
+	
+	.timepicker-tick.active,
+	.timepicker-tick:hover {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
+	}
+
+	.timepicker-canvas line {
+			stroke: ${accentColor};
+	}
+		
+	.timepicker-canvas-bearing {
+		fill: ${accentColor};
+	}
+
+	.timepicker-canvas-bg {
+		fill: ${accentColor};
+	}
+	
+	.timepicker-clear {
+		color: ${errorColor};
+	}
+	
+	.timepicker-close {
+		color: ${accentColor};
+	}
+		
+	/* well */
+	md-well li.active {
+		border-right: 2px solid ${primaryColor};
+		background-color: ${primaryColor | lighten:3};
+	}
+
+	/* footer */
+	footer.page-footer {
+		background-color: ${primaryColor};
+	}
+
+	/* lookup */
+	md-lookup .dropdown-div li {
+		color: ${accentColor};
+	}
+
+	md-lookup .dropdown-div li a {
+		color: ${accentColor};
+	}
+
+	/* tap target */
+	.tap-target {
+		background-color: ${primaryColor};
+	}
+
+	</style>
+</template>
diff --git a/dist/amd/dropdown/dropdown-element.html b/dist/amd/dropdown/dropdown-element.html
index a46fbf03..f2155d45 100644
--- a/dist/amd/dropdown/dropdown-element.html
+++ b/dist/amd/dropdown/dropdown-element.html
@@ -1,6 +1,6 @@
-<template md-button class="dropdown-trigger" data-activates="${controlId}">
-	${title}
-	<div id="${controlId}" class='dropdown-content'>
-		<slot></slot>
-	</div>
-</template>
+<template md-button class="dropdown-trigger" data-activates="${controlId}">
+	${title}
+	<div id="${controlId}" class='dropdown-content'>
+		<slot></slot>
+	</div>
+</template>
diff --git a/dist/amd/fab/fab.html b/dist/amd/fab/fab.html
index eb692899..bfdd5ae9 100644
--- a/dist/amd/fab/fab.html
+++ b/dist/amd/fab/fab.html
@@ -1,3 +1,3 @@
-<template>
-	<slot></slot>
-</template>
+<template>
+	<slot></slot>
+</template>
diff --git a/dist/amd/file/file.html b/dist/amd/file/file.html
index 5f28d0c1..deb9f946 100644
--- a/dist/amd/file/file.html
+++ b/dist/amd/file/file.html
@@ -1,11 +1,11 @@
-<template>
-	<div class="file-field input-field">
-		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
-			<span>${caption}</span>
-			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
-		</div>
-		<div class="file-path-wrapper">
-			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
-		</div>
-	</div>
-</template>
+<template>
+	<div class="file-field input-field">
+		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
+			<span>${caption}</span>
+			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
+		</div>
+		<div class="file-path-wrapper">
+			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
+		</div>
+	</div>
+</template>
diff --git a/dist/amd/input/input.css b/dist/amd/input/input.css
index b0e62ac2..9655defa 100644
--- a/dist/amd/input/input.css
+++ b/dist/amd/input/input.css
@@ -1,3 +1,3 @@
-md-input .input-field label.active {
-  width: 100%;
-}
+md-input .input-field label.active {
+  width: 100%;
+}
diff --git a/dist/amd/navbar/navbar.css b/dist/amd/navbar/navbar.css
index 0bbd3a2a..57faf733 100644
--- a/dist/amd/navbar/navbar.css
+++ b/dist/amd/navbar/navbar.css
@@ -1,7 +1,7 @@
-md-navbar .primary {
-  transition: all .3s ease-out;
-}
-
-md-navbar .primary.auto-height {
-  height: auto;
-}
+md-navbar .primary {
+  transition: all .3s ease-out;
+}
+
+md-navbar .primary.auto-height {
+  height: auto;
+}
diff --git a/dist/amd/pagination/pagination.html b/dist/amd/pagination/pagination.html
index c79e0e67..57ffef31 100644
--- a/dist/amd/pagination/pagination.html
+++ b/dist/amd/pagination/pagination.html
@@ -1,25 +1,25 @@
-<template>
-	<ul class="pagination">
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
-		</template>
-		<template if.bind="showPageLinks">
-			<template repeat.for="p of pageLinks">
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
-				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
-          <a>${p+1}</a>
-        </li>
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
-			</template>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
-		</template>
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
-		</template>
-	</ul>
-</template>
+<template>
+	<ul class="pagination">
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
+		</template>
+		<template if.bind="showPageLinks">
+			<template repeat.for="p of pageLinks">
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
+				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
+          <a>${p+1}</a>
+        </li>
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
+			</template>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
+		</template>
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
+		</template>
+	</ul>
+</template>
diff --git a/dist/amd/progress/progress.html b/dist/amd/progress/progress.html
index 91a98f21..146a3572 100644
--- a/dist/amd/progress/progress.html
+++ b/dist/amd/progress/progress.html
@@ -1,73 +1,73 @@
-<template>
-	<template if.bind="type === 'linear'">
-		<div class="progress">
-			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color !== 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-${color}-only">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color === 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-blue">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-red">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-yellow">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-green">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-</template>
+<template>
+	<template if.bind="type === 'linear'">
+		<div class="progress">
+			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color !== 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-${color}-only">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color === 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-blue">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-red">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-yellow">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-green">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+</template>
diff --git a/dist/amd/range/range.html b/dist/amd/range/range.html
index 3978a0ff..b1f2c035 100644
--- a/dist/amd/range/range.html
+++ b/dist/amd/range/range.html
@@ -1,6 +1,6 @@
-<template>
-	<require from="./range.css"></require>
-	<p class="range-field">
-		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
-	</p>
-</template>
+<template>
+	<require from="./range.css"></require>
+	<p class="range-field">
+		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
+	</p>
+</template>
diff --git a/dist/amd/sidenav/sidenav.html b/dist/amd/sidenav/sidenav.html
index e9d05810..8e877943 100644
--- a/dist/amd/sidenav/sidenav.html
+++ b/dist/amd/sidenav/sidenav.html
@@ -1,6 +1,6 @@
-<template>
-  <require from="./sidenav.css"></require>
-  <div id="${controlId}" class="sidenav" ref="sidenav">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <require from="./sidenav.css"></require>
+  <div id="${controlId}" class="sidenav" ref="sidenav">
+    <slot></slot>
+  </div>
+</template>
diff --git a/dist/amd/switch/switch.html b/dist/amd/switch/switch.html
index b46b6bb9..8c856a65 100644
--- a/dist/amd/switch/switch.html
+++ b/dist/amd/switch/switch.html
@@ -1,9 +1,9 @@
-<template class="switch">
-  <require from="./switch.css"></require>
-  <label>
-    ${labelOff}
-    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
-    <span class="lever"></span>
-    ${labelOn}
-  </label>
-</template>
+<template class="switch">
+  <require from="./switch.css"></require>
+  <label>
+    ${labelOff}
+    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
+    <span class="lever"></span>
+    ${labelOn}
+  </label>
+</template>
diff --git a/dist/amd/well/md-well.html b/dist/amd/well/md-well.html
index 079d8f16..859f51c4 100644
--- a/dist/amd/well/md-well.html
+++ b/dist/amd/well/md-well.html
@@ -1,20 +1,20 @@
-<template>
-	<style>
-		md-well li[md-waves] {
-			display: block;
-		}
-
-		md-well li a {
-			padding: 5px;
-			display: inline-block;
-			width: 100%;
-		}
-
-	</style>
-
-	<ul class="z-depth-1">
-		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-			<a href.bind="row.href">${row.title}</a>
-		</li>
-	</ul>
-</template>
+<template>
+	<style>
+		md-well li[md-waves] {
+			display: block;
+		}
+
+		md-well li a {
+			padding: 5px;
+			display: inline-block;
+			width: 100%;
+		}
+
+	</style>
+
+	<ul class="z-depth-1">
+		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
+			<a href.bind="row.href">${row.title}</a>
+		</li>
+	</ul>
+</template>
diff --git a/dist/commonjs/autocomplete/autocomplete.js b/dist/commonjs/autocomplete/autocomplete.js
index 8bf6b1c8..66a57f94 100644
--- a/dist/commonjs/autocomplete/autocomplete.js
+++ b/dist/commonjs/autocomplete/autocomplete.js
@@ -9,7 +9,9 @@ var MdAutoComplete = /** @class */ (function () {
         this.values = {};
     }
     MdAutoComplete.prototype.valuesChanged = function () {
-        this.instance.updateData(this.values);
+        if (this.instance) {
+            this.instance.updateData(this.values);
+        }
     };
     MdAutoComplete.prototype.bind = function () {
         // suppress initial change handler calls
diff --git a/dist/commonjs/autocomplete/autocomplete.js.map b/dist/commonjs/autocomplete/autocomplete.js.map
index 26313f98..bafea889 100644
--- a/dist/commonjs/autocomplete/autocomplete.js.map
+++ b/dist/commonjs/autocomplete/autocomplete.js.map
@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;AAAA,+BAAiC;AAIjC;IACC,wBAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,sCAAa,GAAb;QACC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAID,6BAAI,GAAJ;QACC,wCAAwC;IACzC,CAAC;IAED,iCAAQ,GAAR;QAAA,iBAoBC;QAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,UAAA,IAAI;gBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,iCAAQ,GAAR;QACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IAzCD;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACX;IAGd;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACP;IAGlB;QADC,EAAE,CAAC,QAAQ;;kDACK;IAZL,cAAc;QAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;QACrC,EAAE,CAAC,UAAU;iDAEgB,OAAO;OADxB,cAAc,CAgD1B;IAAD,qBAAC;CAAA,AAhDD,IAgDC;AAhDY,wCAAc"}
\ No newline at end of file
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;AAAA,+BAAiC;AAIjC;IACC,wBAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,sCAAa,GAAb;QACC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtC;IACF,CAAC;IAID,6BAAI,GAAJ;QACC,wCAAwC;IACzC,CAAC;IAED,iCAAQ,GAAR;QAAA,iBAoBC;QAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,UAAA,IAAI;gBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,iCAAQ,GAAR;QACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IA3CD;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACX;IAGd;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACP;IAGlB;QADC,EAAE,CAAC,QAAQ;;kDACK;IAZL,cAAc;QAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;QACrC,EAAE,CAAC,UAAU;iDAEgB,OAAO;OADxB,cAAc,CAkD1B;IAAD,qBAAC;CAAA,AAlDD,IAkDC;AAlDY,wCAAc"}
\ No newline at end of file
diff --git a/dist/commonjs/breadcrumbs/breadcrumbs.html b/dist/commonjs/breadcrumbs/breadcrumbs.html
index edb1e190..06092d2f 100644
--- a/dist/commonjs/breadcrumbs/breadcrumbs.html
+++ b/dist/commonjs/breadcrumbs/breadcrumbs.html
@@ -1,15 +1,15 @@
-<template>
-	<require from="./breadcrumbs.css"></require>
-	<require from="./instructionFilter"></require>
-	<nav>
-		<div class="nav-wrapper">
-			<div class="col s12">
-				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
-					<a click.delegate="navigate(instruction)" class="breadcrumb">
-						${instruction.config.title}
-					</a>
-				</template>
-			</div>
-		</div>
-	</nav>
-</template>
+<template>
+	<require from="./breadcrumbs.css"></require>
+	<require from="./instructionFilter"></require>
+	<nav>
+		<div class="nav-wrapper">
+			<div class="col s12">
+				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
+					<a click.delegate="navigate(instruction)" class="breadcrumb">
+						${instruction.config.title}
+					</a>
+				</template>
+			</div>
+		</div>
+	</nav>
+</template>
diff --git a/dist/commonjs/carousel/carousel-item.html b/dist/commonjs/carousel/carousel-item.html
index 0622c18b..186ab282 100644
--- a/dist/commonjs/carousel/carousel-item.html
+++ b/dist/commonjs/carousel/carousel-item.html
@@ -1,7 +1,7 @@
-<template class="carousel-item">
-	<a if.bind="href" href.bind="href">
-		<img if.bind="image" src.bind="image" />
-	</a>
-	<img if.bind="!href && image" src.bind="image" />
-	<slot></slot>
-</template>
+<template class="carousel-item">
+	<a if.bind="href" href.bind="href">
+		<img if.bind="image" src.bind="image" />
+	</a>
+	<img if.bind="!href && image" src.bind="image" />
+	<slot></slot>
+</template>
diff --git a/dist/commonjs/checkbox/checkbox.html b/dist/commonjs/checkbox/checkbox.html
index 7b9eaeaa..940e8619 100644
--- a/dist/commonjs/checkbox/checkbox.html
+++ b/dist/commonjs/checkbox/checkbox.html
@@ -1,6 +1,6 @@
-<template>
-	<label for="${controlId}">
-		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
-		<span><slot></slot></span>
-	</label>
-</template>
+<template>
+	<label for="${controlId}">
+		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
+		<span><slot></slot></span>
+	</label>
+</template>
diff --git a/dist/commonjs/chip/chip.html b/dist/commonjs/chip/chip.html
index 5ae13efe..aebe7257 100644
--- a/dist/commonjs/chip/chip.html
+++ b/dist/commonjs/chip/chip.html
@@ -1,5 +1,5 @@
-<template class="chip">
-	<require from="./chip.css"></require>
-	<slot></slot>
-	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
-</template>
+<template class="chip">
+	<require from="./chip.css"></require>
+	<slot></slot>
+	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
+</template>
diff --git a/dist/commonjs/click-counter/click-counter.html b/dist/commonjs/click-counter/click-counter.html
index 17a8bfb7..a768c4d4 100644
--- a/dist/commonjs/click-counter/click-counter.html
+++ b/dist/commonjs/click-counter/click-counter.html
@@ -1,7 +1,7 @@
-<template>
-  <h2>Click counter</h2>
-
-  <button md-waves class="btn" click.delegate="increment()">Button</button>
-
-  <h2>Button was clicked ${count} times</h2>
-</template>
+<template>
+  <h2>Click counter</h2>
+
+  <button md-waves class="btn" click.delegate="increment()">Button</button>
+
+  <h2>Button was clicked ${count} times</h2>
+</template>
diff --git a/dist/commonjs/collection/md-collection-selector.html b/dist/commonjs/collection/md-collection-selector.html
index bff44f08..7a6bca30 100644
--- a/dist/commonjs/collection/md-collection-selector.html
+++ b/dist/commonjs/collection/md-collection-selector.html
@@ -1,8 +1,8 @@
-<template>
-	<require from="./md-collection-selector.css"></require>
-	<div class="md-collection-selector__checkbox">
-		<slot></slot>
-		<div>
-			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
-		</div>
-</template>
+<template>
+	<require from="./md-collection-selector.css"></require>
+	<div class="md-collection-selector__checkbox">
+		<slot></slot>
+		<div>
+			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
+		</div>
+</template>
diff --git a/dist/commonjs/colors/md-colors-legacy.html b/dist/commonjs/colors/md-colors-legacy.html
index e3c3168e..ef52c84f 100644
--- a/dist/commonjs/colors/md-colors-legacy.html
+++ b/dist/commonjs/colors/md-colors-legacy.html
@@ -1,441 +1,441 @@
-<template>
-	<require from="./color-value-converters"></require>
-
-	<!--
-		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
-		and using Materialize terminology (darken/lighten instead of hue numbers)
-		the used palettes here consist of:
-		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
-		Accent	- lighten-1 (400), lighten-3 (200)
-
-		These should optionally be defined by the user. At the moment, they are
-		calculated and even not exact (but close).
-
-		Focused elements are an exception, these use "lighten-0.5" which is
-		not specified anywhere.
-	-->
-
-	<style>
-	.primary {
-		background-color: ${primaryColor};
-		color: white;
-	}
-
-	.primary-text {
-		/*background-color: white;*/
-		color: ${primaryColor};
-	}
-
-	.waves-effect.waves-primary .waves-ripple {
-		background-color: ${primaryColor};
-	}
-
-	.waves-effect.waves-accent .waves-ripple {
-		background-color: ${accentColor};
-	}
-
-	.accent {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.accent-text {
-		/*background-color: white;*/
-		color: ${accentColor};
-	}
-
-	.error {
-		background-color: ${errorColor};
-	}
-
-	.error-text {
-		color: ${errorColor}
-	}
-
-	.success {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.success-text {
-		color: ${accentColor};
-	}
-
-	/* buttons */
-	.btn.primary, .btn-flat.primary, .btn-large.primary {
-		transition: .2s ease-out;
-	}
-	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
-		background-color: ${primaryColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
-		background-color: ${primaryColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-	.btn-flat:not(.disabled):hover {
-		/*background-color: ${accentColor | lighten:3};*/
-		background-color: rgba(50, 50, 50, .15);
-		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-	.btn-flat:focus {
-		/*background-color: ${accentColor | lighten:2};*/
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-
-	.btn.accent, .btn-flat.accent, .btn-large.accent {
-		transition: .2s ease-out;
-	}
-	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
-		background-color: ${accentColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
-		background-color: ${accentColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-
-	.btn.error, .btn-flat.error, .btn-large.error {
-		transition: .2s ease-out;
-	}
-	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
-		background-color: ${errorColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
-		background-color: ${errorColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-		
-	/* checkbox */
-	[type="checkbox"]:checked + label:before {
-		border-right-color: ${accentColor};
-		border-bottom-color: ${accentColor};
-	}
-
-	[type="checkbox"].filled-in:checked + label:after {
-		border-color: ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	[type="checkbox"]:indeterminate + label:before {
-		border-right-color: ${accentColor};
-	}
-
-	/* collection */
-	md-collection .collection md-collection-item.collection-item.active {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	md-collection .collection md-collection-item.collection-item .secondary-content {
-		color: ${accentColor};
-	}
-
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
-		background-color: ${primaryColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
-		background-color: ${errorColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
-		color: ${primaryColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
-		color: ${errorColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}	 
-
-
-	/* datepicker */
-	.datepicker-date-display {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-table td.is-today {
-		color: ${accentColor};
-	}
-
-	.datepicker-table td.is-selected {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-day-button:focus {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
-	}
-
-	.datepicker-cancel,
-	.datepicker-today,
-	.datepicker-done {
-		color: ${accentColor};
-	}
-	
-	.datepicker-clear {
-		color: ${errorColor};
-	}
-
-	.datepicker-controls .select-wrapper input.select-dropdown:focus {
-			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
-	}
-
-	/* text input */
-	input:not([type]):focus:not([readonly]),
-	input[type=text]:not(.browser-default):focus:not([readonly]),
-	input[type=password]:not(.browser-default):focus:not([readonly]),
-	input[type=email]:not(.browser-default):focus:not([readonly]),
-	input[type=url]:not(.browser-default):focus:not([readonly]),
-	input[type=time]:not(.browser-default):focus:not([readonly]),
-	input[type=date]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
-	input[type=tel]:not(.browser-default):focus:not([readonly]),
-	input[type=number]:not(.browser-default):focus:not([readonly]),
-	input[type=search]:not(.browser-default):focus:not([readonly]),
-	textarea.materialize-textarea:focus:not([readonly]) {
-		border-bottom: 1px solid ${accentColor};
-		box-shadow: 0 1px 0 0 ${accentColor};
-	}
-
-	.input-field .prefix.active {
-		color: ${accentColor}
-	}
-
-	/* text input label */
-	input:not([type]):focus:not([readonly]) + label,
-	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
-	textarea.materialize-textarea:focus:not([readonly]) + label {
-		color: ${accentColor}
-	}
-
-	/* text input error label */
-	md-input input:not([type]).invalid + label:after,
-	md-input input:not([type]):focus.invalid + label:after,
-	md-input input[type=text].invalid + label:after,
-	md-input input[type=text]:focus.invalid + label:after,
-	md-input input[type=password].invalid + label:after,
-	md-input input[type=password]:focus.invalid + label:after,
-	md-input input[type=email].invalid + label:after,
-	md-input input[type=email]:focus.invalid + label:after,
-	md-input input[type=url].invalid + label:after,
-	md-input input[type=url]:focus.invalid + label:after,
-	md-input input[type=time].invalid + label:after,
-	md-input input[type=time]:focus.invalid + label:after,
-	md-input input[type=date].invalid + label:after,
-	md-input input[type=date]:focus.invalid + label:after,
-	md-input input[type=datetime].invalid + label:after,
-	md-input input[type=datetime]:focus.invalid + label:after,
-	md-input input[type=datetime-local].invalid + label:after,
-	md-input input[type=datetime-local]:focus.invalid + label:after,
-	md-input input[type=tel].invalid + label:after,
-	md-input input[type=tel]:focus.invalid + label:after,
-	md-input input[type=number].invalid + label:after,
-	md-input input[type=number]:focus.invalid + label:after,
-	md-input input[type=search].invalid + label:after,
-	md-input input[type=search]:focus.invalid + label:after,
-	md-input textarea.materialize-textarea.invalid + label:after,
-	md-input textarea.materialize-textarea:focus.invalid + label:after
-	{
-		color: ${errorColor}
-	}
-
-	/* text input success border */
-	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
-		border-bottom: 1px solid ${successColor};
-		box-shadow: 0 1px 0 0 ${successColor};
-	}
-
-	/* validation helper-text tweaks */
-	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
-	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
-	input.valid ~ .helper-text:not([data-success]),
-	input.invalid ~ .helper-text:not([data-error]) {
-		display: none;
-	}
-
-	.input-field .helper-text {
-		/* original helper-text is too low */
-		transform: translateY(-7px); 
-	}
-
-	/* pagination */
-	md-pagination .pagination li.active {
-		background-color: ${primaryColor}
-	}
-
-	/* progress */
-	md-progress .progress {
-		background-color: ${accentColor | lighten:2};
-	}
-
-	md-progress .progress .determinate, md-progress .progress .indeterminate {
-		background-color: ${accentColor};
-	}
-
-	/* radio input */
-	md-radio input[type="radio"]:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:before {
-		border: 2px solid ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	/* range */
-	md-range .range-field input[type="range"]::-webkit-slider-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-moz-range-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-ms-thumb {
-		background: ${accentColor};
-	}
-	md-range input[type="range"] + .thumb {
-		background-color: ${accentColor} !important;
-	}
-
-	/* select */
-	.dropdown-content li > a, .dropdown-content li > span {
-		color: ${accentColor};
-	}
-
-	.select-wrapper input.select-dropdown:focus {
-		border-bottom: 1px solid ${accentColor};
-	}
-
-	/* side-nav */
-	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
-		background-color: ${primaryColor};
-	}
-
-	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
-		background-color: ${primaryColor};
-	}
-
-	/* slider */
-	.slider .indicators .indicator-item.active {
-		background-color: ${accentColor};
-	}
-
-	/* switch */
-	md-switch.switch label input[type=checkbox]:checked + .lever {
-		background-color: ${accentColor | lighten:1};
-	}
-	md-switch.switch label input[type=checkbox]:checked + .lever:after {
-		background-color: ${accentColor};
-	}
-
-	/* tabs */
-
-	.tab.primary-text a {
-		color: ${primaryColor};
-	}
-	.tab.primary-text a.active {
-		color: ${primaryColor};
-	}
-	.tab.waves-effect {
-		position: static;
-	}
-	.tab.primary-text a:hover {
-		color: ${primaryColor | lighten:2};
-	}
-	.tabs .indicator {
-		background-color: ${primaryColor | lighten:2};
-	}
-	.tabs .tab a:focus, .tabs .tab a:focus.active {
-		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
-		outline: none;
-	}
-
-	/* timepicker */
-	.timepicker-digital-display {
-		background-color: ${accentColor};
-	}
-	
-	.timepicker-tick.active,
-	.timepicker-tick:hover {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
-	}
-
-	.timepicker-canvas line {
-			stroke: ${accentColor};
-	}
-		
-	.timepicker-canvas-bearing {
-		fill: ${accentColor};
-	}
-
-	.timepicker-canvas-bg {
-		fill: ${accentColor};
-	}
-	
-	.timepicker-clear {
-		color: ${errorColor};
-	}
-	
-	.timepicker-close {
-		color: ${accentColor};
-	}
-		
-	/* well */
-	md-well li.active {
-		border-right: 2px solid ${primaryColor};
-		background-color: ${primaryColor | lighten:3};
-	}
-
-	/* footer */
-	footer.page-footer {
-		background-color: ${primaryColor};
-	}
-
-	/* lookup */
-	md-lookup .dropdown-div li {
-		color: ${accentColor};
-	}
-
-	md-lookup .dropdown-div li a {
-		color: ${accentColor};
-	}
-
-	/* tap target */
-	.tap-target {
-		background-color: ${primaryColor};
-	}
-
-	</style>
-</template>
+<template>
+	<require from="./color-value-converters"></require>
+
+	<!--
+		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
+		and using Materialize terminology (darken/lighten instead of hue numbers)
+		the used palettes here consist of:
+		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
+		Accent	- lighten-1 (400), lighten-3 (200)
+
+		These should optionally be defined by the user. At the moment, they are
+		calculated and even not exact (but close).
+
+		Focused elements are an exception, these use "lighten-0.5" which is
+		not specified anywhere.
+	-->
+
+	<style>
+	.primary {
+		background-color: ${primaryColor};
+		color: white;
+	}
+
+	.primary-text {
+		/*background-color: white;*/
+		color: ${primaryColor};
+	}
+
+	.waves-effect.waves-primary .waves-ripple {
+		background-color: ${primaryColor};
+	}
+
+	.waves-effect.waves-accent .waves-ripple {
+		background-color: ${accentColor};
+	}
+
+	.accent {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.accent-text {
+		/*background-color: white;*/
+		color: ${accentColor};
+	}
+
+	.error {
+		background-color: ${errorColor};
+	}
+
+	.error-text {
+		color: ${errorColor}
+	}
+
+	.success {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.success-text {
+		color: ${accentColor};
+	}
+
+	/* buttons */
+	.btn.primary, .btn-flat.primary, .btn-large.primary {
+		transition: .2s ease-out;
+	}
+	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
+		background-color: ${primaryColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
+		background-color: ${primaryColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+	.btn-flat:not(.disabled):hover {
+		/*background-color: ${accentColor | lighten:3};*/
+		background-color: rgba(50, 50, 50, .15);
+		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+	.btn-flat:focus {
+		/*background-color: ${accentColor | lighten:2};*/
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+
+	.btn.accent, .btn-flat.accent, .btn-large.accent {
+		transition: .2s ease-out;
+	}
+	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
+		background-color: ${accentColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
+		background-color: ${accentColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+
+	.btn.error, .btn-flat.error, .btn-large.error {
+		transition: .2s ease-out;
+	}
+	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
+		background-color: ${errorColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
+		background-color: ${errorColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+		
+	/* checkbox */
+	[type="checkbox"]:checked + label:before {
+		border-right-color: ${accentColor};
+		border-bottom-color: ${accentColor};
+	}
+
+	[type="checkbox"].filled-in:checked + label:after {
+		border-color: ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	[type="checkbox"]:indeterminate + label:before {
+		border-right-color: ${accentColor};
+	}
+
+	/* collection */
+	md-collection .collection md-collection-item.collection-item.active {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	md-collection .collection md-collection-item.collection-item .secondary-content {
+		color: ${accentColor};
+	}
+
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
+		background-color: ${primaryColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
+		background-color: ${errorColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
+		color: ${primaryColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
+		color: ${errorColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}	 
+
+
+	/* datepicker */
+	.datepicker-date-display {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-table td.is-today {
+		color: ${accentColor};
+	}
+
+	.datepicker-table td.is-selected {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-day-button:focus {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
+	}
+
+	.datepicker-cancel,
+	.datepicker-today,
+	.datepicker-done {
+		color: ${accentColor};
+	}
+	
+	.datepicker-clear {
+		color: ${errorColor};
+	}
+
+	.datepicker-controls .select-wrapper input.select-dropdown:focus {
+			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
+	}
+
+	/* text input */
+	input:not([type]):focus:not([readonly]),
+	input[type=text]:not(.browser-default):focus:not([readonly]),
+	input[type=password]:not(.browser-default):focus:not([readonly]),
+	input[type=email]:not(.browser-default):focus:not([readonly]),
+	input[type=url]:not(.browser-default):focus:not([readonly]),
+	input[type=time]:not(.browser-default):focus:not([readonly]),
+	input[type=date]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+	input[type=tel]:not(.browser-default):focus:not([readonly]),
+	input[type=number]:not(.browser-default):focus:not([readonly]),
+	input[type=search]:not(.browser-default):focus:not([readonly]),
+	textarea.materialize-textarea:focus:not([readonly]) {
+		border-bottom: 1px solid ${accentColor};
+		box-shadow: 0 1px 0 0 ${accentColor};
+	}
+
+	.input-field .prefix.active {
+		color: ${accentColor}
+	}
+
+	/* text input label */
+	input:not([type]):focus:not([readonly]) + label,
+	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
+	textarea.materialize-textarea:focus:not([readonly]) + label {
+		color: ${accentColor}
+	}
+
+	/* text input error label */
+	md-input input:not([type]).invalid + label:after,
+	md-input input:not([type]):focus.invalid + label:after,
+	md-input input[type=text].invalid + label:after,
+	md-input input[type=text]:focus.invalid + label:after,
+	md-input input[type=password].invalid + label:after,
+	md-input input[type=password]:focus.invalid + label:after,
+	md-input input[type=email].invalid + label:after,
+	md-input input[type=email]:focus.invalid + label:after,
+	md-input input[type=url].invalid + label:after,
+	md-input input[type=url]:focus.invalid + label:after,
+	md-input input[type=time].invalid + label:after,
+	md-input input[type=time]:focus.invalid + label:after,
+	md-input input[type=date].invalid + label:after,
+	md-input input[type=date]:focus.invalid + label:after,
+	md-input input[type=datetime].invalid + label:after,
+	md-input input[type=datetime]:focus.invalid + label:after,
+	md-input input[type=datetime-local].invalid + label:after,
+	md-input input[type=datetime-local]:focus.invalid + label:after,
+	md-input input[type=tel].invalid + label:after,
+	md-input input[type=tel]:focus.invalid + label:after,
+	md-input input[type=number].invalid + label:after,
+	md-input input[type=number]:focus.invalid + label:after,
+	md-input input[type=search].invalid + label:after,
+	md-input input[type=search]:focus.invalid + label:after,
+	md-input textarea.materialize-textarea.invalid + label:after,
+	md-input textarea.materialize-textarea:focus.invalid + label:after
+	{
+		color: ${errorColor}
+	}
+
+	/* text input success border */
+	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+		border-bottom: 1px solid ${successColor};
+		box-shadow: 0 1px 0 0 ${successColor};
+	}
+
+	/* validation helper-text tweaks */
+	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
+	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
+	input.valid ~ .helper-text:not([data-success]),
+	input.invalid ~ .helper-text:not([data-error]) {
+		display: none;
+	}
+
+	.input-field .helper-text {
+		/* original helper-text is too low */
+		transform: translateY(-7px); 
+	}
+
+	/* pagination */
+	md-pagination .pagination li.active {
+		background-color: ${primaryColor}
+	}
+
+	/* progress */
+	md-progress .progress {
+		background-color: ${accentColor | lighten:2};
+	}
+
+	md-progress .progress .determinate, md-progress .progress .indeterminate {
+		background-color: ${accentColor};
+	}
+
+	/* radio input */
+	md-radio input[type="radio"]:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:before {
+		border: 2px solid ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	/* range */
+	md-range .range-field input[type="range"]::-webkit-slider-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-moz-range-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-ms-thumb {
+		background: ${accentColor};
+	}
+	md-range input[type="range"] + .thumb {
+		background-color: ${accentColor} !important;
+	}
+
+	/* select */
+	.dropdown-content li > a, .dropdown-content li > span {
+		color: ${accentColor};
+	}
+
+	.select-wrapper input.select-dropdown:focus {
+		border-bottom: 1px solid ${accentColor};
+	}
+
+	/* side-nav */
+	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+		background-color: ${primaryColor};
+	}
+
+	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+		background-color: ${primaryColor};
+	}
+
+	/* slider */
+	.slider .indicators .indicator-item.active {
+		background-color: ${accentColor};
+	}
+
+	/* switch */
+	md-switch.switch label input[type=checkbox]:checked + .lever {
+		background-color: ${accentColor | lighten:1};
+	}
+	md-switch.switch label input[type=checkbox]:checked + .lever:after {
+		background-color: ${accentColor};
+	}
+
+	/* tabs */
+
+	.tab.primary-text a {
+		color: ${primaryColor};
+	}
+	.tab.primary-text a.active {
+		color: ${primaryColor};
+	}
+	.tab.waves-effect {
+		position: static;
+	}
+	.tab.primary-text a:hover {
+		color: ${primaryColor | lighten:2};
+	}
+	.tabs .indicator {
+		background-color: ${primaryColor | lighten:2};
+	}
+	.tabs .tab a:focus, .tabs .tab a:focus.active {
+		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
+		outline: none;
+	}
+
+	/* timepicker */
+	.timepicker-digital-display {
+		background-color: ${accentColor};
+	}
+	
+	.timepicker-tick.active,
+	.timepicker-tick:hover {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
+	}
+
+	.timepicker-canvas line {
+			stroke: ${accentColor};
+	}
+		
+	.timepicker-canvas-bearing {
+		fill: ${accentColor};
+	}
+
+	.timepicker-canvas-bg {
+		fill: ${accentColor};
+	}
+	
+	.timepicker-clear {
+		color: ${errorColor};
+	}
+	
+	.timepicker-close {
+		color: ${accentColor};
+	}
+		
+	/* well */
+	md-well li.active {
+		border-right: 2px solid ${primaryColor};
+		background-color: ${primaryColor | lighten:3};
+	}
+
+	/* footer */
+	footer.page-footer {
+		background-color: ${primaryColor};
+	}
+
+	/* lookup */
+	md-lookup .dropdown-div li {
+		color: ${accentColor};
+	}
+
+	md-lookup .dropdown-div li a {
+		color: ${accentColor};
+	}
+
+	/* tap target */
+	.tap-target {
+		background-color: ${primaryColor};
+	}
+
+	</style>
+</template>
diff --git a/dist/commonjs/dropdown/dropdown-element.html b/dist/commonjs/dropdown/dropdown-element.html
index a46fbf03..f2155d45 100644
--- a/dist/commonjs/dropdown/dropdown-element.html
+++ b/dist/commonjs/dropdown/dropdown-element.html
@@ -1,6 +1,6 @@
-<template md-button class="dropdown-trigger" data-activates="${controlId}">
-	${title}
-	<div id="${controlId}" class='dropdown-content'>
-		<slot></slot>
-	</div>
-</template>
+<template md-button class="dropdown-trigger" data-activates="${controlId}">
+	${title}
+	<div id="${controlId}" class='dropdown-content'>
+		<slot></slot>
+	</div>
+</template>
diff --git a/dist/commonjs/fab/fab.html b/dist/commonjs/fab/fab.html
index eb692899..bfdd5ae9 100644
--- a/dist/commonjs/fab/fab.html
+++ b/dist/commonjs/fab/fab.html
@@ -1,3 +1,3 @@
-<template>
-	<slot></slot>
-</template>
+<template>
+	<slot></slot>
+</template>
diff --git a/dist/commonjs/file/file.html b/dist/commonjs/file/file.html
index 5f28d0c1..deb9f946 100644
--- a/dist/commonjs/file/file.html
+++ b/dist/commonjs/file/file.html
@@ -1,11 +1,11 @@
-<template>
-	<div class="file-field input-field">
-		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
-			<span>${caption}</span>
-			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
-		</div>
-		<div class="file-path-wrapper">
-			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
-		</div>
-	</div>
-</template>
+<template>
+	<div class="file-field input-field">
+		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
+			<span>${caption}</span>
+			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
+		</div>
+		<div class="file-path-wrapper">
+			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
+		</div>
+	</div>
+</template>
diff --git a/dist/commonjs/input/input.css b/dist/commonjs/input/input.css
index b0e62ac2..9655defa 100644
--- a/dist/commonjs/input/input.css
+++ b/dist/commonjs/input/input.css
@@ -1,3 +1,3 @@
-md-input .input-field label.active {
-  width: 100%;
-}
+md-input .input-field label.active {
+  width: 100%;
+}
diff --git a/dist/commonjs/navbar/navbar.css b/dist/commonjs/navbar/navbar.css
index 0bbd3a2a..57faf733 100644
--- a/dist/commonjs/navbar/navbar.css
+++ b/dist/commonjs/navbar/navbar.css
@@ -1,7 +1,7 @@
-md-navbar .primary {
-  transition: all .3s ease-out;
-}
-
-md-navbar .primary.auto-height {
-  height: auto;
-}
+md-navbar .primary {
+  transition: all .3s ease-out;
+}
+
+md-navbar .primary.auto-height {
+  height: auto;
+}
diff --git a/dist/commonjs/pagination/pagination.html b/dist/commonjs/pagination/pagination.html
index c79e0e67..57ffef31 100644
--- a/dist/commonjs/pagination/pagination.html
+++ b/dist/commonjs/pagination/pagination.html
@@ -1,25 +1,25 @@
-<template>
-	<ul class="pagination">
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
-		</template>
-		<template if.bind="showPageLinks">
-			<template repeat.for="p of pageLinks">
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
-				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
-          <a>${p+1}</a>
-        </li>
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
-			</template>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
-		</template>
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
-		</template>
-	</ul>
-</template>
+<template>
+	<ul class="pagination">
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
+		</template>
+		<template if.bind="showPageLinks">
+			<template repeat.for="p of pageLinks">
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
+				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
+          <a>${p+1}</a>
+        </li>
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
+			</template>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
+		</template>
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
+		</template>
+	</ul>
+</template>
diff --git a/dist/commonjs/progress/progress.html b/dist/commonjs/progress/progress.html
index 91a98f21..146a3572 100644
--- a/dist/commonjs/progress/progress.html
+++ b/dist/commonjs/progress/progress.html
@@ -1,73 +1,73 @@
-<template>
-	<template if.bind="type === 'linear'">
-		<div class="progress">
-			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color !== 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-${color}-only">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color === 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-blue">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-red">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-yellow">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-green">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-</template>
+<template>
+	<template if.bind="type === 'linear'">
+		<div class="progress">
+			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color !== 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-${color}-only">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color === 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-blue">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-red">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-yellow">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-green">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+</template>
diff --git a/dist/commonjs/range/range.html b/dist/commonjs/range/range.html
index 3978a0ff..b1f2c035 100644
--- a/dist/commonjs/range/range.html
+++ b/dist/commonjs/range/range.html
@@ -1,6 +1,6 @@
-<template>
-	<require from="./range.css"></require>
-	<p class="range-field">
-		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
-	</p>
-</template>
+<template>
+	<require from="./range.css"></require>
+	<p class="range-field">
+		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
+	</p>
+</template>
diff --git a/dist/commonjs/sidenav/sidenav.html b/dist/commonjs/sidenav/sidenav.html
index e9d05810..8e877943 100644
--- a/dist/commonjs/sidenav/sidenav.html
+++ b/dist/commonjs/sidenav/sidenav.html
@@ -1,6 +1,6 @@
-<template>
-  <require from="./sidenav.css"></require>
-  <div id="${controlId}" class="sidenav" ref="sidenav">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <require from="./sidenav.css"></require>
+  <div id="${controlId}" class="sidenav" ref="sidenav">
+    <slot></slot>
+  </div>
+</template>
diff --git a/dist/commonjs/switch/switch.html b/dist/commonjs/switch/switch.html
index b46b6bb9..8c856a65 100644
--- a/dist/commonjs/switch/switch.html
+++ b/dist/commonjs/switch/switch.html
@@ -1,9 +1,9 @@
-<template class="switch">
-  <require from="./switch.css"></require>
-  <label>
-    ${labelOff}
-    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
-    <span class="lever"></span>
-    ${labelOn}
-  </label>
-</template>
+<template class="switch">
+  <require from="./switch.css"></require>
+  <label>
+    ${labelOff}
+    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
+    <span class="lever"></span>
+    ${labelOn}
+  </label>
+</template>
diff --git a/dist/commonjs/well/md-well.html b/dist/commonjs/well/md-well.html
index 079d8f16..859f51c4 100644
--- a/dist/commonjs/well/md-well.html
+++ b/dist/commonjs/well/md-well.html
@@ -1,20 +1,20 @@
-<template>
-	<style>
-		md-well li[md-waves] {
-			display: block;
-		}
-
-		md-well li a {
-			padding: 5px;
-			display: inline-block;
-			width: 100%;
-		}
-
-	</style>
-
-	<ul class="z-depth-1">
-		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-			<a href.bind="row.href">${row.title}</a>
-		</li>
-	</ul>
-</template>
+<template>
+	<style>
+		md-well li[md-waves] {
+			display: block;
+		}
+
+		md-well li a {
+			padding: 5px;
+			display: inline-block;
+			width: 100%;
+		}
+
+	</style>
+
+	<ul class="z-depth-1">
+		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
+			<a href.bind="row.href">${row.title}</a>
+		</li>
+	</ul>
+</template>
diff --git a/dist/es2015/autocomplete/autocomplete.js b/dist/es2015/autocomplete/autocomplete.js
index 64c3cba1..01b72fcc 100644
--- a/dist/es2015/autocomplete/autocomplete.js
+++ b/dist/es2015/autocomplete/autocomplete.js
@@ -7,7 +7,9 @@ let MdAutoComplete = class MdAutoComplete {
         this.values = {};
     }
     valuesChanged() {
-        this.instance.updateData(this.values);
+        if (this.instance) {
+            this.instance.updateData(this.values);
+        }
     }
     bind() {
         // suppress initial change handler calls
diff --git a/dist/es2015/autocomplete/autocomplete.js.map b/dist/es2015/autocomplete/autocomplete.js.map
index 59fcc061..73e4d956 100644
--- a/dist/es2015/autocomplete/autocomplete.js.map
+++ b/dist/es2015/autocomplete/autocomplete.js.map
@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AAIjC,IAAa,cAAc,GAA3B,MAAa,cAAc;IAC1B,YAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,aAAa;QACZ,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAID,IAAI;QACH,wCAAwC;IACzC,CAAC;IAED,QAAQ;QACP,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,IAAI,CAAC,EAAE;gBACtB,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;CACD,CAAA;AA1CA;IADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;6CACX;AAGd;IADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACP;AAGlB;IADC,EAAE,CAAC,QAAQ;;8CACK;AAZL,cAAc;IAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;IACrC,EAAE,CAAC,UAAU;qCAEgB,OAAO;GADxB,cAAc,CAgD1B;SAhDY,cAAc"}
\ No newline at end of file
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AAIjC,IAAa,cAAc,GAA3B,MAAa,cAAc;IAC1B,YAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,aAAa;QACZ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtC;IACF,CAAC;IAID,IAAI;QACH,wCAAwC;IACzC,CAAC;IAED,QAAQ;QACP,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,IAAI,CAAC,EAAE;gBACtB,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;CACD,CAAA;AA5CA;IADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;6CACX;AAGd;IADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACP;AAGlB;IADC,EAAE,CAAC,QAAQ;;8CACK;AAZL,cAAc;IAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;IACrC,EAAE,CAAC,UAAU;qCAEgB,OAAO;GADxB,cAAc,CAkD1B;SAlDY,cAAc"}
\ No newline at end of file
diff --git a/dist/es2015/breadcrumbs/breadcrumbs.html b/dist/es2015/breadcrumbs/breadcrumbs.html
index edb1e190..06092d2f 100644
--- a/dist/es2015/breadcrumbs/breadcrumbs.html
+++ b/dist/es2015/breadcrumbs/breadcrumbs.html
@@ -1,15 +1,15 @@
-<template>
-	<require from="./breadcrumbs.css"></require>
-	<require from="./instructionFilter"></require>
-	<nav>
-		<div class="nav-wrapper">
-			<div class="col s12">
-				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
-					<a click.delegate="navigate(instruction)" class="breadcrumb">
-						${instruction.config.title}
-					</a>
-				</template>
-			</div>
-		</div>
-	</nav>
-</template>
+<template>
+	<require from="./breadcrumbs.css"></require>
+	<require from="./instructionFilter"></require>
+	<nav>
+		<div class="nav-wrapper">
+			<div class="col s12">
+				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
+					<a click.delegate="navigate(instruction)" class="breadcrumb">
+						${instruction.config.title}
+					</a>
+				</template>
+			</div>
+		</div>
+	</nav>
+</template>
diff --git a/dist/es2015/carousel/carousel-item.html b/dist/es2015/carousel/carousel-item.html
index 0622c18b..186ab282 100644
--- a/dist/es2015/carousel/carousel-item.html
+++ b/dist/es2015/carousel/carousel-item.html
@@ -1,7 +1,7 @@
-<template class="carousel-item">
-	<a if.bind="href" href.bind="href">
-		<img if.bind="image" src.bind="image" />
-	</a>
-	<img if.bind="!href && image" src.bind="image" />
-	<slot></slot>
-</template>
+<template class="carousel-item">
+	<a if.bind="href" href.bind="href">
+		<img if.bind="image" src.bind="image" />
+	</a>
+	<img if.bind="!href && image" src.bind="image" />
+	<slot></slot>
+</template>
diff --git a/dist/es2015/checkbox/checkbox.html b/dist/es2015/checkbox/checkbox.html
index 7b9eaeaa..940e8619 100644
--- a/dist/es2015/checkbox/checkbox.html
+++ b/dist/es2015/checkbox/checkbox.html
@@ -1,6 +1,6 @@
-<template>
-	<label for="${controlId}">
-		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
-		<span><slot></slot></span>
-	</label>
-</template>
+<template>
+	<label for="${controlId}">
+		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
+		<span><slot></slot></span>
+	</label>
+</template>
diff --git a/dist/es2015/chip/chip.html b/dist/es2015/chip/chip.html
index 5ae13efe..aebe7257 100644
--- a/dist/es2015/chip/chip.html
+++ b/dist/es2015/chip/chip.html
@@ -1,5 +1,5 @@
-<template class="chip">
-	<require from="./chip.css"></require>
-	<slot></slot>
-	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
-</template>
+<template class="chip">
+	<require from="./chip.css"></require>
+	<slot></slot>
+	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
+</template>
diff --git a/dist/es2015/click-counter/click-counter.html b/dist/es2015/click-counter/click-counter.html
index 17a8bfb7..a768c4d4 100644
--- a/dist/es2015/click-counter/click-counter.html
+++ b/dist/es2015/click-counter/click-counter.html
@@ -1,7 +1,7 @@
-<template>
-  <h2>Click counter</h2>
-
-  <button md-waves class="btn" click.delegate="increment()">Button</button>
-
-  <h2>Button was clicked ${count} times</h2>
-</template>
+<template>
+  <h2>Click counter</h2>
+
+  <button md-waves class="btn" click.delegate="increment()">Button</button>
+
+  <h2>Button was clicked ${count} times</h2>
+</template>
diff --git a/dist/es2015/collection/md-collection-selector.html b/dist/es2015/collection/md-collection-selector.html
index bff44f08..7a6bca30 100644
--- a/dist/es2015/collection/md-collection-selector.html
+++ b/dist/es2015/collection/md-collection-selector.html
@@ -1,8 +1,8 @@
-<template>
-	<require from="./md-collection-selector.css"></require>
-	<div class="md-collection-selector__checkbox">
-		<slot></slot>
-		<div>
-			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
-		</div>
-</template>
+<template>
+	<require from="./md-collection-selector.css"></require>
+	<div class="md-collection-selector__checkbox">
+		<slot></slot>
+		<div>
+			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
+		</div>
+</template>
diff --git a/dist/es2015/colors/md-colors-legacy.html b/dist/es2015/colors/md-colors-legacy.html
index e3c3168e..ef52c84f 100644
--- a/dist/es2015/colors/md-colors-legacy.html
+++ b/dist/es2015/colors/md-colors-legacy.html
@@ -1,441 +1,441 @@
-<template>
-	<require from="./color-value-converters"></require>
-
-	<!--
-		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
-		and using Materialize terminology (darken/lighten instead of hue numbers)
-		the used palettes here consist of:
-		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
-		Accent	- lighten-1 (400), lighten-3 (200)
-
-		These should optionally be defined by the user. At the moment, they are
-		calculated and even not exact (but close).
-
-		Focused elements are an exception, these use "lighten-0.5" which is
-		not specified anywhere.
-	-->
-
-	<style>
-	.primary {
-		background-color: ${primaryColor};
-		color: white;
-	}
-
-	.primary-text {
-		/*background-color: white;*/
-		color: ${primaryColor};
-	}
-
-	.waves-effect.waves-primary .waves-ripple {
-		background-color: ${primaryColor};
-	}
-
-	.waves-effect.waves-accent .waves-ripple {
-		background-color: ${accentColor};
-	}
-
-	.accent {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.accent-text {
-		/*background-color: white;*/
-		color: ${accentColor};
-	}
-
-	.error {
-		background-color: ${errorColor};
-	}
-
-	.error-text {
-		color: ${errorColor}
-	}
-
-	.success {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.success-text {
-		color: ${accentColor};
-	}
-
-	/* buttons */
-	.btn.primary, .btn-flat.primary, .btn-large.primary {
-		transition: .2s ease-out;
-	}
-	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
-		background-color: ${primaryColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
-		background-color: ${primaryColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-	.btn-flat:not(.disabled):hover {
-		/*background-color: ${accentColor | lighten:3};*/
-		background-color: rgba(50, 50, 50, .15);
-		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-	.btn-flat:focus {
-		/*background-color: ${accentColor | lighten:2};*/
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-
-	.btn.accent, .btn-flat.accent, .btn-large.accent {
-		transition: .2s ease-out;
-	}
-	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
-		background-color: ${accentColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
-		background-color: ${accentColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-
-	.btn.error, .btn-flat.error, .btn-large.error {
-		transition: .2s ease-out;
-	}
-	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
-		background-color: ${errorColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
-		background-color: ${errorColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-		
-	/* checkbox */
-	[type="checkbox"]:checked + label:before {
-		border-right-color: ${accentColor};
-		border-bottom-color: ${accentColor};
-	}
-
-	[type="checkbox"].filled-in:checked + label:after {
-		border-color: ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	[type="checkbox"]:indeterminate + label:before {
-		border-right-color: ${accentColor};
-	}
-
-	/* collection */
-	md-collection .collection md-collection-item.collection-item.active {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	md-collection .collection md-collection-item.collection-item .secondary-content {
-		color: ${accentColor};
-	}
-
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
-		background-color: ${primaryColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
-		background-color: ${errorColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
-		color: ${primaryColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
-		color: ${errorColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}	 
-
-
-	/* datepicker */
-	.datepicker-date-display {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-table td.is-today {
-		color: ${accentColor};
-	}
-
-	.datepicker-table td.is-selected {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-day-button:focus {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
-	}
-
-	.datepicker-cancel,
-	.datepicker-today,
-	.datepicker-done {
-		color: ${accentColor};
-	}
-	
-	.datepicker-clear {
-		color: ${errorColor};
-	}
-
-	.datepicker-controls .select-wrapper input.select-dropdown:focus {
-			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
-	}
-
-	/* text input */
-	input:not([type]):focus:not([readonly]),
-	input[type=text]:not(.browser-default):focus:not([readonly]),
-	input[type=password]:not(.browser-default):focus:not([readonly]),
-	input[type=email]:not(.browser-default):focus:not([readonly]),
-	input[type=url]:not(.browser-default):focus:not([readonly]),
-	input[type=time]:not(.browser-default):focus:not([readonly]),
-	input[type=date]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
-	input[type=tel]:not(.browser-default):focus:not([readonly]),
-	input[type=number]:not(.browser-default):focus:not([readonly]),
-	input[type=search]:not(.browser-default):focus:not([readonly]),
-	textarea.materialize-textarea:focus:not([readonly]) {
-		border-bottom: 1px solid ${accentColor};
-		box-shadow: 0 1px 0 0 ${accentColor};
-	}
-
-	.input-field .prefix.active {
-		color: ${accentColor}
-	}
-
-	/* text input label */
-	input:not([type]):focus:not([readonly]) + label,
-	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
-	textarea.materialize-textarea:focus:not([readonly]) + label {
-		color: ${accentColor}
-	}
-
-	/* text input error label */
-	md-input input:not([type]).invalid + label:after,
-	md-input input:not([type]):focus.invalid + label:after,
-	md-input input[type=text].invalid + label:after,
-	md-input input[type=text]:focus.invalid + label:after,
-	md-input input[type=password].invalid + label:after,
-	md-input input[type=password]:focus.invalid + label:after,
-	md-input input[type=email].invalid + label:after,
-	md-input input[type=email]:focus.invalid + label:after,
-	md-input input[type=url].invalid + label:after,
-	md-input input[type=url]:focus.invalid + label:after,
-	md-input input[type=time].invalid + label:after,
-	md-input input[type=time]:focus.invalid + label:after,
-	md-input input[type=date].invalid + label:after,
-	md-input input[type=date]:focus.invalid + label:after,
-	md-input input[type=datetime].invalid + label:after,
-	md-input input[type=datetime]:focus.invalid + label:after,
-	md-input input[type=datetime-local].invalid + label:after,
-	md-input input[type=datetime-local]:focus.invalid + label:after,
-	md-input input[type=tel].invalid + label:after,
-	md-input input[type=tel]:focus.invalid + label:after,
-	md-input input[type=number].invalid + label:after,
-	md-input input[type=number]:focus.invalid + label:after,
-	md-input input[type=search].invalid + label:after,
-	md-input input[type=search]:focus.invalid + label:after,
-	md-input textarea.materialize-textarea.invalid + label:after,
-	md-input textarea.materialize-textarea:focus.invalid + label:after
-	{
-		color: ${errorColor}
-	}
-
-	/* text input success border */
-	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
-		border-bottom: 1px solid ${successColor};
-		box-shadow: 0 1px 0 0 ${successColor};
-	}
-
-	/* validation helper-text tweaks */
-	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
-	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
-	input.valid ~ .helper-text:not([data-success]),
-	input.invalid ~ .helper-text:not([data-error]) {
-		display: none;
-	}
-
-	.input-field .helper-text {
-		/* original helper-text is too low */
-		transform: translateY(-7px); 
-	}
-
-	/* pagination */
-	md-pagination .pagination li.active {
-		background-color: ${primaryColor}
-	}
-
-	/* progress */
-	md-progress .progress {
-		background-color: ${accentColor | lighten:2};
-	}
-
-	md-progress .progress .determinate, md-progress .progress .indeterminate {
-		background-color: ${accentColor};
-	}
-
-	/* radio input */
-	md-radio input[type="radio"]:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:before {
-		border: 2px solid ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	/* range */
-	md-range .range-field input[type="range"]::-webkit-slider-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-moz-range-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-ms-thumb {
-		background: ${accentColor};
-	}
-	md-range input[type="range"] + .thumb {
-		background-color: ${accentColor} !important;
-	}
-
-	/* select */
-	.dropdown-content li > a, .dropdown-content li > span {
-		color: ${accentColor};
-	}
-
-	.select-wrapper input.select-dropdown:focus {
-		border-bottom: 1px solid ${accentColor};
-	}
-
-	/* side-nav */
-	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
-		background-color: ${primaryColor};
-	}
-
-	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
-		background-color: ${primaryColor};
-	}
-
-	/* slider */
-	.slider .indicators .indicator-item.active {
-		background-color: ${accentColor};
-	}
-
-	/* switch */
-	md-switch.switch label input[type=checkbox]:checked + .lever {
-		background-color: ${accentColor | lighten:1};
-	}
-	md-switch.switch label input[type=checkbox]:checked + .lever:after {
-		background-color: ${accentColor};
-	}
-
-	/* tabs */
-
-	.tab.primary-text a {
-		color: ${primaryColor};
-	}
-	.tab.primary-text a.active {
-		color: ${primaryColor};
-	}
-	.tab.waves-effect {
-		position: static;
-	}
-	.tab.primary-text a:hover {
-		color: ${primaryColor | lighten:2};
-	}
-	.tabs .indicator {
-		background-color: ${primaryColor | lighten:2};
-	}
-	.tabs .tab a:focus, .tabs .tab a:focus.active {
-		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
-		outline: none;
-	}
-
-	/* timepicker */
-	.timepicker-digital-display {
-		background-color: ${accentColor};
-	}
-	
-	.timepicker-tick.active,
-	.timepicker-tick:hover {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
-	}
-
-	.timepicker-canvas line {
-			stroke: ${accentColor};
-	}
-		
-	.timepicker-canvas-bearing {
-		fill: ${accentColor};
-	}
-
-	.timepicker-canvas-bg {
-		fill: ${accentColor};
-	}
-	
-	.timepicker-clear {
-		color: ${errorColor};
-	}
-	
-	.timepicker-close {
-		color: ${accentColor};
-	}
-		
-	/* well */
-	md-well li.active {
-		border-right: 2px solid ${primaryColor};
-		background-color: ${primaryColor | lighten:3};
-	}
-
-	/* footer */
-	footer.page-footer {
-		background-color: ${primaryColor};
-	}
-
-	/* lookup */
-	md-lookup .dropdown-div li {
-		color: ${accentColor};
-	}
-
-	md-lookup .dropdown-div li a {
-		color: ${accentColor};
-	}
-
-	/* tap target */
-	.tap-target {
-		background-color: ${primaryColor};
-	}
-
-	</style>
-</template>
+<template>
+	<require from="./color-value-converters"></require>
+
+	<!--
+		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
+		and using Materialize terminology (darken/lighten instead of hue numbers)
+		the used palettes here consist of:
+		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
+		Accent	- lighten-1 (400), lighten-3 (200)
+
+		These should optionally be defined by the user. At the moment, they are
+		calculated and even not exact (but close).
+
+		Focused elements are an exception, these use "lighten-0.5" which is
+		not specified anywhere.
+	-->
+
+	<style>
+	.primary {
+		background-color: ${primaryColor};
+		color: white;
+	}
+
+	.primary-text {
+		/*background-color: white;*/
+		color: ${primaryColor};
+	}
+
+	.waves-effect.waves-primary .waves-ripple {
+		background-color: ${primaryColor};
+	}
+
+	.waves-effect.waves-accent .waves-ripple {
+		background-color: ${accentColor};
+	}
+
+	.accent {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.accent-text {
+		/*background-color: white;*/
+		color: ${accentColor};
+	}
+
+	.error {
+		background-color: ${errorColor};
+	}
+
+	.error-text {
+		color: ${errorColor}
+	}
+
+	.success {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.success-text {
+		color: ${accentColor};
+	}
+
+	/* buttons */
+	.btn.primary, .btn-flat.primary, .btn-large.primary {
+		transition: .2s ease-out;
+	}
+	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
+		background-color: ${primaryColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
+		background-color: ${primaryColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+	.btn-flat:not(.disabled):hover {
+		/*background-color: ${accentColor | lighten:3};*/
+		background-color: rgba(50, 50, 50, .15);
+		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+	.btn-flat:focus {
+		/*background-color: ${accentColor | lighten:2};*/
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+
+	.btn.accent, .btn-flat.accent, .btn-large.accent {
+		transition: .2s ease-out;
+	}
+	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
+		background-color: ${accentColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
+		background-color: ${accentColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+
+	.btn.error, .btn-flat.error, .btn-large.error {
+		transition: .2s ease-out;
+	}
+	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
+		background-color: ${errorColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
+		background-color: ${errorColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+		
+	/* checkbox */
+	[type="checkbox"]:checked + label:before {
+		border-right-color: ${accentColor};
+		border-bottom-color: ${accentColor};
+	}
+
+	[type="checkbox"].filled-in:checked + label:after {
+		border-color: ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	[type="checkbox"]:indeterminate + label:before {
+		border-right-color: ${accentColor};
+	}
+
+	/* collection */
+	md-collection .collection md-collection-item.collection-item.active {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	md-collection .collection md-collection-item.collection-item .secondary-content {
+		color: ${accentColor};
+	}
+
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
+		background-color: ${primaryColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
+		background-color: ${errorColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
+		color: ${primaryColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
+		color: ${errorColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}	 
+
+
+	/* datepicker */
+	.datepicker-date-display {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-table td.is-today {
+		color: ${accentColor};
+	}
+
+	.datepicker-table td.is-selected {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-day-button:focus {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
+	}
+
+	.datepicker-cancel,
+	.datepicker-today,
+	.datepicker-done {
+		color: ${accentColor};
+	}
+	
+	.datepicker-clear {
+		color: ${errorColor};
+	}
+
+	.datepicker-controls .select-wrapper input.select-dropdown:focus {
+			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
+	}
+
+	/* text input */
+	input:not([type]):focus:not([readonly]),
+	input[type=text]:not(.browser-default):focus:not([readonly]),
+	input[type=password]:not(.browser-default):focus:not([readonly]),
+	input[type=email]:not(.browser-default):focus:not([readonly]),
+	input[type=url]:not(.browser-default):focus:not([readonly]),
+	input[type=time]:not(.browser-default):focus:not([readonly]),
+	input[type=date]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+	input[type=tel]:not(.browser-default):focus:not([readonly]),
+	input[type=number]:not(.browser-default):focus:not([readonly]),
+	input[type=search]:not(.browser-default):focus:not([readonly]),
+	textarea.materialize-textarea:focus:not([readonly]) {
+		border-bottom: 1px solid ${accentColor};
+		box-shadow: 0 1px 0 0 ${accentColor};
+	}
+
+	.input-field .prefix.active {
+		color: ${accentColor}
+	}
+
+	/* text input label */
+	input:not([type]):focus:not([readonly]) + label,
+	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
+	textarea.materialize-textarea:focus:not([readonly]) + label {
+		color: ${accentColor}
+	}
+
+	/* text input error label */
+	md-input input:not([type]).invalid + label:after,
+	md-input input:not([type]):focus.invalid + label:after,
+	md-input input[type=text].invalid + label:after,
+	md-input input[type=text]:focus.invalid + label:after,
+	md-input input[type=password].invalid + label:after,
+	md-input input[type=password]:focus.invalid + label:after,
+	md-input input[type=email].invalid + label:after,
+	md-input input[type=email]:focus.invalid + label:after,
+	md-input input[type=url].invalid + label:after,
+	md-input input[type=url]:focus.invalid + label:after,
+	md-input input[type=time].invalid + label:after,
+	md-input input[type=time]:focus.invalid + label:after,
+	md-input input[type=date].invalid + label:after,
+	md-input input[type=date]:focus.invalid + label:after,
+	md-input input[type=datetime].invalid + label:after,
+	md-input input[type=datetime]:focus.invalid + label:after,
+	md-input input[type=datetime-local].invalid + label:after,
+	md-input input[type=datetime-local]:focus.invalid + label:after,
+	md-input input[type=tel].invalid + label:after,
+	md-input input[type=tel]:focus.invalid + label:after,
+	md-input input[type=number].invalid + label:after,
+	md-input input[type=number]:focus.invalid + label:after,
+	md-input input[type=search].invalid + label:after,
+	md-input input[type=search]:focus.invalid + label:after,
+	md-input textarea.materialize-textarea.invalid + label:after,
+	md-input textarea.materialize-textarea:focus.invalid + label:after
+	{
+		color: ${errorColor}
+	}
+
+	/* text input success border */
+	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+		border-bottom: 1px solid ${successColor};
+		box-shadow: 0 1px 0 0 ${successColor};
+	}
+
+	/* validation helper-text tweaks */
+	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
+	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
+	input.valid ~ .helper-text:not([data-success]),
+	input.invalid ~ .helper-text:not([data-error]) {
+		display: none;
+	}
+
+	.input-field .helper-text {
+		/* original helper-text is too low */
+		transform: translateY(-7px); 
+	}
+
+	/* pagination */
+	md-pagination .pagination li.active {
+		background-color: ${primaryColor}
+	}
+
+	/* progress */
+	md-progress .progress {
+		background-color: ${accentColor | lighten:2};
+	}
+
+	md-progress .progress .determinate, md-progress .progress .indeterminate {
+		background-color: ${accentColor};
+	}
+
+	/* radio input */
+	md-radio input[type="radio"]:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:before {
+		border: 2px solid ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	/* range */
+	md-range .range-field input[type="range"]::-webkit-slider-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-moz-range-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-ms-thumb {
+		background: ${accentColor};
+	}
+	md-range input[type="range"] + .thumb {
+		background-color: ${accentColor} !important;
+	}
+
+	/* select */
+	.dropdown-content li > a, .dropdown-content li > span {
+		color: ${accentColor};
+	}
+
+	.select-wrapper input.select-dropdown:focus {
+		border-bottom: 1px solid ${accentColor};
+	}
+
+	/* side-nav */
+	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+		background-color: ${primaryColor};
+	}
+
+	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+		background-color: ${primaryColor};
+	}
+
+	/* slider */
+	.slider .indicators .indicator-item.active {
+		background-color: ${accentColor};
+	}
+
+	/* switch */
+	md-switch.switch label input[type=checkbox]:checked + .lever {
+		background-color: ${accentColor | lighten:1};
+	}
+	md-switch.switch label input[type=checkbox]:checked + .lever:after {
+		background-color: ${accentColor};
+	}
+
+	/* tabs */
+
+	.tab.primary-text a {
+		color: ${primaryColor};
+	}
+	.tab.primary-text a.active {
+		color: ${primaryColor};
+	}
+	.tab.waves-effect {
+		position: static;
+	}
+	.tab.primary-text a:hover {
+		color: ${primaryColor | lighten:2};
+	}
+	.tabs .indicator {
+		background-color: ${primaryColor | lighten:2};
+	}
+	.tabs .tab a:focus, .tabs .tab a:focus.active {
+		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
+		outline: none;
+	}
+
+	/* timepicker */
+	.timepicker-digital-display {
+		background-color: ${accentColor};
+	}
+	
+	.timepicker-tick.active,
+	.timepicker-tick:hover {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
+	}
+
+	.timepicker-canvas line {
+			stroke: ${accentColor};
+	}
+		
+	.timepicker-canvas-bearing {
+		fill: ${accentColor};
+	}
+
+	.timepicker-canvas-bg {
+		fill: ${accentColor};
+	}
+	
+	.timepicker-clear {
+		color: ${errorColor};
+	}
+	
+	.timepicker-close {
+		color: ${accentColor};
+	}
+		
+	/* well */
+	md-well li.active {
+		border-right: 2px solid ${primaryColor};
+		background-color: ${primaryColor | lighten:3};
+	}
+
+	/* footer */
+	footer.page-footer {
+		background-color: ${primaryColor};
+	}
+
+	/* lookup */
+	md-lookup .dropdown-div li {
+		color: ${accentColor};
+	}
+
+	md-lookup .dropdown-div li a {
+		color: ${accentColor};
+	}
+
+	/* tap target */
+	.tap-target {
+		background-color: ${primaryColor};
+	}
+
+	</style>
+</template>
diff --git a/dist/es2015/dropdown/dropdown-element.html b/dist/es2015/dropdown/dropdown-element.html
index a46fbf03..f2155d45 100644
--- a/dist/es2015/dropdown/dropdown-element.html
+++ b/dist/es2015/dropdown/dropdown-element.html
@@ -1,6 +1,6 @@
-<template md-button class="dropdown-trigger" data-activates="${controlId}">
-	${title}
-	<div id="${controlId}" class='dropdown-content'>
-		<slot></slot>
-	</div>
-</template>
+<template md-button class="dropdown-trigger" data-activates="${controlId}">
+	${title}
+	<div id="${controlId}" class='dropdown-content'>
+		<slot></slot>
+	</div>
+</template>
diff --git a/dist/es2015/fab/fab.html b/dist/es2015/fab/fab.html
index eb692899..bfdd5ae9 100644
--- a/dist/es2015/fab/fab.html
+++ b/dist/es2015/fab/fab.html
@@ -1,3 +1,3 @@
-<template>
-	<slot></slot>
-</template>
+<template>
+	<slot></slot>
+</template>
diff --git a/dist/es2015/file/file.html b/dist/es2015/file/file.html
index 5f28d0c1..deb9f946 100644
--- a/dist/es2015/file/file.html
+++ b/dist/es2015/file/file.html
@@ -1,11 +1,11 @@
-<template>
-	<div class="file-field input-field">
-		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
-			<span>${caption}</span>
-			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
-		</div>
-		<div class="file-path-wrapper">
-			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
-		</div>
-	</div>
-</template>
+<template>
+	<div class="file-field input-field">
+		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
+			<span>${caption}</span>
+			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
+		</div>
+		<div class="file-path-wrapper">
+			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
+		</div>
+	</div>
+</template>
diff --git a/dist/es2015/input/input.css b/dist/es2015/input/input.css
index b0e62ac2..9655defa 100644
--- a/dist/es2015/input/input.css
+++ b/dist/es2015/input/input.css
@@ -1,3 +1,3 @@
-md-input .input-field label.active {
-  width: 100%;
-}
+md-input .input-field label.active {
+  width: 100%;
+}
diff --git a/dist/es2015/navbar/navbar.css b/dist/es2015/navbar/navbar.css
index 0bbd3a2a..57faf733 100644
--- a/dist/es2015/navbar/navbar.css
+++ b/dist/es2015/navbar/navbar.css
@@ -1,7 +1,7 @@
-md-navbar .primary {
-  transition: all .3s ease-out;
-}
-
-md-navbar .primary.auto-height {
-  height: auto;
-}
+md-navbar .primary {
+  transition: all .3s ease-out;
+}
+
+md-navbar .primary.auto-height {
+  height: auto;
+}
diff --git a/dist/es2015/pagination/pagination.html b/dist/es2015/pagination/pagination.html
index c79e0e67..57ffef31 100644
--- a/dist/es2015/pagination/pagination.html
+++ b/dist/es2015/pagination/pagination.html
@@ -1,25 +1,25 @@
-<template>
-	<ul class="pagination">
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
-		</template>
-		<template if.bind="showPageLinks">
-			<template repeat.for="p of pageLinks">
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
-				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
-          <a>${p+1}</a>
-        </li>
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
-			</template>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
-		</template>
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
-		</template>
-	</ul>
-</template>
+<template>
+	<ul class="pagination">
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
+		</template>
+		<template if.bind="showPageLinks">
+			<template repeat.for="p of pageLinks">
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
+				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
+          <a>${p+1}</a>
+        </li>
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
+			</template>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
+		</template>
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
+		</template>
+	</ul>
+</template>
diff --git a/dist/es2015/progress/progress.html b/dist/es2015/progress/progress.html
index 91a98f21..146a3572 100644
--- a/dist/es2015/progress/progress.html
+++ b/dist/es2015/progress/progress.html
@@ -1,73 +1,73 @@
-<template>
-	<template if.bind="type === 'linear'">
-		<div class="progress">
-			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color !== 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-${color}-only">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color === 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-blue">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-red">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-yellow">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-green">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-</template>
+<template>
+	<template if.bind="type === 'linear'">
+		<div class="progress">
+			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color !== 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-${color}-only">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color === 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-blue">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-red">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-yellow">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-green">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+</template>
diff --git a/dist/es2015/range/range.html b/dist/es2015/range/range.html
index 3978a0ff..b1f2c035 100644
--- a/dist/es2015/range/range.html
+++ b/dist/es2015/range/range.html
@@ -1,6 +1,6 @@
-<template>
-	<require from="./range.css"></require>
-	<p class="range-field">
-		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
-	</p>
-</template>
+<template>
+	<require from="./range.css"></require>
+	<p class="range-field">
+		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
+	</p>
+</template>
diff --git a/dist/es2015/sidenav/sidenav.html b/dist/es2015/sidenav/sidenav.html
index e9d05810..8e877943 100644
--- a/dist/es2015/sidenav/sidenav.html
+++ b/dist/es2015/sidenav/sidenav.html
@@ -1,6 +1,6 @@
-<template>
-  <require from="./sidenav.css"></require>
-  <div id="${controlId}" class="sidenav" ref="sidenav">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <require from="./sidenav.css"></require>
+  <div id="${controlId}" class="sidenav" ref="sidenav">
+    <slot></slot>
+  </div>
+</template>
diff --git a/dist/es2015/switch/switch.html b/dist/es2015/switch/switch.html
index b46b6bb9..8c856a65 100644
--- a/dist/es2015/switch/switch.html
+++ b/dist/es2015/switch/switch.html
@@ -1,9 +1,9 @@
-<template class="switch">
-  <require from="./switch.css"></require>
-  <label>
-    ${labelOff}
-    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
-    <span class="lever"></span>
-    ${labelOn}
-  </label>
-</template>
+<template class="switch">
+  <require from="./switch.css"></require>
+  <label>
+    ${labelOff}
+    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
+    <span class="lever"></span>
+    ${labelOn}
+  </label>
+</template>
diff --git a/dist/es2015/well/md-well.html b/dist/es2015/well/md-well.html
index 079d8f16..859f51c4 100644
--- a/dist/es2015/well/md-well.html
+++ b/dist/es2015/well/md-well.html
@@ -1,20 +1,20 @@
-<template>
-	<style>
-		md-well li[md-waves] {
-			display: block;
-		}
-
-		md-well li a {
-			padding: 5px;
-			display: inline-block;
-			width: 100%;
-		}
-
-	</style>
-
-	<ul class="z-depth-1">
-		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-			<a href.bind="row.href">${row.title}</a>
-		</li>
-	</ul>
-</template>
+<template>
+	<style>
+		md-well li[md-waves] {
+			display: block;
+		}
+
+		md-well li a {
+			padding: 5px;
+			display: inline-block;
+			width: 100%;
+		}
+
+	</style>
+
+	<ul class="z-depth-1">
+		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
+			<a href.bind="row.href">${row.title}</a>
+		</li>
+	</ul>
+</template>
diff --git a/dist/native-modules/autocomplete/autocomplete.js b/dist/native-modules/autocomplete/autocomplete.js
index 3963261d..ccf68627 100644
--- a/dist/native-modules/autocomplete/autocomplete.js
+++ b/dist/native-modules/autocomplete/autocomplete.js
@@ -7,7 +7,9 @@ var MdAutoComplete = /** @class */ (function () {
         this.values = {};
     }
     MdAutoComplete.prototype.valuesChanged = function () {
-        this.instance.updateData(this.values);
+        if (this.instance) {
+            this.instance.updateData(this.values);
+        }
     };
     MdAutoComplete.prototype.bind = function () {
         // suppress initial change handler calls
diff --git a/dist/native-modules/autocomplete/autocomplete.js.map b/dist/native-modules/autocomplete/autocomplete.js.map
index 6fa13007..5f69245c 100644
--- a/dist/native-modules/autocomplete/autocomplete.js.map
+++ b/dist/native-modules/autocomplete/autocomplete.js.map
@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AAIjC;IACC,wBAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,sCAAa,GAAb;QACC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAID,6BAAI,GAAJ;QACC,wCAAwC;IACzC,CAAC;IAED,iCAAQ,GAAR;QAAA,iBAoBC;QAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,UAAA,IAAI;gBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,iCAAQ,GAAR;QACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IAzCD;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACX;IAGd;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACP;IAGlB;QADC,EAAE,CAAC,QAAQ;;kDACK;IAZL,cAAc;QAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;QACrC,EAAE,CAAC,UAAU;yCAEgB,OAAO;OADxB,cAAc,CAgD1B;IAAD,qBAAC;CAAA,AAhDD,IAgDC;SAhDY,cAAc"}
\ No newline at end of file
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,MAAM,YAAY,CAAC;AAIjC;IACC,wBAAoB,OAAgB;QAAhB,YAAO,GAAP,OAAO,CAAS;QAEpC,UAAK,GAAY,IAAI,CAAC;QAStB,WAAM,GAAQ,EAAE,CAAC;IAXuB,CAAC;IAYzC,sCAAa,GAAb;QACC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtC;IACF,CAAC;IAID,6BAAI,GAAJ;QACC,wCAAwC;IACzC,CAAC;IAED,iCAAQ,GAAR;QAAA,iBAoBC;QAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;YACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;SAC1B;aACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;YAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;SACzD;aACI;YACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;SAC3F;QACD,IAAI,OAAO,GAAmC;YAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,cAAc,EAAE,UAAA,IAAI;gBACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;YACjE,CAAC;SACD,CAAC;QACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,iCAAQ,GAAR;QACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IA3CD;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iDACX;IAGd;QADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;qDACP;IAGlB;QADC,EAAE,CAAC,QAAQ;;kDACK;IAZL,cAAc;QAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;QACrC,EAAE,CAAC,UAAU;yCAEgB,OAAO;OADxB,cAAc,CAkD1B;IAAD,qBAAC;CAAA,AAlDD,IAkDC;SAlDY,cAAc"}
\ No newline at end of file
diff --git a/dist/native-modules/breadcrumbs/breadcrumbs.html b/dist/native-modules/breadcrumbs/breadcrumbs.html
index edb1e190..06092d2f 100644
--- a/dist/native-modules/breadcrumbs/breadcrumbs.html
+++ b/dist/native-modules/breadcrumbs/breadcrumbs.html
@@ -1,15 +1,15 @@
-<template>
-	<require from="./breadcrumbs.css"></require>
-	<require from="./instructionFilter"></require>
-	<nav>
-		<div class="nav-wrapper">
-			<div class="col s12">
-				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
-					<a click.delegate="navigate(instruction)" class="breadcrumb">
-						${instruction.config.title}
-					</a>
-				</template>
-			</div>
-		</div>
-	</nav>
-</template>
+<template>
+	<require from="./breadcrumbs.css"></require>
+	<require from="./instructionFilter"></require>
+	<nav>
+		<div class="nav-wrapper">
+			<div class="col s12">
+				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
+					<a click.delegate="navigate(instruction)" class="breadcrumb">
+						${instruction.config.title}
+					</a>
+				</template>
+			</div>
+		</div>
+	</nav>
+</template>
diff --git a/dist/native-modules/carousel/carousel-item.html b/dist/native-modules/carousel/carousel-item.html
index 0622c18b..186ab282 100644
--- a/dist/native-modules/carousel/carousel-item.html
+++ b/dist/native-modules/carousel/carousel-item.html
@@ -1,7 +1,7 @@
-<template class="carousel-item">
-	<a if.bind="href" href.bind="href">
-		<img if.bind="image" src.bind="image" />
-	</a>
-	<img if.bind="!href && image" src.bind="image" />
-	<slot></slot>
-</template>
+<template class="carousel-item">
+	<a if.bind="href" href.bind="href">
+		<img if.bind="image" src.bind="image" />
+	</a>
+	<img if.bind="!href && image" src.bind="image" />
+	<slot></slot>
+</template>
diff --git a/dist/native-modules/checkbox/checkbox.html b/dist/native-modules/checkbox/checkbox.html
index 7b9eaeaa..940e8619 100644
--- a/dist/native-modules/checkbox/checkbox.html
+++ b/dist/native-modules/checkbox/checkbox.html
@@ -1,6 +1,6 @@
-<template>
-	<label for="${controlId}">
-		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
-		<span><slot></slot></span>
-	</label>
-</template>
+<template>
+	<label for="${controlId}">
+		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
+		<span><slot></slot></span>
+	</label>
+</template>
diff --git a/dist/native-modules/chip/chip.html b/dist/native-modules/chip/chip.html
index 5ae13efe..aebe7257 100644
--- a/dist/native-modules/chip/chip.html
+++ b/dist/native-modules/chip/chip.html
@@ -1,5 +1,5 @@
-<template class="chip">
-	<require from="./chip.css"></require>
-	<slot></slot>
-	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
-</template>
+<template class="chip">
+	<require from="./chip.css"></require>
+	<slot></slot>
+	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
+</template>
diff --git a/dist/native-modules/click-counter/click-counter.html b/dist/native-modules/click-counter/click-counter.html
index 17a8bfb7..a768c4d4 100644
--- a/dist/native-modules/click-counter/click-counter.html
+++ b/dist/native-modules/click-counter/click-counter.html
@@ -1,7 +1,7 @@
-<template>
-  <h2>Click counter</h2>
-
-  <button md-waves class="btn" click.delegate="increment()">Button</button>
-
-  <h2>Button was clicked ${count} times</h2>
-</template>
+<template>
+  <h2>Click counter</h2>
+
+  <button md-waves class="btn" click.delegate="increment()">Button</button>
+
+  <h2>Button was clicked ${count} times</h2>
+</template>
diff --git a/dist/native-modules/collection/md-collection-selector.html b/dist/native-modules/collection/md-collection-selector.html
index bff44f08..7a6bca30 100644
--- a/dist/native-modules/collection/md-collection-selector.html
+++ b/dist/native-modules/collection/md-collection-selector.html
@@ -1,8 +1,8 @@
-<template>
-	<require from="./md-collection-selector.css"></require>
-	<div class="md-collection-selector__checkbox">
-		<slot></slot>
-		<div>
-			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
-		</div>
-</template>
+<template>
+	<require from="./md-collection-selector.css"></require>
+	<div class="md-collection-selector__checkbox">
+		<slot></slot>
+		<div>
+			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
+		</div>
+</template>
diff --git a/dist/native-modules/colors/md-colors-legacy.html b/dist/native-modules/colors/md-colors-legacy.html
index e3c3168e..ef52c84f 100644
--- a/dist/native-modules/colors/md-colors-legacy.html
+++ b/dist/native-modules/colors/md-colors-legacy.html
@@ -1,441 +1,441 @@
-<template>
-	<require from="./color-value-converters"></require>
-
-	<!--
-		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
-		and using Materialize terminology (darken/lighten instead of hue numbers)
-		the used palettes here consist of:
-		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
-		Accent	- lighten-1 (400), lighten-3 (200)
-
-		These should optionally be defined by the user. At the moment, they are
-		calculated and even not exact (but close).
-
-		Focused elements are an exception, these use "lighten-0.5" which is
-		not specified anywhere.
-	-->
-
-	<style>
-	.primary {
-		background-color: ${primaryColor};
-		color: white;
-	}
-
-	.primary-text {
-		/*background-color: white;*/
-		color: ${primaryColor};
-	}
-
-	.waves-effect.waves-primary .waves-ripple {
-		background-color: ${primaryColor};
-	}
-
-	.waves-effect.waves-accent .waves-ripple {
-		background-color: ${accentColor};
-	}
-
-	.accent {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.accent-text {
-		/*background-color: white;*/
-		color: ${accentColor};
-	}
-
-	.error {
-		background-color: ${errorColor};
-	}
-
-	.error-text {
-		color: ${errorColor}
-	}
-
-	.success {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.success-text {
-		color: ${accentColor};
-	}
-
-	/* buttons */
-	.btn.primary, .btn-flat.primary, .btn-large.primary {
-		transition: .2s ease-out;
-	}
-	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
-		background-color: ${primaryColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
-		background-color: ${primaryColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-	.btn-flat:not(.disabled):hover {
-		/*background-color: ${accentColor | lighten:3};*/
-		background-color: rgba(50, 50, 50, .15);
-		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-	.btn-flat:focus {
-		/*background-color: ${accentColor | lighten:2};*/
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-
-	.btn.accent, .btn-flat.accent, .btn-large.accent {
-		transition: .2s ease-out;
-	}
-	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
-		background-color: ${accentColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
-		background-color: ${accentColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-
-	.btn.error, .btn-flat.error, .btn-large.error {
-		transition: .2s ease-out;
-	}
-	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
-		background-color: ${errorColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
-		background-color: ${errorColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-		
-	/* checkbox */
-	[type="checkbox"]:checked + label:before {
-		border-right-color: ${accentColor};
-		border-bottom-color: ${accentColor};
-	}
-
-	[type="checkbox"].filled-in:checked + label:after {
-		border-color: ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	[type="checkbox"]:indeterminate + label:before {
-		border-right-color: ${accentColor};
-	}
-
-	/* collection */
-	md-collection .collection md-collection-item.collection-item.active {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	md-collection .collection md-collection-item.collection-item .secondary-content {
-		color: ${accentColor};
-	}
-
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
-		background-color: ${primaryColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
-		background-color: ${errorColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
-		color: ${primaryColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
-		color: ${errorColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}	 
-
-
-	/* datepicker */
-	.datepicker-date-display {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-table td.is-today {
-		color: ${accentColor};
-	}
-
-	.datepicker-table td.is-selected {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-day-button:focus {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
-	}
-
-	.datepicker-cancel,
-	.datepicker-today,
-	.datepicker-done {
-		color: ${accentColor};
-	}
-	
-	.datepicker-clear {
-		color: ${errorColor};
-	}
-
-	.datepicker-controls .select-wrapper input.select-dropdown:focus {
-			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
-	}
-
-	/* text input */
-	input:not([type]):focus:not([readonly]),
-	input[type=text]:not(.browser-default):focus:not([readonly]),
-	input[type=password]:not(.browser-default):focus:not([readonly]),
-	input[type=email]:not(.browser-default):focus:not([readonly]),
-	input[type=url]:not(.browser-default):focus:not([readonly]),
-	input[type=time]:not(.browser-default):focus:not([readonly]),
-	input[type=date]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
-	input[type=tel]:not(.browser-default):focus:not([readonly]),
-	input[type=number]:not(.browser-default):focus:not([readonly]),
-	input[type=search]:not(.browser-default):focus:not([readonly]),
-	textarea.materialize-textarea:focus:not([readonly]) {
-		border-bottom: 1px solid ${accentColor};
-		box-shadow: 0 1px 0 0 ${accentColor};
-	}
-
-	.input-field .prefix.active {
-		color: ${accentColor}
-	}
-
-	/* text input label */
-	input:not([type]):focus:not([readonly]) + label,
-	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
-	textarea.materialize-textarea:focus:not([readonly]) + label {
-		color: ${accentColor}
-	}
-
-	/* text input error label */
-	md-input input:not([type]).invalid + label:after,
-	md-input input:not([type]):focus.invalid + label:after,
-	md-input input[type=text].invalid + label:after,
-	md-input input[type=text]:focus.invalid + label:after,
-	md-input input[type=password].invalid + label:after,
-	md-input input[type=password]:focus.invalid + label:after,
-	md-input input[type=email].invalid + label:after,
-	md-input input[type=email]:focus.invalid + label:after,
-	md-input input[type=url].invalid + label:after,
-	md-input input[type=url]:focus.invalid + label:after,
-	md-input input[type=time].invalid + label:after,
-	md-input input[type=time]:focus.invalid + label:after,
-	md-input input[type=date].invalid + label:after,
-	md-input input[type=date]:focus.invalid + label:after,
-	md-input input[type=datetime].invalid + label:after,
-	md-input input[type=datetime]:focus.invalid + label:after,
-	md-input input[type=datetime-local].invalid + label:after,
-	md-input input[type=datetime-local]:focus.invalid + label:after,
-	md-input input[type=tel].invalid + label:after,
-	md-input input[type=tel]:focus.invalid + label:after,
-	md-input input[type=number].invalid + label:after,
-	md-input input[type=number]:focus.invalid + label:after,
-	md-input input[type=search].invalid + label:after,
-	md-input input[type=search]:focus.invalid + label:after,
-	md-input textarea.materialize-textarea.invalid + label:after,
-	md-input textarea.materialize-textarea:focus.invalid + label:after
-	{
-		color: ${errorColor}
-	}
-
-	/* text input success border */
-	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
-		border-bottom: 1px solid ${successColor};
-		box-shadow: 0 1px 0 0 ${successColor};
-	}
-
-	/* validation helper-text tweaks */
-	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
-	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
-	input.valid ~ .helper-text:not([data-success]),
-	input.invalid ~ .helper-text:not([data-error]) {
-		display: none;
-	}
-
-	.input-field .helper-text {
-		/* original helper-text is too low */
-		transform: translateY(-7px); 
-	}
-
-	/* pagination */
-	md-pagination .pagination li.active {
-		background-color: ${primaryColor}
-	}
-
-	/* progress */
-	md-progress .progress {
-		background-color: ${accentColor | lighten:2};
-	}
-
-	md-progress .progress .determinate, md-progress .progress .indeterminate {
-		background-color: ${accentColor};
-	}
-
-	/* radio input */
-	md-radio input[type="radio"]:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:before {
-		border: 2px solid ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	/* range */
-	md-range .range-field input[type="range"]::-webkit-slider-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-moz-range-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-ms-thumb {
-		background: ${accentColor};
-	}
-	md-range input[type="range"] + .thumb {
-		background-color: ${accentColor} !important;
-	}
-
-	/* select */
-	.dropdown-content li > a, .dropdown-content li > span {
-		color: ${accentColor};
-	}
-
-	.select-wrapper input.select-dropdown:focus {
-		border-bottom: 1px solid ${accentColor};
-	}
-
-	/* side-nav */
-	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
-		background-color: ${primaryColor};
-	}
-
-	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
-		background-color: ${primaryColor};
-	}
-
-	/* slider */
-	.slider .indicators .indicator-item.active {
-		background-color: ${accentColor};
-	}
-
-	/* switch */
-	md-switch.switch label input[type=checkbox]:checked + .lever {
-		background-color: ${accentColor | lighten:1};
-	}
-	md-switch.switch label input[type=checkbox]:checked + .lever:after {
-		background-color: ${accentColor};
-	}
-
-	/* tabs */
-
-	.tab.primary-text a {
-		color: ${primaryColor};
-	}
-	.tab.primary-text a.active {
-		color: ${primaryColor};
-	}
-	.tab.waves-effect {
-		position: static;
-	}
-	.tab.primary-text a:hover {
-		color: ${primaryColor | lighten:2};
-	}
-	.tabs .indicator {
-		background-color: ${primaryColor | lighten:2};
-	}
-	.tabs .tab a:focus, .tabs .tab a:focus.active {
-		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
-		outline: none;
-	}
-
-	/* timepicker */
-	.timepicker-digital-display {
-		background-color: ${accentColor};
-	}
-	
-	.timepicker-tick.active,
-	.timepicker-tick:hover {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
-	}
-
-	.timepicker-canvas line {
-			stroke: ${accentColor};
-	}
-		
-	.timepicker-canvas-bearing {
-		fill: ${accentColor};
-	}
-
-	.timepicker-canvas-bg {
-		fill: ${accentColor};
-	}
-	
-	.timepicker-clear {
-		color: ${errorColor};
-	}
-	
-	.timepicker-close {
-		color: ${accentColor};
-	}
-		
-	/* well */
-	md-well li.active {
-		border-right: 2px solid ${primaryColor};
-		background-color: ${primaryColor | lighten:3};
-	}
-
-	/* footer */
-	footer.page-footer {
-		background-color: ${primaryColor};
-	}
-
-	/* lookup */
-	md-lookup .dropdown-div li {
-		color: ${accentColor};
-	}
-
-	md-lookup .dropdown-div li a {
-		color: ${accentColor};
-	}
-
-	/* tap target */
-	.tap-target {
-		background-color: ${primaryColor};
-	}
-
-	</style>
-</template>
+<template>
+	<require from="./color-value-converters"></require>
+
+	<!--
+		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
+		and using Materialize terminology (darken/lighten instead of hue numbers)
+		the used palettes here consist of:
+		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
+		Accent	- lighten-1 (400), lighten-3 (200)
+
+		These should optionally be defined by the user. At the moment, they are
+		calculated and even not exact (but close).
+
+		Focused elements are an exception, these use "lighten-0.5" which is
+		not specified anywhere.
+	-->
+
+	<style>
+	.primary {
+		background-color: ${primaryColor};
+		color: white;
+	}
+
+	.primary-text {
+		/*background-color: white;*/
+		color: ${primaryColor};
+	}
+
+	.waves-effect.waves-primary .waves-ripple {
+		background-color: ${primaryColor};
+	}
+
+	.waves-effect.waves-accent .waves-ripple {
+		background-color: ${accentColor};
+	}
+
+	.accent {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.accent-text {
+		/*background-color: white;*/
+		color: ${accentColor};
+	}
+
+	.error {
+		background-color: ${errorColor};
+	}
+
+	.error-text {
+		color: ${errorColor}
+	}
+
+	.success {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.success-text {
+		color: ${accentColor};
+	}
+
+	/* buttons */
+	.btn.primary, .btn-flat.primary, .btn-large.primary {
+		transition: .2s ease-out;
+	}
+	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
+		background-color: ${primaryColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
+		background-color: ${primaryColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+	.btn-flat:not(.disabled):hover {
+		/*background-color: ${accentColor | lighten:3};*/
+		background-color: rgba(50, 50, 50, .15);
+		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+	.btn-flat:focus {
+		/*background-color: ${accentColor | lighten:2};*/
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+
+	.btn.accent, .btn-flat.accent, .btn-large.accent {
+		transition: .2s ease-out;
+	}
+	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
+		background-color: ${accentColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
+		background-color: ${accentColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+
+	.btn.error, .btn-flat.error, .btn-large.error {
+		transition: .2s ease-out;
+	}
+	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
+		background-color: ${errorColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
+		background-color: ${errorColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+		
+	/* checkbox */
+	[type="checkbox"]:checked + label:before {
+		border-right-color: ${accentColor};
+		border-bottom-color: ${accentColor};
+	}
+
+	[type="checkbox"].filled-in:checked + label:after {
+		border-color: ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	[type="checkbox"]:indeterminate + label:before {
+		border-right-color: ${accentColor};
+	}
+
+	/* collection */
+	md-collection .collection md-collection-item.collection-item.active {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	md-collection .collection md-collection-item.collection-item .secondary-content {
+		color: ${accentColor};
+	}
+
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
+		background-color: ${primaryColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
+		background-color: ${errorColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
+		color: ${primaryColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
+		color: ${errorColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}	 
+
+
+	/* datepicker */
+	.datepicker-date-display {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-table td.is-today {
+		color: ${accentColor};
+	}
+
+	.datepicker-table td.is-selected {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-day-button:focus {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
+	}
+
+	.datepicker-cancel,
+	.datepicker-today,
+	.datepicker-done {
+		color: ${accentColor};
+	}
+	
+	.datepicker-clear {
+		color: ${errorColor};
+	}
+
+	.datepicker-controls .select-wrapper input.select-dropdown:focus {
+			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
+	}
+
+	/* text input */
+	input:not([type]):focus:not([readonly]),
+	input[type=text]:not(.browser-default):focus:not([readonly]),
+	input[type=password]:not(.browser-default):focus:not([readonly]),
+	input[type=email]:not(.browser-default):focus:not([readonly]),
+	input[type=url]:not(.browser-default):focus:not([readonly]),
+	input[type=time]:not(.browser-default):focus:not([readonly]),
+	input[type=date]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+	input[type=tel]:not(.browser-default):focus:not([readonly]),
+	input[type=number]:not(.browser-default):focus:not([readonly]),
+	input[type=search]:not(.browser-default):focus:not([readonly]),
+	textarea.materialize-textarea:focus:not([readonly]) {
+		border-bottom: 1px solid ${accentColor};
+		box-shadow: 0 1px 0 0 ${accentColor};
+	}
+
+	.input-field .prefix.active {
+		color: ${accentColor}
+	}
+
+	/* text input label */
+	input:not([type]):focus:not([readonly]) + label,
+	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
+	textarea.materialize-textarea:focus:not([readonly]) + label {
+		color: ${accentColor}
+	}
+
+	/* text input error label */
+	md-input input:not([type]).invalid + label:after,
+	md-input input:not([type]):focus.invalid + label:after,
+	md-input input[type=text].invalid + label:after,
+	md-input input[type=text]:focus.invalid + label:after,
+	md-input input[type=password].invalid + label:after,
+	md-input input[type=password]:focus.invalid + label:after,
+	md-input input[type=email].invalid + label:after,
+	md-input input[type=email]:focus.invalid + label:after,
+	md-input input[type=url].invalid + label:after,
+	md-input input[type=url]:focus.invalid + label:after,
+	md-input input[type=time].invalid + label:after,
+	md-input input[type=time]:focus.invalid + label:after,
+	md-input input[type=date].invalid + label:after,
+	md-input input[type=date]:focus.invalid + label:after,
+	md-input input[type=datetime].invalid + label:after,
+	md-input input[type=datetime]:focus.invalid + label:after,
+	md-input input[type=datetime-local].invalid + label:after,
+	md-input input[type=datetime-local]:focus.invalid + label:after,
+	md-input input[type=tel].invalid + label:after,
+	md-input input[type=tel]:focus.invalid + label:after,
+	md-input input[type=number].invalid + label:after,
+	md-input input[type=number]:focus.invalid + label:after,
+	md-input input[type=search].invalid + label:after,
+	md-input input[type=search]:focus.invalid + label:after,
+	md-input textarea.materialize-textarea.invalid + label:after,
+	md-input textarea.materialize-textarea:focus.invalid + label:after
+	{
+		color: ${errorColor}
+	}
+
+	/* text input success border */
+	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+		border-bottom: 1px solid ${successColor};
+		box-shadow: 0 1px 0 0 ${successColor};
+	}
+
+	/* validation helper-text tweaks */
+	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
+	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
+	input.valid ~ .helper-text:not([data-success]),
+	input.invalid ~ .helper-text:not([data-error]) {
+		display: none;
+	}
+
+	.input-field .helper-text {
+		/* original helper-text is too low */
+		transform: translateY(-7px); 
+	}
+
+	/* pagination */
+	md-pagination .pagination li.active {
+		background-color: ${primaryColor}
+	}
+
+	/* progress */
+	md-progress .progress {
+		background-color: ${accentColor | lighten:2};
+	}
+
+	md-progress .progress .determinate, md-progress .progress .indeterminate {
+		background-color: ${accentColor};
+	}
+
+	/* radio input */
+	md-radio input[type="radio"]:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:before {
+		border: 2px solid ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	/* range */
+	md-range .range-field input[type="range"]::-webkit-slider-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-moz-range-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-ms-thumb {
+		background: ${accentColor};
+	}
+	md-range input[type="range"] + .thumb {
+		background-color: ${accentColor} !important;
+	}
+
+	/* select */
+	.dropdown-content li > a, .dropdown-content li > span {
+		color: ${accentColor};
+	}
+
+	.select-wrapper input.select-dropdown:focus {
+		border-bottom: 1px solid ${accentColor};
+	}
+
+	/* side-nav */
+	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+		background-color: ${primaryColor};
+	}
+
+	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+		background-color: ${primaryColor};
+	}
+
+	/* slider */
+	.slider .indicators .indicator-item.active {
+		background-color: ${accentColor};
+	}
+
+	/* switch */
+	md-switch.switch label input[type=checkbox]:checked + .lever {
+		background-color: ${accentColor | lighten:1};
+	}
+	md-switch.switch label input[type=checkbox]:checked + .lever:after {
+		background-color: ${accentColor};
+	}
+
+	/* tabs */
+
+	.tab.primary-text a {
+		color: ${primaryColor};
+	}
+	.tab.primary-text a.active {
+		color: ${primaryColor};
+	}
+	.tab.waves-effect {
+		position: static;
+	}
+	.tab.primary-text a:hover {
+		color: ${primaryColor | lighten:2};
+	}
+	.tabs .indicator {
+		background-color: ${primaryColor | lighten:2};
+	}
+	.tabs .tab a:focus, .tabs .tab a:focus.active {
+		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
+		outline: none;
+	}
+
+	/* timepicker */
+	.timepicker-digital-display {
+		background-color: ${accentColor};
+	}
+	
+	.timepicker-tick.active,
+	.timepicker-tick:hover {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
+	}
+
+	.timepicker-canvas line {
+			stroke: ${accentColor};
+	}
+		
+	.timepicker-canvas-bearing {
+		fill: ${accentColor};
+	}
+
+	.timepicker-canvas-bg {
+		fill: ${accentColor};
+	}
+	
+	.timepicker-clear {
+		color: ${errorColor};
+	}
+	
+	.timepicker-close {
+		color: ${accentColor};
+	}
+		
+	/* well */
+	md-well li.active {
+		border-right: 2px solid ${primaryColor};
+		background-color: ${primaryColor | lighten:3};
+	}
+
+	/* footer */
+	footer.page-footer {
+		background-color: ${primaryColor};
+	}
+
+	/* lookup */
+	md-lookup .dropdown-div li {
+		color: ${accentColor};
+	}
+
+	md-lookup .dropdown-div li a {
+		color: ${accentColor};
+	}
+
+	/* tap target */
+	.tap-target {
+		background-color: ${primaryColor};
+	}
+
+	</style>
+</template>
diff --git a/dist/native-modules/dropdown/dropdown-element.html b/dist/native-modules/dropdown/dropdown-element.html
index a46fbf03..f2155d45 100644
--- a/dist/native-modules/dropdown/dropdown-element.html
+++ b/dist/native-modules/dropdown/dropdown-element.html
@@ -1,6 +1,6 @@
-<template md-button class="dropdown-trigger" data-activates="${controlId}">
-	${title}
-	<div id="${controlId}" class='dropdown-content'>
-		<slot></slot>
-	</div>
-</template>
+<template md-button class="dropdown-trigger" data-activates="${controlId}">
+	${title}
+	<div id="${controlId}" class='dropdown-content'>
+		<slot></slot>
+	</div>
+</template>
diff --git a/dist/native-modules/fab/fab.html b/dist/native-modules/fab/fab.html
index eb692899..bfdd5ae9 100644
--- a/dist/native-modules/fab/fab.html
+++ b/dist/native-modules/fab/fab.html
@@ -1,3 +1,3 @@
-<template>
-	<slot></slot>
-</template>
+<template>
+	<slot></slot>
+</template>
diff --git a/dist/native-modules/file/file.html b/dist/native-modules/file/file.html
index 5f28d0c1..deb9f946 100644
--- a/dist/native-modules/file/file.html
+++ b/dist/native-modules/file/file.html
@@ -1,11 +1,11 @@
-<template>
-	<div class="file-field input-field">
-		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
-			<span>${caption}</span>
-			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
-		</div>
-		<div class="file-path-wrapper">
-			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
-		</div>
-	</div>
-</template>
+<template>
+	<div class="file-field input-field">
+		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
+			<span>${caption}</span>
+			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
+		</div>
+		<div class="file-path-wrapper">
+			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
+		</div>
+	</div>
+</template>
diff --git a/dist/native-modules/input/input.css b/dist/native-modules/input/input.css
index b0e62ac2..9655defa 100644
--- a/dist/native-modules/input/input.css
+++ b/dist/native-modules/input/input.css
@@ -1,3 +1,3 @@
-md-input .input-field label.active {
-  width: 100%;
-}
+md-input .input-field label.active {
+  width: 100%;
+}
diff --git a/dist/native-modules/navbar/navbar.css b/dist/native-modules/navbar/navbar.css
index 0bbd3a2a..57faf733 100644
--- a/dist/native-modules/navbar/navbar.css
+++ b/dist/native-modules/navbar/navbar.css
@@ -1,7 +1,7 @@
-md-navbar .primary {
-  transition: all .3s ease-out;
-}
-
-md-navbar .primary.auto-height {
-  height: auto;
-}
+md-navbar .primary {
+  transition: all .3s ease-out;
+}
+
+md-navbar .primary.auto-height {
+  height: auto;
+}
diff --git a/dist/native-modules/pagination/pagination.html b/dist/native-modules/pagination/pagination.html
index c79e0e67..57ffef31 100644
--- a/dist/native-modules/pagination/pagination.html
+++ b/dist/native-modules/pagination/pagination.html
@@ -1,25 +1,25 @@
-<template>
-	<ul class="pagination">
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
-		</template>
-		<template if.bind="showPageLinks">
-			<template repeat.for="p of pageLinks">
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
-				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
-          <a>${p+1}</a>
-        </li>
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
-			</template>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
-		</template>
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
-		</template>
-	</ul>
-</template>
+<template>
+	<ul class="pagination">
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
+		</template>
+		<template if.bind="showPageLinks">
+			<template repeat.for="p of pageLinks">
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
+				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
+          <a>${p+1}</a>
+        </li>
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
+			</template>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
+		</template>
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
+		</template>
+	</ul>
+</template>
diff --git a/dist/native-modules/progress/progress.html b/dist/native-modules/progress/progress.html
index 91a98f21..146a3572 100644
--- a/dist/native-modules/progress/progress.html
+++ b/dist/native-modules/progress/progress.html
@@ -1,73 +1,73 @@
-<template>
-	<template if.bind="type === 'linear'">
-		<div class="progress">
-			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color !== 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-${color}-only">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color === 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-blue">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-red">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-yellow">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-green">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-</template>
+<template>
+	<template if.bind="type === 'linear'">
+		<div class="progress">
+			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color !== 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-${color}-only">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color === 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-blue">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-red">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-yellow">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-green">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+</template>
diff --git a/dist/native-modules/range/range.html b/dist/native-modules/range/range.html
index 3978a0ff..b1f2c035 100644
--- a/dist/native-modules/range/range.html
+++ b/dist/native-modules/range/range.html
@@ -1,6 +1,6 @@
-<template>
-	<require from="./range.css"></require>
-	<p class="range-field">
-		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
-	</p>
-</template>
+<template>
+	<require from="./range.css"></require>
+	<p class="range-field">
+		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
+	</p>
+</template>
diff --git a/dist/native-modules/sidenav/sidenav.html b/dist/native-modules/sidenav/sidenav.html
index e9d05810..8e877943 100644
--- a/dist/native-modules/sidenav/sidenav.html
+++ b/dist/native-modules/sidenav/sidenav.html
@@ -1,6 +1,6 @@
-<template>
-  <require from="./sidenav.css"></require>
-  <div id="${controlId}" class="sidenav" ref="sidenav">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <require from="./sidenav.css"></require>
+  <div id="${controlId}" class="sidenav" ref="sidenav">
+    <slot></slot>
+  </div>
+</template>
diff --git a/dist/native-modules/switch/switch.html b/dist/native-modules/switch/switch.html
index b46b6bb9..8c856a65 100644
--- a/dist/native-modules/switch/switch.html
+++ b/dist/native-modules/switch/switch.html
@@ -1,9 +1,9 @@
-<template class="switch">
-  <require from="./switch.css"></require>
-  <label>
-    ${labelOff}
-    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
-    <span class="lever"></span>
-    ${labelOn}
-  </label>
-</template>
+<template class="switch">
+  <require from="./switch.css"></require>
+  <label>
+    ${labelOff}
+    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
+    <span class="lever"></span>
+    ${labelOn}
+  </label>
+</template>
diff --git a/dist/native-modules/well/md-well.html b/dist/native-modules/well/md-well.html
index 079d8f16..859f51c4 100644
--- a/dist/native-modules/well/md-well.html
+++ b/dist/native-modules/well/md-well.html
@@ -1,20 +1,20 @@
-<template>
-	<style>
-		md-well li[md-waves] {
-			display: block;
-		}
-
-		md-well li a {
-			padding: 5px;
-			display: inline-block;
-			width: 100%;
-		}
-
-	</style>
-
-	<ul class="z-depth-1">
-		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-			<a href.bind="row.href">${row.title}</a>
-		</li>
-	</ul>
-</template>
+<template>
+	<style>
+		md-well li[md-waves] {
+			display: block;
+		}
+
+		md-well li a {
+			padding: 5px;
+			display: inline-block;
+			width: 100%;
+		}
+
+	</style>
+
+	<ul class="z-depth-1">
+		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
+			<a href.bind="row.href">${row.title}</a>
+		</li>
+	</ul>
+</template>
diff --git a/dist/system/autocomplete/autocomplete.js b/dist/system/autocomplete/autocomplete.js
index 494253e1..2109cd13 100644
--- a/dist/system/autocomplete/autocomplete.js
+++ b/dist/system/autocomplete/autocomplete.js
@@ -19,7 +19,9 @@ System.register(["tslib", "../aurelia"], function (exports_1, context_1) {
                     this.values = {};
                 }
                 MdAutoComplete.prototype.valuesChanged = function () {
-                    this.instance.updateData(this.values);
+                    if (this.instance) {
+                        this.instance.updateData(this.values);
+                    }
                 };
                 MdAutoComplete.prototype.bind = function () {
                     // suppress initial change handler calls
diff --git a/dist/system/autocomplete/autocomplete.js.map b/dist/system/autocomplete/autocomplete.js.map
index 14d8d9fa..ab4efcd8 100644
--- a/dist/system/autocomplete/autocomplete.js.map
+++ b/dist/system/autocomplete/autocomplete.js.map
@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;gBAKC,wBAAoB,OAAgB;oBAAhB,YAAO,GAAP,OAAO,CAAS;oBAEpC,UAAK,GAAY,IAAI,CAAC;oBAStB,WAAM,GAAQ,EAAE,CAAC;gBAXuB,CAAC;gBAYzC,sCAAa,GAAb;oBACC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACvC,CAAC;gBAID,6BAAI,GAAJ;oBACC,wCAAwC;gBACzC,CAAC;gBAED,iCAAQ,GAAR;oBAAA,iBAoBC;oBAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;wBACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;qBAC1B;yBACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;wBAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;qBACzD;yBACI;wBACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;qBAC3F;oBACD,IAAI,OAAO,GAAmC;wBAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;wBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;wBACzB,cAAc,EAAE,UAAA,IAAI;4BACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;wBACjE,CAAC;qBACD,CAAC;oBACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACzD,CAAC;gBAED,iCAAQ,GAAR;oBACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACzB,CAAC;gBAzCD;oBADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;6DACX;gBAGd;oBADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iEACP;gBAGlB;oBADC,EAAE,CAAC,QAAQ;;8DACK;gBAZL,cAAc;oBAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;oBACrC,EAAE,CAAC,UAAU;6DAEgB,OAAO;mBADxB,cAAc,CAgD1B;gBAAD,qBAAC;aAAA,AAhDD"}
\ No newline at end of file
+{"version":3,"file":"autocomplete.js","sourceRoot":"","sources":["../../../src/autocomplete/autocomplete.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;gBAKC,wBAAoB,OAAgB;oBAAhB,YAAO,GAAP,OAAO,CAAS;oBAEpC,UAAK,GAAY,IAAI,CAAC;oBAStB,WAAM,GAAQ,EAAE,CAAC;gBAXuB,CAAC;gBAYzC,sCAAa,GAAb;oBACC,IAAI,IAAI,CAAC,QAAQ,EAAE;wBAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;qBACtC;gBACF,CAAC;gBAID,6BAAI,GAAJ;oBACC,wCAAwC;gBACzC,CAAC;gBAED,iCAAQ,GAAR;oBAAA,iBAoBC;oBAnBA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO,EAAE;wBACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;qBAC1B;yBACI,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;wBAC3D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;qBACzD;yBACI;wBACJ,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;qBAC3F;oBACD,IAAI,OAAO,GAAmC;wBAC7C,IAAI,EAAE,IAAI,CAAC,MAAM;wBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;wBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;wBACzB,cAAc,EAAE,UAAA,IAAI;4BACnB,EAAE,CAAC,oBAAoB,CAAC,KAAI,CAAC,OAAO,EAAE,cAAc,EAAE,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;wBACjE,CAAC;qBACD,CAAC;oBACF,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;oBACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACzD,CAAC;gBAED,iCAAQ,GAAR;oBACC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACzB,CAAC;gBA3CD;oBADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;6DACX;gBAGd;oBADC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ;;iEACP;gBAGlB;oBADC,EAAE,CAAC,QAAQ;;8DACK;gBAZL,cAAc;oBAF1B,EAAE,CAAC,eAAe,CAAC,iBAAiB,CAAC;oBACrC,EAAE,CAAC,UAAU;6DAEgB,OAAO;mBADxB,cAAc,CAkD1B;gBAAD,qBAAC;aAAA,AAlDD"}
\ No newline at end of file
diff --git a/dist/system/breadcrumbs/breadcrumbs.html b/dist/system/breadcrumbs/breadcrumbs.html
index edb1e190..06092d2f 100644
--- a/dist/system/breadcrumbs/breadcrumbs.html
+++ b/dist/system/breadcrumbs/breadcrumbs.html
@@ -1,15 +1,15 @@
-<template>
-	<require from="./breadcrumbs.css"></require>
-	<require from="./instructionFilter"></require>
-	<nav>
-		<div class="nav-wrapper">
-			<div class="col s12">
-				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
-					<a click.delegate="navigate(instruction)" class="breadcrumb">
-						${instruction.config.title}
-					</a>
-				</template>
-			</div>
-		</div>
-	</nav>
-</template>
+<template>
+	<require from="./breadcrumbs.css"></require>
+	<require from="./instructionFilter"></require>
+	<nav>
+		<div class="nav-wrapper">
+			<div class="col s12">
+				<template repeat.for="instruction of router.currentInstruction.getAllInstructions() | instructionFilter">
+					<a click.delegate="navigate(instruction)" class="breadcrumb">
+						${instruction.config.title}
+					</a>
+				</template>
+			</div>
+		</div>
+	</nav>
+</template>
diff --git a/dist/system/carousel/carousel-item.html b/dist/system/carousel/carousel-item.html
index 0622c18b..186ab282 100644
--- a/dist/system/carousel/carousel-item.html
+++ b/dist/system/carousel/carousel-item.html
@@ -1,7 +1,7 @@
-<template class="carousel-item">
-	<a if.bind="href" href.bind="href">
-		<img if.bind="image" src.bind="image" />
-	</a>
-	<img if.bind="!href && image" src.bind="image" />
-	<slot></slot>
-</template>
+<template class="carousel-item">
+	<a if.bind="href" href.bind="href">
+		<img if.bind="image" src.bind="image" />
+	</a>
+	<img if.bind="!href && image" src.bind="image" />
+	<slot></slot>
+</template>
diff --git a/dist/system/checkbox/checkbox.html b/dist/system/checkbox/checkbox.html
index 7b9eaeaa..940e8619 100644
--- a/dist/system/checkbox/checkbox.html
+++ b/dist/system/checkbox/checkbox.html
@@ -1,6 +1,6 @@
-<template>
-	<label for="${controlId}">
-		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
-		<span><slot></slot></span>
-	</label>
-</template>
+<template>
+	<label for="${controlId}">
+		<input type="checkbox" id="${controlId}" checked.bind="checked" matcher.bind="matcher" model.bind="model" ref="checkbox">
+		<span><slot></slot></span>
+	</label>
+</template>
diff --git a/dist/system/chip/chip.html b/dist/system/chip/chip.html
index 5ae13efe..aebe7257 100644
--- a/dist/system/chip/chip.html
+++ b/dist/system/chip/chip.html
@@ -1,5 +1,5 @@
-<template class="chip">
-	<require from="./chip.css"></require>
-	<slot></slot>
-	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
-</template>
+<template class="chip">
+	<require from="./chip.css"></require>
+	<slot></slot>
+	<i show.bind="hasClose" class="material-icons" click.delegate="closeChip()">close</i>
+</template>
diff --git a/dist/system/click-counter/click-counter.html b/dist/system/click-counter/click-counter.html
index 17a8bfb7..a768c4d4 100644
--- a/dist/system/click-counter/click-counter.html
+++ b/dist/system/click-counter/click-counter.html
@@ -1,7 +1,7 @@
-<template>
-  <h2>Click counter</h2>
-
-  <button md-waves class="btn" click.delegate="increment()">Button</button>
-
-  <h2>Button was clicked ${count} times</h2>
-</template>
+<template>
+  <h2>Click counter</h2>
+
+  <button md-waves class="btn" click.delegate="increment()">Button</button>
+
+  <h2>Button was clicked ${count} times</h2>
+</template>
diff --git a/dist/system/collection/md-collection-selector.html b/dist/system/collection/md-collection-selector.html
index bff44f08..7a6bca30 100644
--- a/dist/system/collection/md-collection-selector.html
+++ b/dist/system/collection/md-collection-selector.html
@@ -1,8 +1,8 @@
-<template>
-	<require from="./md-collection-selector.css"></require>
-	<div class="md-collection-selector__checkbox">
-		<slot></slot>
-		<div>
-			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
-		</div>
-</template>
+<template>
+	<require from="./md-collection-selector.css"></require>
+	<div class="md-collection-selector__checkbox">
+		<slot></slot>
+		<div>
+			<md-checkbox checked.two-way="isSelected" disabled.bind="mdDisabled"></md-checkbox>
+		</div>
+</template>
diff --git a/dist/system/colors/md-colors-legacy.html b/dist/system/colors/md-colors-legacy.html
index e3c3168e..ef52c84f 100644
--- a/dist/system/colors/md-colors-legacy.html
+++ b/dist/system/colors/md-colors-legacy.html
@@ -1,441 +1,441 @@
-<template>
-	<require from="./color-value-converters"></require>
-
-	<!--
-		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
-		and using Materialize terminology (darken/lighten instead of hue numbers)
-		the used palettes here consist of:
-		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
-		Accent	- lighten-1 (400), lighten-3 (200)
-
-		These should optionally be defined by the user. At the moment, they are
-		calculated and even not exact (but close).
-
-		Focused elements are an exception, these use "lighten-0.5" which is
-		not specified anywhere.
-	-->
-
-	<style>
-	.primary {
-		background-color: ${primaryColor};
-		color: white;
-	}
-
-	.primary-text {
-		/*background-color: white;*/
-		color: ${primaryColor};
-	}
-
-	.waves-effect.waves-primary .waves-ripple {
-		background-color: ${primaryColor};
-	}
-
-	.waves-effect.waves-accent .waves-ripple {
-		background-color: ${accentColor};
-	}
-
-	.accent {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.accent-text {
-		/*background-color: white;*/
-		color: ${accentColor};
-	}
-
-	.error {
-		background-color: ${errorColor};
-	}
-
-	.error-text {
-		color: ${errorColor}
-	}
-
-	.success {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	.success-text {
-		color: ${accentColor};
-	}
-
-	/* buttons */
-	.btn.primary, .btn-flat.primary, .btn-large.primary {
-		transition: .2s ease-out;
-	}
-	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
-		background-color: ${primaryColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
-		background-color: ${primaryColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-	.btn-flat:not(.disabled):hover {
-		/*background-color: ${accentColor | lighten:3};*/
-		background-color: rgba(50, 50, 50, .15);
-		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-	.btn-flat:focus {
-		/*background-color: ${accentColor | lighten:2};*/
-		background-color: transparent;
-		border: none;
-		box-shadow: none;
-		transition: .2s ease-out;
-	}
-
-	.btn.accent, .btn-flat.accent, .btn-large.accent {
-		transition: .2s ease-out;
-	}
-	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
-		background-color: ${accentColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
-		background-color: ${accentColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-
-	.btn.error, .btn-flat.error, .btn-large.error {
-		transition: .2s ease-out;
-	}
-	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
-		background-color: ${errorColor | lighten:1};
-		transition: .2s ease-out;
-	}
-	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
-		background-color: ${errorColor | lighten:0.5};
-		transition: .2s ease-out;
-	}
-		
-	/* checkbox */
-	[type="checkbox"]:checked + label:before {
-		border-right-color: ${accentColor};
-		border-bottom-color: ${accentColor};
-	}
-
-	[type="checkbox"].filled-in:checked + label:after {
-		border-color: ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	[type="checkbox"]:indeterminate + label:before {
-		border-right-color: ${accentColor};
-	}
-
-	/* collection */
-	md-collection .collection md-collection-item.collection-item.active {
-		background-color: ${accentColor};
-		color: white;
-	}
-
-	md-collection .collection md-collection-item.collection-item .secondary-content {
-		color: ${accentColor};
-	}
-
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
-		background-color: ${primaryColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
-		background-color: ${errorColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
-		background-color: ${accentColor};
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
-		color: ${primaryColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
-		color: ${errorColor};
-		background-color: transparent;
-	}
-	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
-		color: ${accentColor};
-		background-color: transparent;
-	}	 
-
-
-	/* datepicker */
-	.datepicker-date-display {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-table td.is-today {
-		color: ${accentColor};
-	}
-
-	.datepicker-table td.is-selected {
-		background-color: ${accentColor};
-	}
-
-	.datepicker-day-button:focus {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
-	}
-
-	.datepicker-cancel,
-	.datepicker-today,
-	.datepicker-done {
-		color: ${accentColor};
-	}
-	
-	.datepicker-clear {
-		color: ${errorColor};
-	}
-
-	.datepicker-controls .select-wrapper input.select-dropdown:focus {
-			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
-	}
-
-	/* text input */
-	input:not([type]):focus:not([readonly]),
-	input[type=text]:not(.browser-default):focus:not([readonly]),
-	input[type=password]:not(.browser-default):focus:not([readonly]),
-	input[type=email]:not(.browser-default):focus:not([readonly]),
-	input[type=url]:not(.browser-default):focus:not([readonly]),
-	input[type=time]:not(.browser-default):focus:not([readonly]),
-	input[type=date]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime]:not(.browser-default):focus:not([readonly]),
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
-	input[type=tel]:not(.browser-default):focus:not([readonly]),
-	input[type=number]:not(.browser-default):focus:not([readonly]),
-	input[type=search]:not(.browser-default):focus:not([readonly]),
-	textarea.materialize-textarea:focus:not([readonly]) {
-		border-bottom: 1px solid ${accentColor};
-		box-shadow: 0 1px 0 0 ${accentColor};
-	}
-
-	.input-field .prefix.active {
-		color: ${accentColor}
-	}
-
-	/* text input label */
-	input:not([type]):focus:not([readonly]) + label,
-	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
-	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
-	textarea.materialize-textarea:focus:not([readonly]) + label {
-		color: ${accentColor}
-	}
-
-	/* text input error label */
-	md-input input:not([type]).invalid + label:after,
-	md-input input:not([type]):focus.invalid + label:after,
-	md-input input[type=text].invalid + label:after,
-	md-input input[type=text]:focus.invalid + label:after,
-	md-input input[type=password].invalid + label:after,
-	md-input input[type=password]:focus.invalid + label:after,
-	md-input input[type=email].invalid + label:after,
-	md-input input[type=email]:focus.invalid + label:after,
-	md-input input[type=url].invalid + label:after,
-	md-input input[type=url]:focus.invalid + label:after,
-	md-input input[type=time].invalid + label:after,
-	md-input input[type=time]:focus.invalid + label:after,
-	md-input input[type=date].invalid + label:after,
-	md-input input[type=date]:focus.invalid + label:after,
-	md-input input[type=datetime].invalid + label:after,
-	md-input input[type=datetime]:focus.invalid + label:after,
-	md-input input[type=datetime-local].invalid + label:after,
-	md-input input[type=datetime-local]:focus.invalid + label:after,
-	md-input input[type=tel].invalid + label:after,
-	md-input input[type=tel]:focus.invalid + label:after,
-	md-input input[type=number].invalid + label:after,
-	md-input input[type=number]:focus.invalid + label:after,
-	md-input input[type=search].invalid + label:after,
-	md-input input[type=search]:focus.invalid + label:after,
-	md-input textarea.materialize-textarea.invalid + label:after,
-	md-input textarea.materialize-textarea:focus.invalid + label:after
-	{
-		color: ${errorColor}
-	}
-
-	/* text input success border */
-	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
-		border-bottom: 1px solid ${successColor};
-		box-shadow: 0 1px 0 0 ${successColor};
-	}
-
-	/* validation helper-text tweaks */
-	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
-	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
-	input.valid ~ .helper-text:not([data-success]),
-	input.invalid ~ .helper-text:not([data-error]) {
-		display: none;
-	}
-
-	.input-field .helper-text {
-		/* original helper-text is too low */
-		transform: translateY(-7px); 
-	}
-
-	/* pagination */
-	md-pagination .pagination li.active {
-		background-color: ${primaryColor}
-	}
-
-	/* progress */
-	md-progress .progress {
-		background-color: ${accentColor | lighten:2};
-	}
-
-	md-progress .progress .determinate, md-progress .progress .indeterminate {
-		background-color: ${accentColor};
-	}
-
-	/* radio input */
-	md-radio input[type="radio"]:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:before {
-		border: 2px solid ${accentColor};
-	}
-	md-radio [type="radio"].with-gap:checked + label:after {
-		border: 2px solid ${accentColor};
-		background-color: ${accentColor};
-	}
-
-	/* range */
-	md-range .range-field input[type="range"]::-webkit-slider-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-moz-range-thumb {
-		background: ${accentColor};
-	}
-	md-range .range-field input[type="range"]::-ms-thumb {
-		background: ${accentColor};
-	}
-	md-range input[type="range"] + .thumb {
-		background-color: ${accentColor} !important;
-	}
-
-	/* select */
-	.dropdown-content li > a, .dropdown-content li > span {
-		color: ${accentColor};
-	}
-
-	.select-wrapper input.select-dropdown:focus {
-		border-bottom: 1px solid ${accentColor};
-	}
-
-	/* side-nav */
-	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
-		background-color: ${primaryColor};
-	}
-
-	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
-		background-color: ${primaryColor};
-	}
-
-	/* slider */
-	.slider .indicators .indicator-item.active {
-		background-color: ${accentColor};
-	}
-
-	/* switch */
-	md-switch.switch label input[type=checkbox]:checked + .lever {
-		background-color: ${accentColor | lighten:1};
-	}
-	md-switch.switch label input[type=checkbox]:checked + .lever:after {
-		background-color: ${accentColor};
-	}
-
-	/* tabs */
-
-	.tab.primary-text a {
-		color: ${primaryColor};
-	}
-	.tab.primary-text a.active {
-		color: ${primaryColor};
-	}
-	.tab.waves-effect {
-		position: static;
-	}
-	.tab.primary-text a:hover {
-		color: ${primaryColor | lighten:2};
-	}
-	.tabs .indicator {
-		background-color: ${primaryColor | lighten:2};
-	}
-	.tabs .tab a:focus, .tabs .tab a:focus.active {
-		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
-		outline: none;
-	}
-
-	/* timepicker */
-	.timepicker-digital-display {
-		background-color: ${accentColor};
-	}
-	
-	.timepicker-tick.active,
-	.timepicker-tick:hover {
-		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
-	}
-
-	.timepicker-canvas line {
-			stroke: ${accentColor};
-	}
-		
-	.timepicker-canvas-bearing {
-		fill: ${accentColor};
-	}
-
-	.timepicker-canvas-bg {
-		fill: ${accentColor};
-	}
-	
-	.timepicker-clear {
-		color: ${errorColor};
-	}
-	
-	.timepicker-close {
-		color: ${accentColor};
-	}
-		
-	/* well */
-	md-well li.active {
-		border-right: 2px solid ${primaryColor};
-		background-color: ${primaryColor | lighten:3};
-	}
-
-	/* footer */
-	footer.page-footer {
-		background-color: ${primaryColor};
-	}
-
-	/* lookup */
-	md-lookup .dropdown-div li {
-		color: ${accentColor};
-	}
-
-	md-lookup .dropdown-div li a {
-		color: ${accentColor};
-	}
-
-	/* tap target */
-	.tap-target {
-		background-color: ${primaryColor};
-	}
-
-	</style>
-</template>
+<template>
+	<require from="./color-value-converters"></require>
+
+	<!--
+		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
+		and using Materialize terminology (darken/lighten instead of hue numbers)
+		the used palettes here consist of:
+		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
+		Accent	- lighten-1 (400), lighten-3 (200)
+
+		These should optionally be defined by the user. At the moment, they are
+		calculated and even not exact (but close).
+
+		Focused elements are an exception, these use "lighten-0.5" which is
+		not specified anywhere.
+	-->
+
+	<style>
+	.primary {
+		background-color: ${primaryColor};
+		color: white;
+	}
+
+	.primary-text {
+		/*background-color: white;*/
+		color: ${primaryColor};
+	}
+
+	.waves-effect.waves-primary .waves-ripple {
+		background-color: ${primaryColor};
+	}
+
+	.waves-effect.waves-accent .waves-ripple {
+		background-color: ${accentColor};
+	}
+
+	.accent {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.accent-text {
+		/*background-color: white;*/
+		color: ${accentColor};
+	}
+
+	.error {
+		background-color: ${errorColor};
+	}
+
+	.error-text {
+		color: ${errorColor}
+	}
+
+	.success {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	.success-text {
+		color: ${accentColor};
+	}
+
+	/* buttons */
+	.btn.primary, .btn-flat.primary, .btn-large.primary {
+		transition: .2s ease-out;
+	}
+	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
+		background-color: ${primaryColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
+		background-color: ${primaryColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+	.btn-flat:not(.disabled):hover {
+		/*background-color: ${accentColor | lighten:3};*/
+		background-color: rgba(50, 50, 50, .15);
+		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+	.btn-flat:focus {
+		/*background-color: ${accentColor | lighten:2};*/
+		background-color: transparent;
+		border: none;
+		box-shadow: none;
+		transition: .2s ease-out;
+	}
+
+	.btn.accent, .btn-flat.accent, .btn-large.accent {
+		transition: .2s ease-out;
+	}
+	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
+		background-color: ${accentColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
+		background-color: ${accentColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+
+	.btn.error, .btn-flat.error, .btn-large.error {
+		transition: .2s ease-out;
+	}
+	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
+		background-color: ${errorColor | lighten:1};
+		transition: .2s ease-out;
+	}
+	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
+		background-color: ${errorColor | lighten:0.5};
+		transition: .2s ease-out;
+	}
+		
+	/* checkbox */
+	[type="checkbox"]:checked + label:before {
+		border-right-color: ${accentColor};
+		border-bottom-color: ${accentColor};
+	}
+
+	[type="checkbox"].filled-in:checked + label:after {
+		border-color: ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	[type="checkbox"]:indeterminate + label:before {
+		border-right-color: ${accentColor};
+	}
+
+	/* collection */
+	md-collection .collection md-collection-item.collection-item.active {
+		background-color: ${accentColor};
+		color: white;
+	}
+
+	md-collection .collection md-collection-item.collection-item .secondary-content {
+		color: ${accentColor};
+	}
+
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
+		background-color: ${primaryColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
+		background-color: ${errorColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
+		background-color: ${accentColor};
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
+		color: ${primaryColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
+		color: ${errorColor};
+		background-color: transparent;
+	}
+	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
+		color: ${accentColor};
+		background-color: transparent;
+	}	 
+
+
+	/* datepicker */
+	.datepicker-date-display {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-table td.is-today {
+		color: ${accentColor};
+	}
+
+	.datepicker-table td.is-selected {
+		background-color: ${accentColor};
+	}
+
+	.datepicker-day-button:focus {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
+	}
+
+	.datepicker-cancel,
+	.datepicker-today,
+	.datepicker-done {
+		color: ${accentColor};
+	}
+	
+	.datepicker-clear {
+		color: ${errorColor};
+	}
+
+	.datepicker-controls .select-wrapper input.select-dropdown:focus {
+			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
+	}
+
+	/* text input */
+	input:not([type]):focus:not([readonly]),
+	input[type=text]:not(.browser-default):focus:not([readonly]),
+	input[type=password]:not(.browser-default):focus:not([readonly]),
+	input[type=email]:not(.browser-default):focus:not([readonly]),
+	input[type=url]:not(.browser-default):focus:not([readonly]),
+	input[type=time]:not(.browser-default):focus:not([readonly]),
+	input[type=date]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime]:not(.browser-default):focus:not([readonly]),
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+	input[type=tel]:not(.browser-default):focus:not([readonly]),
+	input[type=number]:not(.browser-default):focus:not([readonly]),
+	input[type=search]:not(.browser-default):focus:not([readonly]),
+	textarea.materialize-textarea:focus:not([readonly]) {
+		border-bottom: 1px solid ${accentColor};
+		box-shadow: 0 1px 0 0 ${accentColor};
+	}
+
+	.input-field .prefix.active {
+		color: ${accentColor}
+	}
+
+	/* text input label */
+	input:not([type]):focus:not([readonly]) + label,
+	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
+	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
+	textarea.materialize-textarea:focus:not([readonly]) + label {
+		color: ${accentColor}
+	}
+
+	/* text input error label */
+	md-input input:not([type]).invalid + label:after,
+	md-input input:not([type]):focus.invalid + label:after,
+	md-input input[type=text].invalid + label:after,
+	md-input input[type=text]:focus.invalid + label:after,
+	md-input input[type=password].invalid + label:after,
+	md-input input[type=password]:focus.invalid + label:after,
+	md-input input[type=email].invalid + label:after,
+	md-input input[type=email]:focus.invalid + label:after,
+	md-input input[type=url].invalid + label:after,
+	md-input input[type=url]:focus.invalid + label:after,
+	md-input input[type=time].invalid + label:after,
+	md-input input[type=time]:focus.invalid + label:after,
+	md-input input[type=date].invalid + label:after,
+	md-input input[type=date]:focus.invalid + label:after,
+	md-input input[type=datetime].invalid + label:after,
+	md-input input[type=datetime]:focus.invalid + label:after,
+	md-input input[type=datetime-local].invalid + label:after,
+	md-input input[type=datetime-local]:focus.invalid + label:after,
+	md-input input[type=tel].invalid + label:after,
+	md-input input[type=tel]:focus.invalid + label:after,
+	md-input input[type=number].invalid + label:after,
+	md-input input[type=number]:focus.invalid + label:after,
+	md-input input[type=search].invalid + label:after,
+	md-input input[type=search]:focus.invalid + label:after,
+	md-input textarea.materialize-textarea.invalid + label:after,
+	md-input textarea.materialize-textarea:focus.invalid + label:after
+	{
+		color: ${errorColor}
+	}
+
+	/* text input success border */
+	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
+		border-bottom: 1px solid ${successColor};
+		box-shadow: 0 1px 0 0 ${successColor};
+	}
+
+	/* validation helper-text tweaks */
+	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
+	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
+	input.valid ~ .helper-text:not([data-success]),
+	input.invalid ~ .helper-text:not([data-error]) {
+		display: none;
+	}
+
+	.input-field .helper-text {
+		/* original helper-text is too low */
+		transform: translateY(-7px); 
+	}
+
+	/* pagination */
+	md-pagination .pagination li.active {
+		background-color: ${primaryColor}
+	}
+
+	/* progress */
+	md-progress .progress {
+		background-color: ${accentColor | lighten:2};
+	}
+
+	md-progress .progress .determinate, md-progress .progress .indeterminate {
+		background-color: ${accentColor};
+	}
+
+	/* radio input */
+	md-radio input[type="radio"]:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:before {
+		border: 2px solid ${accentColor};
+	}
+	md-radio [type="radio"].with-gap:checked + label:after {
+		border: 2px solid ${accentColor};
+		background-color: ${accentColor};
+	}
+
+	/* range */
+	md-range .range-field input[type="range"]::-webkit-slider-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-moz-range-thumb {
+		background: ${accentColor};
+	}
+	md-range .range-field input[type="range"]::-ms-thumb {
+		background: ${accentColor};
+	}
+	md-range input[type="range"] + .thumb {
+		background-color: ${accentColor} !important;
+	}
+
+	/* select */
+	.dropdown-content li > a, .dropdown-content li > span {
+		color: ${accentColor};
+	}
+
+	.select-wrapper input.select-dropdown:focus {
+		border-bottom: 1px solid ${accentColor};
+	}
+
+	/* side-nav */
+	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
+		background-color: ${primaryColor};
+	}
+
+	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
+		background-color: ${primaryColor};
+	}
+
+	/* slider */
+	.slider .indicators .indicator-item.active {
+		background-color: ${accentColor};
+	}
+
+	/* switch */
+	md-switch.switch label input[type=checkbox]:checked + .lever {
+		background-color: ${accentColor | lighten:1};
+	}
+	md-switch.switch label input[type=checkbox]:checked + .lever:after {
+		background-color: ${accentColor};
+	}
+
+	/* tabs */
+
+	.tab.primary-text a {
+		color: ${primaryColor};
+	}
+	.tab.primary-text a.active {
+		color: ${primaryColor};
+	}
+	.tab.waves-effect {
+		position: static;
+	}
+	.tab.primary-text a:hover {
+		color: ${primaryColor | lighten:2};
+	}
+	.tabs .indicator {
+		background-color: ${primaryColor | lighten:2};
+	}
+	.tabs .tab a:focus, .tabs .tab a:focus.active {
+		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
+		outline: none;
+	}
+
+	/* timepicker */
+	.timepicker-digital-display {
+		background-color: ${accentColor};
+	}
+	
+	.timepicker-tick.active,
+	.timepicker-tick:hover {
+		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
+	}
+
+	.timepicker-canvas line {
+			stroke: ${accentColor};
+	}
+		
+	.timepicker-canvas-bearing {
+		fill: ${accentColor};
+	}
+
+	.timepicker-canvas-bg {
+		fill: ${accentColor};
+	}
+	
+	.timepicker-clear {
+		color: ${errorColor};
+	}
+	
+	.timepicker-close {
+		color: ${accentColor};
+	}
+		
+	/* well */
+	md-well li.active {
+		border-right: 2px solid ${primaryColor};
+		background-color: ${primaryColor | lighten:3};
+	}
+
+	/* footer */
+	footer.page-footer {
+		background-color: ${primaryColor};
+	}
+
+	/* lookup */
+	md-lookup .dropdown-div li {
+		color: ${accentColor};
+	}
+
+	md-lookup .dropdown-div li a {
+		color: ${accentColor};
+	}
+
+	/* tap target */
+	.tap-target {
+		background-color: ${primaryColor};
+	}
+
+	</style>
+</template>
diff --git a/dist/system/dropdown/dropdown-element.html b/dist/system/dropdown/dropdown-element.html
index a46fbf03..f2155d45 100644
--- a/dist/system/dropdown/dropdown-element.html
+++ b/dist/system/dropdown/dropdown-element.html
@@ -1,6 +1,6 @@
-<template md-button class="dropdown-trigger" data-activates="${controlId}">
-	${title}
-	<div id="${controlId}" class='dropdown-content'>
-		<slot></slot>
-	</div>
-</template>
+<template md-button class="dropdown-trigger" data-activates="${controlId}">
+	${title}
+	<div id="${controlId}" class='dropdown-content'>
+		<slot></slot>
+	</div>
+</template>
diff --git a/dist/system/fab/fab.html b/dist/system/fab/fab.html
index eb692899..bfdd5ae9 100644
--- a/dist/system/fab/fab.html
+++ b/dist/system/fab/fab.html
@@ -1,3 +1,3 @@
-<template>
-	<slot></slot>
-</template>
+<template>
+	<slot></slot>
+</template>
diff --git a/dist/system/file/file.html b/dist/system/file/file.html
index 5f28d0c1..deb9f946 100644
--- a/dist/system/file/file.html
+++ b/dist/system/file/file.html
@@ -1,11 +1,11 @@
-<template>
-	<div class="file-field input-field">
-		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
-			<span>${caption}</span>
-			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
-		</div>
-		<div class="file-path-wrapper">
-			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
-		</div>
-	</div>
-</template>
+<template>
+	<div class="file-field input-field">
+		<div disabled.bind="disabled" class="btn accent ${disabled ? 'disabled' : ''}">
+			<span>${caption}</span>
+			<input disabled.bind="disabled" readonly.bind="readonly" type="file" multiple.bind="multiple" files.bind="files" />
+		</div>
+		<div class="file-path-wrapper">
+			<input disabled.bind="disabled" readonly.bind="readonly" class="file-path validate" type="text" value.bind="labelValue" ref="filePath" />
+		</div>
+	</div>
+</template>
diff --git a/dist/system/input/input.css b/dist/system/input/input.css
index b0e62ac2..9655defa 100644
--- a/dist/system/input/input.css
+++ b/dist/system/input/input.css
@@ -1,3 +1,3 @@
-md-input .input-field label.active {
-  width: 100%;
-}
+md-input .input-field label.active {
+  width: 100%;
+}
diff --git a/dist/system/navbar/navbar.css b/dist/system/navbar/navbar.css
index 0bbd3a2a..57faf733 100644
--- a/dist/system/navbar/navbar.css
+++ b/dist/system/navbar/navbar.css
@@ -1,7 +1,7 @@
-md-navbar .primary {
-  transition: all .3s ease-out;
-}
-
-md-navbar .primary.auto-height {
-  height: auto;
-}
+md-navbar .primary {
+  transition: all .3s ease-out;
+}
+
+md-navbar .primary.auto-height {
+  height: auto;
+}
diff --git a/dist/system/pagination/pagination.html b/dist/system/pagination/pagination.html
index c79e0e67..57ffef31 100644
--- a/dist/system/pagination/pagination.html
+++ b/dist/system/pagination/pagination.html
@@ -1,25 +1,25 @@
-<template>
-	<ul class="pagination">
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
-		</template>
-		<template if.bind="showPageLinks">
-			<template repeat.for="p of pageLinks">
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
-				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
-          <a>${p+1}</a>
-        </li>
-				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
-			</template>
-		</template>
-		<template if.bind="showPrevNext">
-			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
-		</template>
-		<template if.bind="showFirstLast">
-			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
-		</template>
-	</ul>
-</template>
+<template>
+	<ul class="pagination">
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setFirstPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">first_page</i></a></li>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setPreviousPage()" class="${ activePage === 1 ? 'disabled' : '' }"><a><i class="material-icons">chevron_left</i></a></li>
+		</template>
+		<template if.bind="showPageLinks">
+			<template repeat.for="p of pageLinks">
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$first && p > 0"><a>...</a></span></li>
+				<li md-waves click.delegate="setActivePage(p+1)" class="${ p+1 === activePage ? 'active' : ''}">
+          <a>${p+1}</a>
+        </li>
+				<li md-waves click.delegate="setActivePage(p+1)"><span if.bind="$last && p < pages - 1"><a>...</a></span></li>
+			</template>
+		</template>
+		<template if.bind="showPrevNext">
+			<li md-waves click.delegate="setNextPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">chevron_right</i></a></li>
+		</template>
+		<template if.bind="showFirstLast">
+			<li md-waves click.delegate="setLastPage()" class="${ activePage == pages ? 'disabled' : '' }"><a><i class="material-icons">last_page</i></a></li>
+		</template>
+	</ul>
+</template>
diff --git a/dist/system/progress/progress.html b/dist/system/progress/progress.html
index 91a98f21..146a3572 100644
--- a/dist/system/progress/progress.html
+++ b/dist/system/progress/progress.html
@@ -1,73 +1,73 @@
-<template>
-	<template if.bind="type === 'linear'">
-		<div class="progress">
-			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color !== 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-${color}-only">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-	<template if.bind="type === 'circular' && color === 'flashing'">
-		<div class="preloader-wrapper ${size} active" ref="wrapper">
-			<div class="spinner-layer spinner-blue">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-red">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-yellow">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-
-			<div class="spinner-layer spinner-green">
-				<div class="circle-clipper left">
-					<div class="circle"></div>
-				</div>
-				<div class="gap-patch">
-					<div class="circle"></div>
-				</div>
-				<div class="circle-clipper right">
-					<div class="circle"></div>
-				</div>
-			</div>
-		</div>
-	</template>
-</template>
+<template>
+	<template if.bind="type === 'linear'">
+		<div class="progress">
+			<div class="${ value ? 'determinate' : 'indeterminate' }" css="width: ${ value ? value : 0 }%"></div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color !== 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-${color}-only">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+	<template if.bind="type === 'circular' && color === 'flashing'">
+		<div class="preloader-wrapper ${size} active" ref="wrapper">
+			<div class="spinner-layer spinner-blue">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-red">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-yellow">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+
+			<div class="spinner-layer spinner-green">
+				<div class="circle-clipper left">
+					<div class="circle"></div>
+				</div>
+				<div class="gap-patch">
+					<div class="circle"></div>
+				</div>
+				<div class="circle-clipper right">
+					<div class="circle"></div>
+				</div>
+			</div>
+		</div>
+	</template>
+</template>
diff --git a/dist/system/range/range.html b/dist/system/range/range.html
index 3978a0ff..b1f2c035 100644
--- a/dist/system/range/range.html
+++ b/dist/system/range/range.html
@@ -1,6 +1,6 @@
-<template>
-	<require from="./range.css"></require>
-	<p class="range-field">
-		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
-	</p>
-</template>
+<template>
+	<require from="./range.css"></require>
+	<p class="range-field">
+		<input type="range" min.to-view="min" max.to-view="max" step.to-view="step" value.bind="value" readonly.bind="readonly" ref="input" />
+	</p>
+</template>
diff --git a/dist/system/sidenav/sidenav.html b/dist/system/sidenav/sidenav.html
index e9d05810..8e877943 100644
--- a/dist/system/sidenav/sidenav.html
+++ b/dist/system/sidenav/sidenav.html
@@ -1,6 +1,6 @@
-<template>
-  <require from="./sidenav.css"></require>
-  <div id="${controlId}" class="sidenav" ref="sidenav">
-    <slot></slot>
-  </div>
-</template>
+<template>
+  <require from="./sidenav.css"></require>
+  <div id="${controlId}" class="sidenav" ref="sidenav">
+    <slot></slot>
+  </div>
+</template>
diff --git a/dist/system/switch/switch.html b/dist/system/switch/switch.html
index b46b6bb9..8c856a65 100644
--- a/dist/system/switch/switch.html
+++ b/dist/system/switch/switch.html
@@ -1,9 +1,9 @@
-<template class="switch">
-  <require from="./switch.css"></require>
-  <label>
-    ${labelOff}
-    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
-    <span class="lever"></span>
-    ${labelOn}
-  </label>
-</template>
+<template class="switch">
+  <require from="./switch.css"></require>
+  <label>
+    ${labelOff}
+    <input type="checkbox" ref="checkbox" blur.trigger="blur()" readonly.bind="readonly" />
+    <span class="lever"></span>
+    ${labelOn}
+  </label>
+</template>
diff --git a/dist/system/well/md-well.html b/dist/system/well/md-well.html
index 079d8f16..859f51c4 100644
--- a/dist/system/well/md-well.html
+++ b/dist/system/well/md-well.html
@@ -1,20 +1,20 @@
-<template>
-	<style>
-		md-well li[md-waves] {
-			display: block;
-		}
-
-		md-well li a {
-			padding: 5px;
-			display: inline-block;
-			width: 100%;
-		}
-
-	</style>
-
-	<ul class="z-depth-1">
-		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
-			<a href.bind="row.href">${row.title}</a>
-		</li>
-	</ul>
-</template>
+<template>
+	<style>
+		md-well li[md-waves] {
+			display: block;
+		}
+
+		md-well li a {
+			padding: 5px;
+			display: inline-block;
+			width: 100%;
+		}
+
+	</style>
+
+	<ul class="z-depth-1">
+		<li md-waves="color: primary;" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
+			<a href.bind="row.href">${row.title}</a>
+		</li>
+	</ul>
+</template>