From 7dca6f71488e1c82b461d8eeaada198bea575f89 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <phartig@rdrei.net>
Date: Sun, 25 Oct 2015 21:32:33 +0000
Subject: [PATCH] Update homepage paper components

---
 index.html          | 32 ++++++++++++++++----------------
 site-assets/main.js | 12 ++++--------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index f13b95b247..9e51a7a9c9 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 		<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
 		<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
 		<link rel="shortcut icon" href="site-assets/favicon.ico">
-		<script src="bower_components/platform/platform.js"></script>
+		<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 		<!-- build:remove -->
 		<script src="bower_components/prefixfree/prefixfree.min.js"></script>
 		<!-- endbuild -->
@@ -53,29 +53,29 @@ <h2>Introduction</h2>
 				</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 @@ <h2>Examples</h2>
 							</ul>
 						</div>
 
-					</div>
+					</iron-pages>
 					<ul class="legend">
 						<li><span class="label">R</span> = App also demonstrates routing</li>
 					</ul>
diff --git a/site-assets/main.js b/site-assets/main.js
index 2b0e2d5297..4ba34c440e 100644
--- a/site-assets/main.js
+++ b/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) {