From 3d221b27e42423887f1682398a9580ff19efb601 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Mon, 24 Oct 2016 16:04:42 -0700
Subject: [PATCH 01/10] feat(tab-nav-bar): add initial functionality of tab nav
 bar

---
 src/demo-app/demo-app-module.ts               |  6 +-
 src/demo-app/demo-app/routes.ts               |  6 +-
 src/demo-app/tabs/routes.ts                   | 10 +++
 src/demo-app/tabs/tab-group-demo.scss         |  9 ---
 src/demo-app/tabs/tab-group-demo.ts           | 26 --------
 .../{tab-group-demo.html => tabs-demo.html}   | 17 +++++
 src/demo-app/tabs/tabs-demo.module.ts         | 23 +++++++
 src/demo-app/tabs/tabs-demo.scss              | 22 +++++++
 src/demo-app/tabs/tabs-demo.ts                | 62 +++++++++++++++++++
 src/lib/tabs/tab-group.scss                   | 53 ++--------------
 src/lib/tabs/tab-nav-bar/tab-link.scss        |  6 ++
 src/lib/tabs/tab-nav-bar/tab-nav-bar.html     |  4 ++
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss     |  5 ++
 src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts  | 56 +++++++++++++++++
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts       | 40 ++++++++++++
 src/lib/tabs/tabs-common.scss                 | 51 +++++++++++++++
 src/lib/tabs/tabs.ts                          | 10 +--
 17 files changed, 311 insertions(+), 95 deletions(-)
 create mode 100644 src/demo-app/tabs/routes.ts
 delete mode 100644 src/demo-app/tabs/tab-group-demo.scss
 delete mode 100644 src/demo-app/tabs/tab-group-demo.ts
 rename src/demo-app/tabs/{tab-group-demo.html => tabs-demo.html} (69%)
 create mode 100644 src/demo-app/tabs/tabs-demo.module.ts
 create mode 100644 src/demo-app/tabs/tabs-demo.scss
 create mode 100644 src/demo-app/tabs/tabs-demo.ts
 create mode 100644 src/lib/tabs/tab-nav-bar/tab-link.scss
 create mode 100644 src/lib/tabs/tab-nav-bar/tab-nav-bar.html
 create mode 100644 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
 create mode 100644 src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
 create mode 100644 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
 create mode 100644 src/lib/tabs/tabs-common.scss

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
index 9c7b7ac2daba..0949d5a19849 100644
--- a/src/demo-app/demo-app-module.ts
+++ b/src/demo-app/demo-app-module.ts
@@ -32,9 +32,7 @@ import {SidenavDemo} from './sidenav/sidenav-demo';
 import {SnackBarDemo} from './snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from './portal/portal-demo';
 import {MenuDemo} from './menu/menu-demo';
-import {TabsDemo} from './tabs/tab-group-demo';
-
-
+import {TabsDemoModule} from './tabs/tabs-demo.module';
 
 @NgModule({
   imports: [
@@ -43,6 +41,7 @@ import {TabsDemo} from './tabs/tab-group-demo';
     HttpModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule.forRoot(),
+    TabsDemoModule,
   ],
   declarations: [
     BaselineDemo,
@@ -76,7 +75,6 @@ import {TabsDemo} from './tabs/tab-group-demo';
     SliderDemo,
     SlideToggleDemo,
     SpagettiPanel,
-    TabsDemo,
     ToolbarDemo,
     TooltipDemo,
   ],
diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
index b7c3fa47f3a7..8c194a7ce7b2 100644
--- a/src/demo-app/demo-app/routes.ts
+++ b/src/demo-app/demo-app/routes.ts
@@ -3,7 +3,7 @@ import {Home} from './demo-app';
 import {ButtonDemo} from '../button/button-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
 import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
-import {TabsDemo} from '../tabs/tab-group-demo';
+import {TabsDemo} from '../tabs/tabs-demo';
 import {GridListDemo} from '../grid-list/grid-list-demo';
 import {GesturesDemo} from '../gestures/gestures-demo';
 import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
@@ -27,7 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-
+import {TABS_DEMO_ROUTE} from '../tabs/routes'
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -51,7 +51,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'live-announcer', component: LiveAnnouncerDemo},
   {path: 'gestures', component: GesturesDemo},
   {path: 'grid-list', component: GridListDemo},
-  {path: 'tabs', component: TabsDemo},
+  {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTE},
   {path: 'button-toggle', component: ButtonToggleDemo},
   {path: 'baseline', component: BaselineDemo},
   {path: 'ripple', component: RippleDemo},
diff --git a/src/demo-app/tabs/routes.ts b/src/demo-app/tabs/routes.ts
new file mode 100644
index 000000000000..157ffcd2b144
--- /dev/null
+++ b/src/demo-app/tabs/routes.ts
@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+
+import {RoutedContent1, RoutedContent2, RoutedContext3} from '../tabs/tabs-demo';
+
+export const TABS_DEMO_ROUTE: Routes = [
+  { path: '', redirectTo: 'content-1', pathMatch: 'full' },
+  { path: 'content-1', component: RoutedContent1 },
+  { path: 'content-2', component: RoutedContent2 },
+  { path: 'content-3', component: RoutedContext3 },
+];
\ No newline at end of file
diff --git a/src/demo-app/tabs/tab-group-demo.scss b/src/demo-app/tabs/tab-group-demo.scss
deleted file mode 100644
index 5750046c04f6..000000000000
--- a/src/demo-app/tabs/tab-group-demo.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.demo-tab-group {
-  border: 1px solid #e0e0e0;
-  .md-tab-header {
-    background: #f9f9f9;
-  }
-  .md-tab-body {
-    padding: 12px;
-  }
-}
diff --git a/src/demo-app/tabs/tab-group-demo.ts b/src/demo-app/tabs/tab-group-demo.ts
deleted file mode 100644
index 3fc5d0953386..000000000000
--- a/src/demo-app/tabs/tab-group-demo.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {Observable} from 'rxjs/Observable';
-
-
-@Component({
-  moduleId: module.id,
-  selector: 'tab-group-demo',
-  templateUrl: 'tab-group-demo.html',
-  styleUrls: ['tab-group-demo.css'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class TabsDemo {
-  tabs = [
-    { label: 'Tab One', content: 'This is the body of the first tab' },
-    { label: 'Tab Two', content: 'This is the body of the second tab' },
-    { label: 'Tab Three', content: 'This is the body of the third tab' },
-  ];
-  asyncTabs: Observable<any>;
-  constructor() {
-    this.asyncTabs = Observable.create((observer: any) => {
-      setTimeout(() => {
-        observer.next(this.tabs);
-      }, 1000);
-    });
-  }
-}
diff --git a/src/demo-app/tabs/tab-group-demo.html b/src/demo-app/tabs/tabs-demo.html
similarity index 69%
rename from src/demo-app/tabs/tab-group-demo.html
rename to src/demo-app/tabs/tabs-demo.html
index 3803814796ed..42828fe71669 100644
--- a/src/demo-app/tabs/tab-group-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -1,3 +1,19 @@
+<h1>Tab Nav Bar</h1>
+
+<div class="demo-nav-bar">
+  <md-tab-nav-bar>
+    <a md-tab-link
+       *ngFor="let tabLink of tabLinks; let i = index"
+       [routerLink]="tabLink.link"
+       [active]="activeLinkIndex === i"
+       (click)="activeLinkIndex = i">
+      {{tabLink.label}}
+    </a>
+  </md-tab-nav-bar>
+  <router-outlet></router-outlet>
+</div>
+
+
 <h1>Tab Group Demo</h1>
 
 <md-tab-group class="demo-tab-group">
@@ -13,6 +29,7 @@ <h1>Tab Group Demo</h1>
   </md-tab>
 </md-tab-group>
 
+
 <h1>Async Tabs</h1>
 
 <md-tab-group class="demo-tab-group">
diff --git a/src/demo-app/tabs/tabs-demo.module.ts b/src/demo-app/tabs/tabs-demo.module.ts
new file mode 100644
index 000000000000..c80c81dcd65a
--- /dev/null
+++ b/src/demo-app/tabs/tabs-demo.module.ts
@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+
+import {TabsDemo, RoutedContent1, RoutedContent2, RoutedContext3} from './tabs-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    BrowserModule,
+    MaterialModule,
+    RouterModule,
+  ],
+  declarations: [
+    TabsDemo,
+    RoutedContent1,
+    RoutedContent2,
+    RoutedContext3,
+  ]
+})
+export class TabsDemoModule {}
diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss
new file mode 100644
index 000000000000..f5f7de9afa04
--- /dev/null
+++ b/src/demo-app/tabs/tabs-demo.scss
@@ -0,0 +1,22 @@
+.demo-nav-bar {
+  border: 1px solid #e0e0e0;
+  .md-tab-header {
+    background: #f9f9f9;
+  }
+  tabs-demo-routed-content-1,
+  tabs-demo-routed-content-2,
+  tabs-demo-routed-content-3 {
+    display: block;
+    padding: 12px;
+  }
+}
+
+.demo-tab-group {
+  border: 1px solid #e0e0e0;
+  .md-tab-header {
+    background: #f9f9f9;
+  }
+  .md-tab-body {
+    padding: 12px;
+  }
+}
\ No newline at end of file
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/demo-app/tabs/tabs-demo.ts
new file mode 100644
index 000000000000..c7256a374c42
--- /dev/null
+++ b/src/demo-app/tabs/tabs-demo.ts
@@ -0,0 +1,62 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {Router} from '@angular/router';
+import {Observable} from 'rxjs/Observable';
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-demo',
+  templateUrl: 'tabs-demo.html',
+  styleUrls: ['tabs-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class TabsDemo {
+  tabLinks = [
+    { label: 'Tab One', link: 'content-1'},
+    { label: 'Tab Two', link: 'content-2'},
+    { label: 'Tab Three', link: 'content-3'},
+  ];
+  activeLinkIndex = 0;
+
+  tabs = [
+    { label: 'Tab One', content: 'This is the body of the first tab' },
+    { label: 'Tab Two', content: 'This is the body of the second tab' },
+    { label: 'Tab Three', content: 'This is the body of the third tab' },
+  ];
+
+  asyncTabs: Observable<any>;
+
+  constructor(private router: Router) {
+    this.asyncTabs = Observable.create((observer: any) => {
+      setTimeout(() => {
+        observer.next(this.tabs);
+      }, 1000);
+    });
+
+    this.activeLinkIndex =
+        this.tabLinks.findIndex(routedTab => router.url.indexOf(routedTab.link) != -1);
+  }
+}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-demo-routed-content-1',
+  template: 'This is the routed body of the first tab.',
+})
+export class RoutedContent1 {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-demo-routed-content-2',
+  template: 'This is the routed body of the second tab.',
+})
+export class RoutedContent2 {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-demo-routed-content-3',
+  template: 'This is the routed body of the third tab.',
+})
+export class RoutedContext3 {}
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index c0dfd8e2d050..bd819b8a951b 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -1,7 +1,5 @@
 @import '../core/style/variables';
-
-
-$md-tab-bar-height: 48px !default;
+@import './tabs-common';
 
 :host {
   display: flex;
@@ -9,44 +7,9 @@ $md-tab-bar-height: 48px !default;
   font-family: $md-font-family;
 }
 
-// The top section of the view; contains the tab labels
-.md-tab-header {
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-}
-
-// Wraps each tab label 
+// Wraps each tab label
 .md-tab-label {
-  line-height: $md-tab-bar-height;
-  height: $md-tab-bar-height;
-  padding: 0 12px;
-  font-size: $md-body-font-size-base;
-  font-family: $md-font-family;
-  font-weight: 500;
-  cursor: pointer;
-  box-sizing: border-box;
-  color: currentColor;
-  opacity: 0.6;
-  min-width: 160px;
-  text-align: center;
-  &:focus {
-    outline: none;
-    opacity: 1;
-  }
-}
-
-@media ($md-xsmall) {
-  .md-tab-label {
-    min-width: 72px;
-  }
-}
-
-.md-tab-disabled {
-  cursor: default;
-  pointer-events: none;
+  @include tab-label;
 }
 
 // The bottom section of the view; contains the tab bodies 
@@ -67,12 +30,4 @@ $md-tab-bar-height: 48px !default;
   &.md-tab-active {
     display: block;
   }
-}
-
-// The colored bar that underlines the active tab 
-md-ink-bar {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  transition: 350ms ease-out;
-}
+}
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-link.scss b/src/lib/tabs/tab-nav-bar/tab-link.scss
new file mode 100644
index 000000000000..f470539ec9c9
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/tab-link.scss
@@ -0,0 +1,6 @@
+@import '../tabs-common';
+
+:host {
+  @include tab-label;
+  text-decoration: none;
+}
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.html b/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
new file mode 100644
index 000000000000..82c22c45a25c
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
@@ -0,0 +1,4 @@
+<div class="md-tab-header">
+  <ng-content></ng-content>
+  <md-ink-bar></md-ink-bar>
+</div>
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
new file mode 100644
index 000000000000..d63faf7faf3d
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -0,0 +1,5 @@
+@import '../tabs-common';
+
+:host {
+  display: block;
+}
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
new file mode 100644
index 000000000000..de7292280eb3
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -0,0 +1,56 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MdTabNavBar} from './tab-nav-bar';
+import {MdTabsModule} from '../tabs';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+
+fdescribe('MdTabNavBar', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdTabsModule.forRoot()],
+      declarations: [
+        SimpleTabNavBarTestApp
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('basic behavior', () => {
+    let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+    });
+
+    it('should change active index on click', () => {
+      let component = fixture.debugElement.componentInstance;
+
+      // select the second link
+      let tabLink = fixture.debugElement.queryAll(By.css('a'))[1];
+      tabLink.nativeElement.click();
+      expect(component.activeIndex).toBe(1);
+
+      // select the third link
+      tabLink = fixture.debugElement.queryAll(By.css('a'))[2];
+      tabLink.nativeElement.click();
+      expect(component.activeIndex).toBe(2);
+    });
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `
+    <md-tab-nav-bar>
+      <a md-tab-link [active]="activeIndex === 0" (click)="activeIndex = 0">Tab One</a>
+      <a md-tab-link [active]="activeIndex === 1" (click)="activeIndex = 1">Tab Two</a>
+      <a md-tab-link [active]="activeIndex === 2" (click)="activeIndex = 2">Tab Three</a>
+    </md-tab-nav-bar>
+  `
+})
+class SimpleTabNavBarTestApp {
+  activeIndex = 0;
+}
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
new file mode 100644
index 000000000000..c97adbafb5aa
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -0,0 +1,40 @@
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { MdInkBar } from '../ink-bar';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-tab-nav-bar',
+  templateUrl: 'tab-nav-bar.html',
+  styleUrls: ['tab-nav-bar.css'],
+})
+export class MdTabNavBar {
+  @ViewChild(MdInkBar) private _inkBar: MdInkBar;
+
+  updateActiveLink(element: HTMLElement) {
+    this._inkBar.alignToElement(element);
+  }
+}
+
+@Component({
+  moduleId: module.id,
+  selector: '[md-tab-link]',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['tab-link.css']
+})
+export class MdTabLink {
+  private _isActive: boolean = false;
+
+  @Input()
+  get active(): boolean {
+    return this._isActive;
+  }
+
+  set active(value: boolean) {
+    this._isActive = value;
+    if (value) {
+      this._mdTabNavBar.updateActiveLink(this._element.nativeElement);
+    }
+  }
+
+  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
+}
\ No newline at end of file
diff --git a/src/lib/tabs/tabs-common.scss b/src/lib/tabs/tabs-common.scss
new file mode 100644
index 000000000000..8445d1ed5a8d
--- /dev/null
+++ b/src/lib/tabs/tabs-common.scss
@@ -0,0 +1,51 @@
+@import '../core/style/variables';
+
+$md-tab-bar-height: 48px !default;
+
+
+@mixin tab-label {
+  line-height: $md-tab-bar-height;
+  height: $md-tab-bar-height;
+  padding: 0 12px;
+  font-size: $md-body-font-size-base;
+  font-family: $md-font-family;
+  font-weight: 500;
+  cursor: pointer;
+  box-sizing: border-box;
+  color: currentColor;
+  opacity: 0.6;
+  min-width: 160px;
+  text-align: center;
+  &:focus {
+    outline: none;
+    opacity: 1;
+  }
+}
+
+// The top section of the view; contains the tab labels
+.md-tab-header {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+
+@media ($md-xsmall) {
+  .md-tab-label {
+    min-width: 72px;
+  }
+}
+
+.md-tab-disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+// The colored bar that underlines the active tab
+md-ink-bar {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  transition: 350ms ease-out;
+}
\ No newline at end of file
diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts
index ee77040a63d1..ea84b66867d6 100644
--- a/src/lib/tabs/tabs.ts
+++ b/src/lib/tabs/tabs.ts
@@ -17,6 +17,7 @@ import {PortalModule} from '../core';
 import {MdTabLabel} from './tab-label';
 import {MdTabContent} from './tab-content';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
+import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar'
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
@@ -119,7 +120,7 @@ export class MdTabGroup {
   }
 
   /**
-   * Waits one frame for the view to update, then upates the ink bar
+   * Waits one frame for the view to update, then updates the ink bar
    * Note: This must be run outside of the zone or it will create an infinite change detection loop
    * TODO: internal
    */
@@ -229,9 +230,10 @@ export class MdTabGroup {
 
 @NgModule({
   imports: [CommonModule, PortalModule],
-  // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementatino details.
-  exports: [MdTabGroup, MdTabLabel, MdTabContent, MdTab],
-  declarations: [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdInkBar, MdTabLabelWrapper],
+  // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
+  exports: [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdTabNavBar, MdTabLink],
+  declarations: [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdInkBar, MdTabLabelWrapper,
+    MdTabNavBar, MdTabLink],
 })
 export class MdTabsModule {
   static forRoot(): ModuleWithProviders {

From 77d7a7d5602e25075d34ca207042bd61a375ce4d Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Mon, 24 Oct 2016 16:09:17 -0700
Subject: [PATCH 02/10] style(tab-nav-bar): cleanup lint issues

---
 src/demo-app/demo-app/routes.ts              | 2 +-
 src/demo-app/tabs/routes.ts                  | 2 +-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 1 -
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts      | 2 +-
 src/lib/tabs/tabs.ts                         | 2 +-
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
index 8c194a7ce7b2..c5ad7d6201f7 100644
--- a/src/demo-app/demo-app/routes.ts
+++ b/src/demo-app/demo-app/routes.ts
@@ -27,7 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-import {TABS_DEMO_ROUTE} from '../tabs/routes'
+import {TABS_DEMO_ROUTE} from '../tabs/routes';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
diff --git a/src/demo-app/tabs/routes.ts b/src/demo-app/tabs/routes.ts
index 157ffcd2b144..7aeb2f3d59f4 100644
--- a/src/demo-app/tabs/routes.ts
+++ b/src/demo-app/tabs/routes.ts
@@ -7,4 +7,4 @@ export const TABS_DEMO_ROUTE: Routes = [
   { path: 'content-1', component: RoutedContent1 },
   { path: 'content-2', component: RoutedContent2 },
   { path: 'content-3', component: RoutedContext3 },
-];
\ No newline at end of file
+];
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index de7292280eb3..52b0e829e3c2 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -1,5 +1,4 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MdTabNavBar} from './tab-nav-bar';
 import {MdTabsModule} from '../tabs';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index c97adbafb5aa..c6b572e6a696 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -37,4 +37,4 @@ export class MdTabLink {
   }
 
   constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
-}
\ No newline at end of file
+}
diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts
index ea84b66867d6..798080b89c9d 100644
--- a/src/lib/tabs/tabs.ts
+++ b/src/lib/tabs/tabs.ts
@@ -17,7 +17,7 @@ import {PortalModule} from '../core';
 import {MdTabLabel} from './tab-label';
 import {MdTabContent} from './tab-content';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar'
+import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';

From 559989d332adabd3559ebfc0b648b27853bb86c0 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Tue, 25 Oct 2016 09:57:29 -0700
Subject: [PATCH 03/10] style(tab-nav-bar): rename tab demo routes

---
 src/demo-app/demo-app/routes.ts | 4 ++--
 src/demo-app/tabs/routes.ts     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
index c5ad7d6201f7..68ec614443db 100644
--- a/src/demo-app/demo-app/routes.ts
+++ b/src/demo-app/demo-app/routes.ts
@@ -27,7 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-import {TABS_DEMO_ROUTE} from '../tabs/routes';
+import {TABS_DEMO_ROUTES} from '../tabs/routes';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -51,7 +51,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'live-announcer', component: LiveAnnouncerDemo},
   {path: 'gestures', component: GesturesDemo},
   {path: 'grid-list', component: GridListDemo},
-  {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTE},
+  {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
   {path: 'button-toggle', component: ButtonToggleDemo},
   {path: 'baseline', component: BaselineDemo},
   {path: 'ripple', component: RippleDemo},
diff --git a/src/demo-app/tabs/routes.ts b/src/demo-app/tabs/routes.ts
index 7aeb2f3d59f4..56de21c752a7 100644
--- a/src/demo-app/tabs/routes.ts
+++ b/src/demo-app/tabs/routes.ts
@@ -2,7 +2,7 @@ import {Routes} from '@angular/router';
 
 import {RoutedContent1, RoutedContent2, RoutedContext3} from '../tabs/tabs-demo';
 
-export const TABS_DEMO_ROUTE: Routes = [
+export const TABS_DEMO_ROUTES: Routes = [
   { path: '', redirectTo: 'content-1', pathMatch: 'full' },
   { path: 'content-1', component: RoutedContent1 },
   { path: 'content-2', component: RoutedContent2 },

From 4b006b0b51e27786007e900eb6741f87c4abbbfc Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Tue, 25 Oct 2016 10:11:36 -0700
Subject: [PATCH 04/10] style(tab-nav-bar): Add comments and remove private
 view child

---
 src/demo-app/tabs/routes.ts             | 10 +++++-----
 src/demo-app/tabs/tabs-demo.module.ts   |  8 ++++----
 src/demo-app/tabs/tabs-demo.ts          | 18 +++++++++---------
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 14 +++++++++++---
 4 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/demo-app/tabs/routes.ts b/src/demo-app/tabs/routes.ts
index 56de21c752a7..5a281216985c 100644
--- a/src/demo-app/tabs/routes.ts
+++ b/src/demo-app/tabs/routes.ts
@@ -1,10 +1,10 @@
 import {Routes} from '@angular/router';
 
-import {RoutedContent1, RoutedContent2, RoutedContext3} from '../tabs/tabs-demo';
+import {SunnyTabContent, RainyTabContent, FoggyTabContent} from '../tabs/tabs-demo';
 
 export const TABS_DEMO_ROUTES: Routes = [
-  { path: '', redirectTo: 'content-1', pathMatch: 'full' },
-  { path: 'content-1', component: RoutedContent1 },
-  { path: 'content-2', component: RoutedContent2 },
-  { path: 'content-3', component: RoutedContext3 },
+  { path: '', redirectTo: 'sunny-tab', pathMatch: 'full' },
+  { path: 'sunny-tab', component: SunnyTabContent },
+  { path: 'rainy-tab', component: RainyTabContent },
+  { path: 'foggy-tab', component: FoggyTabContent },
 ];
diff --git a/src/demo-app/tabs/tabs-demo.module.ts b/src/demo-app/tabs/tabs-demo.module.ts
index c80c81dcd65a..f564e2dc628a 100644
--- a/src/demo-app/tabs/tabs-demo.module.ts
+++ b/src/demo-app/tabs/tabs-demo.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 
-import {TabsDemo, RoutedContent1, RoutedContent2, RoutedContext3} from './tabs-demo';
+import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-demo';
 
 @NgModule({
   imports: [
@@ -15,9 +15,9 @@ import {TabsDemo, RoutedContent1, RoutedContent2, RoutedContext3} from './tabs-d
   ],
   declarations: [
     TabsDemo,
-    RoutedContent1,
-    RoutedContent2,
-    RoutedContext3,
+    SunnyTabContent,
+    RainyTabContent,
+    FoggyTabContent,
   ]
 })
 export class TabsDemoModule {}
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/demo-app/tabs/tabs-demo.ts
index c7256a374c42..808b06887a67 100644
--- a/src/demo-app/tabs/tabs-demo.ts
+++ b/src/demo-app/tabs/tabs-demo.ts
@@ -11,9 +11,9 @@ import {Observable} from 'rxjs/Observable';
 })
 export class TabsDemo {
   tabLinks = [
-    { label: 'Tab One', link: 'content-1'},
-    { label: 'Tab Two', link: 'content-2'},
-    { label: 'Tab Three', link: 'content-3'},
+    { label: 'Sun', link: 'sunny-tab'},
+    { label: 'Rain', link: 'rainy-tab'},
+    { label: 'Fog', link: 'foggy-tab'},
   ];
   activeLinkIndex = 0;
 
@@ -41,22 +41,22 @@ export class TabsDemo {
 @Component({
   moduleId: module.id,
   selector: 'tabs-demo-routed-content-1',
-  template: 'This is the routed body of the first tab.',
+  template: 'This is the routed body of the sunny tab.',
 })
-export class RoutedContent1 {}
+export class SunnyTabContent {}
 
 
 @Component({
   moduleId: module.id,
   selector: 'tabs-demo-routed-content-2',
-  template: 'This is the routed body of the second tab.',
+  template: 'This is the routed body of the rainy tab.',
 })
-export class RoutedContent2 {}
+export class RainyTabContent {}
 
 
 @Component({
   moduleId: module.id,
   selector: 'tabs-demo-routed-content-3',
-  template: 'This is the routed body of the third tab.',
+  template: 'This is the routed body of the foggy tab.',
 })
-export class RoutedContext3 {}
+export class FoggyTabContent {}
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index c6b572e6a696..dc6d0d440f5a 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -1,6 +1,13 @@
-import { Component, Input, ViewChild, ElementRef } from '@angular/core';
-import { MdInkBar } from '../ink-bar';
+import {Component, Input, ViewChild, ElementRef} from '@angular/core';
+import {MdInkBar} from '../ink-bar';
 
+/**
+ * Material design navigation component matching the styles of the tab group header.
+ * Provides anchored navigation with animated ink bar.
+ * Supports basic tab pairs (label + content) and includes
+ * animated ink-bar, keyboard navigation, and screen reader.
+ * See: https://www.google.com/design/spec/components/tabs.html
+ */
 @Component({
   moduleId: module.id,
   selector: 'md-tab-nav-bar',
@@ -8,8 +15,9 @@ import { MdInkBar } from '../ink-bar';
   styleUrls: ['tab-nav-bar.css'],
 })
 export class MdTabNavBar {
-  @ViewChild(MdInkBar) private _inkBar: MdInkBar;
+  @ViewChild(MdInkBar) _inkBar: MdInkBar;
 
+  /** Animates the ink bar to the position of the active link element. */
   updateActiveLink(element: HTMLElement) {
     this._inkBar.alignToElement(element);
   }

From 907ecdc738043f3ef7b54c1c4270ef1d25b5b32e Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Tue, 25 Oct 2016 10:12:27 -0700
Subject: [PATCH 05/10] style(tab-nav-bar): Fix nav bar comments

---
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index dc6d0d440f5a..7efce8a3538d 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -2,11 +2,8 @@ import {Component, Input, ViewChild, ElementRef} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 
 /**
- * Material design navigation component matching the styles of the tab group header.
+ * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.
- * Supports basic tab pairs (label + content) and includes
- * animated ink-bar, keyboard navigation, and screen reader.
- * See: https://www.google.com/design/spec/components/tabs.html
  */
 @Component({
   moduleId: module.id,

From 42b8ba86b54cc45359fef3eef328a5af5a956455 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Tue, 25 Oct 2016 14:40:22 -0700
Subject: [PATCH 06/10] chore(tab-nav-bar): addressing comments

---
 src/demo-app/tabs/tabs-demo.scss             | 6 +++---
 src/demo-app/tabs/tabs-demo.ts               | 9 ++++++---
 src/lib/index.ts                             | 1 +
 src/lib/tabs/tab-nav-bar/index.ts            | 1 +
 src/lib/tabs/tab-nav-bar/tab-link.scss       | 6 ------
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss    | 5 +++++
 src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 2 +-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts      | 8 +++-----
 src/lib/tabs/tabs-common.scss                | 2 +-
 9 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/tabs/tab-nav-bar/index.ts
 delete mode 100644 src/lib/tabs/tab-nav-bar/tab-link.scss

diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss
index f5f7de9afa04..a1a82fe571be 100644
--- a/src/demo-app/tabs/tabs-demo.scss
+++ b/src/demo-app/tabs/tabs-demo.scss
@@ -3,9 +3,9 @@
   .md-tab-header {
     background: #f9f9f9;
   }
-  tabs-demo-routed-content-1,
-  tabs-demo-routed-content-2,
-  tabs-demo-routed-content-3 {
+  sunny-routed-content,
+  rainy-routed-content,
+  foggy-routed-content {
     display: block;
     padding: 12px;
   }
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/demo-app/tabs/tabs-demo.ts
index 808b06887a67..5fda1dffee88 100644
--- a/src/demo-app/tabs/tabs-demo.ts
+++ b/src/demo-app/tabs/tabs-demo.ts
@@ -32,6 +32,9 @@ export class TabsDemo {
       }, 1000);
     });
 
+    // Initialize the index by checking if a tab link is contained in the url.
+    // This is not an ideal check and can be removed if routerLink exposes if it is active.
+    // https://github.com/angular/angular/pull/12525
     this.activeLinkIndex =
         this.tabLinks.findIndex(routedTab => router.url.indexOf(routedTab.link) != -1);
   }
@@ -40,7 +43,7 @@ export class TabsDemo {
 
 @Component({
   moduleId: module.id,
-  selector: 'tabs-demo-routed-content-1',
+  selector: 'sunny-routed-content',
   template: 'This is the routed body of the sunny tab.',
 })
 export class SunnyTabContent {}
@@ -48,7 +51,7 @@ export class SunnyTabContent {}
 
 @Component({
   moduleId: module.id,
-  selector: 'tabs-demo-routed-content-2',
+  selector: 'rainy-routed-content',
   template: 'This is the routed body of the rainy tab.',
 })
 export class RainyTabContent {}
@@ -56,7 +59,7 @@ export class RainyTabContent {}
 
 @Component({
   moduleId: module.id,
-  selector: 'tabs-demo-routed-content-3',
+  selector: 'foggy-routed-content',
   template: 'This is the routed body of the foggy tab.',
 })
 export class FoggyTabContent {}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 027498aea622..e242a9fc8777 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -20,5 +20,6 @@ export * from './slider/index';
 export * from './slide-toggle/index';
 export * from './snack-bar/index';
 export * from './tabs/index';
+export * from './tabs/tab-nav-bar/index';
 export * from './toolbar/index';
 export * from './tooltip/index';
diff --git a/src/lib/tabs/tab-nav-bar/index.ts b/src/lib/tabs/tab-nav-bar/index.ts
new file mode 100644
index 000000000000..f66d9f31e3dd
--- /dev/null
+++ b/src/lib/tabs/tab-nav-bar/index.ts
@@ -0,0 +1 @@
+export * from './tab-nav-bar';
diff --git a/src/lib/tabs/tab-nav-bar/tab-link.scss b/src/lib/tabs/tab-nav-bar/tab-link.scss
deleted file mode 100644
index f470539ec9c9..000000000000
--- a/src/lib/tabs/tab-nav-bar/tab-link.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../tabs-common';
-
-:host {
-  @include tab-label;
-  text-decoration: none;
-}
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
index d63faf7faf3d..b458550a1b79 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -2,4 +2,9 @@
 
 :host {
   display: block;
+}
+
+a[md-tab-link] {
+  @include tab-label;
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index 52b0e829e3c2..34fa3feed73b 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -4,7 +4,7 @@ import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
 
-fdescribe('MdTabNavBar', () => {
+describe('MdTabNavBar', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index 7efce8a3538d..62abfdafbf1b 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild, ElementRef} from '@angular/core';
+import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 
 /**
@@ -10,6 +10,7 @@ import {MdInkBar} from '../ink-bar';
   selector: 'md-tab-nav-bar',
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class MdTabNavBar {
   @ViewChild(MdInkBar) _inkBar: MdInkBar;
@@ -20,11 +21,8 @@ export class MdTabNavBar {
   }
 }
 
-@Component({
-  moduleId: module.id,
+@Directive({
   selector: '[md-tab-link]',
-  template: '<ng-content></ng-content>',
-  styleUrls: ['tab-link.css']
 })
 export class MdTabLink {
   private _isActive: boolean = false;
diff --git a/src/lib/tabs/tabs-common.scss b/src/lib/tabs/tabs-common.scss
index 8445d1ed5a8d..afb26e836ccf 100644
--- a/src/lib/tabs/tabs-common.scss
+++ b/src/lib/tabs/tabs-common.scss
@@ -2,7 +2,7 @@
 
 $md-tab-bar-height: 48px !default;
 
-
+// Mixin styles for labels that are contained within the tab header.
 @mixin tab-label {
   line-height: $md-tab-bar-height;
   height: $md-tab-bar-height;

From 243b349b46e9c8d97fd7953fcf0748447dfe2bfd Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 26 Oct 2016 10:35:46 -0700
Subject: [PATCH 07/10] fix styles

---
 src/demo-app/tabs/routes.ts                   |  8 +++----
 .../{tabs-common.scss => _tabs-common.scss}   | 19 ++++-----------
 src/lib/tabs/tab-group.scss                   | 24 ++++++++++++++++++-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss     | 20 +++++++++++++---
 src/lib/tooltip/tooltip.ts                    | 20 ++++++++++++++--
 5 files changed, 66 insertions(+), 25 deletions(-)
 rename src/lib/tabs/{tabs-common.scss => _tabs-common.scss} (72%)

diff --git a/src/demo-app/tabs/routes.ts b/src/demo-app/tabs/routes.ts
index 5a281216985c..34ce652f7e78 100644
--- a/src/demo-app/tabs/routes.ts
+++ b/src/demo-app/tabs/routes.ts
@@ -3,8 +3,8 @@ import {Routes} from '@angular/router';
 import {SunnyTabContent, RainyTabContent, FoggyTabContent} from '../tabs/tabs-demo';
 
 export const TABS_DEMO_ROUTES: Routes = [
-  { path: '', redirectTo: 'sunny-tab', pathMatch: 'full' },
-  { path: 'sunny-tab', component: SunnyTabContent },
-  { path: 'rainy-tab', component: RainyTabContent },
-  { path: 'foggy-tab', component: FoggyTabContent },
+  {path: '', redirectTo: 'sunny-tab', pathMatch: 'full'},
+  {path: 'sunny-tab', component: SunnyTabContent},
+  {path: 'rainy-tab', component: RainyTabContent},
+  {path: 'foggy-tab', component: FoggyTabContent},
 ];
diff --git a/src/lib/tabs/tabs-common.scss b/src/lib/tabs/_tabs-common.scss
similarity index 72%
rename from src/lib/tabs/tabs-common.scss
rename to src/lib/tabs/_tabs-common.scss
index afb26e836ccf..672cfa6495e2 100644
--- a/src/lib/tabs/tabs-common.scss
+++ b/src/lib/tabs/_tabs-common.scss
@@ -22,8 +22,8 @@ $md-tab-bar-height: 48px !default;
   }
 }
 
-// The top section of the view; contains the tab labels
-.md-tab-header {
+// Mixin styles for the top section of the view; contains the tab labels.
+@mixin tab-header {
   overflow: hidden;
   position: relative;
   display: flex;
@@ -31,19 +31,8 @@ $md-tab-bar-height: 48px !default;
   flex-shrink: 0;
 }
 
-@media ($md-xsmall) {
-  .md-tab-label {
-    min-width: 72px;
-  }
-}
-
-.md-tab-disabled {
-  cursor: default;
-  pointer-events: none;
-}
-
-// The colored bar that underlines the active tab
-md-ink-bar {
+// Mixin styles for the ink bar that displays near the active tab in the header.
+@mixin ink-bar {
   position: absolute;
   bottom: 0;
   height: 2px;
diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
index bd819b8a951b..3e48ae569952 100644
--- a/src/lib/tabs/tab-group.scss
+++ b/src/lib/tabs/tab-group.scss
@@ -1,5 +1,5 @@
 @import '../core/style/variables';
-@import './tabs-common';
+@import 'tabs-common';
 
 :host {
   display: flex;
@@ -7,11 +7,27 @@
   font-family: $md-font-family;
 }
 
+// Styling for the heading containing the tab labels
+.md-tab-header {
+  @include tab-header;
+}
+
 // Wraps each tab label
 .md-tab-label {
   @include tab-label;
 }
 
+@media ($md-xsmall) {
+  .md-tab-label {
+    min-width: 72px;
+  }
+}
+
+// The ink bar that displays next to the active tab
+md-ink-bar {
+  @include ink-bar;
+}
+
 // The bottom section of the view; contains the tab bodies 
 .md-tab-body-wrapper {
   position: relative;
@@ -30,4 +46,10 @@
   &.md-tab-active {
     display: block;
   }
+}
+
+// Styling for any tab that is marked disabled
+.md-tab-disabled {
+  cursor: default;
+  pointer-events: none;
 }
\ No newline at end of file
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
index b458550a1b79..341c73d8bced 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -1,10 +1,24 @@
 @import '../tabs-common';
+@import '../../core/style/variables';
 
-:host {
-  display: block;
+// Wraps the heading that contains the anchors
+.md-tab-header {
+  @include tab-header;
 }
 
-a[md-tab-link] {
+// Wraps each link in the header
+[md-tab-link] {
   @include tab-label;
   text-decoration: none;
+}
+
+@media ($md-xsmall) {
+  [md-tab-link] {
+    min-width: 72px;
+  }
+}
+
+// Styling for the ink bar that displays near the activated anchor
+md-ink-bar {
+  @include ink-bar;
 }
\ No newline at end of file
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index d48dd81ba200..a4030bc3453a 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -6,7 +6,7 @@ import {
     Input,
     ElementRef,
     ViewContainerRef,
-    ChangeDetectorRef
+    ChangeDetectorRef, state, trigger, transition, style, animate
 } from '@angular/core';
 import {
   Overlay,
@@ -180,14 +180,30 @@ export class MdTooltip {
   }
 }
 
+export type TooltipAnimationState = 'hidden' | 'visible';
+
+// TODO(jelbourn): we can't use constants from animation.ts here because you can't use
+// a text interpolation in anything that is analyzed statically with ngc (for AoT compile).
+export const TOOLTIP_SCALE_TRANSITION = '125ms cubic-bezier(0.4,0.0,1,1)';
+export const TOOLTIP_HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
+
 @Component({
   moduleId: module.id,
   selector: 'md-tooltip-component',
-  template: `<div class="md-tooltip">{{message}}</div>`,
+  template: `<div class="md-tooltip" [@state]="animationState">{{message}}</div>`,
   styleUrls: ['tooltip.css'],
+  animations: [
+    trigger('state', [
+      state('void', style({transform: 'scale(.1)'})),
+      transition(':enter',
+          animate(TOOLTIP_SCALE_TRANSITION, style({transform: 'scale(1)'}))),
+    ])
+  ],
 })
 export class TooltipComponent {
   message: string;
+  animationState: TooltipAnimationState = 'hidden';
+
 }
 
 

From 27bb0661b2ca7360fadd29ef4edfef4e53da58a7 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 26 Oct 2016 10:45:03 -0700
Subject: [PATCH 08/10] revert tooltip

---
 src/lib/tooltip/tooltip.ts | 20 ++------------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index a4030bc3453a..d48dd81ba200 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -6,7 +6,7 @@ import {
     Input,
     ElementRef,
     ViewContainerRef,
-    ChangeDetectorRef, state, trigger, transition, style, animate
+    ChangeDetectorRef
 } from '@angular/core';
 import {
   Overlay,
@@ -180,30 +180,14 @@ export class MdTooltip {
   }
 }
 
-export type TooltipAnimationState = 'hidden' | 'visible';
-
-// TODO(jelbourn): we can't use constants from animation.ts here because you can't use
-// a text interpolation in anything that is analyzed statically with ngc (for AoT compile).
-export const TOOLTIP_SCALE_TRANSITION = '125ms cubic-bezier(0.4,0.0,1,1)';
-export const TOOLTIP_HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)';
-
 @Component({
   moduleId: module.id,
   selector: 'md-tooltip-component',
-  template: `<div class="md-tooltip" [@state]="animationState">{{message}}</div>`,
+  template: `<div class="md-tooltip">{{message}}</div>`,
   styleUrls: ['tooltip.css'],
-  animations: [
-    trigger('state', [
-      state('void', style({transform: 'scale(.1)'})),
-      transition(':enter',
-          animate(TOOLTIP_SCALE_TRANSITION, style({transform: 'scale(1)'}))),
-    ])
-  ],
 })
 export class TooltipComponent {
   message: string;
-  animationState: TooltipAnimationState = 'hidden';
-
 }
 
 

From 4334bb0346fce1d851872d6fd21533e29be354a2 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 26 Oct 2016 11:34:35 -0700
Subject: [PATCH 09/10] move nav/aria concerns out of the nav bar

---
 src/demo-app/tabs/tabs-demo.html          | 4 ++--
 src/demo-app/tabs/tabs-demo.scss          | 2 +-
 src/lib/tabs/_tabs-theme.scss             | 3 ++-
 src/lib/tabs/tab-nav-bar/tab-nav-bar.html | 6 ++----
 src/lib/tabs/tab-nav-bar/tab-nav-bar.scss | 4 ++--
 src/lib/tabs/tab-nav-bar/tab-nav-bar.ts   | 2 +-
 6 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 42828fe71669..656b09d02a71 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -1,7 +1,7 @@
 <h1>Tab Nav Bar</h1>
 
 <div class="demo-nav-bar">
-  <md-tab-nav-bar>
+  <nav md-tab-nav-bar aria-label="weather navigation links">
     <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
@@ -9,7 +9,7 @@ <h1>Tab Nav Bar</h1>
        (click)="activeLinkIndex = i">
       {{tabLink.label}}
     </a>
-  </md-tab-nav-bar>
+  </nav>
   <router-outlet></router-outlet>
 </div>
 
diff --git a/src/demo-app/tabs/tabs-demo.scss b/src/demo-app/tabs/tabs-demo.scss
index a1a82fe571be..0a0337ee419c 100644
--- a/src/demo-app/tabs/tabs-demo.scss
+++ b/src/demo-app/tabs/tabs-demo.scss
@@ -1,6 +1,6 @@
 .demo-nav-bar {
   border: 1px solid #e0e0e0;
-  .md-tab-header {
+  [md-tab-nav-bar] {
     background: #f9f9f9;
   }
   sunny-routed-content,
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
index abb5ceeb4d5a..ff0017b5ad16 100644
--- a/src/lib/tabs/_tabs-theme.scss
+++ b/src/lib/tabs/_tabs-theme.scss
@@ -8,7 +8,8 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
-  
+
+  [md-tab-nav-bar],
   .md-tab-header {
     border-bottom: 1px solid md-color($background, status-bar);
   }
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.html b/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
index 82c22c45a25c..3b849fe4cae3 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.html
@@ -1,4 +1,2 @@
-<div class="md-tab-header">
-  <ng-content></ng-content>
-  <md-ink-bar></md-ink-bar>
-</div>
\ No newline at end of file
+<ng-content></ng-content>
+<md-ink-bar></md-ink-bar>
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
index 341c73d8bced..01d5ee6155e1 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -1,8 +1,8 @@
 @import '../tabs-common';
 @import '../../core/style/variables';
 
-// Wraps the heading that contains the anchors
-.md-tab-header {
+// Wraps the bar containing the anchors
+[md-tab-nav-bar] {
   @include tab-header;
 }
 
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index 62abfdafbf1b..cb4eef157100 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -7,7 +7,7 @@ import {MdInkBar} from '../ink-bar';
  */
 @Component({
   moduleId: module.id,
-  selector: 'md-tab-nav-bar',
+  selector: '[md-tab-nav-bar]',
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
   encapsulation: ViewEncapsulation.None,

From d808c7169a783fa438ddcd82414e8957ae2a5157 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Wed, 26 Oct 2016 13:10:48 -0700
Subject: [PATCH 10/10] fix unit test

---
 src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index 34fa3feed73b..a2074c18fdf5 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -43,11 +43,11 @@ describe('MdTabNavBar', () => {
 @Component({
   selector: 'test-app',
   template: `
-    <md-tab-nav-bar>
+    <nav md-tab-nav-bar>
       <a md-tab-link [active]="activeIndex === 0" (click)="activeIndex = 0">Tab One</a>
       <a md-tab-link [active]="activeIndex === 1" (click)="activeIndex = 1">Tab Two</a>
       <a md-tab-link [active]="activeIndex === 2" (click)="activeIndex = 2">Tab Three</a>
-    </md-tab-nav-bar>
+    </nav>
   `
 })
 class SimpleTabNavBarTestApp {