Update homepage paper components

closes #1507

index.html

@@ -53,29 +53,29 @@
 				</div>
 				<div class="col-md-8">
 					<h2>Examples</h2>
-					<style shim-shadowdom>
+					<style is="custom-style">
+						paper-tabs {
+							--paper-tabs-selection-bar-color: #b12d2b;
+						}
+
+						paper-tab {
+							--paper-tab-ink: #b12d2b;
+						}
+
 						paper-tabs, core-toolbar {
 							color: rgb(53, 53, 53);
 							background-color: #f4f4f4;
 							font-family: 'Helvetica Neue', Helvetica, Arial;
 							box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
 						}
-
-						paper-tabs::shadow #selectionBar {
-							background-color: #b12d2b;
-						}
-
-						paper-tab::shadow paper-ripple#ink {
-							color: #b12d2b;
-						}
 					</style>
-					<paper-tabs selected="js" class="js-app-tabs">
-						<paper-tab name="js">JavaScript</paper-tab>
-						<paper-tab name="ctojs">Compile-to-JS</paper-tab>
-						<paper-tab name="labs">Labs</paper-tab>
+					<paper-tabs selected="{{selectedTab}}" class="js-app-tabs">
+						<paper-tab data-target="js">JavaScript</paper-tab>
+						<paper-tab data-target="ctojs">Compile-to-JS</paper-tab>
+						<paper-tab data-target="labs">Labs</paper-tab>
 					</paper-tabs>
 
-					<div class="app-lists">
+					<iron-pages selected="{{selectedTab}}" class="app-lists">
 						<div class="js-app-list" data-app-list="js">
 							<p class="applist-intro">
 								These are examples written in pure JavaScript.
@@ -296,7 +296,7 @@
 							</ul>
 						</div>
 
-					</div>
+					</iron-pages>
 					<ul class="legend">
 						<li><span class="label">R</span> = App also demonstrates routing</li>
 					</ul>

site-assets/main.js

@@ -175,9 +175,10 @@
 	}]);
 
 	function AppTabs() {
-		document.querySelector(AppTabs.selectors.tabs).addEventListener(
-			'core-select', this.onSelect.bind(this));
+		var tabs = document.querySelector(AppTabs.selectors.tabs)
+		tabs.addEventListener('iron-select', this.onSelect.bind(this));
 		this.listHeight = 0;
+		tabs.select(0);
 	}
 
 	AppTabs.selectors = {
@@ -187,14 +188,9 @@
 	};
 
 	AppTabs.prototype.onSelect = function (e) {
-		var selected = e.target.selected;
+		var selected = e.currentTarget.selectedItem.dataset.target;
 		[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
 			function (el) {
-				if (!e.detail.isSelected) {
-					// Don't handle unselection events.
-					return;
-				}
-
 				var isSelected = el.dataset.appList === selected;
 				el.style.display = isSelected ? 'block' : 'none';
 				if (isSelected) {