From cf9489b259270bb32f17c4fa0644ed4bbd6cddca Mon Sep 17 00:00:00 2001
From: Patty RoDee <prodee@google.com>
Date: Mon, 16 Apr 2018 12:30:27 -0700
Subject: [PATCH] feat(tabs): Add tab indicator inside tab (#2565)

---
 demos/tab.html                                | 293 +++++++++++++++---
 demos/tab.scss                                |  24 +-
 packages/mdc-tab-indicator/README.md          |   6 +-
 packages/mdc-tab-indicator/_mixins.scss       |   6 -
 packages/mdc-tab-indicator/foundation.js      |  12 +-
 packages/mdc-tab-indicator/index.js           |   4 +-
 .../mdc-tab-indicator/mdc-tab-indicator.scss  |  10 +-
 packages/mdc-tab/README.md                    |  42 ++-
 packages/mdc-tab/adapter.js                   |  15 +
 packages/mdc-tab/constants.js                 |   3 +
 packages/mdc-tab/foundation.js                |  20 +-
 packages/mdc-tab/index.js                     |  76 +++--
 packages/mdc-tab/mdc-tab.scss                 |  53 +++-
 packages/mdc-tab/package-lock.json            |  18 --
 packages/mdc-tab/package.json                 |   7 +-
 test/unit/mdc-tab/foundation.test.js          |  33 ++
 test/unit/mdc-tab/mdc-tab.test.js             |  47 ++-
 17 files changed, 535 insertions(+), 134 deletions(-)
 delete mode 100644 packages/mdc-tab/package-lock.json

diff --git a/demos/tab.html b/demos/tab.html
index 4703500cee9..fd0db218d60 100644
--- a/demos/tab.html
+++ b/demos/tab.html
@@ -40,18 +40,36 @@
     </header>
 
     <main class="mdc-toolbar-fixed-adjust">
-      <section class="hero">
-        <button class="mdc-tab demo-tab" role="tab" data-demo="demoTabFavorite">
+      <section class="hero demo">
+        <button class="mdc-tab mdc-tab--stacked mdc-tab--active demo-tab" role="tab">
           <span class="mdc-tab__content">
             <span class="material-icons mdc-tab__icon">favorite</span>
             <span class="mdc-tab__text-label">Favorites</span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
           </span>
+          <span class="mdc-tab__ripple"></span>
         </button>
-        <button class="mdc-tab mdc-tab--active demo-tab" role="tab" data-demo="demoRecentsTabRecents">
+        <button class="mdc-tab mdc-tab--stacked demo-tab" role="tab">
           <span class="mdc-tab__content">
             <span class="material-icons mdc-tab__icon">phone</span>
             <span class="mdc-tab__text-label">Recents</span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+          </span>
+          <span class="mdc-tab__ripple"></span>
+        </button>
+        <button class="mdc-tab mdc-tab--stacked demo-tab" role="tab">
+          <span class="mdc-tab__content">
+            <span class="material-icons mdc-tab__icon">near_me</span>
+            <span class="mdc-tab__text-label">Nearby</span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
           </span>
+          <span class="mdc-tab__ripple"></span>
         </button>
       </section>
 
@@ -64,80 +82,267 @@ <h3>RTL</h3>
       </div>
 
       <section class="example">
-        <h2>Basic Tabs</h2>
+        <h2>Tabs</h2>
+
+        <h4>Text Label</h4>
         <div class="demo">
-          <button class="mdc-tab demo-tab" role="tab" data-demo="basicTab">
+          <button class="mdc-tab mdc-tab--active demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Favorites</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Recents</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
             <span class="mdc-tab__content">
               <span class="mdc-tab__text-label">Nearby</span>
             </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+        </div>
+
+        <br>
+        <h4>Icon</h4>
+        <div class="demo">
+          <button class="mdc-tab mdc-tab--active demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">favorite</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">phone</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">near_me</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
           </button>
-          <div class="demo-controls">
-            <input type="checkbox" id="id0" data-controls="basicTab"/>
-            <label for="id0">Active</label>
-          </div>
         </div>
+
+        <br>
+        <h4>Text Label and Icon</h4>
         <div class="demo">
-          <button class="mdc-tab demo-tab" role="tab" data-demo="basicTabWithIcon">
+          <button class="mdc-tab mdc-tab--active demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">favorite</span>
+              <span class="mdc-tab__text-label">Favorites</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
             <span class="mdc-tab__content">
-              <span class="material-icons mdc-tab__icon">directions_transit</span>
-              <span class="mdc-tab__text-label">Transit</span>
+              <span class="mdc-tab__icon material-icons">phone</span>
+              <span class="mdc-tab__text-label">Recent</span>
             </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">near_me</span>
+              <span class="mdc-tab__text-label">Nearby</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
           </button>
-          <div class="demo-controls">
-            <input type="checkbox" id="id1" data-controls="basicTabWithIcon"/>
-            <label for="id1">Active</label>
-          </div>
         </div>
-      </section>
 
-      <section class="example">
-        <h2>Basic Tabs with Custom Colors</h2>
+        <br>
+        <h4>Stacked Text Label and Icon</h4>
+        <div class="demo">
+          <button class="mdc-tab mdc-tab--stacked mdc-tab--active demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">favorite</span>
+              <span class="mdc-tab__text-label">Favorites</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab mdc-tab--stacked demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">phone</span>
+              <span class="mdc-tab__text-label">Recent</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab mdc-tab--stacked demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__icon material-icons">near_me</span>
+              <span class="mdc-tab__text-label">Nearby</span>
+            </span>
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+        </div>
+
+        <br>
+        <h4>Text Label Width-Matching Indicator</h4>
         <div class="demo">
-          <button class="mdc-tab demo-tab custom-tab1" role="tab" data-demo="customColorsTab1">
+          <button class="mdc-tab mdc-tab--active demo-tab" role="tab">
             <span class="mdc-tab__content">
-              <span class="mdc-tab__text-label">Showtimes</span>
+              <span class="mdc-tab__text-label">Favorites</span>
+              <span class="mdc-tab-indicator mdc-tab-indicator--active">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
             </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Recent</span>
+              <span class="mdc-tab-indicator">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Nearby</span>
+              <span class="mdc-tab-indicator">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
           </button>
-          <div class="demo-controls">
-            <input type="checkbox" id="id2" data-controls="customColorsTab1"/>
-            <label for="id2">Active</label>
-          </div>
         </div>
+
+        <br>
+        <h4>Text Label with Icon Indicator</h4>
         <div class="demo">
-          <button class="mdc-tab demo-tab custom-tab2" role="tab" data-demo="customColorsTab2">
+          <button class="mdc-tab mdc-tab--active demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Favorites</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade mdc-tab-indicator--active">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">crop_square</span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
             <span class="mdc-tab__content">
-              <span class="material-icons mdc-tab__icon">directions_car</span>
-              <span class="mdc-tab__text-label">Directions</span>
+              <span class="mdc-tab__text-label">Recents</span>
             </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">panorama_fish_eye</span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab demo-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Nearby</span>
+            </span>
+            <span class="mdc-tab-indicator mdc-tab-indicator--fade">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--icon material-icons">change_history</span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
           </button>
-          <div class="demo-controls">
-            <input type="checkbox" id="id3" data-controls="customColorsTab2"/>
-            <label for="id3">Active</label>
-          </div>
         </div>
       </section>
+
+      <section class="example">
+        <h2>Customization</h2>
+        <section class="custom-demo demo">
+          <button class="mdc-tab mdc-tab--stacked mdc-tab--active demo-tab custom-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="material-icons mdc-tab__icon">favorite</span>
+              <span class="mdc-tab__text-label">Favorites</span>
+              <span class="mdc-tab-indicator mdc-tab-indicator--active custom-tab-indicator">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab mdc-tab--stacked demo-tab custom-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="material-icons mdc-tab__icon">phone</span>
+              <span class="mdc-tab__text-label">Recents</span>
+              <span class="mdc-tab-indicator custom-tab-indicator">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+          <button class="mdc-tab mdc-tab--stacked demo-tab custom-tab" role="tab">
+            <span class="mdc-tab__content">
+              <span class="material-icons mdc-tab__icon">near_me</span>
+              <span class="mdc-tab__text-label">Nearby</span>
+              <span class="mdc-tab-indicator custom-tab-indicator">
+                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+              </span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+        </section>
+      </section>
     </main>
 
     <script src="/assets/material-components-web.js" async></script>
     <script src="/assets/common.js" async></script>
     <script>
       demoReady(function() {
-        var demos = document.querySelectorAll('[data-demo]');
-        for (var i = 0; i < demos.length; i++) {
-          var demoName = demos[i].dataset.demo;
-          window[demoName] = new mdc.tab.MDCTab(demos[i]);
-        }
-
-        var controls = document.querySelectorAll('[data-controls]');
-        for (var i = 0; i < controls.length; i++) {
-          controls[i].addEventListener('change', function(event) {
-            var controlTarget = event.currentTarget.dataset.controls;
-            if (window[controlTarget]) {
-              window[controlTarget].active = event.currentTarget.checked;
+        function initDemo(demoRoot) {
+          var demoTabs = demoRoot.querySelectorAll('.mdc-tab');
+          var activeTab;
+          [].forEach.call(demoTabs, function (tabEl) {
+            var tab = new mdc.tab.MDCTab(tabEl);
+            if (tab.active) {
+              activeTab = tab;
             }
+
+            tabEl.addEventListener('click', function() {
+              activeTab.deactivate();
+              tab.activate(activeTab.computeIndicatorClientRect());
+              activeTab = tab;
+            });
           });
         }
 
+        var demos = document.querySelectorAll('.demo');
+        [].forEach.call(demos, initDemo);
+
         var rtlControls = document.getElementById('rtl-checkbox');
         rtlControls.addEventListener('change', function(event) {
           document.body.setAttribute('dir', event.currentTarget.checked ? 'rtl': 'ltr');
diff --git a/demos/tab.scss b/demos/tab.scss
index 4f29421084b..0be33f01451 100644
--- a/demos/tab.scss
+++ b/demos/tab.scss
@@ -17,6 +17,8 @@
 @import "./common";
 @import "../packages/mdc-tab/mixins";
 @import "../packages/mdc-tab/mdc-tab";
+@import "../packages/mdc-tab-indicator/mdc-tab-indicator";
+@import "../packages/mdc-tab-indicator/mixins";
 @import "../packages/mdc-elevation/mixins";
 @import "../packages/mdc-ripple/mixins";
 @import "../packages/mdc-theme/color-palette";
@@ -39,22 +41,22 @@
   padding: 24px;
 }
 
-.custom-tab1 {
-  @include mdc-states($material-color-yellow-a700);
-  @include mdc-tab-text-label-color($material-color-pink-600);
+.custom-tab {
+  @include mdc-tab-text-label-color($material-color-blue-300);
+  @include mdc-tab-icon-color($material-color-orange-300);
 
-  &.mdc-tab--active {
-    @include mdc-tab-text-label-color($material-color-cyan-600);
+  .custom-tab-indicator {
+    @include mdc-tab-indicator-underline-color($material-color-pink-a700);
+    @include mdc-tab-indicator-underline-height(5px);
+    @include mdc-tab-indicator-underline-top-corner-radius(5px);
   }
-}
 
-.custom-tab2 {
-  @include mdc-states($material-color-amber-a700);
-  @include mdc-tab-text-label-color($material-color-red-300);
-  @include mdc-tab-icon-color($material-color-orange-300);
+  .mdc-tab__ripple {
+    @include mdc-states($material-color-pink-100);
+  }
 
   &.mdc-tab--active {
-    @include mdc-tab-text-label-color($material-color-red-900);
+    @include mdc-tab-text-label-color($material-color-blue-900);
     @include mdc-tab-icon-color($material-color-orange-900);
   }
 }
diff --git a/packages/mdc-tab-indicator/README.md b/packages/mdc-tab-indicator/README.md
index 19889f8d1f4..bda01f555b0 100644
--- a/packages/mdc-tab-indicator/README.md
+++ b/packages/mdc-tab-indicator/README.md
@@ -46,6 +46,10 @@ npm install --save @material/tab-indicator
 </span>
 ```
 
+#### Active Indicator
+
+Add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` element to make the Tab Indicator active.
+
 #### Sliding Underline Indicator
 ```html
 <span class="mdc-tab-indicator">
@@ -92,7 +96,7 @@ Mixin | Description
 `mdc-tab-indicator-icon-color($color)` | Customizes the color of the icon subelement
 `mdc-tab-indicator-underline-height($height)` | Customizes the height of the underline
 `mdc-tab-indicator-icon-height($height)` | Customizes the height of the icon subelement
-`mdc-tab-indicator-underline-top-radius($radius)` | Customizes the top left and top right border radius of the underline subelement
+`mdc-tab-indicator-underline-top-corner-radius($radius)` | Customizes the top left and top right border radius of the underline subelement
 
 ### `MDCTabIndicator`
 
diff --git a/packages/mdc-tab-indicator/_mixins.scss b/packages/mdc-tab-indicator/_mixins.scss
index 19449507563..47919ff0837 100644
--- a/packages/mdc-tab-indicator/_mixins.scss
+++ b/packages/mdc-tab-indicator/_mixins.scss
@@ -21,12 +21,6 @@
   position: relative;
 }
 
-@mixin mdc-tab-indicator-active_ {
-  > .mdc-tab-indicator__content {
-    opacity: 1;
-  }
-}
-
 @mixin mdc-tab-indicator-underline-color($color) {
   > .mdc-tab-indicator__content--underline {
     @include mdc-theme-prop(background-color, $color);
diff --git a/packages/mdc-tab-indicator/foundation.js b/packages/mdc-tab-indicator/foundation.js
index 2aad6c266f3..fd160f38386 100644
--- a/packages/mdc-tab-indicator/foundation.js
+++ b/packages/mdc-tab-indicator/foundation.js
@@ -16,14 +16,14 @@
 */
 
 import MDCFoundation from '@material/base/foundation';
-import MDCTabIndcatorAdapter from './adapter';
+import MDCTabIndicatorAdapter from './adapter';
 import {
   cssClasses,
   strings,
 } from './constants';
 
 /**
- * @extends {MDCFoundation<!MDCTabIndcatorAdapter>}
+ * @extends {MDCFoundation<!MDCTabIndicatorAdapter>}
  * @abstract
  */
 class MDCTabIndicatorFoundation extends MDCFoundation {
@@ -38,11 +38,11 @@ class MDCTabIndicatorFoundation extends MDCFoundation {
   }
 
   /**
-   * @see MDCTabIndcatorAdapter for typing information
-   * @return {!MDCTabIndcatorAdapter}
+   * @see MDCTabIndicatorAdapter for typing information
+   * @return {!MDCTabIndicatorAdapter}
    */
   static get defaultAdapter() {
-    return /** @type {!MDCTabIndcatorAdapter} */ ({
+    return /** @type {!MDCTabIndicatorAdapter} */ ({
       registerEventHandler: () => {},
       deregisterEventHandler: () => {},
       addClass: () => {},
@@ -52,7 +52,7 @@ class MDCTabIndicatorFoundation extends MDCFoundation {
     });
   }
 
-  /** @param {!MDCTabIndcatorAdapter} adapter */
+  /** @param {!MDCTabIndicatorAdapter} adapter */
   constructor(adapter) {
     super(Object.assign(MDCTabIndicatorFoundation.defaultAdapter, adapter));
   }
diff --git a/packages/mdc-tab-indicator/index.js b/packages/mdc-tab-indicator/index.js
index 3ea74811c39..47f120abeaa 100644
--- a/packages/mdc-tab-indicator/index.js
+++ b/packages/mdc-tab-indicator/index.js
@@ -36,9 +36,11 @@ class MDCTabIndicator extends MDCComponent {
     return new MDCTabIndicator(root);
   }
 
+  /**
+   * @param {...?} args
+   */
   constructor(...args) {
     super(...args);
-
     /** @type {?Element} */
     this.content_;
   }
diff --git a/packages/mdc-tab-indicator/mdc-tab-indicator.scss b/packages/mdc-tab-indicator/mdc-tab-indicator.scss
index bb38aa2ba9d..445403901d5 100644
--- a/packages/mdc-tab-indicator/mdc-tab-indicator.scss
+++ b/packages/mdc-tab-indicator/mdc-tab-indicator.scss
@@ -15,7 +15,7 @@
   * limitations under the License.
 */
 
-@import "@material/animation/functions";
+@import "@material/animation/variables";
 @import "./mixins";
 
 .mdc-tab-indicator {
@@ -34,10 +34,6 @@
   z-index: 1;
 }
 
-.mdc-tab-indicator--active {
-  @include mdc-tab-indicator-active_;
-}
-
 .mdc-tab-indicator__content {
   transform-origin: left;
   opacity: 0;
@@ -53,6 +49,10 @@
   margin: 0 auto;
 }
 
+.mdc-tab-indicator--active > .mdc-tab-indicator__content {
+  opacity: 1;
+}
+
 .mdc-tab-indicator--sliding-activate > .mdc-tab-indicator__content {
   transition: 250ms transform $mdc-animation-standard-curve-timing-function;
 }
diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
index 055c37ae917..3fbd9086a86 100644
--- a/packages/mdc-tab/README.md
+++ b/packages/mdc-tab/README.md
@@ -32,11 +32,32 @@ npm install --save @material/tab
 ### HTML Structure
 
 ```html
-<button class="mdc-tab" role="tab" aria-selected="false">
+<button class="mdc-tab" role="tab" aria-selected="false" tabindex="-1">
   <div class="mdc-tab__content">
     <span class="mdc-tab__icon">heart</div>
     <span class="mdc-tab__text-label">Favorites</div>
   </div>
+  <span class="mdc-tab-indicator">
+    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+  </span>
+  <div class="mdc-tab__ripple"></div>
+</button>
+```
+
+#### Active Tab
+
+>*NOTE*: Don't forget to add the `mdc-tab-indicator--active` class to the `mdc-tab-indicator` subcomponent.
+
+```html
+<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true">
+  <div class="mdc-tab__content">
+    <span class="mdc-tab__icon">heart</div>
+    <span class="mdc-tab__text-label">Favorites</div>
+  </div>
+  <span class="mdc-tab-indicator mdc-tab-indicator--active">
+    <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+  </span>
+  <div class="mdc-tab__ripple"></div>
 </button>
 ```
 
@@ -45,8 +66,10 @@ npm install --save @material/tab
 CSS Class | Description
 --- | ---
 `mdc-tab` | Mandatory.
-`mdc-tab--active` | Optional. Indicates that the tab is active.
 `mdc-tab__content` | Mandatory. Indicates the text label of the tab
+`mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab
+`mdc-tab--active` | Optional. Indicates that the tab is active
+`mdc-tab--stacked` | Optional. Indicates that the tab content should be displayed vertically instead of horizontally
 `mdc-tab__text-label` | Optional. Indicates an icon in the tab
 `mdc-tab__icon` | Optional. Indicates a leading icon in the tab
 
@@ -63,8 +86,13 @@ Mixin | Description
 
 Property | Value Type | Description
 --- | --- | ---
-`active` | `boolean` | Allows getting/setting the active state of the tab
-`ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes
+`active` | `boolean` | Allows getting the active state of the tab
+
+Method Signature | Description
+--- | ---
+`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the indicator.  `previousIndicatorClientRect` is an optional argument
+`deactivate() => void` | Deactivates the indicator
+
 
 ### `MDCTabAdapter`
 
@@ -76,6 +104,9 @@ Method Signature | Description
 `registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
 `deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
 `setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value
+`activateIndicator(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument
+`deactivateIndicator() => void` | Deactivates the tab indicator subcomponent
+`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect
 
 ### `MDCTabFoundation`
 
@@ -83,5 +114,6 @@ Method Signature | Description
 --- | ---
 `handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event
 `isActive() => boolean` | Returns whether the tab is active
-`activate() => void` | Activates the tab
+`activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument
 `deactivate() => void` | Deactivates the tab
+`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect
diff --git a/packages/mdc-tab/adapter.js b/packages/mdc-tab/adapter.js
index 8b88ffd1826..eec44c203ef 100644
--- a/packages/mdc-tab/adapter.js
+++ b/packages/mdc-tab/adapter.js
@@ -67,6 +67,21 @@ class MDCTabAdapter {
    * @param {string} value The value so give the attribute
    */
   setAttr(attr, value) {}
+
+  /**
+   * Activates the indicator element.
+   * @param {!ClientRect=} previousIndicatorClientRect The client rect of the previously activated indicator
+   */
+  activateIndicator(previousIndicatorClientRect) {}
+
+  /** Deactivates the indicator */
+  deactivateIndicator() {}
+
+  /**
+   * Returns the client rect of the indicator
+   * @return {!ClientRect}
+   */
+  computeIndicatorClientRect() {}
 }
 
 export default MDCTabAdapter;
diff --git a/packages/mdc-tab/constants.js b/packages/mdc-tab/constants.js
index 9eefed94d17..c05c8bce1be 100644
--- a/packages/mdc-tab/constants.js
+++ b/packages/mdc-tab/constants.js
@@ -25,6 +25,9 @@ const cssClasses = {
 /** @enum {string} */
 const strings = {
   ARIA_SELECTED: 'aria-selected',
+  RIPPLE_SELECTOR: '.mdc-tab__ripple',
+  TAB_INDICATOR_SELECTOR: '.mdc-tab-indicator',
+  TABINDEX: 'tabIndex',
 };
 
 export {
diff --git a/packages/mdc-tab/foundation.js b/packages/mdc-tab/foundation.js
index 9dea0ce7a81..ad372515679 100644
--- a/packages/mdc-tab/foundation.js
+++ b/packages/mdc-tab/foundation.js
@@ -49,6 +49,9 @@ class MDCTabFoundation extends MDCFoundation {
       removeClass: () => {},
       hasClass: () => {},
       setAttr: () => {},
+      activateIndicator: () => {},
+      deactivateIndicator: () => {},
+      computeIndicatorClientRect: () => {},
     });
   }
 
@@ -84,16 +87,20 @@ class MDCTabFoundation extends MDCFoundation {
 
   /**
    * Activates the Tab
+   * @param {!ClientRect=} previousIndicatorClientRect
    */
-  activate() {
+  activate(previousIndicatorClientRect) {
     // Early exit
     if (this.isActive()) {
       return;
     }
+
     this.adapter_.registerEventHandler('transitionend', this.handleTransitionEnd_);
     this.adapter_.addClass(cssClasses.ANIMATING_ACTIVATE);
     this.adapter_.addClass(cssClasses.ACTIVE);
     this.adapter_.setAttr(strings.ARIA_SELECTED, 'true');
+    this.adapter_.setAttr(strings.TABINDEX, '0');
+    this.adapter_.activateIndicator(previousIndicatorClientRect);
   }
 
   /**
@@ -104,10 +111,21 @@ class MDCTabFoundation extends MDCFoundation {
     if (!this.isActive()) {
       return;
     }
+
     this.adapter_.registerEventHandler('transitionend', this.handleTransitionEnd_);
     this.adapter_.addClass(cssClasses.ANIMATING_DEACTIVATE);
     this.adapter_.removeClass(cssClasses.ACTIVE);
     this.adapter_.setAttr(strings.ARIA_SELECTED, 'false');
+    this.adapter_.setAttr(strings.TABINDEX, '-1');
+    this.adapter_.deactivateIndicator();
+  }
+
+  /**
+   * Returns the indicator's client rect
+   * @return {!ClientRect}
+   */
+  computeIndicatorClientRect() {
+    return this.adapter_.computeIndicatorClientRect();
   }
 }
 
diff --git a/packages/mdc-tab/index.js b/packages/mdc-tab/index.js
index 342de633a0e..263da7751e3 100644
--- a/packages/mdc-tab/index.js
+++ b/packages/mdc-tab/index.js
@@ -16,7 +16,11 @@
  */
 
 import MDCComponent from '@material/base/component';
-import {MDCRipple} from '@material/ripple/index';
+
+/* eslint-disable no-unused-vars */
+import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
+import {MDCTabIndicator, MDCTabIndicatorFoundation} from '@material/tab-indicator/index';
+/* eslint-enable no-unused-vars */
 
 import MDCTabAdapter from './adapter';
 import MDCTabFoundation from './foundation';
@@ -31,9 +35,10 @@ class MDCTab extends MDCComponent {
    */
   constructor(...args) {
     super(...args);
-
-    /** @private {!MDCRipple} */
-    this.ripple_ = new MDCRipple(this.root_);
+    /** @private {?MDCRipple} */
+    this.ripple_;
+    /** @private {?MDCTabIndicator} */
+    this.tabIndicator_;
   }
 
   /**
@@ -44,6 +49,22 @@ class MDCTab extends MDCComponent {
     return new MDCTab(root);
   }
 
+  initialize(
+    rippleFactory = (el, foundation) => new MDCRipple(el, foundation),
+    tabIndicatorFactory = (el) => new MDCTabIndicator(el)) {
+    const rippleSurface = this.root_.querySelector(MDCTabFoundation.strings.RIPPLE_SELECTOR);
+    const rippleAdapter = Object.assign(MDCRipple.createAdapter(/** @type {!RippleCapableSurface} */ (this)), {
+      addClass: (className) => rippleSurface.classList.add(className),
+      removeClass: (className) => rippleSurface.classList.remove(className),
+      updateCssVariable: (varName, value) => rippleSurface.style.setProperty(varName, value),
+    });
+    const rippleFoundation = new MDCRippleFoundation(rippleAdapter);
+    this.ripple_ = rippleFactory(this.root_, rippleFoundation);
+
+    const tabIndicatorElement = this.root_.querySelector(MDCTabFoundation.strings.TAB_INDICATOR_SELECTOR);
+    this.tabIndicator_ = tabIndicatorFactory(tabIndicatorElement);
+  }
+
   destroy() {
     this.ripple_.destroy();
     super.destroy();
@@ -53,17 +74,22 @@ class MDCTab extends MDCComponent {
    * @return {!MDCTabFoundation}
    */
   getDefaultFoundation() {
-    return new MDCTabFoundation(/** @type {!MDCTabAdapter} */ (Object.assign({
-      setAttr: (attr, value) => this.root_.setAttribute(attr, value),
-      registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
-      deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      hasClass: (className) => this.root_.classList.contains(className),
-    })));
+    return new MDCTabFoundation(
+      /** @type {!MDCTabAdapter} */ ({
+        setAttr: (attr, value) => this.root_.setAttribute(attr, value),
+        registerEventHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+        deregisterEventHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+        addClass: (className) => this.root_.classList.add(className),
+        removeClass: (className) => this.root_.classList.remove(className),
+        hasClass: (className) => this.root_.classList.contains(className),
+        activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
+        deactivateIndicator: () => this.tabIndicator_.deactivate(),
+        computeIndicatorClientRect: () => this.tabIndicator_.computeContentClientRect(),
+      }));
   }
 
   /**
+   * Getter for the active state of the tab
    * @return {boolean}
    */
   get active() {
@@ -71,14 +97,26 @@ class MDCTab extends MDCComponent {
   }
 
   /**
-   * @param {boolean} isActive
+   * Activates the tab
+   * @param {!ClientRect=} computeIndicatorClientRect
+   */
+  activate(computeIndicatorClientRect) {
+    this.foundation_.activate(computeIndicatorClientRect);
+  }
+
+  /**
+   * Deactivates the tab
+   */
+  deactivate() {
+    this.foundation_.deactivate();
+  }
+
+  /**
+   * Returns the indicator's client rect
+   * @return {!ClientRect}
    */
-  set active(isActive) {
-    if (isActive) {
-      this.foundation_.activate();
-    } else {
-      this.foundation_.deactivate();
-    }
+  computeIndicatorClientRect() {
+    return this.foundation_.computeIndicatorClientRect();
   }
 }
 
diff --git a/packages/mdc-tab/mdc-tab.scss b/packages/mdc-tab/mdc-tab.scss
index e013e28ec90..85ed102ba5b 100644
--- a/packages/mdc-tab/mdc-tab.scss
+++ b/packages/mdc-tab/mdc-tab.scss
@@ -18,18 +18,16 @@
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/typography/mixins";
+@import "@material/tab-indicator/mixins";
 @import "./mixins";
 @import "./variables";
 
 .mdc-tab {
-  @include mdc-ripple-surface;
-  @include mdc-ripple-radius-bounded;
-  @include mdc-states(primary);
   @include mdc-tab-text-label-color($mdc-tab-baseline-color);
   @include mdc-tab-icon-color($mdc-tab-baseline-color);
+  @include mdc-tab-indicator-surface;
 
   display: flex;
-  position: relative;
   flex: 1 0 auto;
   justify-content: center;
   box-sizing: border-box;
@@ -44,16 +42,30 @@
   white-space: nowrap;
   cursor: pointer;
   -webkit-appearance: none;
-  overflow: hidden;
   z-index: 1;
 }
 
+.mdc-tab__ripple {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-radius-bounded;
+  @include mdc-states(primary);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .mdc-tab__content {
+  @include mdc-tab-indicator-surface;
+
   display: flex;
-  position: relative;
   justify-content: center;
   height: inherit;
-  z-index: 1;
+  pointer-events: none;
+  z-index: 2;
 }
 
 .mdc-tab__text-label {
@@ -71,8 +83,22 @@
   padding: 12px 0;
 }
 
-.mdc-tab__icon + .mdc-tab__text-label {
-  @include mdc-rtl-reflexive-box(padding, left, 8px);
+.mdc-tab--stacked {
+  height: 72px;
+}
+
+.mdc-tab--stacked .mdc-tab__content {
+  flex-direction: column;
+  align-items: center;
+}
+
+.mdc-tab--stacked .mdc-tab__icon {
+  padding: 12px 0 8px;
+}
+
+.mdc-tab--stacked .mdc-tab__text-label {
+  padding: 0 0 16px;
+  line-height: 12px;
 }
 
 /**
@@ -97,3 +123,12 @@
   @include mdc-tab-text-label-color(primary);
   @include mdc-tab-icon-color(primary);
 }
+
+.mdc-tab .mdc-tab__icon + .mdc-tab__text-label {
+  @include mdc-rtl-reflexive-box(padding, left, 8px);
+}
+
+.mdc-tab--stacked .mdc-tab__icon + .mdc-tab__text-label {
+  padding-right: 0;
+  padding-left: 0;
+}
diff --git a/packages/mdc-tab/package-lock.json b/packages/mdc-tab/package-lock.json
deleted file mode 100644
index c99f45b885e..00000000000
--- a/packages/mdc-tab/package-lock.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "@material/tab",
-  "version": "0.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@material/rtl": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.30.0.tgz",
-      "integrity": "sha512-zxEiXFESaQvNNm+tHO0QVKxkGERkL6rX4ghusl7HhosueOcjaVLNYCxH5F0x6Et04TL0wh1ycBmFUIEqVhEkWw=="
-    },
-    "@material/theme": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-0.30.0.tgz",
-      "integrity": "sha512-jd1iC5qyq5YX4w8sZj9+lXExeK4adXbAjw/lOQuDeT6WSGJf7HovxQlHjlyWJ4p/x0xTGrlaDHnrCxeJQCq4Og=="
-    }
-  }
-}
diff --git a/packages/mdc-tab/package.json b/packages/mdc-tab/package.json
index f631d5c3d75..2126e9a58f9 100644
--- a/packages/mdc-tab/package.json
+++ b/packages/mdc-tab/package.json
@@ -17,9 +17,10 @@
   "dependencies": {
     "@material/base": "^0.34.0",
     "@material/ripple": "^0.34.1",
-    "@material/rtl": "^0.30.0",
-    "@material/theme": "^0.30.0",
-    "@material/typography": "^0.34.0"
+    "@material/rtl": "^0.34.0",
+    "@material/theme": "^0.34.0",
+    "@material/typography": "^0.34.0",
+    "@material/tab-indicator": "^0.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/test/unit/mdc-tab/foundation.test.js b/test/unit/mdc-tab/foundation.test.js
index dc88f550d32..74ef451b9b6 100644
--- a/test/unit/mdc-tab/foundation.test.js
+++ b/test/unit/mdc-tab/foundation.test.js
@@ -36,6 +36,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerEventHandler', 'deregisterEventHandler',
     'addClass', 'removeClass', 'hasClass',
     'setAttr',
+    'activateIndicator', 'deactivateIndicator', 'computeIndicatorClientRect',
   ]);
 });
 
@@ -73,6 +74,24 @@ test('#activate sets the root element aria-selected attribute to true', () => {
   td.verify(mockAdapter.setAttr(MDCTabFoundation.strings.ARIA_SELECTED, 'true'));
 });
 
+test('#activate sets the root element tabindex to 0', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.activate();
+  td.verify(mockAdapter.setAttr(MDCTabFoundation.strings.TABINDEX, '0'));
+});
+
+test('#activate activates the indicator', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.activate({width: 100, left: 200});
+  td.verify(mockAdapter.activateIndicator({width: 100, left: 200}));
+});
+
+test('#computeIndicatorClientRect calls computeIndicatorClientRect on the adapter', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.computeIndicatorClientRect();
+  td.verify(mockAdapter.computeIndicatorClientRect());
+});
+
 test('#deactivate does nothing if not active', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.deactivate();
@@ -108,6 +127,20 @@ test('#deactivate sets the root element aria-selected attribute to false', () =>
   td.verify(mockAdapter.setAttr(MDCTabFoundation.strings.ARIA_SELECTED, 'false'));
 });
 
+test('#deactivate deactivates the indicator', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTabFoundation.cssClasses.ACTIVE)).thenReturn(true);
+  foundation.deactivate();
+  td.verify(mockAdapter.deactivateIndicator());
+});
+
+test('#deactivate sets the root element tabindex to -1', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTabFoundation.cssClasses.ACTIVE)).thenReturn(true);
+  foundation.deactivate();
+  td.verify(mockAdapter.setAttr(MDCTabFoundation.strings.TABINDEX, '-1'));
+});
+
 test('#handleTransitionEnd removes mdc-tab--animating-activate class', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.handleTransitionEnd({pseudoElement: ''});
diff --git a/test/unit/mdc-tab/mdc-tab.test.js b/test/unit/mdc-tab/mdc-tab.test.js
index 0c53e97bb52..274e2e48453 100644
--- a/test/unit/mdc-tab/mdc-tab.test.js
+++ b/test/unit/mdc-tab/mdc-tab.test.js
@@ -28,6 +28,10 @@ const getFixture = () => bel`
       <span class="mdc-tab__text-label">Foo</span>
       <span class="mdc-tab__icon"></span>
     </div>
+    <span class="mdc-tab__ripple"></span>
+    <span class="mdc-tab-indicator">
+      <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+    </span>
   </button>
 `;
 
@@ -96,6 +100,27 @@ test('#adapter.deregisterEventHandler removes an event listener from the root el
   td.verify(handler(td.matchers.anything()), {times: 0});
 });
 
+test('#adapter.activateIndicator activates the indicator subcomponent', () => {
+  const {root, component} = setupTest();
+  component.getDefaultFoundation().adapter_.activateIndicator();
+  assert.ok(root.querySelector('.mdc-tab-indicator').classList.contains('mdc-tab-indicator--active'));
+});
+
+test('#adapter.deactivateIndicator deactivates the indicator subcomponent', () => {
+  const {root, component} = setupTest();
+  component.getDefaultFoundation().adapter_.deactivateIndicator();
+  assert.notOk(root.querySelector('.mdc-tab-indicator').classList.contains('mdc-tab-indicator--active'));
+});
+
+test('#adapter.computeIndicatorClientRect returns the indicator element\'s bounding client rect', () => {
+  const {root, component} = setupTest();
+  component.getDefaultFoundation().adapter_.deactivateIndicator();
+  assert.deepEqual(
+    component.getDefaultFoundation().adapter_.computeIndicatorClientRect(),
+    root.querySelector('.mdc-tab-indicator').getBoundingClientRect()
+  );
+});
+
 function setupMockFoundationTest(root = getFixture()) {
   const MockFoundationConstructor = td.constructor(MDCTabFoundation);
   const mockFoundation = new MockFoundationConstructor();
@@ -109,14 +134,26 @@ test('#active getter calls isActive', () => {
   td.verify(mockFoundation.isActive(), {times: 1});
 });
 
-test('#active set to true calls activate', () => {
+test('#activate() calls activate', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.activate();
+  td.verify(mockFoundation.activate(undefined), {times: 1});
+});
+
+test('#activate({ClientRect}) calls activate', () => {
   const {component, mockFoundation} = setupMockFoundationTest();
-  component.active = true;
-  td.verify(mockFoundation.activate(), {times: 1});
+  component.activate({width: 100, left: 200});
+  td.verify(mockFoundation.activate({width: 100, left: 200}), {times: 1});
 });
 
-test('#active set to false calls deactivate', () => {
+test('#deactivate() calls deactivate', () => {
   const {component, mockFoundation} = setupMockFoundationTest();
-  component.active = false;
+  component.deactivate();
   td.verify(mockFoundation.deactivate(), {times: 1});
 });
+
+test('#computeIndicatorClientRect() calls computeIndicatorClientRect', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.computeIndicatorClientRect();
+  td.verify(mockFoundation.computeIndicatorClientRect(), {times: 1});
+});