From f8872a47b00906432ff0b6f55d37ae6ff151ccae Mon Sep 17 00:00:00 2001
From: Tim Lancina <tim@ionic.io>
Date: Thu, 5 Nov 2015 19:29:08 -0600
Subject: [PATCH 1/7] fix(animations): fix add for non strict mode

---
 ionic/animations/animation.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts
index 82827f75d9..bad3ecdc60 100644
--- a/ionic/animations/animation.ts
+++ b/ionic/animations/animation.ts
@@ -94,10 +94,10 @@ export class Animation {
   }
 
   add(childAnimations) {
-    childAnimations = Array.isArray(childAnimations) ? childAnimations : arguments;
-    for (let i = 0; i < childAnimations.length; i++) {
-      childAnimations[i].parent(this);
-      this._chld.push(childAnimations[i]);
+    var _childAnimations = Array.isArray(childAnimations) ? childAnimations : arguments;
+    for (let i = 0; i < _childAnimations.length; i++) {
+      _childAnimations[i].parent(this);
+      this._chld.push(_childAnimations[i]);
     }
     return this;
   }

From aff112a5a1e49a051a3935790f26c1fc004c41ad Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Thu, 5 Nov 2015 21:11:16 -0600
Subject: [PATCH 2/7] feat(tabs): more touchActive features

---
 ionic/components/tabs/tabs.ts | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 4dcfd643b3..05b86c0f3f 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -217,15 +217,36 @@ export class Tabs extends Ion {
 
   /**
    * @private
-   * "Touch" the active tab, either going back to the root view of the tab
-   * or scrolling the tab to the top
+   * "Touch" the active tab, going back to the root view of the tab
+   * or optionally letting the tab handle the event
    */
   touchActive(tab) {
+    let active = tab.getActive();
+
+    if(!active) {
+      return Promise.resolve();
+    }
+
+    let instance = active.instance;
+
+    // If they have a custom tab selected handler, call it
+    if(instance.tabSelected) {
+      return instance.tabSelected();
+    }
+
+    // If we're a few pages deep, pop to root
     if (tab.length() > 1) {
       // Pop to the root view
       return tab.popToRoot();
     }
 
+    // Otherwise, if the page we're on is not our real root, reset it to our
+    // default root type
+    if(tab.root != active.componentType) {
+      return tab.setRoot(tab.root);
+    }
+
+    // And failing all of that, we do something safe and secure
     return Promise.resolve();
   }
 

From 6390d768de4de9338cfd4c4b9be6e205102da0cd Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Thu, 5 Nov 2015 21:15:17 -0600
Subject: [PATCH 3/7] Ghost tabs test

---
 ionic/components/tabs/test/ghost/e2e.ts   |   1 +
 ionic/components/tabs/test/ghost/index.ts | 133 ++++++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 ionic/components/tabs/test/ghost/e2e.ts
 create mode 100644 ionic/components/tabs/test/ghost/index.ts

diff --git a/ionic/components/tabs/test/ghost/e2e.ts b/ionic/components/tabs/test/ghost/e2e.ts
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/ionic/components/tabs/test/ghost/e2e.ts
@@ -0,0 +1 @@
+
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
new file mode 100644
index 0000000000..86588d5051
--- /dev/null
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -0,0 +1,133 @@
+  import {App, Page, NavController, Tab} from 'ionic/ionic';
+
+import {ContentChild, QueryList, ViewChildren} from 'angular2/angular2';
+
+//
+// Tab 1
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Heart</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 1</h2>
+    </ion-content>
+    `
+})
+class Tab1 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 2
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Star</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 2</h2>
+    </ion-content>
+    `
+})
+class Tab2 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <a menu-toggle>
+        <icon menu></icon>
+      </a>
+      <ion-title>Stopwatch</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 3</h2>
+    </ion-content>
+    `
+})
+class Tab3 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <a menu-toggle>
+        <icon menu></icon>
+      </a>
+      <ion-title>Quesarito</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Quesarito</h2>
+    </ion-content>
+    `
+})
+class QuesaritoPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+@App({
+  template: `
+    <ion-menu [content]="content">
+      <ion-toolbar secondary>
+        <ion-title>Secret Menu</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <ion-list>
+          <button ion-item menu-close detail-none (click)="openPage('quesarito')">
+            Quesarito
+          </button>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <ion-tabs #content>
+      <ion-tab tab-title="Heart" tab-icon="heart" [root]="root1" #tab1></ion-tab>
+      <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
+      <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  @ViewChildren(Tab) tab : QueryList<Tab>;
+
+  afterViewInit() {
+    console.log('Tab', this.tab);
+    console.log(this.tab.first.setRoot);
+  }
+
+  openPage(which) {
+    let pages = {
+      'quesarito': QuesaritoPage
+    };
+
+    this.tab.first.setRoot(pages[which])
+  }
+
+  constructor() {
+
+    this.root1 = Tab1;
+    this.root2 = Tab2;
+    this.root3 = Tab3;
+  }
+  onInit() {
+  }
+}

From 246fd977f222d97366f113353a633287fb65ef13 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 5 Nov 2015 22:19:37 -0600
Subject: [PATCH 4/7] feat(tabbarStyle): set tabbar color from config/attr

Closes #436
---
 ionic/components/tabs/modes/ios.scss          |  8 +++
 ionic/components/tabs/tabs.scss               | 32 ++++++++---
 ionic/components/tabs/tabs.ts                 | 17 +++++-
 ionic/components/tabs/test/basic/index.ts     | 56 +++++++++++++------
 .../tabs/test/tab-bar-scenarios/main.html     |  8 +++
 5 files changed, 96 insertions(+), 25 deletions(-)

diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 6809d7dec6..17ddc46818 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -88,3 +88,11 @@ ion-tabs[tabbar-placement=top] tabbar {
   }
 
 }
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    border-color: darken($color-value, 10%);
+  }
+
+}
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 7dfd413ff5..3a39f1e580 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -87,10 +87,11 @@ tabbar {
   border: 0;
   border-radius: 0;
   background: none;
+}
 
-  &:hover:not(.disable-hover) {
-    color: $tab-button-active-color;
-  }
+.tab-button:hover:not(.disable-hover),
+.tab-button[aria-selected=true] {
+  color: $tab-button-active-color;
 }
 
 .tab-button-text {
@@ -121,10 +122,6 @@ tabbar {
   white-space: normal;
 }
 
-.tab-button[aria-selected=true] {
-  color: $tab-button-active-color;
-}
-
 tab-highlight {
   display: none;
 }
@@ -157,3 +154,24 @@ tab-highlight {
 [tabbar-icons=hide] .tab-button-icon {
   display: none;
 }
+
+
+// Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
+  }
+
+}
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 05b86c0f3f..9a591d97c4 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -8,6 +8,17 @@ import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
 
 
+@Directive({
+  selector: '[attr]',
+  inputs: ['attr']
+})
+class Attr {
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+  onInit() {
+    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
+  }
+}
+
 /**
  * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
  * of the Component docs._
@@ -63,6 +74,7 @@ import {Icon} from '../icon/icon';
   defaultInputs: {
     'tabbarPlacement': 'bottom',
     'tabbarIcons': 'top',
+    'tabbarStyle': 'default',
     'preloadTabs': true
   },
   template:
@@ -70,7 +82,7 @@ import {Icon} from '../icon/icon';
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
-      '<tabbar role="tablist">' +
+      '<tabbar role="tablist" [attr]="tabbarStyle">' +
         '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
@@ -85,6 +97,7 @@ import {Icon} from '../icon/icon';
     Icon,
     NgFor,
     NgIf,
+    Attr,
     forwardRef(() => TabButton),
     forwardRef(() => TabHighlight),
     forwardRef(() => TabNavBarAnchor)
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index 6119d239ec..f144c2393f 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -8,14 +8,24 @@
     <ion-navbar *navbar>
       <ion-title>Heart</ion-title>
     </ion-navbar>
-    <ion-content padding>
-      <h2>Tab 1</h2>
+    <ion-content>
+      <ion-list>
+        <ion-header>
+          Tab 1
+        </ion-header>
+        <ion-item *ng-for="#i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+      </ion-list>
     </ion-content>
     `
 })
 class Tab1 {
   constructor(nav: NavController) {
     this.nav = nav;
+
+    this.items = [];
+    for(var i = 1; i <= 250; i++) {
+      this.items.push(i);
+    }
   }
 }
 
@@ -25,16 +35,33 @@ class Tab1 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <ion-title>Star</ion-title>
+      <ion-title>Schedule</ion-title>
     </ion-navbar>
-    <ion-content padding>
-      <h2>Tab 2</h2>
+    <ion-content>
+      <ion-list>
+        <ion-item-sliding *ng-for="#session of sessions" #sliding-item>
+          <ion-item>
+            <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
+            <p>{{session.location}} {{session.location}} {{session.location}}</p>
+          </ion-item>
+          <ion-item-options>
+            <button primary>Speaker<br>Info</button>
+            <button secondary>Add to<br>Favorites</button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
     </ion-content>
-    `
+  `
 })
 class Tab2 {
-  constructor(nav: NavController) {
-    this.nav = nav;
+  constructor() {
+    this.sessions = [];
+    for(var i = 1; i <= 250; i++) {
+      this.sessions.push({
+        name: 'Name ' + i,
+        location: 'Location: ' + i
+      });
+    }
   }
 }
 
@@ -54,11 +81,8 @@ class Tab2 {
     </ion-content>
     `
 })
-class Tab3 {
-  constructor(nav: NavController) {
-    this.nav = nav;
-  }
-}
+class Tab3 {}
+
 
 @App({
   template: `
@@ -75,9 +99,9 @@ class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content>
-      <ion-tab tab-title="Heart" tab-icon="heart" [root]="root1"></ion-tab>
-      <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
+    <ion-tabs #content tabbar-style="secondary">
+      <ion-tab tab-title="Plain List" tab-icon="star" [root]="root1"></ion-tab>
+      <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
       <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
   `
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index b4c7e1d4f0..222687e048 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -59,3 +59,11 @@
   <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
 </ion-tabs>
+
+
+<!-- primary color tabbar -->
+<ion-tabs no-navbar tabbar-style="primary">
+  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tab-icon="settings"></ion-tab>
+</ion-tabs>

From f04181d468ed75f92f2cbee70060150249db13a3 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 5 Nov 2015 22:51:30 -0600
Subject: [PATCH 5/7] feat(navbarStyle): set navbar color by config/attr

---
 ionic/components/app/id.ts        | 14 +++++++++++++-
 ionic/components/navbar/navbar.ts | 17 +++++++++++++++--
 ionic/components/tabs/tabs.ts     | 14 ++------------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts
index 746b8b459d..3f03146128 100644
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -1,4 +1,4 @@
-import {AppViewManager, ElementRef, Directive} from 'angular2/angular2';
+import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from './app';
 
@@ -47,3 +47,15 @@ export class IdRef {
     this.app.unregister(this.id);
   }
 }
+
+
+@Directive({
+  selector: '[attr]',
+  inputs: ['attr']
+})
+export class Attr {
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+  onInit() {
+    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
+  }
+}
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 589103474a..425ab07c7a 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -69,7 +69,8 @@ class BackButtonText extends Ion {
     '[hidden]': '_hidden'
   },
   inputs: [
-    'hideBackButton'
+    'hideBackButton',
+    'navbarStyle'
   ],
   directives: [BackButton, BackButtonText, Icon]
 })
@@ -82,9 +83,16 @@ export class Navbar extends ToolbarBase {
     renderer: Renderer
   ) {
     super(elementRef, config);
+    this.app = app;
+    this.renderer = renderer;
+
     renderer.setElementClass(elementRef, 'toolbar', true);
 
-    this.app = app;
+    let navbarStyle = config.get('navbarStyle');
+    if (navbarStyle) {
+      renderer.setElementAttribute(elementRef, navbarStyle, '');
+    }
+
     viewCtrl && viewCtrl.setNavbar(this);
 
     this.bbIcon = config.get('backButtonIcon');
@@ -92,10 +100,15 @@ export class Navbar extends ToolbarBase {
   }
 
   onInit() {
+    super.onInit();
     let hideBackButton = this.hideBackButton;
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
     }
+    
+    if (this.navbarStyle) {
+      this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
+    }
   }
 
   getBackButtonRef() {
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 9a591d97c4..4d7543c666 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -1,24 +1,14 @@
-import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef, Renderer} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
+import {Attr} from '../app/id';
 import {Config} from '../../config/config';
 import {ViewController} from '../nav/view-controller';
 import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
 
 
-@Directive({
-  selector: '[attr]',
-  inputs: ['attr']
-})
-class Attr {
-  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
-  onInit() {
-    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
-  }
-}
-
 /**
  * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
  * of the Component docs._

From 52ff3949bb3cf3e306d7a65480d198624ff35e7f Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Fri, 6 Nov 2015 11:00:37 -0600
Subject: [PATCH 6/7] docs(demos): fix cursor position

Closes #460
---
 demos/component-docs/app.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index 620297a337..6a946472b5 100644
--- a/demos/component-docs/app.scss
+++ b/demos/component-docs/app.scss
@@ -20,7 +20,7 @@ $font-path: '../../dist/fonts';
 
 
 body, body:hover, body a, body button, body media-switch {
-  cursor: url('http://ionicframework.com/img/finger.png'), auto;
+  cursor: url('http://ionicframework.com/img/finger.png') 8 8, auto;
 }
 
 body ion-app {

From ca002efa749d14b6aa4fd6723dc2c37ab4fc4711 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Fri, 6 Nov 2015 13:28:54 -0600
Subject: [PATCH 7/7] docs(buttons): fix template paths

---
 demos/component-docs/buttons/block/pages.ts      | 2 +-
 demos/component-docs/buttons/clear/pages.ts      | 2 +-
 demos/component-docs/buttons/components/pages.ts | 2 +-
 demos/component-docs/buttons/fab/pages.ts        | 2 +-
 demos/component-docs/buttons/full/pages.ts       | 2 +-
 demos/component-docs/buttons/icons/pages.ts      | 2 +-
 demos/component-docs/buttons/outline/pages.ts    | 2 +-
 demos/component-docs/buttons/round/pages.ts      | 2 +-
 demos/component-docs/buttons/sizes/pages.ts      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/demos/component-docs/buttons/block/pages.ts b/demos/component-docs/buttons/block/pages.ts
index 5cfebde02e..2c41355afe 100644
--- a/demos/component-docs/buttons/block/pages.ts
+++ b/demos/component-docs/buttons/block/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/block.html',
+  templateUrl: 'buttons/block/block.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class BlockPage {
diff --git a/demos/component-docs/buttons/clear/pages.ts b/demos/component-docs/buttons/clear/pages.ts
index 2622ddbf26..09eb6393b8 100644
--- a/demos/component-docs/buttons/clear/pages.ts
+++ b/demos/component-docs/buttons/clear/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/clear.html',
+  templateUrl: 'buttons/clear/clear.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class ClearPage {
diff --git a/demos/component-docs/buttons/components/pages.ts b/demos/component-docs/buttons/components/pages.ts
index 4fd151ef1a..4cdef689f8 100644
--- a/demos/component-docs/buttons/components/pages.ts
+++ b/demos/component-docs/buttons/components/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/components.html',
+  templateUrl: 'buttons/components/components.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class ComponentsPage {
diff --git a/demos/component-docs/buttons/fab/pages.ts b/demos/component-docs/buttons/fab/pages.ts
index 93c01d1804..41fd39cf8e 100644
--- a/demos/component-docs/buttons/fab/pages.ts
+++ b/demos/component-docs/buttons/fab/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/fab.html',
+  templateUrl: 'buttons/fab/fab.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class FabPage {
diff --git a/demos/component-docs/buttons/full/pages.ts b/demos/component-docs/buttons/full/pages.ts
index aadf415638..022adcb9b0 100644
--- a/demos/component-docs/buttons/full/pages.ts
+++ b/demos/component-docs/buttons/full/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/full.html',
+  templateUrl: 'buttons/full/full.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class FullPage {
diff --git a/demos/component-docs/buttons/icons/pages.ts b/demos/component-docs/buttons/icons/pages.ts
index f2f247e34c..05075f5dc7 100644
--- a/demos/component-docs/buttons/icons/pages.ts
+++ b/demos/component-docs/buttons/icons/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/icons.html',
+  templateUrl: 'buttons/icons/icons.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class IconsPage {
diff --git a/demos/component-docs/buttons/outline/pages.ts b/demos/component-docs/buttons/outline/pages.ts
index 5f74737ab6..a3b3561b83 100644
--- a/demos/component-docs/buttons/outline/pages.ts
+++ b/demos/component-docs/buttons/outline/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/outline.html',
+  templateUrl: 'buttons/outline/outline.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class OutlinePage {
diff --git a/demos/component-docs/buttons/round/pages.ts b/demos/component-docs/buttons/round/pages.ts
index fad823f814..a19ac56610 100644
--- a/demos/component-docs/buttons/round/pages.ts
+++ b/demos/component-docs/buttons/round/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/round.html',
+  templateUrl: 'buttons/round/round.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class RoundPage {
diff --git a/demos/component-docs/buttons/sizes/pages.ts b/demos/component-docs/buttons/sizes/pages.ts
index a60e3decea..02c89c246d 100644
--- a/demos/component-docs/buttons/sizes/pages.ts
+++ b/demos/component-docs/buttons/sizes/pages.ts
@@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
 import {AndroidAttribute} from '../../helpers';
 
 @Page({
-  templateUrl: 'buttons/sizes.html',
+  templateUrl: 'buttons/sizes/sizes.html',
   directives: [forwardRef(() => AndroidAttribute)]
 })
 export class SizesPage {