diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9b8ad28bb7..b9ad07aca6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,44 @@
+<a name="0.32.0"></a>
+# [0.32.0](https://github.com/material-components/material-components-web/compare/v0.31.0...v0.32.0) (2018-03-05)
+
+
+### Bug Fixes
+
+* **chips:** Emit custom event from trailing icon ([#2286](https://github.com/material-components/material-components-web/issues/2286)) ([e849937](https://github.com/material-components/material-components-web/commit/e849937))
+* **ripple:** Fix selected opacity levels ([#2294](https://github.com/material-components/material-components-web/issues/2294)) ([06e39b1](https://github.com/material-components/material-components-web/commit/06e39b1))
+* **select:** add tests for select label package ([#2289](https://github.com/material-components/material-components-web/issues/2289)) ([b8ae66c](https://github.com/material-components/material-components-web/commit/b8ae66c))
+* **select:** Fix floating label for pre-selected option ([#2306](https://github.com/material-components/material-components-web/issues/2306)) ([d8dae34](https://github.com/material-components/material-components-web/commit/d8dae34))
+* **text-field:** disable validation check in setRequired ([#2201](https://github.com/material-components/material-components-web/issues/2201)) ([0ba7d10](https://github.com/material-components/material-components-web/commit/0ba7d10))
+* **toolbar:** Fix icon padding for ripples, and vertical alignment in FF/IE/Edge ([#2138](https://github.com/material-components/material-components-web/issues/2138)) ([d2c9726](https://github.com/material-components/material-components-web/commit/d2c9726))
+* Use `var` instead of `const` in demos/ready.js ([#2343](https://github.com/material-components/material-components-web/issues/2343)) ([78408bb](https://github.com/material-components/material-components-web/commit/78408bb))
+
+
+### Chores
+
+* **floating-label:** separate label module from text-field ([#2237](https://github.com/material-components/material-components-web/issues/2237)) ([4b24b51](https://github.com/material-components/material-components-web/commit/4b24b51))
+
+
+### Features
+
+* **chips:** Add `mdc-chip-set--choice` variant ([#2215](https://github.com/material-components/material-components-web/issues/2215)) ([f89cd10](https://github.com/material-components/material-components-web/commit/f89cd10))
+* **chips:** Change chip color when selected ([#2329](https://github.com/material-components/material-components-web/issues/2329)) ([ecf4060](https://github.com/material-components/material-components-web/commit/ecf4060))
+* **chips:** Create mixin to customize chip margins ([#2277](https://github.com/material-components/material-components-web/issues/2277)) ([b996b7f](https://github.com/material-components/material-components-web/commit/b996b7f))
+* **chips:** Handle multi-select for filter chips ([#2297](https://github.com/material-components/material-components-web/issues/2297)) ([807b6ce](https://github.com/material-components/material-components-web/commit/807b6ce))
+* **top app bar:** Add short top app bar always collapsed feature ([#2327](https://github.com/material-components/material-components-web/issues/2327)) ([bc17291](https://github.com/material-components/material-components-web/commit/bc17291))
+* **top-app-bar:** Baseline top app bar component ([#2225](https://github.com/material-components/material-components-web/issues/2225)) ([0ad69c4](https://github.com/material-components/material-components-web/commit/0ad69c4))
+* **top-app-bar:** Implement short top app bar ([#2290](https://github.com/material-components/material-components-web/issues/2290)) ([fd8d8d9](https://github.com/material-components/material-components-web/commit/fd8d8d9))
+
+
+### BREAKING CHANGES
+
+* **text-field:** removed setRequired and isRequired from foundation.
+* **chips:** The `mdc-chip--activated` class, `mdc-chip-activated-ink-color` Sass mixin, and the `toggleActive` methods on `MDCChip`/`MDCChipSet` have been renamed to `mdc-chip--selected`, `mdc-chip-selected-ink-color`, and `toggleSelected`, respectively.
+* **floating-label:** must use `.mdc-floating-label` selector instead of `.mdc-text-field__label`
+* **chips:** Added `mdc-chip-set--filter` as a variant to be set in the HTML.
+* **chips:** New MDCChipAdapter methods for handling trailing icons must be implemented.
+
+
+
 <a name="0.31.0"></a>
 # [0.31.0](https://github.com/material-components/material-components-web/compare/v0.30.0...v0.31.0) (2018-02-20)
 
diff --git a/demos/button.html b/demos/button.html
index e4d1ddd1c64..c2af876f093 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -112,9 +112,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense">
               Dense
             </button>
@@ -137,9 +134,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--raised">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense">
               Dense
             </button>
@@ -162,9 +156,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--unelevated">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense">
               Dense
             </button>
@@ -187,9 +178,6 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--stroked">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact">
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense">
               Dense
             </button>
@@ -225,9 +213,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -250,9 +235,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -275,9 +257,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--unelevated mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--unelevated mdc-button--dense" data-demo-no-js>
               Dense
             </button>
@@ -300,9 +279,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--compact" data-demo-no-js>
-              Compact
-            </button>
             <button class="mdc-button mdc-button--stroked mdc-button--dense" data-demo-no-js>
               Dense
             </button>
diff --git a/demos/card.html b/demos/card.html
index f4160fa5bf1..86eb4c7e9da 100644
--- a/demos/card.html
+++ b/demos/card.html
@@ -238,11 +238,7 @@ <h2 class="demo-card-article__title mdc-typography--headline">Asia's clean energ
         var rtlToggle = document.getElementById('toggle-rtl');
         rtlToggle.addEventListener('change', function() {
           var docEl = document.documentElement;
-          if (rtlToggle.checked) {
-            docEl.setAttribute('dir', 'rtl');
-          } else {
-            docEl.removeAttribute('dir');
-          }
+          docEl.setAttribute('dir', rtlToggle.checked ? 'rtl' : 'ltr');
         });
 
         [].forEach.call(document.querySelectorAll('.mdc-button'), function(surface) {
diff --git a/demos/checkbox.html b/demos/checkbox.html
index 473c5a5f0f4..ac3bfd730d2 100644
--- a/demos/checkbox.html
+++ b/demos/checkbox.html
@@ -98,8 +98,8 @@ <h2>CSS Only</h2>
             <label for="basic-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">Toggle RTL</button>
+            <button type="button" class="mdc-button mdc-button--stroked" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">Toggle <code>--align-end</code></button>
           </div>
         </div>
         <div>
@@ -210,8 +210,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -235,8 +235,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-indeterminate">Indeterminate checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
           <script>
             document.getElementById('native-js-checkbox-indeterminate').indeterminate = true;
@@ -262,8 +262,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-all">Custom colored checkbox (stroke, fill, ripple, and focus)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
         <div>
@@ -286,8 +286,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-stroke-and-fill">Custom colored checkbox (stroke and fill only)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-indeterminate">Toggle <code>indeterminate</code></button>
-            <button type="button" class="mdc-button mdc-button--stroked mdc-button--compact toggle-disabled">Toggle <code>disabled</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate">Toggle <code>indeterminate</code></button>
+            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled">Toggle <code>disabled</code></button>
           </div>
         </div>
       </section>
diff --git a/demos/chips.scss b/demos/chips.scss
index 12191089f2a..d9f059c153c 100644
--- a/demos/chips.scss
+++ b/demos/chips.scss
@@ -24,5 +24,6 @@
 .custom-chip-secondary {
   @include mdc-chip-fill-color(white);
   @include mdc-chip-ink-color($mdc-theme-secondary);
+  @include mdc-chip-selected-ink-color($mdc-theme-secondary);
   @include mdc-chip-stroke(2px, solid, $mdc-theme-secondary);
 }
diff --git a/demos/menu.html b/demos/menu.html
index 87685f735d5..09c3c00e6ef 100644
--- a/demos/menu.html
+++ b/demos/menu.html
@@ -320,25 +320,25 @@
           });
         }
 
-        const marginInputsEl = document.querySelector('#margin-inputs');
+        var marginInputsEl = document.querySelector('#margin-inputs');
         var inputs = marginInputsEl.querySelectorAll('input[type="text"]');
         for (var i = 0; i < inputs.length; i++) {
           inputs[i].addEventListener('change', function(evt) {
-            const topMarginInput = document.getElementById('top-margin');
-            const bottomMarginInput = document.getElementById('bottom-margin');
-            const rightMarginInput = document.getElementById('right-margin');
-            const leftMarginInput = document.getElementById('left-margin');
-            const margin = {top: parseInt(topMarginInput.value, 10),
-                            right: parseInt(rightMarginInput.value, 10),
-                            bottom: parseInt(bottomMarginInput.value, 10),
-                            left: parseInt(leftMarginInput.value, 10)};
+            var topMarginInput = document.getElementById('top-margin');
+            var bottomMarginInput = document.getElementById('bottom-margin');
+            var rightMarginInput = document.getElementById('right-margin');
+            var leftMarginInput = document.getElementById('left-margin');
+            var margin = {top: parseInt(topMarginInput.value, 10),
+                          right: parseInt(rightMarginInput.value, 10),
+                          bottom: parseInt(bottomMarginInput.value, 10),
+                          left: parseInt(leftMarginInput.value, 10)};
             menu.setAnchorMargin(margin);
           });
         }
 
-        const rtl = document.querySelector('input[name="is-rtl"]');
+        var rtl = document.querySelector('input[name="is-rtl"]');
         rtl.addEventListener('change', function() {
-          const demoWrapper = document.getElementById('demo-wrapper');
+          var demoWrapper = document.getElementById('demo-wrapper');
           if (rtl.checked) {
             demoWrapper.setAttribute('dir', 'rtl');
           } else {
diff --git a/demos/ready.js b/demos/ready.js
index da9c49cad18..a489f920dc0 100644
--- a/demos/ready.js
+++ b/demos/ready.js
@@ -79,7 +79,7 @@ window.demoReady = (function(root) {
       return;
     }
 
-    const elapsedTimeMs = Date.now() - startTimeMs;
+    var elapsedTimeMs = Date.now() - startTimeMs;
     if (elapsedTimeMs > POLL_MAX_WAIT_MS) {
       clearInterval(pollTimer);
       removeDetectionDom();
diff --git a/demos/select.html b/demos/select.html
index c8cb3f79f1d..c83d6b1314f 100644
--- a/demos/select.html
+++ b/demos/select.html
@@ -106,7 +106,7 @@ <h2 class="mdc-typography--title">Fully-Featured JS Component</h2>
                   Fruit Roll Ups
                 </li>
                 <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
-                  Candy (cotton)
+                  Candy (cotton)&#x200E;
                 </li>
                 <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
                   Vegetables
@@ -152,7 +152,7 @@ <h2 class="mdc-typography--title">Select box</h2>
                   Fruit Roll Ups
                 </li>
                 <li class="mdc-list-item" role="option" id="cotton-candy2" tabindex="0">
-                  Candy (cotton)
+                  Candy (cotton)&#x200E;
                 </li>
                 <li class="mdc-list-item" role="option" id="vegetables2" aria-disabled="true" tabindex="0">
                   Vegetables
@@ -185,7 +185,7 @@ <h2 class="mdc-typography--title">Select box</h2>
 
       <section class="example">
         <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
-        <section id="demo-wrapper">
+        <section>
           <div id="js-pre-selected" class="mdc-select" role="listbox">
             <div class="mdc-select__surface" tabindex="0">
               <div class="mdc-select__label">Food Group</div>
@@ -194,16 +194,16 @@ <h2 class="mdc-typography--title">Pre-selected option via HTML</h2>
             </div>
             <div class="mdc-menu mdc-select__menu">
               <ul class="mdc-list mdc-menu__items">
-                <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0" aria-selected="true">
+                <li class="mdc-list-item" role="option" id="fruit-roll-ups3" tabindex="0" aria-selected="true">
                   Fruit Roll Ups
                 </li>
-                <li class="mdc-list-item" role="option" id="cotton-candy" tabindex="0">
+                <li class="mdc-list-item" role="option" id="cotton-candy3" tabindex="0">
                   Candy (cotton)
                 </li>
-                <li class="mdc-list-item" role="option" id="vegetables" aria-disabled="true" tabindex="0">
+                <li class="mdc-list-item" role="option" id="vegetables3" aria-disabled="true" tabindex="0">
                   Vegetables
                 </li>
-                <li class="mdc-list-item" role="option" id="noodles" tabindex="0">
+                <li class="mdc-list-item" role="option" id="noodles3" tabindex="0">
                   Noodles
                 </li>
               </ul>
diff --git a/demos/snackbar.html b/demos/snackbar.html
index c87fd24768e..dad32a74974 100644
--- a/demos/snackbar.html
+++ b/demos/snackbar.html
@@ -124,14 +124,14 @@ <h2 class="mdc-typography--title">Basic Example</h2>
 
         <div class="mdc-text-field">
           <input type="text" id="message" class="mdc-text-field__input" value="Message deleted">
-          <label class="mdc-text-field__label" for="message">Message Text</label>
+          <label class="mdc-floating-label" for="message">Message Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
 
         <div class="mdc-text-field">
           <input type="text" id="action" class="mdc-text-field__input" value="Undo">
-          <label class="mdc-text-field__label" for="action">Action Text</label>
+          <label class="mdc-floating-label" for="action">Action Text</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <br/>
diff --git a/demos/text-field.html b/demos/text-field.html
index 429081f58e7..ac01e4cf53f 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -64,7 +64,7 @@
       <section class="hero">
         <div class="mdc-text-field">
           <input type="text" class="mdc-text-field__input" id="my-text-field" aria-controls="my-text-field-helper-text">
-          <label for="my-text-field" class="mdc-text-field__label">Text Field</label>
+          <label for="my-text-field" class="mdc-floating-label">Text Field</label>
           <div class="mdc-line-ripple"></div>
         </div>
       </section>
@@ -74,7 +74,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
         <section id="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field" aria-controls="my-text-field-helper-text">
-            <label for="full-func-text-field" class="mdc-text-field__label">Email Address</label>
+            <label for="full-func-text-field" class="mdc-floating-label">Email Address</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
@@ -124,7 +124,7 @@ <h2>Password field with validation</h2>
           <input required pattern=".{8,}" type="password" class="mdc-text-field__input" id="pw"
                  aria-controls="pw-validation-msg"
                  autocomplete="current-password">
-          <label for="pw" class="mdc-text-field__label">Choose password</label>
+          <label for="pw" class="mdc-floating-label">Choose password</label>
           <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
@@ -137,9 +137,9 @@ <h2>Password field with validation</h2>
         <h2>Outlined Text Field</h2>
         <div id="demo-tf-outlined-wrapper">
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
-            <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
+            <input type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
-            <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
+            <label for="tf-outlined-input" class="mdc-floating-label">Your Name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -147,8 +147,9 @@ <h2>Outlined Text Field</h2>
             </div>
             <div class="mdc-text-field__idle-outline"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
-            Must be at least 8 characters
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
+             id="name-validation-message">
+            Helper Text (possibly validation message)
           </p>
         </div>
         <div>
@@ -167,6 +168,18 @@ <h2>Outlined Text Field</h2>
           <input id="outlined-dense" type="checkbox">
           <label for="outlined-dense">Dense</label>
         </div>
+        <div>
+          <input id="outlined-required" type="checkbox">
+          <label for="outlined-required">Required</label>
+        </div>
+        <div>
+          <input id="outlined-minlength" type="checkbox">
+          <label for="outlined-minlength">Must be at least 8 characters</label>
+        </div>
+        <div>
+          <input id="outlined-maxlength" type="checkbox">
+          <label for="outlined-maxlength">Must not exceed 10 characters</label>
+        </div>
       </section>
 
       <section class="example" id="text-field-box-example">
@@ -174,12 +187,13 @@ <h2>Text Field box</h2>
         <div id="demo-tf-box-wrapper">
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
-                   aria-controls="name-validation-message">
-            <label for="tf-box" class="mdc-text-field__label">Your Name</label>
+                   aria-controls="box-name-validation-message">
+            <label for="tf-box" class="mdc-floating-label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-            id="box-text-field-helper-text">
+          <p class="mdc-text-field-helper-text"
+            id="box-name-validation-message"
+            style="display: none;">
             Helper Text (possibly validation message)
           </p>
         </div>
@@ -201,7 +215,11 @@ <h2>Text Field box</h2>
         </div>
         <div>
           <input id="box-required" type="checkbox">
-          <label for="box-required">Required and must be at least 8 characters</label>
+          <label for="box-required">Required</label>
+        </div>
+        <div>
+          <input id="box-pattern" type="checkbox">
+          <label for="box-pattern">Must be at least 8 characters</label>
         </div>
         <div>
           <input id="box-use-helper-text" type="checkbox">
@@ -211,6 +229,12 @@ <h2>Text Field box</h2>
           <input id="box-persistent-helper-text" type="checkbox" disabled>
           <label for="box-persistent-helper-text">Make helper text persistent</label>
         </div>
+        <div>
+          <input id="box-helper-text-as-validation" type="checkbox" disabled>
+          <label for="box-helper-text-as-validation">
+            Use helper text as validation message
+          </label>
+        </div>
       </section>
 
       <section class="example" id="demo-tf-icon-container">
@@ -220,7 +244,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-box-leading" class="mdc-text-field__input">
-            <label for="tf-box-leading" class="mdc-text-field__label">Your name</label>
+            <label for="tf-box-leading" class="mdc-floating-label">Your name</label>
             <div class="mdc-line-ripple"></div>
           </div>
         </div>
@@ -228,7 +252,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-box-trailing-example"
             class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-box-trailing" class="mdc-text-field__input">
-            <label for="tf-box-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-box-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-line-ripple"></div>
           </div>
@@ -238,7 +262,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon" data-demo-no-auto-js>
             <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
             <input type="text" id="tf-outlined-leading" class="mdc-text-field__input">
-            <label for="tf-outlined-leading" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-leading" class="mdc-floating-label">Your other name</label>
             <div class="mdc-text-field__outline">
               <svg>
                 <path class="mdc-text-field__outline-path"/>
@@ -251,7 +275,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
-            <label for="tf-outlined-trailing" class="mdc-text-field__label">Your other name</label>
+            <label for="tf-outlined-trailing" class="mdc-floating-label">Your other name</label>
             <i class="material-icons mdc-text-field__icon" tabindex="0">delete</i>
             <div class="mdc-text-field__outline">
               <svg>
@@ -283,7 +307,11 @@ <h2>Text Field - Leading/Trailing icons</h2>
         </div>
         <div>
           <input id="required-leading-trailing" type="checkbox">
-          <label for="required-leading-trailing">Required and must be at least 8 characters</label>
+          <label for="required-leading-trailing">Required</label>
+        </div>
+        <div>
+          <input id="pattern-leading-trailing" type="checkbox">
+          <label for="pattern-leading-trailing">Must be at least 8 characters</label>
         </div>
       </section>
 
@@ -291,7 +319,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
         <h2>Preventing FOUC</h2>
         <div class="mdc-text-field mdc-text-field--upgraded">
           <input id="fouc" type="text" class="mdc-text-field__input" value="Pre-filled value">
-          <label for="fouc" class="mdc-text-field__label mdc-text-field__label--float-above">
+          <label for="fouc" class="mdc-floating-label mdc-floating-label--float-above">
             Label floating above
           </label>
           <div class="mdc-line-ripple"></div>
@@ -303,7 +331,7 @@ <h2>Textarea</h2>
         <section id="demo-text-field-textarea-wrapper">
           <div class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-            <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </section>
         <div>
@@ -333,7 +361,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           </div>
           <div class="mdc-text-field mdc-text-field--textarea mdc-text-field--fullwidth full-width-textarea-example">
             <textarea id="full-width-textarea" class="mdc-text-field__input" rows="8"></textarea>
-            <label for="full-width-textarea" class="mdc-text-field__label">Textarea Label</label>
+            <label for="full-width-textarea" class="mdc-floating-label">Textarea Label</label>
           </div>
         </div>
         <div>
@@ -357,10 +385,24 @@ <h2>Full-Width Text Field and Textarea</h2>
 
     <script src="/assets/material-components-web.js" async></script>
     <script>
+      function toggleRequired(textfield, isRequired) {
+        textfield.required = isRequired;
+      }
+
+      function togglePattern(textfield, checked) {
+        textfield.pattern = checked ? '.{8,}' : '.*';
+      }
+
       demoReady(function() {
         var tfEl = document.getElementById('tf-outlined-example');
+        var tfHelperText = document.getElementById('tf-outlined-validation-msg');
         var tf = new mdc.textField.MDCTextField(tfEl);
+        var outlinedInputEl = tfEl.querySelector('input');
         var wrapper = document.getElementById('demo-tf-outlined-wrapper');
+        var plainHelperText = 'Helper Text (possibly validation message)';
+        var minLengthError = 'Must be at least 8 characters';
+        var maxLengthError = 'Must not exceed 10 characters';
+
         document.getElementById('outlined-disable').addEventListener('change', function(evt) {
           tf.disabled = evt.target.checked;
         });
@@ -380,13 +422,31 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
           tf.layout();
         });
+        document.getElementById('outlined-required').addEventListener('change', function(evt) {
+          toggleRequired(tf, evt.target.checked);
+        });
+        document.getElementById('outlined-minlength').addEventListener('change', function(evt) {
+          tf.minLength = evt.target.checked ? 8 : 0;
+        });
+        document.getElementById('outlined-maxlength').addEventListener('change', function(evt) {
+          tf.maxLength = evt.target.checked ? 10 : -1;
+        });
+        outlinedInputEl.addEventListener('blur', function() {
+          if (outlinedInputEl.validity.tooShort) {
+            tf.helperTextContent = minLengthError;
+          } else if (outlinedInputEl.validity.tooLong) {
+            tf.helperTextContent = maxLengthError;
+          } else {
+            tf.helperTextContent = plainHelperText;
+          }
+        });
       });
 
       demoReady(function() {
         var tfEl = document.getElementById('tf-box-example');
         var tf = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-box-wrapper');
-        var helperText = document.getElementById('box-text-field-helper-text');
+        var helperText = document.getElementById('box-name-validation-message');
 
         document.getElementById('box-disable').addEventListener('change', function(evt) {
           tf.disabled = evt.target.checked;
@@ -413,19 +473,21 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          var input = tfEl.querySelector('.mdc-text-field__input');
+          toggleRequired(tf, evt.target.checked);
+        });
+        document.getElementById('box-pattern').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          input.required = target.checked;
-          input.pattern = evt.target.checked ? '.{8,}' : '.*';
-          helperText.innerHTML = target.checked ? requiredHelperText : plainHelperText;
+          togglePattern(tf, checked);
+          tf.helperTextContent = checked ? requiredHelperText : plainHelperText;
         });
 
         document.getElementById('box-use-helper-text').addEventListener('change', function(evt) {
           var target = evt.target;
           helperText.style.display = target.checked ? 'block' : 'none';
           document.getElementById('box-persistent-helper-text').disabled = !target.checked;
+          document.getElementById('box-helper-text-as-validation').disabled = !target.checked;
         });
 
         document.getElementById('box-persistent-helper-text').addEventListener('change', function(evt) {
@@ -434,6 +496,12 @@ <h2>Full-Width Text Field and Textarea</h2>
             'mdc-text-field-helper-text--persistent'
           );
         });
+
+        document.getElementById('box-helper-text-as-validation').addEventListener('change', function(evt) {
+          helperText.classList[evt.target.checked ? 'add' : 'remove'](
+            'mdc-text-field-helper-text--validation-msg'
+          );
+        });
       });
 
       demoReady(function() {
@@ -510,10 +578,19 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
-          [].slice.call(tfInputs).forEach(function(input) {
-                input.required = evt.target.checked;
-                input.pattern = evt.target.checked ? '.{8,}' : '.*';
-              });
+          var checked = evt.target.checked;
+          toggleRequired(tfBoxLeading, checked);
+          toggleRequired(tfBoxTrailing, checked);
+          toggleRequired(tfOutlinedLeading, checked);
+          toggleRequired(tfOutlinedTrailing, checked);
+        });
+
+        document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          togglePattern(tfBoxLeading, checked);
+          togglePattern(tfBoxTrailing, checked);
+          togglePattern(tfOutlinedLeading, checked);
+          togglePattern(tfOutlinedTrailing, checked);
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
@@ -555,8 +632,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
         });
         document.getElementById('required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -604,13 +680,8 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
         });
-
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          [].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          toggleRequired(tf, evt.target.checked);
         });
       });
 
@@ -636,11 +707,9 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          [].slice.call(section.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          var checked = evt.target.checked;
+          toggleRequired(tf, checked);
+          toggleRequired(tfMulti, checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
diff --git a/demos/theme/index.html b/demos/theme/index.html
index 94a3a2d7af3..d32136b5384 100644
--- a/demos/theme/index.html
+++ b/demos/theme/index.html
@@ -836,7 +836,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    id="demo-text-field-default"
                    aria-controls="demo-text-field-default-helper-text"
                    autocomplete="email">
-            <label for="demo-text-field-default" class="mdc-text-field__label">Name (optional)</label>
+            <label for="demo-text-field-default" class="mdc-floating-label">Name (optional)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-default-helper-text"
@@ -851,7 +851,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
                    aria-controls="demo-text-field-required-helper-text"
                    autocomplete="email"
                    required>
-            <label for="demo-text-field-required" class="mdc-text-field__label">Email (required)</label>
+            <label for="demo-text-field-required" class="mdc-floating-label">Email (required)</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="demo-text-field-required-helper-text">
@@ -863,7 +863,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             <input type="text" class="mdc-text-field__input"
                    id="demo-text-field-box"
                    aria-controls="name-validation-message">
-            <label for="demo-text-field-box" class="mdc-text-field__label">With <code>--box</code> modifier</label>
+            <label for="demo-text-field-box" class="mdc-floating-label">With <code>--box</code> modifier</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text" id="demo-text-field-box-helper-text"
diff --git a/demos/toolbar/custom-toolbar.html b/demos/toolbar/custom-toolbar.html
index e3c3fe95327..5d966f1a5f5 100644
--- a/demos/toolbar/custom-toolbar.html
+++ b/demos/toolbar/custom-toolbar.html
@@ -36,7 +36,9 @@
         <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
           <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Download" alt="Download">file_download</a>
           <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Print this page" alt="Print this page">print</a>
-          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+          <a href="#" class="mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Open in new window" alt="Open in new window">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path id="a" d="M-240.34-413.17c-18.22 0-33 15.15-33 33.84 0 14.95 9.45 27.63 22.57 32.11 1.65.31 2.25-.74 2.25-1.63 0-.8-.03-2.93-.04-5.75-9.18 2.04-11.12-4.54-11.12-4.54-1.5-3.91-3.66-4.95-3.66-4.95-3-2.1.23-2.06.23-2.06 3.31.24 5.05 3.49 5.05 3.49 2.94 5.17 7.72 3.68 9.6 2.81.3-2.19 1.15-3.68 2.09-4.52-7.33-.85-15.03-3.76-15.03-16.72 0-3.69 1.29-6.71 3.4-9.08-.34-.86-1.47-4.3.32-8.95 0 0 2.77-.91 9.08 3.47 2.63-.75 5.46-1.13 8.26-1.14 2.8.01 5.63.39 8.26 1.14 6.3-4.38 9.07-3.47 9.07-3.47 1.8 4.66.67 8.1.33 8.95 2.11 2.37 3.39 5.39 3.39 9.08 0 13-7.72 15.86-15.07 16.7 1.19 1.04 2.24 3.11 2.24 6.27 0 4.52-.04 8.17-.04 9.28 0 .91.59 1.96 2.27 1.63 13.1-4.48 22.55-17.16 22.55-32.1.01-18.71-14.77-33.86-33-33.86"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><g clip-path="url(#b)"><defs><path id="c" d="M-1121.33-2867.17h1680v3369h-1680z"/></defs><clipPath id="d"><use xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" d="M-278.33-418.17h76v76h-76z"/></g><path d="M2 2v20h20V2H2zm2 18V4h16v16H4z"/><path d="M11 5v8h8V5h-8z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+          </a>
         </section>
       </div>
     </header>
diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
index 90780360330..c1dd256d056 100644
--- a/demos/toolbar/toolbar.scss
+++ b/demos/toolbar/toolbar.scss
@@ -54,14 +54,14 @@
 
 .demo-toolbar--custom {
   @include mdc-toolbar-fill-color-accessible($material-color-red-900);
-}
 
-.demo-toolbar__menu-icon--custom,
-.demo-toolbar__icon--custom {
-  @include mdc-toolbar-icon-ink-color($material-color-red-100);
+  .demo-toolbar__menu-icon--custom,
+  .demo-toolbar__icon--custom {
+    @include mdc-toolbar-icon-ink-color($material-color-red-100);
 
-  &:hover {
-    @include mdc-toolbar-icon-ink-color(white);
+    &:hover {
+      @include mdc-toolbar-icon-ink-color(white);
+    }
   }
 }
 
diff --git a/demos/top-app-bar.html b/demos/top-app-bar.html
index 95988e62f7e..159d11dea23 100644
--- a/demos/top-app-bar.html
+++ b/demos/top-app-bar.html
@@ -26,17 +26,15 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
-  <body class="mdc-typography">
+  <body class="mdc-typography demo-body">
     <header id="demo-top-app-bar" class="mdc-top-app-bar">
       <div class="mdc-top-app-bar__row">
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-          <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
-          <span class="mdc-top-app-bar__title">Title</span>
+          <a class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+          <span class="mdc-top-app-bar__title">San Francisco, CA</span>
         </section>
-        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar">
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+        <section id="iconSection" class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
+          <a id="right-item" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
         </section>
       </div>
     </header>
@@ -81,7 +79,7 @@
       </nav>
     </aside>
 
-    <main>
+    <main class="demo-main">
       <div>
         <p class="demo-paragraph">
           Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
@@ -119,25 +117,128 @@
         <p class="demo-paragraph">
           Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
         </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+        <p class="demo-paragraph">
+          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+        </p>
+
       </div>
     </main>
 
+    <div class="demo-controls-container">
+      <h3>Demo Controls</h3>
+      <div>
+        <input type="checkbox" id="rtl-checkbox"/>
+        <label for="rtl-checkbox">RTL</label>
+      </div>
+      <div>
+        <input type="checkbox" id="no-action-item-checkbox"/>
+        <label for="no-action-item-checkbox">No Action Item</label>
+      </div>
+      <div>
+        <input type="checkbox" id="short-checkbox"/>
+        <label for="short-checkbox">Short</label>
+      </div>
+      <div>
+        <input type="checkbox" id="always-collapsed-checkbox" disabled/>
+        <label for="always-collapsed-checkbox">Always Collapsed (Short Only)&#x200E;</label>
+      </div>
+    </div>
+
     <script src="/assets/common.js" async></script>
     <script src="/assets/material-components-web.js" async></script>
     <script type="text/javascript">
-    demoReady(function() {
-      var appBarEl = document.getElementById('demo-top-app-bar');
-      var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
+      demoReady(function() {
+        var appBarEl = document.getElementById('demo-top-app-bar');
+        var rightItemEl = document.getElementById('right-item');
+        var rightSection = document.getElementById('iconSection');
+        var drawerEl = document.querySelector('.mdc-drawer');
 
-      var drawerEl = document.querySelector('.mdc-drawer');
-      var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
-      var drawer = new MDCTemporaryDrawer(drawerEl);
+        var drawer = new mdc.drawer.MDCTemporaryDrawer(drawerEl);
+        var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
 
-      appBarEl.addEventListener('MDCTopAppBar:nav', function() {
-        drawer.open = true;
-      });
+        var rtlCheckbox = document.getElementById('rtl-checkbox');
+        var noActionItemCheckbox = document.getElementById('no-action-item-checkbox');
+        var shortCheckbox = document.getElementById('short-checkbox');
+        var alwaysCollapsedCheckbox = document.getElementById('always-collapsed-checkbox');
+
+        appBarEl.addEventListener('MDCTopAppBar:nav', function() {
+          drawer.open = true;
+        });
+
+        rtlCheckbox.addEventListener('change', function()  {
+          document.body.setAttribute('dir', this.checked ? 'rtl': 'ltr');
+          appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
+
+          appBar.destroy();
+          appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
+        });
 
-    });
+        noActionItemCheckbox.addEventListener('change', function()  {
+          if (this.checked) {
+            rightSection.removeChild(rightItemEl);
+            appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
+          } else {
+            rightSection.appendChild(rightItemEl);
+            appBarEl.classList.add('mdc-top-app-bar--short-has-action-item');
+          }
+        });
+
+        shortCheckbox.addEventListener('change', function() {
+          appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--short');
+          appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
+
+          appBar.destroy();
+          appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
+
+          if (!this.checked) {
+            appBarEl.classList.remove('mdc-top-app-bar--short-collapsed');
+            appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
+            alwaysCollapsedCheckbox.checked = false;
+          }
+
+          alwaysCollapsedCheckbox.disabled = !this.checked;
+        });
+
+        alwaysCollapsedCheckbox.addEventListener('change', function() {
+          appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--short-collapsed');
+
+          appBar.destroy();
+          appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
+        });
+      });
   </script>
   </body>
 </html>
diff --git a/demos/top-app-bar.scss b/demos/top-app-bar.scss
index 698d4f36ba3..e82df46a5cd 100644
--- a/demos/top-app-bar.scss
+++ b/demos/top-app-bar.scss
@@ -29,3 +29,29 @@
     padding: 16px;
   }
 }
+
+.demo-body {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.demo-main {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+  overflow: auto;
+}
+
+.demo-controls-container {
+  @include mdc-elevation(4);
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: white;
+  padding: 10px;
+}
+
+input[type="checkbox"]:disabled + label {
+  opacity: .4;
+}
diff --git a/docs/docsite-index.md b/docs/docsite-index.md
index 26f97ff772f..26473fe66a6 100644
--- a/docs/docsite-index.md
+++ b/docs/docsite-index.md
@@ -35,9 +35,9 @@ Get up and running with Material Components for web
     ```
 
 2.  {: .step-list-item } ### Include the stylesheet
-    
+
     Include the MDC Web stylesheet in the head of your file
-    
+
     ```html
     <html>
       <head>
@@ -56,14 +56,14 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
       </body>
     ```
 
 4.  {: .step-list-item } ### Add scripts and instantiate
 
-    Add the MDC Web scripts and call MDC Auto Init. 
+    Add the MDC Web scripts and call MDC Auto Init.
 
     ```html
     <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
@@ -71,7 +71,7 @@ Get up and running with Material Components for web
     ```
 
     A full example of the HTML could look like this:
-    
+
     ```html
     <!DOCTYPE html>
     <html>
@@ -84,7 +84,7 @@ Get up and running with Material Components for web
         <h2 class="mdc-typography--display2">Hello, Material Components!</h2>
         <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
           <input type="text" class="mdc-text-field__input" id="demo-input">
-          <label for="demo-input" class="mdc-text-field__label">Tell us how you feel!</label>
+          <label for="demo-input" class="mdc-floating-label">Tell us how you feel!</label>
         </div>
         <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
         <script>mdc.autoInit()</script>
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 1752bfb4814..2c58e67f041 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -67,7 +67,7 @@ module.exports = [{
   output: {
     // This is necessary for webpack to compile
     // But we never use style-bundle.js
-    filename: 'style-bundle.js', 
+    filename: 'style-bundle.js',
   },
   module: {
     rules: [{
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md
index 1f5f6d4a62a..af4c3fc3930 100644
--- a/docs/migrating-from-mdl.md
+++ b/docs/migrating-from-mdl.md
@@ -92,7 +92,7 @@ MDC Web:
 ```html
 <div class="mdc-text-field">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -118,7 +118,7 @@ element, with the component’s class name as the value. For example:
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -199,7 +199,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/lerna.json b/lerna.json
index d16e6164a3b..8b212677df6 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "lerna": "2.0.0-beta.36",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "commands": {
     "publish": {
       "ignore": [
diff --git a/package.json b/package.json
index 073cf0c8713..39194f81308 100644
--- a/package.json
+++ b/package.json
@@ -130,6 +130,7 @@
           "drawer",
           "elevation",
           "fab",
+          "floating-label",
           "form-field",
           "grid-list",
           "icon-toggle",
@@ -168,6 +169,7 @@
     "mdc-base",
     "mdc-checkbox",
     "mdc-chips",
+    "mdc-floating-label",
     "mdc-form-field",
     "mdc-icon-toggle",
     "mdc-line-ripple",
diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
index f6c42e70e47..a35f22f5a7c 100644
--- a/packages/material-components-web/index.js
+++ b/packages/material-components-web/index.js
@@ -20,6 +20,7 @@ import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/index';
 import * as dialog from '@material/dialog/index';
 import * as drawer from '@material/drawer/index';
+import * as floatingLabel from '@material/floating-label/index';
 import * as formField from '@material/form-field/index';
 import * as gridList from '@material/grid-list/index';
 import * as iconToggle from '@material/icon-toggle/index';
@@ -44,6 +45,7 @@ autoInit.register('MDCChipSet', chips.MDCChipSet);
 autoInit.register('MDCDialog', dialog.MDCDialog);
 autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
 autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
+autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
 autoInit.register('MDCFormField', formField.MDCFormField);
 autoInit.register('MDCRipple', ripple.MDCRipple);
 autoInit.register('MDCGridList', gridList.MDCGridList);
@@ -69,6 +71,7 @@ export {
   chips,
   dialog,
   drawer,
+  floatingLabel,
   formField,
   gridList,
   iconToggle,
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
index f8476666470..65f2a08f5da 100644
--- a/packages/material-components-web/material-components-web.scss
+++ b/packages/material-components-web/material-components-web.scss
@@ -22,6 +22,7 @@
 @import "@material/drawer/mdc-drawer";
 @import "@material/elevation/mdc-elevation";
 @import "@material/fab/mdc-fab";
+@import "@material/floating-label/mdc-floating-label";
 @import "@material/form-field/mdc-form-field";
 @import "@material/grid-list/mdc-grid-list";
 @import "@material/icon-toggle/mdc-icon-toggle";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
index 96299c2e872..97a6cfdc2e7 100644
--- a/packages/material-components-web/package.json
+++ b/packages/material-components-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "material-components-web",
   "description": "Modular and customizable Material Design UI components for the web",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -14,37 +14,38 @@
   },
   "dependencies": {
     "@material/animation": "^0.25.0",
-    "@material/auto-init": "^0.30.0",
+    "@material/auto-init": "^0.32.0",
     "@material/base": "^0.29.0",
-    "@material/button": "^0.31.0",
-    "@material/card": "^0.31.0",
-    "@material/checkbox": "^0.31.0",
-    "@material/chips": "^0.31.0",
-    "@material/dialog": "^0.31.0",
+    "@material/button": "^0.32.0",
+    "@material/card": "^0.32.0",
+    "@material/checkbox": "^0.32.0",
+    "@material/chips": "^0.32.0",
+    "@material/dialog": "^0.32.0",
     "@material/drawer": "^0.30.0",
     "@material/elevation": "^0.28.0",
-    "@material/fab": "^0.31.0",
-    "@material/form-field": "^0.31.0",
+    "@material/fab": "^0.32.0",
+    "@material/floating-label": "^0.32.0",
+    "@material/form-field": "^0.32.0",
     "@material/grid-list": "^0.30.0",
-    "@material/icon-toggle": "^0.31.0",
+    "@material/icon-toggle": "^0.32.0",
     "@material/layout-grid": "^0.24.0",
-    "@material/line-ripple": "^0.30.0",
+    "@material/line-ripple": "^0.32.0",
     "@material/linear-progress": "^0.30.0",
-    "@material/list": "^0.31.0",
+    "@material/list": "^0.32.0",
     "@material/menu": "^0.31.0",
-    "@material/radio": "^0.31.0",
-    "@material/ripple": "^0.31.0",
+    "@material/radio": "^0.32.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
-    "@material/select": "^0.31.0",
-    "@material/selection-control": "^0.31.0",
-    "@material/slider": "^0.30.0",
+    "@material/select": "^0.32.0",
+    "@material/selection-control": "^0.32.0",
+    "@material/slider": "^0.32.0",
     "@material/snackbar": "^0.30.0",
-    "@material/switch": "^0.31.0",
-    "@material/tabs": "^0.31.0",
-    "@material/textfield": "^0.31.0",
+    "@material/switch": "^0.32.0",
+    "@material/tabs": "^0.32.0",
+    "@material/textfield": "^0.32.0",
     "@material/theme": "^0.30.0",
-    "@material/toolbar": "^0.30.0",
-    "@material/top-app-bar": "^0.0.0",
+    "@material/toolbar": "^0.32.0",
+    "@material/top-app-bar": "^0.32.0",
     "@material/typography": "^0.28.0"
   }
 }
diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md
index af64a85296c..98e911c1346 100644
--- a/packages/mdc-auto-init/README.md
+++ b/packages/mdc-auto-init/README.md
@@ -32,7 +32,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 
@@ -52,7 +52,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 ```html
 <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
   <input class="mdc-text-field__input" type="text" id="input">
-  <label for="input" class="mdc-text-field__label">Input Label</label>
+  <label for="input" class="mdc-floating-label">Input Label</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-auto-init/package.json b/packages/mdc-auto-init/package.json
index cb52614171c..cc689c1703d 100644
--- a/packages/mdc-auto-init/package.json
+++ b/packages/mdc-auto-init/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/auto-init",
   "description": "Declarative, easy-to-use auto-initialization for Material Components for the web",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "main": "index.js",
   "license": "Apache-2.0",
   "repository": {
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 5a70b7b7a39..ed114ba11fc 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -81,8 +81,6 @@ CSS Class | Description
 `mdc-button--unelevated` | Optional, a contained button that is flush with the surface
 `mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border
 `mdc-button--dense` | Optional, compresses the button text to make it slightly smaller
-`mdc-button--compact` | Optional, reduces the amount of horizontal padding in the button
-
 
 ### Disabled Button
 
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index f8de32db86c..4d76a44e8a7 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -16,6 +16,7 @@
 
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
@@ -75,13 +76,6 @@
     // Minus extra 1 to accommodate odd font size of dense button
     line-height: $mdc-dense-button-height - $stroke-width * 2 - 1;
   }
-
-  &.mdc-button--compact {
-    $padding-compact-value: max($mdc-compact-button-horizontal-padding - $stroke-width, 0);
-
-    padding-right: $padding-compact-value;
-    padding-left: $padding-compact-value;
-  }
 }
 
 @mixin mdc-button-base_() {
@@ -127,10 +121,11 @@
 }
 
 @mixin mdc-button__icon_ {
+  @include mdc-rtl-reflexive-box(margin, right, 8px);
+
   display: inline-block;
   width: 18px;
   height: 18px;
-  margin-right: 8px;
   font-size: 18px;
   line-height: inherit;
   vertical-align: top;
@@ -170,10 +165,6 @@
   }
 }
 
-@mixin mdc-button--compact_() {
-  padding: 0 $mdc-compact-button-horizontal-padding;
-}
-
 @mixin mdc-button--dense_() {
   height: $mdc-dense-button-height;
   font-size: .8125rem; // 13sp
diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
index 3347b353745..15b5923c8a9 100644
--- a/packages/mdc-button/_variables.scss
+++ b/packages/mdc-button/_variables.scss
@@ -17,4 +17,3 @@
 $mdc-button-height: 36px;
 $mdc-button-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;
-$mdc-compact-button-horizontal-padding: 8px;
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 3faa2116d08..6e1f42b7821 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -54,10 +54,6 @@
   @include mdc-button-stroke-color(primary);
 }
 
-.mdc-button--compact {
-  @include mdc-button--compact_;
-}
-
 .mdc-button--dense {
   @include mdc-button--dense_;
 }
diff --git a/packages/mdc-button/package.json b/packages/mdc-button/package.json
index 49fa97f50ab..e181df377a0 100644
--- a/packages/mdc-button/package.json
+++ b/packages/mdc-button/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/button",
   "description": "The Material Components for the web button component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache 2.0",
   "keywords": [
     "material components",
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "@material/elevation": "^0.28.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
+    "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
   }
diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json
index dc7e552fadd..edaf937f8c0 100644
--- a/packages/mdc-card/package.json
+++ b/packages/mdc-card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/card",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "The Material Components for the web card component",
   "license": "Apache-2.0",
   "keywords": [
@@ -15,7 +15,7 @@
   "dependencies": {
     "@material/elevation": "^0.28.0",
     "@material/theme": "^0.30.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0"
   }
 }
diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json
index 7110e677708..3b6809d354f 100644
--- a/packages/mdc-checkbox/package.json
+++ b/packages/mdc-checkbox/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/checkbox",
   "description": "The Material Components for the web checkbox component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -16,8 +16,8 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0",
-    "@material/selection-control": "^0.31.0",
+    "@material/ripple": "^0.32.0",
+    "@material/selection-control": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0"
   }
diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
index 1d692c2b684..b57d15f87ed 100644
--- a/packages/mdc-chips/README.md
+++ b/packages/mdc-chips/README.md
@@ -100,7 +100,7 @@ Mixin | Description
 `mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards
 `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip
 `mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
-`mdc-chip-activated-ink-color($color)` | Customizes text ink color and updates the ripple opacity of a chip in the _activated_ state
+`mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state
 `mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip
 `mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip
 `mdc-chip-stroke-style($style)` | Customizes the border stroke style for a chip
@@ -108,8 +108,6 @@ Mixin | Description
 
 > _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
 
-> _NOTE_: `mdc-chip-ink-color` also updates the chip's text ink color for _hover_ and _activated_ states, and updates the ripple opacity of the chip in the _activated_ state.
-
 ### `MDCChip` and `MDCChipSet`
 
 The MDC Chips module is comprised of two JavaScript classes: 
@@ -122,7 +120,7 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.
 
 Method Signature | Description
 --- | ---
-`toggleActive() => void` | Proxies to the foundation's `toggleActive` method
+`toggleSelected() => void` | Proxies to the foundation's `toggleSelected` method
 
 Property | Value Type | Description
 --- | --- | ---
@@ -164,7 +162,7 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
-`toggleActive() => void` | Toggles the activated class on the chip element
+`toggleSelected() => void` | Toggles the selected class on the chip element
 
 #### `MDCChipSetFoundation`
 None yet, coming soon.
diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
index 45b02b9ccc6..87b8746d76f 100644
--- a/packages/mdc-chips/_mixins.scss
+++ b/packages/mdc-chips/_mixins.scss
@@ -29,10 +29,10 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-chip-ink-color(text-primary-on-dark);
-    @include mdc-chip-activated-ink-color(white);
+    @include mdc-chip-selected-ink-color(white);
   } @else {
     @include mdc-chip-ink-color(text-primary-on-light);
-    @include mdc-chip-activated-ink-color(black);
+    @include mdc-chip-selected-ink-color(black);
   }
 }
 
@@ -42,7 +42,6 @@
 
 @mixin mdc-chip-ink-color($color) {
   @include mdc-states($color);
-  @include mdc-chip-activated-ink-color($color);
   @include mdc-theme-prop(color, $color);
 
   &:hover {
@@ -50,15 +49,17 @@
   }
 }
 
-@mixin mdc-chip-activated-ink-color($activated-ink-color) {
+@mixin mdc-chip-selected-ink-color($color) {
   &.mdc-chip {
-    // This changes the opacity of the ripple based on whether $activated-ink-color is light or dark.
-    // It does not change the color of the ripple.
-    @include mdc-states-activated($activated-ink-color);
+    @include mdc-states-selected($color);
   }
 
-  &.mdc-chip--activated {
-    @include mdc-theme-prop(color, $activated-ink-color);
+  &.mdc-chip--selected {
+    @include mdc-theme-prop(color, $color);
+
+    &:hover {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
diff --git a/packages/mdc-chips/chip-set/foundation.js b/packages/mdc-chips/chip-set/foundation.js
index f0a12df7787..7b3b1f9f3d3 100644
--- a/packages/mdc-chips/chip-set/foundation.js
+++ b/packages/mdc-chips/chip-set/foundation.js
@@ -56,10 +56,10 @@ class MDCChipSetFoundation extends MDCFoundation {
     super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
 
     /**
-     * The active chips in the set. Only used for choice chip set or filter chip set.
+     * The selected chips in the set. Only used for choice chip set or filter chip set.
      * @private {!Array<!MDCChip>}
      */
-    this.activeChips_ = [];
+    this.selectedChips_ = [];
 
     /** @private {function(!Event): undefined} */
     this.chipInteractionHandler_ = (evt) => this.handleChipInteraction_(evt);
@@ -83,23 +83,23 @@ class MDCChipSetFoundation extends MDCFoundation {
   handleChipInteraction_(evt) {
     const {chip} = evt.detail;
     if (this.adapter_.hasClass(cssClasses.CHOICE)) {
-      if (this.activeChips_.length === 0) {
-        this.activeChips_[0] = chip;
-      } else if (this.activeChips_[0] !== chip) {
-        this.activeChips_[0].toggleActive();
-        this.activeChips_[0] = chip;
+      if (this.selectedChips_.length === 0) {
+        this.selectedChips_[0] = chip;
+      } else if (this.selectedChips_[0] !== chip) {
+        this.selectedChips_[0].toggleSelected();
+        this.selectedChips_[0] = chip;
       } else {
-        this.activeChips_ = [];
+        this.selectedChips_ = [];
       }
-      chip.toggleActive();
+      chip.toggleSelected();
     } else if (this.adapter_.hasClass(cssClasses.FILTER)) {
-      const index = this.activeChips_.indexOf(chip);
+      const index = this.selectedChips_.indexOf(chip);
       if (index >= 0) {
-        this.activeChips_.splice(index, 1);
+        this.selectedChips_.splice(index, 1);
       } else {
-        this.activeChips_.push(chip);
+        this.selectedChips_.push(chip);
       }
-      chip.toggleActive();
+      chip.toggleSelected();
     }
   }
 }
diff --git a/packages/mdc-chips/chip/constants.js b/packages/mdc-chips/chip/constants.js
index 6d4293f40e9..de8213ffd4f 100644
--- a/packages/mdc-chips/chip/constants.js
+++ b/packages/mdc-chips/chip/constants.js
@@ -24,7 +24,7 @@ const strings = {
 
 /** @enum {string} */
 const cssClasses = {
-  ACTIVATED: 'mdc-chip--activated',
+  SELECTED: 'mdc-chip--selected',
 };
 
 export {strings, cssClasses};
diff --git a/packages/mdc-chips/chip/foundation.js b/packages/mdc-chips/chip/foundation.js
index f535884087e..4458d90bbe1 100644
--- a/packages/mdc-chips/chip/foundation.js
+++ b/packages/mdc-chips/chip/foundation.js
@@ -87,13 +87,13 @@ class MDCChipFoundation extends MDCFoundation {
   }
 
   /**
-   * Toggles the activated class on the chip element.
+   * Toggles the selected class on the chip element.
    */
-  toggleActive() {
-    if (this.adapter_.hasClass(cssClasses.ACTIVATED)) {
-      this.adapter_.removeClass(cssClasses.ACTIVATED);
+  toggleSelected() {
+    if (this.adapter_.hasClass(cssClasses.SELECTED)) {
+      this.adapter_.removeClass(cssClasses.SELECTED);
     } else {
-      this.adapter_.addClass(cssClasses.ACTIVATED);
+      this.adapter_.addClass(cssClasses.SELECTED);
     }
   }
 
diff --git a/packages/mdc-chips/chip/index.js b/packages/mdc-chips/chip/index.js
index 953c63ceb1c..b262b653611 100644
--- a/packages/mdc-chips/chip/index.js
+++ b/packages/mdc-chips/chip/index.js
@@ -51,10 +51,10 @@ class MDCChip extends MDCComponent {
   }
 
   /**
-   * Toggles active state of the chip.
+   * Toggles selected state of the chip.
    */
-  toggleActive() {
-    this.foundation_.toggleActive();
+  toggleSelected() {
+    this.foundation_.toggleSelected();
   }
 
   /**
diff --git a/packages/mdc-chips/chip/mdc-chip.scss b/packages/mdc-chips/chip/mdc-chip.scss
index 6c1d423b614..c530e088969 100644
--- a/packages/mdc-chips/chip/mdc-chip.scss
+++ b/packages/mdc-chips/chip/mdc-chip.scss
@@ -27,7 +27,7 @@
   @include mdc-chip-corner-radius($mdc-chip-border-radius-default);
   @include mdc-chip-fill-color($mdc-chip-fill-color-default);
   @include mdc-chip-ink-color($mdc-chip-ink-color-default);
-  @include mdc-chip-activated-ink-color(black);
+  @include mdc-chip-selected-ink-color(primary);
 
   display: inline-flex;
   position: relative;
@@ -42,6 +42,10 @@
   }
 }
 
+.mdc-chip--selected {
+  @include mdc-theme-prop(background-color, white);
+}
+
 .mdc-chip__text {
   // Set line-height to be <18px to force the content height of mdc-chip to be 18px.
   line-height: 17px;
diff --git a/packages/mdc-chips/package.json b/packages/mdc-chips/package.json
index 5f70a83be01..1628e9402ff 100644
--- a/packages/mdc-chips/package.json
+++ b/packages/mdc-chips/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/chips",
   "description": "The Material Components for the Web chips component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache 2.0",
   "keywords": [
     "material components",
@@ -17,6 +17,6 @@
   },
   "dependencies": {
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0"
+    "@material/ripple": "^0.32.0"
   }
 }
diff --git a/packages/mdc-dialog/package.json b/packages/mdc-dialog/package.json
index 7610d63cbf9..243417dcd86 100644
--- a/packages/mdc-dialog/package.json
+++ b/packages/mdc-dialog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/dialog",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "The Material Components Web dialog component",
   "license": "Apache-2.0",
   "keywords": [
@@ -18,7 +18,7 @@
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
     "@material/elevation": "^0.28.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.1.1",
diff --git a/packages/mdc-fab/package.json b/packages/mdc-fab/package.json
index 9176137707c..9e0ab79340b 100644
--- a/packages/mdc-fab/package.json
+++ b/packages/mdc-fab/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/fab",
   "description": "The Material Components for the web floating action button component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/elevation": "^0.28.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/theme": "^0.30.0"
   }
 }
diff --git a/packages/mdc-floating-label/README.md b/packages/mdc-floating-label/README.md
new file mode 100644
index 00000000000..8626044ac2d
--- /dev/null
+++ b/packages/mdc-floating-label/README.md
@@ -0,0 +1,94 @@
+<!--docs:
+title: "Floating Label"
+layout: detail
+section: components
+excerpt: "An animated text caption for a text field or select."
+path: /catalog/input-controls/floating-label/
+-->
+
+# Floating Label
+
+Floating labels display the type of input a field requires. Every text field and select should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
+
+## Design & API Documentation
+
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
+  </li>
+</ul>
+
+## Usage
+
+### HTML Structure
+
+```html
+<label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
+```
+
+### Usage within `mdc-text-field`
+
+```html
+<div class="mdc-text-field">
+  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
+  <div class="mdc-text-field__bottom-line"></div>
+</div>
+```
+
+<!-- TODO(mattgoo): add ### Usage within `mdc-select` once select uses mdc-floating-label -->
+
+#### Avoid Dynamic ID Generation
+
+If you're using the JavaScript-enabled version of floating label, you can avoid needing to assign
+a unique `id` to each `<input>` by wrapping `mdc-text-field__input` within a `<label>`:
+
+```html
+<label class="mdc-text-field">
+  <input type="text" class="mdc-text-field__input">
+  <span class="mdc-floating-label">Hint Text</span>
+  <div class="mdc-text-field__bottom-line"></div>
+</label>
+```
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-floating-label` | Mandatory.
+`mdc-floating-label--float-above` | Indicates the label is floating above the text field.
+`mdc-floating-label--shake` | Shakes the label.
+
+### SCSS Mixins
+
+Mixin | Description
+--- | ---
+`mdc-floating-label-ink-color($color)` | Customizes the ink color of the label.
+`mdc-floating-label-fill-color($color)` | Customizes the fill color of the label.
+`mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX, $scale)` | Generates a CSS `@keyframes` at-rule for an invalid label shake. Used in conjunction with the `mdc-floating-label-shake-animation` mixin.
+`mdc-floating-label-shake-animation($modifier)` | Applies shake keyframe animation to label.
+`mdc-floating-label-float-position($positionY, $positionX, $scale)` | Sets position of label when floating.
+
+### `MDCFloatingLabel`
+
+Method Signature | Description
+--- | ---
+`shake(shouldShake: boolean) => void` | Shakes or stops shaking the label, depending on the value of `shouldShake`. Proxies to the foundation method of the same name.
+`float(shouldFloat: boolean) => void` | Floats or docks the label, depending on the value of `shouldFloat`. Proxies to the foundation method of the same name.
+`getWidth() => number` | Returns the width of the label element.
+
+### `MDCFloatingLabelAdapter`
+
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the label element.
+`removeClass(className: string) => void` | Removes a class from the label element.
+`getWidth() => number` | Returns the width of the label element.
+
+### `MDCFloatingLabelFoundation`
+
+Method Signature | Description
+--- | ---
+`shake(shouldShake: boolean)` | Shakes or stops shaking the label, depending on the value of `shouldShake`.
+`float(shouldFloat: boolean)` | Floats or docks the label, depending on the value of `shouldFloat`.
+`getWidth() => number` | Returns the width of the label element.
diff --git a/packages/mdc-floating-label/_functions.scss b/packages/mdc-floating-label/_functions.scss
new file mode 100644
index 00000000000..05e1660895b
--- /dev/null
+++ b/packages/mdc-floating-label/_functions.scss
@@ -0,0 +1,21 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/animation/variables";
+
+@function mdc-floating-label-transition($property) {
+  @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
+}
diff --git a/packages/mdc-floating-label/_mixins.scss b/packages/mdc-floating-label/_mixins.scss
new file mode 100644
index 00000000000..7a89664e2c9
--- /dev/null
+++ b/packages/mdc-floating-label/_mixins.scss
@@ -0,0 +1,68 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./variables";
+
+@mixin mdc-floating-label-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+// Used for textarea in case of scrolling
+@mixin mdc-floating-label-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-floating-label-shake-keyframes($modifier, $positionY, $positionX: 0%, $scale: .75) {
+  @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
+    0% {
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    33% {
+      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    66% {
+      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+
+    100% {
+      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
+    }
+  }
+}
+
+@mixin mdc-floating-label-float-position($positionY, $positionX: 0%, $scale: .75) {
+  .mdc-floating-label--float-above {
+    @if $positionX == 0 {
+      transform: translateY(-1 * $positionY) scale($scale);
+    } @else {
+      transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
+
+      @include mdc-rtl {
+        transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
+      }
+    }
+  }
+}
+
+@mixin mdc-floating-label-shake-animation($modifier) {
+  .mdc-floating-label--shake {
+    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
+  }
+}
diff --git a/packages/mdc-textfield/label/_variables.scss b/packages/mdc-floating-label/_variables.scss
similarity index 50%
rename from packages/mdc-textfield/label/_variables.scss
rename to packages/mdc-floating-label/_variables.scss
index 763df457b79..8170ac386c4 100644
--- a/packages/mdc-textfield/label/_variables.scss
+++ b/packages/mdc-floating-label/_variables.scss
@@ -14,14 +14,4 @@
 // limitations under the License.
 //
 
-$mdc-text-field-label-position-y: 100%;
-$mdc-text-field-box-label-position-y: 50%;
-$mdc-text-field-box-dense-label-position-y: 90%;
-$mdc-text-field-dense-label-scale: .923;
-$mdc-text-field-outlined-label-position-y: 130%;
-$mdc-text-field-outlined-dense-label-position-y: 145%;
-$mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
-$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
-$mdc-text-field-textarea-label-position-y: 50%;
-// Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-$mdc-text-field-textarea-label-scale: .923;
+$mdc-floating-label-position-y: 100%;
diff --git a/packages/mdc-textfield/label/adapter.js b/packages/mdc-floating-label/adapter.js
similarity index 67%
rename from packages/mdc-textfield/label/adapter.js
rename to packages/mdc-floating-label/adapter.js
index d735245cdb0..caeba75972f 100644
--- a/packages/mdc-textfield/label/adapter.js
+++ b/packages/mdc-floating-label/adapter.js
@@ -18,16 +18,16 @@
 /* eslint no-unused-vars: [2, {"args": "none"}] */
 
 /**
- * Adapter for MDC Text Field Label.
+ * Adapter for MDC Floating Label.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Text Field label into your framework. See
+ * adapter to integrate the floating label into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
  * for more information.
  *
  * @record
  */
-class MDCTextFieldLabelAdapter {
+class MDCFloatingLabelAdapter {
   /**
    * Adds a class to the label element.
    * @param {string} className
@@ -45,6 +45,20 @@ class MDCTextFieldLabelAdapter {
    * @return {number}
    */
   getWidth() {}
+
+  /**
+   * Registers an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  registerInteractionHandler(evtType, handler) {}
+
+  /**
+   * Deregisters an event listener on the root element for a given event.
+   * @param {string} evtType
+   * @param {function(!Event): undefined} handler
+   */
+  deregisterInteractionHandler(evtType, handler) {}
 }
 
-export default MDCTextFieldLabelAdapter;
+export default MDCFloatingLabelAdapter;
diff --git a/packages/mdc-textfield/label/constants.js b/packages/mdc-floating-label/constants.js
similarity index 86%
rename from packages/mdc-textfield/label/constants.js
rename to packages/mdc-floating-label/constants.js
index 2346fcf6630..789db67b3bf 100644
--- a/packages/mdc-textfield/label/constants.js
+++ b/packages/mdc-floating-label/constants.js
@@ -17,8 +17,8 @@
 
 /** @enum {string} */
 const cssClasses = {
-  LABEL_FLOAT_ABOVE: 'mdc-text-field__label--float-above',
-  LABEL_SHAKE: 'mdc-text-field__label--shake',
+  LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
+  LABEL_SHAKE: 'mdc-floating-label--shake',
 };
 
 export {cssClasses};
diff --git a/packages/mdc-floating-label/foundation.js b/packages/mdc-floating-label/foundation.js
new file mode 100644
index 00000000000..330d4a14d3b
--- /dev/null
+++ b/packages/mdc-floating-label/foundation.js
@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MDCFoundation from '@material/base/foundation';
+import MDCFloatingLabelAdapter from './adapter';
+import {cssClasses} from './constants';
+
+/**
+ * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
+ * @final
+ */
+class MDCFloatingLabelFoundation extends MDCFoundation {
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
+  /**
+   * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
+   * types.
+   * @return {!MDCFloatingLabelAdapter}
+   */
+  static get defaultAdapter() {
+    return /** @type {!MDCFloatingLabelAdapter} */ ({
+      addClass: () => {},
+      removeClass: () => {},
+      getWidth: () => {},
+      registerInteractionHandler: () => {},
+      deregisterInteractionHandler: () => {},
+    });
+  }
+
+  /**
+   * @param {!MDCFloatingLabelAdapter} adapter
+   */
+  constructor(adapter) {
+    super(Object.assign(MDCFloatingLabelFoundation.defaultAdapter, adapter));
+
+    /** @private {function(!Event): undefined} */
+    this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
+  }
+
+  init() {
+    this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
+  destroy() {
+    this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+  }
+
+  /**
+   * Returns the width of the label element.
+   * @return {number}
+   */
+  getWidth() {
+    return this.adapter_.getWidth();
+  }
+
+  /**
+   * Styles the label to produce the label shake for errors.
+   * @param {boolean} shouldShake adds shake class if true,
+   * otherwise removes shake class.
+   */
+  shake(shouldShake) {
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    if (shouldShake) {
+      this.adapter_.addClass(LABEL_SHAKE);
+    } else {
+      this.adapter_.removeClass(LABEL_SHAKE);
+    }
+  }
+
+  /**
+   * Styles the label to float or dock.
+   * @param {boolean} shouldFloat adds float class if true, otherwise remove
+   * float and shake class to dock label.
+   */
+  float(shouldFloat) {
+    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    if (shouldFloat) {
+      this.adapter_.addClass(LABEL_FLOAT_ABOVE);
+    } else {
+      this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
+      this.adapter_.removeClass(LABEL_SHAKE);
+    }
+  }
+
+  /**
+   * Handles an interaction event on the root element.
+   */
+  handleShakeAnimationEnd_() {
+    const {LABEL_SHAKE} = MDCFloatingLabelFoundation.cssClasses;
+    this.adapter_.removeClass(LABEL_SHAKE);
+  }
+}
+
+export default MDCFloatingLabelFoundation;
diff --git a/packages/mdc-floating-label/index.js b/packages/mdc-floating-label/index.js
new file mode 100644
index 00000000000..2d4fbadbcd9
--- /dev/null
+++ b/packages/mdc-floating-label/index.js
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import MDCComponent from '@material/base/component';
+import MDCFloatingLabelAdapter from './adapter';
+import MDCFloatingLabelFoundation from './foundation';
+
+/**
+ * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
+ * @final
+ */
+class MDCFloatingLabel extends MDCComponent {
+  /**
+   * @param {!Element} root
+   * @return {!MDCFloatingLabel}
+   */
+  static attachTo(root) {
+    return new MDCFloatingLabel(root);
+  }
+
+  /**
+   * Styles the label to produce the label shake for errors.
+   * @param {boolean} shouldShake styles the label to shake by adding shake class
+   * if true, otherwise will stop shaking by removing shake class.
+   */
+  shake(shouldShake) {
+    this.foundation_.shake(shouldShake);
+  }
+
+  /**
+   * Styles label to float/dock.
+   * @param {boolean} shouldFloat styles the label to float by adding float class
+   * if true, otherwise docks the label by removing the float class.
+   */
+  float(shouldFloat) {
+    this.foundation_.float(shouldFloat);
+  }
+
+  /**
+   * @return {number}
+   */
+  getWidth() {
+    return this.foundation_.getWidth();
+  }
+
+  /**
+   * @return {!MDCFloatingLabelFoundation}
+   */
+  getDefaultFoundation() {
+    return new MDCFloatingLabelFoundation({
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
+      getWidth: () => this.root_.offsetWidth,
+      registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+    });
+  }
+}
+
+export {MDCFloatingLabel, MDCFloatingLabelFoundation};
diff --git a/packages/mdc-textfield/label/mdc-text-field-label.scss b/packages/mdc-floating-label/mdc-floating-label.scss
similarity index 64%
rename from packages/mdc-textfield/label/mdc-text-field-label.scss
rename to packages/mdc-floating-label/mdc-floating-label.scss
index 342ebe68c36..b1236ada892 100644
--- a/packages/mdc-textfield/label/mdc-text-field-label.scss
+++ b/packages/mdc-floating-label/mdc-floating-label.scss
@@ -14,35 +14,36 @@
 // limitations under the License.
 //
 
-@import "../mixins";
-@import "../variables";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "./functions";
+@import "./mixins";
+@import "./variables";
 
-// postcss-bem-linter: define text-field-label
-.mdc-text-field__label {
+// postcss-bem-linter: define floating-label
+.mdc-floating-label {
   position: absolute;
   bottom: 8px;
   left: 0;
   transform-origin: left top;
-  transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
+  transition: mdc-floating-label-transition(transform), mdc-floating-label-transition(color);
   cursor: text;
 
-  // stylelint-disable plugin/selector-bem-pattern
-  @include mdc-rtl(".mdc-text-field") {
+  @include mdc-rtl {
     right: 0;
     left: auto;
     transform-origin: right top;
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-text-field__label--float-above {
+.mdc-floating-label--float-above {
   cursor: auto;
 }
 
 @at-root {
-  @include mdc-text-field-label-float_($mdc-text-field-label-position-y);
-  @include mdc-text-field-label-shake_(standard);
+  @include mdc-floating-label-float-position($mdc-floating-label-position-y);
+  @include mdc-floating-label-shake-animation(standard);
 }
+
+@include mdc-floating-label-shake-keyframes(standard, $mdc-floating-label-position-y);
diff --git a/packages/mdc-floating-label/package.json b/packages/mdc-floating-label/package.json
new file mode 100644
index 00000000000..9453739a832
--- /dev/null
+++ b/packages/mdc-floating-label/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@material/floating-label",
+  "description": "The Material Components for the web floating-label component",
+  "version": "0.32.0",
+  "license": "Apache-2.0",
+  "keywords": [
+    "material components",
+    "material design",
+    "floatinglabel",
+    "floating label"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/material-components/material-components-web.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@material/base": "^0.29.0",
+    "@material/theme": "^0.30.0",
+    "@material/rtl": "^0.30.0"
+  }
+}
diff --git a/packages/mdc-form-field/package.json b/packages/mdc-form-field/package.json
index 3b575fa2e70..bdaf77cf96e 100644
--- a/packages/mdc-form-field/package.json
+++ b/packages/mdc-form-field/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/form-field",
   "description": "Material Components for the web wrapper for laying out form fields and labels next to one another",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@material/base": "^0.29.0",
     "@material/rtl": "^0.30.0",
-    "@material/selection-control": "^0.31.0",
+    "@material/selection-control": "^0.32.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
   }
diff --git a/packages/mdc-icon-toggle/package.json b/packages/mdc-icon-toggle/package.json
index f183d1598c6..9c064897d65 100644
--- a/packages/mdc-icon-toggle/package.json
+++ b/packages/mdc-icon-toggle/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/icon-toggle",
   "description": "The Material Components for the web icon toggle component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -16,7 +16,7 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/theme": "^0.30.0"
   }
 }
diff --git a/packages/mdc-line-ripple/README.md b/packages/mdc-line-ripple/README.md
index e10b4f81d81..ede488e0641 100644
--- a/packages/mdc-line-ripple/README.md
+++ b/packages/mdc-line-ripple/README.md
@@ -31,7 +31,7 @@ The line ripple is used to highlight user-specified text above it. When a line r
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
diff --git a/packages/mdc-line-ripple/package.json b/packages/mdc-line-ripple/package.json
index 251eec2e647..9c6d4d24d37 100644
--- a/packages/mdc-line-ripple/package.json
+++ b/packages/mdc-line-ripple/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/line-ripple",
   "description": "The Material Components for the web line-ripple component",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
diff --git a/packages/mdc-list/package.json b/packages/mdc-list/package.json
index 841d8f1c27a..80b38d0f480 100644
--- a/packages/mdc-list/package.json
+++ b/packages/mdc-list/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@material/rtl": "^0.30.0",
     "@material/typography": "^0.28.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/theme": "^0.30.0"
   }
 }
diff --git a/packages/mdc-radio/package.json b/packages/mdc-radio/package.json
index 88977777295..c7f43defe5e 100644
--- a/packages/mdc-radio/package.json
+++ b/packages/mdc-radio/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/radio",
   "description": "The Material Components for the web radio component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -16,8 +16,8 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0",
-    "@material/selection-control": "^0.31.0",
+    "@material/ripple": "^0.32.0",
+    "@material/selection-control": "^0.32.0",
     "@material/theme": "^0.30.0"
   }
 }
diff --git a/packages/mdc-ripple/_mixins.scss b/packages/mdc-ripple/_mixins.scss
index ded7057dd73..e0cf236bad7 100644
--- a/packages/mdc-ripple/_mixins.scss
+++ b/packages/mdc-ripple/_mixins.scss
@@ -52,6 +52,8 @@
 
   &.mdc-ripple-upgraded::after {
     top: 0;
+
+    /* @noflip */
     left: 0;
     transform: scale(0);
     transform-origin: center center;
@@ -59,6 +61,8 @@
 
   &.mdc-ripple-upgraded--unbounded::after {
     top: var(--mdc-ripple-top, 0);
+
+    /* @noflip */
     left: var(--mdc-ripple-left, 0);
   }
 
@@ -175,6 +179,8 @@
   &::before,
   &::after {
     top: calc(50% - #{$radius});
+
+    /* @noflip */
     left: calc(50% - #{$radius});
     width: $radius * 2;
     height: $radius * 2;
@@ -190,6 +196,8 @@
   &::before,
   &::after {
     top: calc(50% - #{$radius / 2});
+
+    /* @noflip */
     left: calc(50% - #{$radius / 2});
     width: $radius;
     height: $radius;
@@ -198,6 +206,8 @@
   &.mdc-ripple-upgraded::before,
   &.mdc-ripple-upgraded::after {
     top: var(--mdc-ripple-top, calc(50% - #{$radius / 2}));
+
+    /* @noflip */
     left: var(--mdc-ripple-left, calc(50% - #{$radius / 2}));
     width: var(--mdc-ripple-fg-size, $radius);
     height: var(--mdc-ripple-fg-size, $radius);
diff --git a/packages/mdc-ripple/package.json b/packages/mdc-ripple/package.json
index 19a189f8f01..fd0ea80dfb5 100644
--- a/packages/mdc-ripple/package.json
+++ b/packages/mdc-ripple/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/ripple",
   "description": "The Material Components for the web Ink Ripple effect for web element interactions",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
diff --git a/packages/mdc-rtl/_mixins.scss b/packages/mdc-rtl/_mixins.scss
index d24d05a8770..beb02e00c1a 100644
--- a/packages/mdc-rtl/_mixins.scss
+++ b/packages/mdc-rtl/_mixins.scss
@@ -227,11 +227,17 @@
   $right-value,
   $root-selector: null
 ) {
+  /* @noflip */
   #{$left-property}: $left-value;
+
+  /* @noflip */
   #{$right-property}: $right-value;
 
   @include mdc-rtl($root-selector) {
+    /* @noflip */
     #{$left-property}: $right-value;
+
+    /* @noflip */
     #{$right-property}: $left-value;
   }
 }
diff --git a/packages/mdc-select/README.md b/packages/mdc-select/README.md
index 5679fce7d42..efca4b80ccc 100644
--- a/packages/mdc-select/README.md
+++ b/packages/mdc-select/README.md
@@ -78,15 +78,15 @@ npm install --save @material/select
 Then with JS
 
 ```js
-import {MDCSelect} from '@material/select';
-
-const select = new MDCSelect(document.querySelector('.mdc-select'));
+const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
 select.listen('MDCSelect:change', () => {
   alert(`Selected "${select.selectedOptions[0].textContent}" at index ${select.selectedIndex} ` +
         `with value "${select.value}"`);
 });
 ```
 
+See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
 Note that you can include mdc-select via a UMD bundle, which will be available post-alpha.
 
 > Note that the full-fidelity version of MDC Select requires you to manually include the styles for
diff --git a/packages/mdc-select/label/README.md b/packages/mdc-select/label/README.md
index f623a62ece1..103f031be21 100644
--- a/packages/mdc-select/label/README.md
+++ b/packages/mdc-select/label/README.md
@@ -3,7 +3,7 @@ title: "Select Label"
 layout: detail
 section: components
 iconId: menu
-path: /catalog/input-controls/select-menus/
+path: /catalog/input-controls/select-menus/label/
 -->
 
 # Select Label
diff --git a/packages/mdc-select/package.json b/packages/mdc-select/package.json
index 31c94e3e0d0..888bb583b19 100644
--- a/packages/mdc-select/package.json
+++ b/packages/mdc-select/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/select",
   "description": "The Material Components web select (text field drop-down) component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -17,9 +17,9 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/list": "^0.31.0",
+    "@material/list": "^0.32.0",
     "@material/menu": "^0.31.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
diff --git a/packages/mdc-selection-control/package.json b/packages/mdc-selection-control/package.json
index 20e54b9e1ff..71c85aa92e8 100644
--- a/packages/mdc-selection-control/package.json
+++ b/packages/mdc-selection-control/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/selection-control",
   "description": "The set of base classes for Material selection controls",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -9,7 +9,7 @@
     "url": "https://github.com/material-components/material-components-web.git"
   },
   "dependencies": {
-    "@material/ripple": "^0.31.0"
+    "@material/ripple": "^0.32.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/mdc-slider/package.json b/packages/mdc-slider/package.json
index b5eab95b2d4..646ce186ba4 100644
--- a/packages/mdc-slider/package.json
+++ b/packages/mdc-slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/slider",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "The Material Components for the web slider component",
   "main": "index.js",
   "license": "Apache-2.0",
diff --git a/packages/mdc-switch/package.json b/packages/mdc-switch/package.json
index 1e0fdf25ae6..2adb12901ac 100644
--- a/packages/mdc-switch/package.json
+++ b/packages/mdc-switch/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/switch",
   "description": "The Material Components for the web switch component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
diff --git a/packages/mdc-tabs/package.json b/packages/mdc-tabs/package.json
index 5e17a553a8a..30e26ff1728 100644
--- a/packages/mdc-tabs/package.json
+++ b/packages/mdc-tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/tabs",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "The Material Components for the web tabs component",
   "license": "Apache-2.0",
   "repository": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/animation": "^0.25.0",
     "@material/typography": "^0.28.0",
     "@material/rtl": "^0.30.0",
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 80447b31b14..773d8f4bb76 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -41,7 +41,7 @@ npm install --save @material/textfield
 ```html
 <div class="mdc-text-field">
   <input type="text" id="my-text-field" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field">Hint text</label>
+  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -54,7 +54,7 @@ by HTML5's form validation API.
 ```html
 <div class="mdc-text-field">
   <input type="password" id="pw" class="mdc-text-field__input" required minlength=8>
-  <label for="pw" class="mdc-text-field__label">Password</label>
+  <label for="pw" class="mdc-floating-label">Password</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -64,14 +64,14 @@ by HTML5's form validation API.
 #### Pre-filled
 
 When dealing with JS-driven text fields that already have values, you'll want to ensure that you
-render `mdc-text-field__label` with the `mdc-text-field__label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
+render `mdc-floating-label` with the `mdc-floating-label--float-above` modifier class, and `mdc-text-field` with the `mdc-text-field--upgraded` modifier class. This will
 ensure that the label moves out of the way of the text field's value and prevents a Flash Of
 Un-styled Content (**FOUC**).
 
 ```html
 <div class="mdc-text-field mdc-text-field--upgraded">
   <input type="text" id="pre-filled" class="mdc-text-field__input" value="Pre-filled value">
-  <label class="mdc-text-field__label mdc-text-field__label--float-above" for="pre-filled">
+  <label class="mdc-floating-label mdc-floating-label--float-above" for="pre-filled">
     Label in correct place
   </label>
   <div class="mdc-line-ripple"></div>
@@ -93,7 +93,7 @@ Full width text fields are useful for in-depth tasks or entering complex informa
 
 > _NOTE_: Do not use `mdc-text-field--box` or `mdc-text-field--outlined` to style a full width text field.
 
-> _NOTE_: Do not use `mdc-text-field__label` within `mdc-text-field--fullwidth`. Labels should not be
+> _NOTE_: Do not use `mdc-floating-label` within `mdc-text-field--fullwidth`. Labels should not be
 included as part of the DOM structure of a full width text field.
 
 #### Textarea
@@ -101,7 +101,7 @@ included as part of the DOM structure of a full width text field.
 ```html
 <div class="mdc-text-field mdc-text-field--textarea">
   <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
-  <label for="textarea" class="mdc-text-field__label">Textarea Label</label>
+  <label for="textarea" class="mdc-floating-label">Textarea Label</label>
 </div>
 ```
 
@@ -112,7 +112,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--disabled">
   <input type="text" id="disabled-text-field" class="mdc-text-field__input" disabled>
-  <label class="mdc-text-field__label" for="disabled-text-field">Disabled text field</label>
+  <label class="mdc-floating-label" for="disabled-text-field">Disabled text field</label>
   <div class="mdc-line-ripple"></div>
 </div>
 ```
@@ -122,7 +122,7 @@ Add the `disabled` attribute to `<input>` if the `mdc-text-field` is disabled. Y
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input type="text" id="tf-outlined" class="mdc-text-field__input">
-  <label for="tf-outlined" class="mdc-text-field__label">Your Name</label>
+  <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -174,23 +174,18 @@ apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--i
 
 Mixin | Description
 --- | ---
-`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
-`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
+`mdc-text-field-bottom-line-color($color)` | Customizes the text-field bottom line color except the outline and textarea variants.
+`mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for the text-field box variant.
+`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the fullwidth text-field variant bottom line color.
+`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover text-field bottom line color except the outline and textarea variants.
 `mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field.
-`mdc-text-field-label-color($color)` | Customizes the label color of the text-field.
+`mdc-text-field-label-color($color)` | Customizes the text color of the label.
 `mdc-text-field-line-ripple-color($color)` | Customizes the color of the default line ripple of the text-field.
-`mdc-text-field-hover-line-ripple-color($color)` | Customizes the hover color of the line ripple of the text-field.
-`mdc-text-field-focused-line-ripple-color($color)` | Customizes the line-ripple ripple color when the text-field is focused.
-`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
-`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
-`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
-`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box.
-`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
+`mdc-text-field-outlined-corner-radius($radius)` | Sets the border radius of of the text-field outline variant.
+`mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` variant.
 `mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea.
-`mdc-text-field-fullwidth-line-ripple-color($color)` | Customizes the line ripple under a fullwidth text field. Doesn't apply to a textarea.
-`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
-`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
-`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea.
 
 ### `MDCTextField`
 
@@ -254,4 +249,4 @@ Method Signature | Description
 `setHelperTextContent(content: string) => void` | Sets the content of the helper text
 `updateOutline() => void` | Updates the focus outline for outlined text fields
 
-`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, label, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
+`MDCTextFieldFoundation` supports multiple optional sub-elements: line ripple, helper text, icon, and outline. The foundations of these sub-elements must be passed in as constructor arguments to `MDCTextFieldFoundation`.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 9542b233404..941409e7e8a 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -14,14 +14,14 @@
 // limitations under the License.
 //
 
+@import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
-@import "outline/mixins";
-@import "label/mixins";
-@import "label/variables";
-@import "helper-text/mixins";
-@import "icon/mixins";
-@import "icon/variables";
 @import "@material/theme/mixins";
+@import "./helper-text/mixins";
+@import "./icon/mixins";
+@import "./icon/variables";
+@import "./outline/mixins";
+@import "./variables";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -34,7 +34,7 @@
 @mixin mdc-text-field-textarea-corner-radius($radius) {
   border-radius: $radius;
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     // Bottom corners are square to prevent weird edge cases
     // where text would be visible outside of the curve.
     border-radius: $radius $radius 0 0;
@@ -71,9 +71,12 @@
 @mixin mdc-text-field-textarea-fill-color($color) {
   &:not(.mdc-text-field--disabled) {
     @include mdc-text-field-textarea-fill-color_($color);
+
     // Automatically add label background color the same color as well to ensure
     // the label can be seen if the input scrolls behind the label
-    @include mdc-text-field-label-background-color_($color);
+    .mdc-floating-label {
+      @include mdc-floating-label-fill-color($color);
+    }
   }
 }
 
@@ -101,6 +104,12 @@
   }
 }
 
+@mixin mdc-text-field-label-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-label-ink-color_($color);
+  }
+}
+
 // Private mixins
 
 // Baseline
@@ -108,7 +117,7 @@
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-label-color_(text-disabled-on-background);
+  @include mdc-text-field-label-ink-color_(text-disabled-on-background);
   @include mdc-text-field-helper-text-color_(text-disabled-on-background);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
   @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
@@ -119,7 +128,7 @@
     border-bottom: 1px dotted;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     cursor: default;
   }
 }
@@ -150,7 +159,7 @@
 
 @mixin mdc-text-field-dense_ {
   // NOTE: This is an eyeball'd approximation of what's in the mocks.
-  @include mdc-text-field-label-float_(110%, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-float-position(110%, 0%, $mdc-text-field-dense-label-scale);
 
   margin-top: 12px;
   margin-bottom: 4px;
@@ -158,7 +167,7 @@
 }
 
 @mixin mdc-required-text-field-label-asterisk_() {
-  .mdc-text-field__input:required + .mdc-text-field__label::after {
+  .mdc-text-field__input:required + .mdc-floating-label::after {
     @content;
   }
 }
@@ -192,8 +201,8 @@
 }
 
 @mixin mdc-text-field-outlined-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(outlined-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-outlined-dense);
 
   height: 48px;
 
@@ -201,7 +210,7 @@
     padding: 12px 12px 7px;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     bottom: 18px;
   }
 
@@ -214,8 +223,8 @@
   @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
   @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
   @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y);
-  @include mdc-text-field-label-shake_(outlined);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y);
+  @include mdc-floating-label-shake-animation(text-field-outlined);
 
   height: 56px;
   border: none;
@@ -229,7 +238,7 @@
     z-index: 1;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -260,8 +269,8 @@
   @include mdc-ripple-radius-bounded;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
   @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
-  @include mdc-text-field-label-float_($mdc-text-field-box-label-position-y);
-  @include mdc-text-field-label-shake_(box);
+  @include mdc-floating-label-float-position($mdc-text-field-box-label-position-y);
+  @include mdc-floating-label-shake-animation(text-field-box);
 
   display: inline-flex;
   position: relative;
@@ -276,7 +285,7 @@
     padding: 20px 16px 0;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
@@ -301,8 +310,8 @@
 }
 
 @mixin mdc-text-field-box-dense_ {
-  @include mdc-text-field-label-float_($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(box-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-box-dense);
 
   .mdc-text-field__input {
     padding: 12px 12px 0;
@@ -320,13 +329,13 @@
 }
 
 @mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-  @include mdc-text-field-label-shake_(outlined-leading-icon);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
 }
 
 @mixin mdc-text-field-outlined-dense-with-leading-icon_ {
-  @include mdc-text-field-label-float_($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
-  @include mdc-text-field-label-shake_(outlined-leading-icon-dense);
+  @include mdc-floating-label-float-position($mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
 }
 
 @mixin mdc-text-field-with-trailing-icon_ {
@@ -373,7 +382,6 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-text-field-label-background-color_($mdc-textarea-disabled-background);
   @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border);
   @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);
 
@@ -382,6 +390,10 @@
   .mdc-text-field__input {
     border: 1px solid transparent;
   }
+
+  .mdc-floating-label {
+    @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
+  }
 }
 
 @mixin mdc-text-field-textarea-invalid_ {
@@ -390,13 +402,12 @@
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
-  @include mdc-text-field-label-background-color_($mdc-textarea-background);
   @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);
 
   // Translate above the top of the input, and compensate for the amount of offset needed
   // to position the label within the bounds of the inset padding.
-  @include mdc-text-field-label-float_($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-  @include mdc-text-field-label-shake_(textarea);
+  @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
+  @include mdc-floating-label-shake-animation(textarea);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -416,8 +427,9 @@
     border: 1px solid transparent;
   }
 
-  .mdc-text-field__label {
+  .mdc-floating-label {
     @include mdc-rtl-reflexive-position(left, 1px);
+    @include mdc-floating-label-fill-color($mdc-textarea-background);
 
     top: $label-offset-y;
     bottom: auto;
@@ -475,3 +487,14 @@
     @include mdc-line-ripple-color($color);
   }
 }
+
+@mixin mdc-text-field-label-ink-color_($color) {
+  .mdc-floating-label {
+    @include mdc-floating-label-ink-color($color);
+  }
+
+  // CSS-only version
+  .mdc-text-field__input::placeholder {
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
index a8005168da4..c179091c9c5 100644
--- a/packages/mdc-textfield/_variables.scss
+++ b/packages/mdc-textfield/_variables.scss
@@ -38,3 +38,14 @@ $mdc-textarea-background: rgba(white, 1);
 $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);
 
 $mdc-text-field-border-radius: 4px !default;
+
+$mdc-text-field-box-label-position-y: 50%;
+$mdc-text-field-box-dense-label-position-y: 90%;
+$mdc-text-field-dense-label-scale: .923;
+$mdc-text-field-outlined-label-position-y: 130%;
+$mdc-text-field-outlined-dense-label-position-y: 145%;
+$mdc-text-field-outlined-with-leading-icon-label-position-x: 32px;
+$mdc-text-field-outlined-dense-with-leading-icon-label-position-x: 21px;
+$mdc-text-field-textarea-label-position-y: 50%;
+// Note that the scale factor is an eyeballed approximation of what's shown in the mocks.
+$mdc-text-field-textarea-label-scale: .923;
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index fc31be86a0a..44dfd23547d 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -19,7 +19,7 @@
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 
 /* eslint no-unused-vars: [2, {"args": "none"}] */
@@ -42,7 +42,7 @@ let NativeInputType;
  *   lineRipple: (!MDCLineRippleFoundation|undefined),
  *   helperText: (!MDCTextFieldHelperTextFoundation|undefined),
  *   icon: (!MDCTextFieldIconFoundation|undefined),
- *   label: (!MDCTextFieldLabelFoundation|undefined),
+ *   label: (!MDCFloatingLabelFoundation|undefined),
  *   outline: (!MDCTextFieldOutlineFoundation|undefined)
  * }}
  */
@@ -106,6 +106,19 @@ class MDCTextFieldAdapter {
    */
   deregisterInputInteractionHandler(evtType, handler) {}
 
+  /**
+   * Registers a validation attribute change listener on the input element.
+   * @param {function(!Array): undefined} handler
+   * @return {!MutationObserver}
+   */
+  registerValidationAttributeChangeHandler(handler) {}
+
+  /**
+   * Disconnects a validation attribute observer on the input element.
+   * @param {!MutationObserver} observer
+   */
+  deregisterValidationAttributeChangeHandler(observer) {}
+
   /**
    * Returns an object representing the native text input element, with a
    * similar API shape. The object returned should include the value, disabled
@@ -146,6 +159,33 @@ class MDCTextFieldAdapter {
    * @param {number} normalizedX
    */
   setLineRippleTransformOrigin(normalizedX) {}
+
+  /**
+   * Only implement if label exists.
+   * Shakes label if shouldShake is true.
+   * @param {boolean} shouldShake
+   */
+  shakeLabel(shouldShake) {}
+
+  /**
+   * Only implement if label exists.
+   * Floats the label above the input element if shouldFloat is true.
+   * @param {boolean} shouldFloat
+   */
+  floatLabel(shouldFloat) {}
+
+  /**
+   * Returns true if label element exists, false if it doesn't.
+   * @return {boolean}
+   */
+  hasLabel() {}
+
+  /**
+   * Only implement if label exists.
+   * Returns width of label in pixels.
+   * @return {number}
+   */
+  getLabelWidth() {}
 }
 
 export {MDCTextFieldAdapter, NativeInputType, FoundationMapType};
diff --git a/packages/mdc-textfield/constants.js b/packages/mdc-textfield/constants.js
index eb64d2577da..cb9c72c9b55 100644
--- a/packages/mdc-textfield/constants.js
+++ b/packages/mdc-textfield/constants.js
@@ -19,7 +19,7 @@
 const strings = {
   ARIA_CONTROLS: 'aria-controls',
   INPUT_SELECTOR: '.mdc-text-field__input',
-  LABEL_SELECTOR: '.mdc-text-field__label',
+  LABEL_SELECTOR: '.mdc-floating-label',
   ICON_SELECTOR: '.mdc-text-field__icon',
   OUTLINE_SELECTOR: '.mdc-text-field__outline',
   BOTTOM_LINE_SELECTOR: '.mdc-line-ripple',
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fb76510e23d..0efc3a30e88 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -21,12 +21,18 @@ import {MDCTextFieldAdapter, NativeInputType, FoundationMapType} from './adapter
 import MDCLineRippleFoundation from '@material/line-ripple/foundation';
 import MDCTextFieldHelperTextFoundation from './helper-text/foundation';
 import MDCTextFieldIconFoundation from './icon/foundation';
-import MDCTextFieldLabelFoundation from './label/foundation';
+import MDCFloatingLabelFoundation from '@material/floating-label/foundation';
 import MDCTextFieldOutlineFoundation from './outline/foundation';
 /* eslint-enable no-unused-vars */
 import {cssClasses, strings, numbers} from './constants';
 
 
+// whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+// under section: `Validation-related attributes`
+const VALIDATION_ATTR_WHITELIST = [
+  'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
+];
+
 /**
  * @extends {MDCFoundation<!MDCTextFieldAdapter>}
  * @final
@@ -47,6 +53,16 @@ class MDCTextFieldFoundation extends MDCFoundation {
     return numbers;
   }
 
+  /** @return {boolean} */
+  get shouldShake() {
+    return !this.isValid() && !this.isFocused_;
+  }
+
+  /** @return {boolean} */
+  get shouldFloat() {
+    return !this.isBadInput_() && (!!this.getValue() || this.isFocused_);
+  }
+
   /**
    * {@see MDCTextFieldAdapter} for typing information on parameters and return
    * types.
@@ -61,12 +77,18 @@ class MDCTextFieldFoundation extends MDCFoundation {
       deregisterTextFieldInteractionHandler: () => {},
       registerInputInteractionHandler: () => {},
       deregisterInputInteractionHandler: () => {},
+      registerValidationAttributeChangeHandler: () => {},
+      deregisterValidationAttributeChangeHandler: () => {},
       getNativeInput: () => {},
       isFocused: () => {},
       isRtl: () => {},
       activateLineRipple: () => {},
       deactivateLineRipple: () => {},
       setLineRippleTransformOrigin: () => {},
+      shakeLabel: () => {},
+      floatLabel: () => {},
+      hasLabel: () => {},
+      getLabelWidth: () => {},
     });
   }
 
@@ -81,8 +103,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.helperText_ = foundationMap.helperText;
     /** @type {!MDCTextFieldIconFoundation|undefined} */
     this.icon_ = foundationMap.icon;
-    /** @type {!MDCTextFieldLabelFoundation|undefined} */
-    this.label_ = foundationMap.label;
     /** @type {!MDCTextFieldOutlineFoundation|undefined} */
     this.outline_ = foundationMap.outline;
 
@@ -104,14 +124,17 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.setPointerXOffset_ = (evt) => this.setTransformOrigin(evt);
     /** @private {function(!Event): undefined} */
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
+    /** @private {function(!Array): undefined} */
+    this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation_(mutations);
+    /** @private {!MutationObserver} */
+    this.validationObserver_;
   }
 
   init() {
     this.adapter_.addClass(MDCTextFieldFoundation.cssClasses.UPGRADED);
     // Ensure label does not collide with any pre-filled value.
-    if (this.label_ && this.getValue()) {
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel() && this.getValue()) {
+      this.adapter_.floatLabel(this.shouldFloat);
     }
 
     if (this.adapter_.isFocused()) {
@@ -127,6 +150,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
+    this.validationObserver_ = this.adapter_.registerValidationAttributeChangeHandler(
+      this.validationAttributeChangeHandler_);
   }
 
   destroy() {
@@ -140,6 +165,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
+    this.adapter_.deregisterValidationAttributeChangeHandler(this.validationObserver_);
   }
 
   /**
@@ -152,17 +178,31 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.receivedUserInput_ = true;
   }
 
+  /**
+   * Handles validation attribute changes
+   * @param {Array<MutationRecord>} mutationsList
+   * @private
+   */
+  handleValidationAttributeMutation_(mutationsList) {
+    mutationsList.some((mutation) => {
+      if (VALIDATION_ATTR_WHITELIST.indexOf(mutation.attributeName) > -1) {
+        this.styleValidity_(true);
+        return true;
+      }
+    });
+  }
+
   /**
    * Updates the focus outline for outlined text fields.
    */
   updateOutline() {
-    if (!this.outline_ || !this.label_) {
+    if (!this.outline_ || !this.adapter_.hasLabel()) {
       return;
     }
 
     const isDense = this.adapter_.hasClass(cssClasses.DENSE);
     const labelScale = isDense ? numbers.DENSE_LABEL_SCALE : numbers.LABEL_SCALE;
-    const labelWidth = this.label_.getWidth() * labelScale;
+    const labelWidth = this.adapter_.getLabelWidth() * labelScale;
     const isRtl = this.adapter_.isRtl();
     this.outline_.updateSvgPath(labelWidth, isRtl);
   }
@@ -177,10 +217,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     if (this.outline_) {
       this.updateOutline();
     }
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (this.helperText_) {
       this.helperText_.showToScreenReader();
@@ -220,10 +259,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const isValid = this.isValid();
     this.styleValidity_(isValid);
     this.styleFocused_(this.isFocused_);
-    if (this.label_) {
-      this.label_.styleShake(this.isValid(), this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
     if (shouldRemoveLabelFloat) {
       this.receivedUserInput_ = false;
@@ -244,10 +282,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.getNativeInput_().value = value;
     const isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
-      this.label_.styleFloat(
-        this.getValue(), this.isFocused_, this.isBadInput_());
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
+      this.adapter_.floatLabel(this.shouldFloat);
     }
   }
 
@@ -269,8 +306,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // Retrieve from the getter to ensure correct logic is applied.
     isValid = this.isValid();
     this.styleValidity_(isValid);
-    if (this.label_) {
-      this.label_.styleShake(isValid, this.isFocused_);
+    if (this.adapter_.hasLabel()) {
+      this.adapter_.shakeLabel(this.shouldShake);
     }
   }
 
@@ -289,23 +326,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.styleDisabled_(disabled);
   }
 
-  /**
-   * @return {boolean} True if the Text Field is required.
-   */
-  isRequired() {
-    return this.getNativeInput_().required;
-  }
-
-  /**
-   * @param {boolean} isRequired Sets the text-field required or not.
-   */
-  setRequired(isRequired) {
-    this.getNativeInput_().required = isRequired;
-    // Addition of the asterisk is automatic based on CSS, but validity checking
-    // needs to be manually run.
-    this.styleValidity_(this.isValid());
-  }
-
   /**
    * @param {string} content Sets the content of the helper text.
    */
diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
index 0cb478d09b8..4c65241d2bb 100644
--- a/packages/mdc-textfield/helper-text/README.md
+++ b/packages/mdc-textfield/helper-text/README.md
@@ -32,7 +32,7 @@ Helper text gives context about a field’s input, such as how the input will be
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p class="mdc-text-field-helper-text" aria-hidden="true">
@@ -51,7 +51,7 @@ the input element.
 ```html
 <div class="mdc-text-field">
   <input type="text" id="username" class="mdc-text-field__input" aria-controls="username-helper-text">
-  <label for="username" class="mdc-text-field__label">Username</label>
+  <label for="username" class="mdc-floating-label">Username</label>
   <div class="mdc-line-ripple"></div>
 </div>
 <p id="username-helper-text" class="mdc-text-field-helper-text" aria-hidden="true">
@@ -73,6 +73,14 @@ CSS Class | Description
 `mdc-text-field-helper-text--persistent` | Makes the helper text permanently visible
 `mdc-text-field-helper-text--validation-msg` | Indicates the helper text is a validation message
 
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
+`mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
+
 ### `MDCTextFieldHelperText`
 
 ##### `MDCTextFieldHelperText.foundation`
diff --git a/packages/mdc-textfield/icon/README.md b/packages/mdc-textfield/icon/README.md
index e38592d77af..0ee225c04c1 100644
--- a/packages/mdc-textfield/icon/README.md
+++ b/packages/mdc-textfield/icon/README.md
@@ -38,7 +38,7 @@ In text field box:
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
 ```
@@ -48,7 +48,7 @@ In outlined text field:
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -64,7 +64,7 @@ In text field box:
 ```html
 <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__bottom-line"></div>
 </div>
@@ -74,7 +74,7 @@ In outlined text field:
 ```html
 <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
   <input type="text" id="my-input" class="mdc-text-field__input">
-  <label for="my-input" class="mdc-text-field__label">Your Name</label>
+  <label for="my-input" class="mdc-floating-label">Your Name</label>
   <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
   <div class="mdc-text-field__outline">
     <svg>
@@ -89,6 +89,12 @@ In outlined text field:
 and the css will ensure the cursor is set to default, and that actioning on an icon doesn't
 do anything unexpected.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
+
 ### `MDCTextFieldIcon`
 
 ##### `MDCTextFieldIcon.foundation`
@@ -109,4 +115,4 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `setDisabled(disabled: boolean) => void` | Updates the icon's disabled state
-`handleInteraction(evt: Event) => void` | Handles a text field interaction event
\ No newline at end of file
+`handleInteraction(evt: Event) => void` | Handles a text field interaction event
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 8eb68c67f9c..ab4a0eaceee 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -43,8 +43,8 @@
   // Only move the label's position to allow room for the icon, if the icon is on the same
   // side as the label. Aka the icon is on left side in a LTR context.
   @if ($position-property == left) {
-    .mdc-text-field__label {
-	  @include mdc-rtl-reflexive-position($position-property, $padding);
+    .mdc-floating-label {
+      @include mdc-rtl-reflexive-position($position-property, $padding);
     }
   }
 }
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index ffd841e9861..7b78bedb342 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -29,7 +29,7 @@ import MDCTextFieldFoundation from './foundation';
 import {MDCLineRipple, MDCLineRippleFoundation} from '@material/line-ripple/index';
 import {MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation} from './helper-text/index';
 import {MDCTextFieldIcon, MDCTextFieldIconFoundation} from './icon/index';
-import {MDCTextFieldLabel, MDCTextFieldLabelFoundation} from './label/index';
+import {MDCFloatingLabel, MDCFloatingLabelFoundation} from '@material/floating-label/index';
 import {MDCTextFieldOutline, MDCTextFieldOutlineFoundation} from './outline/index';
 /* eslint-enable no-unused-vars */
 
@@ -53,7 +53,7 @@ class MDCTextField extends MDCComponent {
     this.helperText_;
     /** @private {?MDCTextFieldIcon} */
     this.icon_;
-    /** @private {?MDCTextFieldLabel} */
+    /** @private {?MDCFloatingLabel} */
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
@@ -76,8 +76,8 @@ class MDCTextField extends MDCComponent {
    * creates a new MDCTextFieldHelperText.
    * @param {(function(!Element): !MDCTextFieldIcon)=} iconFactory A function which
    * creates a new MDCTextFieldIcon.
-   * @param {(function(!Element): !MDCTextFieldLabel)=} labelFactory A function which
-   * creates a new MDCTextFieldLabel.
+   * @param {(function(!Element): !MDCFloatingLabel)=} labelFactory A function which
+   * creates a new MDCFloatingLabel.
    * @param {(function(!Element): !MDCTextFieldOutline)=} outlineFactory A function which
    * creates a new MDCTextFieldOutline.
    */
@@ -86,7 +86,7 @@ class MDCTextField extends MDCComponent {
     lineRippleFactory = (el) => new MDCLineRipple(el),
     helperTextFactory = (el) => new MDCTextFieldHelperText(el),
     iconFactory = (el) => new MDCTextFieldIcon(el),
-    labelFactory = (el) => new MDCTextFieldLabel(el),
+    labelFactory = (el) => new MDCFloatingLabel(el),
     outlineFactory = (el) => new MDCTextFieldOutline(el)) {
     this.input_ = this.root_.querySelector(strings.INPUT_SELECTOR);
     const labelElement = this.root_.querySelector(strings.LABEL_SELECTOR);
@@ -206,14 +206,103 @@ class MDCTextField extends MDCComponent {
    * @return {boolean} True if the Text Field is required.
    */
   get required() {
-    return this.foundation_.isRequired();
+    return this.input_.required;
   }
 
   /**
    * @param {boolean} required Sets the Text Field to required.
    */
   set required(required) {
-    this.foundation_.setRequired(required);
+    this.input_.required = required;
+  }
+
+  /**
+   * @return {string} The input element's validation pattern.
+   */
+  get pattern() {
+    return this.input_.pattern;
+  }
+
+  /**
+   * @param {string} pattern Sets the input element's validation pattern.
+   */
+  set pattern(pattern) {
+    this.input_.pattern = pattern;
+  }
+
+  /**
+   * @return {number} The input element's minLength.
+   */
+  get minLength() {
+    return this.input_.minLength;
+  }
+
+  /**
+   * @param {number} minLength Sets the input element's minLength.
+   */
+  set minLength(minLength) {
+    this.input_.minLength = minLength;
+  }
+
+  /**
+   * @return {number} The input element's maxLength.
+   */
+  get maxLength() {
+    return this.input_.maxLength;
+  }
+
+  /**
+   * @param {number} maxLength Sets the input element's maxLength.
+   */
+  set maxLength(maxLength) {
+    // Chrome throws exception if maxLength is set < 0
+    if (maxLength < 0) {
+      this.input_.removeAttribute('maxLength');
+    } else {
+      this.input_.maxLength = maxLength;
+    }
+  }
+
+  /**
+   * @return {string} The input element's min.
+   */
+  get min() {
+    return this.input_.min;
+  }
+
+  /**
+   * @param {string} min Sets the input element's min.
+   */
+  set min(min) {
+    this.input_.min = min;
+  }
+
+  /**
+   * @return {string} The input element's max.
+   */
+  get max() {
+    return this.input_.max;
+  }
+
+  /**
+   * @param {string} max Sets the input element's max.
+   */
+  set max(max) {
+    this.input_.max = max;
+  }
+
+  /**
+   * @return {string} The input element's step.
+   */
+  get step() {
+    return this.input_.step;
+  }
+
+  /**
+   * @param {string} step Sets the input element's step.
+   */
+  set step(step) {
+    this.input_.step = step;
   }
 
   /**
@@ -248,6 +337,14 @@ class MDCTextField extends MDCComponent {
         hasClass: (className) => this.root_.classList.contains(className),
         registerTextFieldInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
         deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+        registerValidationAttributeChangeHandler: (handler) => {
+          const observer = new MutationObserver(handler);
+          const targetNode = this.root_.querySelector(strings.INPUT_SELECTOR);
+          const config = {attributes: true};
+          observer.observe(targetNode, config);
+          return observer;
+        },
+        deregisterValidationAttributeChangeHandler: (observer) => observer.disconnect(),
         isFocused: () => {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },
@@ -267,6 +364,18 @@ class MDCTextField extends MDCComponent {
             this.lineRipple_.setRippleCenter(normalizedX);
           }
         },
+        shakeLabel: (shouldShake) => {
+          this.label_.shake(shouldShake);
+        },
+        floatLabel: (shouldFloat) => {
+          this.label_.float(shouldFloat);
+        },
+        hasLabel: () => {
+          return !!this.label_;
+        },
+        getLabelWidth: () => {
+          return this.label_.getWidth();
+        },
       },
       this.getInputAdapterMethods_())),
       this.getFoundationMap_());
@@ -295,7 +404,6 @@ class MDCTextField extends MDCComponent {
     return {
       helperText: this.helperText_ ? this.helperText_.foundation : undefined,
       icon: this.icon_ ? this.icon_.foundation : undefined,
-      label: this.label_ ? this.label_.foundation : undefined,
       outline: this.outline_ ? this.outline_.foundation : undefined,
     };
   }
@@ -304,5 +412,4 @@ class MDCTextField extends MDCComponent {
 export {MDCTextField, MDCTextFieldFoundation,
   MDCTextFieldHelperText, MDCTextFieldHelperTextFoundation,
   MDCTextFieldIcon, MDCTextFieldIconFoundation,
-  MDCTextFieldLabel, MDCTextFieldLabelFoundation,
   MDCTextFieldOutline, MDCTextFieldOutlineFoundation};
diff --git a/packages/mdc-textfield/label/README.md b/packages/mdc-textfield/label/README.md
deleted file mode 100644
index f79a079378d..00000000000
--- a/packages/mdc-textfield/label/README.md
+++ /dev/null
@@ -1,93 +0,0 @@
-<!--docs:
-title: "Text Field Label"
-layout: detail
-section: components
-excerpt: "The label is a text caption or description for the text field."
-iconId: text_field
-path: /catalog/input-controls/text-field/label/
--->
-
-# Text Field Label
-
-Text field labels display the type of input a field requires. Every text field should have a label. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating. The label is a text caption or description for the text field.
-
-## Design & API Documentation
-
-<ul class="icon-list">
-  <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-layout">Material Design guidelines: Text Fields Layout</a>
-  </li>
-</ul>
-
-## Usage
-
-### HTML Structure
-
-```html
-<label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
-```
-
-### Usage within `mdc-text-field`
-
-```html
-<div class="mdc-text-field">
-  <input type="text" id="my-text-field-id" class="mdc-text-field__input">
-  <label class="mdc-text-field__label" for="my-text-field-id">Hint text</label>
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
-```
-
-#### Avoid Dynamic ID Generation
-
-It's also possible to wrap `mdc-text-field__input` within a `<label>` to avoid dynamic id generation:
-
-```html
-<label class="mdc-text-field">
-  <input type="text" class="mdc-text-field__input">
-  <span class="mdc-text-field__label">Hint Text</span>
-  <div class="mdc-text-field__bottom-line"></div>
-</label>
-```
-
-> _NOTE_: Only place an `mdc-text-field__label` inside of a text field _if you plan on using
-> Javascript_. Otherwise, the label must go outside of the text-field, as shown below.
-
-#### Single Line, CSS Only
-
-```html
-<label for="text-field-no-js">TextField with no JS: </label>
-<div class="mdc-text-field">
-  <input type="text" id="text-field-no-js" class="mdc-text-field__input" placeholder="Hint text">
-  <div class="mdc-text-field__bottom-line"></div>
-</div>
-```
-
-### CSS Classes
-
-CSS Class | Description
---- | ---
-`mdc-text-field__label` | Mandatory
-`mdc-text-field__label--float-above` | Indicates the label is floating above the text field
-`mdc-text-field__label--shake` | Shakes the label
-
-### `MDCTextFieldLabel`
-
-##### `MDCTextFieldLabel.foundation`
-
-This allows the parent `MDCTextField` component to access the public methods on the `MDCTextFieldLabelFoundation` class.
-
-### `MDCTextFieldLabelAdapter`
-
-Method Signature | Description
---- | ---
-`addClass(className: string) => void` | Adds a class to the label element
-`removeClass(className: string) => void` | Removes a class from the label element
-`getWidth() => number` | Returns the width of the label element
-
-### `MDCTextFieldLabelFoundation`
-
-Method Signature | Description
---- | ---
-`getWidth() => number` | Returns the width of the label element
-`styleShake(isValid: boolean, isFocused: boolean)` | Styles the label to produce the shake effect when needed.
-`styleFloat(value: string, isFocused: boolean, isBadInput: boolean)` | Styles the label to float or defloat as necessary.
diff --git a/packages/mdc-textfield/label/_mixins.scss b/packages/mdc-textfield/label/_mixins.scss
deleted file mode 100644
index cb5206680b7..00000000000
--- a/packages/mdc-textfield/label/_mixins.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-//
-// Copyright 2018 Google Inc. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-@import './variables';
-
-// Public
-
-@mixin mdc-text-field-label-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-label-color_($color);
-  }
-}
-
-// Private
-
-@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY, $positionX: 0%, $scale: .75) {
-  @keyframes invalid-shake-float-above-#{$modifier} {
-    0% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    33% {
-      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
-      transform: translateX(calc(4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    66% {
-      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
-      transform: translateX(calc(-4% - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-
-    100% {
-      transform: translateX(calc(0 - #{$positionX})) translateY(-#{$positionY}) scale(#{$scale});
-    }
-  }
-}
-
-@include mdc-text-field-invalid-label-shake_keyframes_(standard, $mdc-text-field-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box, $mdc-text-field-box-label-position-y);
-@include mdc-text-field-invalid-label-shake-keyframes_(box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
-@include mdc-text-field-invalid-label-shake_keyframes_(outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
-@include mdc-text-field-invalid-label-shake-keyframes_(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
-
-@mixin mdc-text-field-label-float_($positionY, $positionX: 0%, $scale: .75) {
-  @if $positionX == 0 {
-    .mdc-text-field__label--float-above {
-      transform: translateY(-1 * $positionY) scale($scale);
-    }
-  } @else {
-    .mdc-text-field__label--float-above {
-      transform: translateY(-1 * $positionY) translateX(-1 * $positionX) scale($scale);
-
-      @include mdc-rtl {
-        transform: translateY(-1 * $positionY) translateX($positionX) scale($scale);
-      }
-    }
-  }
-}
-
-@mixin mdc-text-field-label-shake_($modifier) {
-  .mdc-text-field__label--shake {
-    animation: invalid-shake-float-above-#{$modifier} 250ms 1;
-  }
-}
-
-@mixin mdc-text-field-label-color_($color) {
-  .mdc-text-field__label,
-  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
-    @include mdc-theme-prop(color, $color);
-  }
-}
-
-// Used for textarea in case of scrolling
-@mixin mdc-text-field-label-background-color_($color) {
-  .mdc-text-field__label {
-    @include mdc-theme-prop(background-color, $color);
-  }
-}
diff --git a/packages/mdc-textfield/label/foundation.js b/packages/mdc-textfield/label/foundation.js
deleted file mode 100644
index a404f60e071..00000000000
--- a/packages/mdc-textfield/label/foundation.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import MDCFoundation from '@material/base/foundation';
-import MDCTextFieldLabelAdapter from './adapter';
-import {cssClasses} from './constants';
-
-
-/**
- * @extends {MDCFoundation<!MDCTextFieldLabelAdapter>}
- * @final
- */
-class MDCTextFieldLabelFoundation extends MDCFoundation {
-  /** @return enum {string} */
-  static get cssClasses() {
-    return cssClasses;
-  }
-
-  /**
-   * {@see MDCTextFieldLabelAdapter} for typing information on parameters and return
-   * types.
-   * @return {!MDCTextFieldLabelAdapter}
-   */
-  static get defaultAdapter() {
-    return /** @type {!MDCTextFieldLabelAdapter} */ ({
-      addClass: () => {},
-      removeClass: () => {},
-      getWidth: () => {},
-    });
-  }
-
-  /**
-   * @param {!MDCTextFieldLabelAdapter} adapter
-   */
-  constructor(adapter) {
-    super(Object.assign(MDCTextFieldLabelFoundation.defaultAdapter, adapter));
-  }
-
-  /**
-   * Returns the width of the label element.
-   * @return {number}
-   */
-  getWidth() {
-    return this.adapter_.getWidth();
-  }
-
-  /**
-   * Styles the label to produce the label shake for errors.
-   * @param {boolean} isValid Whether the input's value is valid (passes all
-   *     validity checks).
-   * @param {boolean} isFocused Whether the input is focused.
-   */
-  styleShake(isValid, isFocused) {
-    const {LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
-    if (isValid || isFocused) {
-      this.adapter_.removeClass(LABEL_SHAKE);
-    } else {
-      this.adapter_.addClass(LABEL_SHAKE);
-    }
-  }
-
-  /**
-   * Styles the label to float or defloat as necessary.
-   * @param {string} value The value of the input.
-   * @param {boolean} isFocused Whether the input is focused.
-   * @param {boolean} isBadInput The input's `validity.badInput` value.
-   */
-  styleFloat(value, isFocused, isBadInput) {
-    const {LABEL_FLOAT_ABOVE, LABEL_SHAKE} = MDCTextFieldLabelFoundation.cssClasses;
-    if (!!value || isFocused) {
-      this.adapter_.addClass(LABEL_FLOAT_ABOVE);
-    } else if (!isBadInput) {
-      this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
-      this.adapter_.removeClass(LABEL_SHAKE);
-    }
-  }
-}
-
-export default MDCTextFieldLabelFoundation;
diff --git a/packages/mdc-textfield/label/index.js b/packages/mdc-textfield/label/index.js
deleted file mode 100644
index 5eab868c811..00000000000
--- a/packages/mdc-textfield/label/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import MDCComponent from '@material/base/component';
-
-import MDCTextFieldLabelAdapter from './adapter';
-import MDCTextFieldLabelFoundation from './foundation';
-
-/**
- * @extends {MDCComponent<!MDCTextFieldLabelFoundation>}
- * @final
- */
-class MDCTextFieldLabel extends MDCComponent {
-  /**
-   * @param {!Element} root
-   * @return {!MDCTextFieldLabel}
-   */
-  static attachTo(root) {
-    return new MDCTextFieldLabel(root);
-  }
-
-  /**
-   * @return {!MDCTextFieldLabelFoundation}.
-   */
-  get foundation() {
-    return this.foundation_;
-  }
-
-  /**
-   * @return {!MDCTextFieldLabelFoundation}
-   */
-  getDefaultFoundation() {
-    return new MDCTextFieldLabelFoundation(/** @type {!MDCTextFieldLabelAdapter} */ (Object.assign({
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      getWidth: () => this.root_.offsetWidth,
-    })));
-  }
-}
-
-export {MDCTextFieldLabel, MDCTextFieldLabelFoundation};
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 6071899499b..b5e0bd0907b 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -14,21 +14,21 @@
 // limitations under the License.
 //
 
-@import "./functions";
-@import "./mixins";
-@import "./variables";
 @import "@material/animation/variables";
+@import "@material/floating-label/mdc-floating-label";
+@import "@material/line-ripple/mdc-line-ripple";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
-@import "@material/line-ripple/mdc-line-ripple";
+@import "./functions";
 @import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
-@import "./label/mdc-text-field-label";
+@import "./mixins";
 @import "./outline/mdc-text-field-outline";
+@import "./variables";
 
 // postcss-bem-linter: define text-field
 
@@ -60,7 +60,7 @@
   }
 
   width: 100%;
-  padding: 0 0 8px;
+  padding: 20px 0 8px;
   transition: mdc-text-field-transition(opacity);
   border: none;
   border-bottom: 1px solid;
@@ -85,7 +85,7 @@
 
   // Move label when text-field gets autofilled in Chrome
   // stylelint-disable plugin/selector-bem-pattern
-  &:-webkit-autofill + .mdc-text-field__label {
+  &:-webkit-autofill + .mdc-floating-label {
     transform: translateY(-100%) scale(.75);
     cursor: auto;
   }
@@ -163,10 +163,6 @@
   &:not(.mdc-text-field--textarea):not(.mdc-text-field--outlined) {
     height: 48px;
   }
-
-  .mdc-text-field__label {
-    pointer-events: none;
-  }
 }
 
 .mdc-text-field--dense {
@@ -246,12 +242,20 @@
 
 // Never show the idle outline when the label is floating, otherwise the label
 // will collide with the idle outline.
-.mdc-text-field__label--float-above ~ .mdc-text-field__idle-outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__idle-outline {
   opacity: 0;
 }
 
 // Show the outline when the label is floating, since the outline has a
 // notch for the label to fit into.
-.mdc-text-field__label--float-above ~ .mdc-text-field__outline {
+.mdc-floating-label--float-above ~ .mdc-text-field__outline {
   opacity: 1;
 }
+
+@include mdc-floating-label-shake-keyframes(text-field-box, $mdc-text-field-box-label-position-y);
+@include mdc-floating-label-shake-keyframes(text-field-box-dense, $mdc-text-field-box-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-dense, $mdc-text-field-outlined-dense-label-position-y, 0%, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon, $mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
+@include mdc-floating-label-shake-keyframes(text-field-outlined-leading-icon-dense, $mdc-text-field-outlined-dense-label-position-y, $mdc-text-field-outlined-dense-with-leading-icon-label-position-x, $mdc-text-field-dense-label-scale);
+@include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
diff --git a/packages/mdc-textfield/outline/README.md b/packages/mdc-textfield/outline/README.md
index 4f8e3e03879..17e6fbf0036 100644
--- a/packages/mdc-textfield/outline/README.md
+++ b/packages/mdc-textfield/outline/README.md
@@ -37,7 +37,7 @@ The outline is a border around all sides of the text field. This is used for the
 ```html
 <div class="mdc-text-field mdc-text-field--outlined">
   <input class="mdc-text-field__input" id="my-text-field-id" type="text">
-  <label class="mdc-text-field__label" for="my-text-field-id">Label</label>
+  <label class="mdc-floating-label" for="my-text-field-id">Label</label>
   <div class="mdc-text-field__outline">
     <svg>
       <path class="mdc-text-field__outline-path"/>
@@ -55,6 +55,14 @@ CSS Class | Description
 `mdc-text-field__outline-path` | Mandatory. The SVG path in the outline when the label is floating above the input.
 `mdc-text-field__idle-outline` | Mandatory. The outline when the label is resting in the input position.
 
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field.
+`mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
+`mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
+
 #### `MDCTextFieldOutline`
 
 ##### `MDCTextFieldOutline.foundation`
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index a5413e7b562..6bbab2e6c84 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material/textfield",
   "description": "The Material Components for the web text field component",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "keywords": [
     "material components",
@@ -17,8 +17,9 @@
   "dependencies": {
     "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/line-ripple": "^0.30.0",
-    "@material/ripple": "^0.31.0",
+    "@material/floating-label": "^0.32.0",
+    "@material/line-ripple": "^0.32.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss
index 337c014d166..24732f75824 100644
--- a/packages/mdc-theme/_mixins.scss
+++ b/packages/mdc-theme/_mixins.scss
@@ -36,7 +36,6 @@
     $value: map-get($mdc-theme-property-values, $style);
 
     @if $important {
-      /* @alternate */
       #{$property}: $value !important;
 
       @if $edgeOptOut {
@@ -45,6 +44,7 @@
           @supports not (-ms-ime-align:auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
+              /* @alternate */
               #{$property}: var(--mdc-theme-#{$style}, $value) !important;
             }
             // stylelint-enable scss/selector-no-redundant-nesting-selector
@@ -52,10 +52,10 @@
         }
         // stylelint-enable max-nesting-depth
       } @else {
+        /* @alternate */
         #{$property}: var(--mdc-theme-#{$style}, $value) !important;
       }
     } @else {
-      /* @alternate */
       #{$property}: $value;
 
       @if $edgeOptOut {
@@ -64,6 +64,7 @@
           @supports not (-ms-ime-align:auto) {
             // stylelint-disable scss/selector-no-redundant-nesting-selector
             & {
+              /* @alternate */
               #{$property}: var(--mdc-theme-#{$style}, $value);
             }
             // stylelint-enable scss/selector-no-redundant-nesting-selector
@@ -71,6 +72,7 @@
         }
         // stylelint-enable max-nesting-depth
       } @else {
+        /* @alternate */
         #{$property}: var(--mdc-theme-#{$style}, $value);
       }
     }
diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
index dad4e0d14ee..dbcf870c71d 100644
--- a/packages/mdc-toolbar/README.md
+++ b/packages/mdc-toolbar/README.md
@@ -141,6 +141,14 @@ Icons can be added as anchor tags, `span`s, or `button`s to `mdc-toolbar`. There
 `mdc-toolbar__menu-icon` represents the left most icon in `mdc-toolbar` usually to the left of `mdc-toolbar__title`.
 `mdc-toolbar__icon` represents any icons placed on the right side of an `mdc-toolbar`.
 
+When using `svg` icons, ensure you wrap the `svg` element in an `a` and include the `mdc-toolbar__icon` class.
+
+```html
+<a href="#" class="mdc-toolbar__icon">
+  <svg></svg>
+</a>
+```
+
 ### Fixed toolbars
 
 By default, toolbars scroll with the page content. To keep the toolbar fixed to
diff --git a/packages/mdc-toolbar/_mixins.scss b/packages/mdc-toolbar/_mixins.scss
index f2793c4b3e3..b38d56aa754 100644
--- a/packages/mdc-toolbar/_mixins.scss
+++ b/packages/mdc-toolbar/_mixins.scss
@@ -66,6 +66,7 @@
   border: none;
   outline: none;
   background-color: transparent;
+  fill: currentColor;
   color: inherit;
   text-decoration: none;
   cursor: pointer;
diff --git a/packages/mdc-toolbar/package.json b/packages/mdc-toolbar/package.json
index a92a6955573..106b0f8f95e 100644
--- a/packages/mdc-toolbar/package.json
+++ b/packages/mdc-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/toolbar",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "The Material Components for the web toolbar component",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "@material/base": "^0.29.0",
     "@material/elevation": "^0.28.0",
-    "@material/ripple": "^0.31.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
diff --git a/packages/mdc-top-app-bar/README.md b/packages/mdc-top-app-bar/README.md
index f90425b997b..2b2a70e22aa 100644
--- a/packages/mdc-top-app-bar/README.md
+++ b/packages/mdc-top-app-bar/README.md
@@ -1,7 +1,6 @@
 # Top App Bar
 
-MDC Top App Bar acts as a container for items such as application title, navigation menu, and action items, among other 
-things. Top app bars scroll with content by default.
+MDC Top App Bar acts as a container for items such as application title, navigation icon, and action items. Top app bars scroll with content by default.
 
 ## Design & API Documentation
 
@@ -28,25 +27,57 @@ npm install --save @material/top-app-bar
 <header class="mdc-top-app-bar">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
+      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
       <span class="mdc-top-app-bar__title">Title</span>
     </section>
   </div>
 </header>
 ```
 
-Top app bars can accommodate multiple icons on the right:
+Top app bars can accommodate multiple action items on the opposite side of the navigation icon:
 
 ```html
 <header class="mdc-top-app-bar">
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-      <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
+      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+      <span class="mdc-top-app-bar__title">Title</span>
+    </section>
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">file_download</a>
+      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Print this page" alt="Print this page">print</a>
+      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+    </section>
+  </div>
+</header>
+```
+
+Short top app bars should only be used with one action item:
+
+```html
+<header class="mdc-top-app-bar mdc-top-app-bar--short">
+  <div class="mdc-top-app-bar__row">
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
+      <span class="mdc-top-app-bar__title">Title</span>
+    </section>
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
+      <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+    </section>
+  </div>
+</header>
+```
+
+Short top app bars can be configured to always appear collapsed by applying the `mdc-top-app-bar--short-collapsed` before instantiating the component : 
+
+```html
+<header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed">
+  <div class="mdc-top-app-bar__row">
+    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
       <span class="mdc-top-app-bar__title">Title</span>
     </section>
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="top-app-bar">
-      <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">file_download</a>
-      <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">print</a>
       <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
     </section>
   </div>
@@ -70,16 +101,19 @@ Top app bars can accommodate multiple icons on the right:
 
 Class | Description                            
 --- | ---
-`mdc-top-app-bar` | Mandatory
+`mdc-top-app-bar` | Mandatory.
+`mdc-top-app-bar--short` | Class used to style the top app bar as a short top app bar.
+`mdc-top-app-bar--short-collapsed` | Class used to indicate the short top app bar is collapsed. 
 
 ### Sass Mixins
 
 Mixin | Description
 --- | ---
-`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar
-`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons
-`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar
-`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color
+`mdc-top-app-bar-ink-color($color)` | Sets the ink color of the top app bar.
+`mdc-top-app-bar-icon-ink-color($color)` | Sets the ink color of the top app bar icons.
+`mdc-top-app-bar-fill-color($color)` | Sets the fill color of the top app bar.
+`mdc-top-app-bar-fill-color-accessible($color)` | Sets the fill color of the top app bar and automatically sets a high-contrast ink color.
+`mdc-top-app-bar-short-border-radius($border-radius)` | Sets the `border-bottom-radius` property on the action item side. Used only for the short top app bar when collapsed.
 
 ### `MDCTopAppBar`
 
@@ -95,6 +129,10 @@ Method Signature | Description
 `registerNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the native navigation icon element for a given event.
 `deregisterNavigationIconInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the native navigation icon element for a given event.
 `notifyNavigationIconClicked() => void` | Emits a custom event `MDCTopAppBar:nav` when the navigation icon is clicked. 
+`registerScrollHandler(handler) => void` | Registers a handler to be called when user scrolls. Our default implementation adds the handler as a listener to the window's `scroll` event.
+`deregisterScrollHandler(handler) => void` | Unregisters a handler to be called when user scrolls. Our default implementation removes the handler as a listener to the window's `scroll` event.
+`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled from the top of the page.
+`getTotalActionItems() => number` | Gets the number of action items in the top app bar.
 
 ### Events
 
diff --git a/packages/mdc-top-app-bar/_mixins.scss b/packages/mdc-top-app-bar/_mixins.scss
index 2c28ab47dec..2ce5949e8e4 100644
--- a/packages/mdc-top-app-bar/_mixins.scss
+++ b/packages/mdc-top-app-bar/_mixins.scss
@@ -14,9 +14,10 @@
 // limitations under the License.
 //
 
+@import "@material/animation/variables";
+@import "@material/ripple/mixins";
 @import "@material/theme/variables"; // for mdc-theme-accessible-ink-color
 @import "@material/theme/mixins";
-@import "@material/ripple/mixins";
 @import "./variables";
 
 //
@@ -37,19 +38,57 @@
 }
 
 @mixin mdc-top-app-bar-icon-ink-color($color) {
-  .mdc-top-app-bar__icon,
-  .mdc-top-app-bar__menu-icon {
+  .mdc-top-app-bar__action-item,
+  .mdc-top-app-bar__navigation-icon {
     @include mdc-theme-prop(color, $color);
     @include mdc-states($color);
   }
 }
 
+@mixin mdc-top-app-bar-short-border-radius($border-radius: $mdc-top-app-bar-short-collapsed-border-radius) {
+  @include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $mdc-top-app-bar-short-collapsed-border-radius);
+}
+
+@mixin mdc-top-app-bar-mobile-breakpoint_($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {
+  @media (max-width: $mobile-breakpoint) {
+    .mdc-top-app-bar {
+      .mdc-top-app-bar__row {
+        min-height: $mdc-top-app-bar-mobile-row-height;
+      }
+
+      .mdc-top-app-bar__section {
+        padding: $mdc-top-app-bar-mobile-section-padding;
+      }
+
+      .mdc-top-app-bar__title {
+        @include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-mobile-title-left-padding);
+      }
+    }
+
+    .mdc-top-app-bar--short {
+      transition: width 200ms $mdc-animation-standard-curve-timing-function;
+
+      .mdc-top-app-bar__row {
+        min-height: $mdc-top-app-bar-mobile-row-height;
+      }
+    }
+
+    .mdc-top-app-bar--short-collapsed {
+      transition: width 250ms $mdc-animation-standard-curve-timing-function;
+
+      .mdc-top-app-bar__section--align-end {
+        @include mdc-rtl-reflexive-box(padding, right, $mdc-top-app-bar-short-collapsed-right-icon-padding);
+      }
+    }
+  }
+}
+
 //
 // Private
 //
 
 // Applies styles to the different types of icons that can exist in top-app-bars.
-// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__menu-icon share all styles except for
+// Both .mdc-top-app-bar__icon and .mdc-top-app-bar__navigation-icon share all styles except for
 // horizontal padding.
 @mixin mdc-top-app-bar-icon_() {
   @include mdc-ripple-surface;
@@ -57,6 +96,7 @@
 
   display: flex;
   position: relative;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: $mdc-top-app-bar-icon-size;
diff --git a/packages/mdc-top-app-bar/_variables.scss b/packages/mdc-top-app-bar/_variables.scss
index 6b53bae5660..d56450955e7 100644
--- a/packages/mdc-top-app-bar/_variables.scss
+++ b/packages/mdc-top-app-bar/_variables.scss
@@ -21,10 +21,14 @@ $mdc-top-app-bar-section-horizontal-padding: 12px;
 
 $mdc-top-app-bar-icon-padding: 12px;
 
-$mdc-top-app-bar-mobile-breakpoint: 599px;
+$mdc-top-app-bar-mobile-breakpoint: 599px !default;
 
 $mdc-top-app-bar-mobile-row-height: 56px;
 $mdc-top-app-bar-mobile-title-left-padding: 12px;
 $mdc-top-app-bar-mobile-section-padding: 4px;
 
 $mdc-top-app-bar-icon-size: 24px;
+
+$mdc-top-app-bar-short-collapsed-border-radius: 10px;
+$mdc-top-app-bar-short-collapsed-width: 56px;
+$mdc-top-app-bar-short-collapsed-right-icon-padding: 12px;
diff --git a/packages/mdc-top-app-bar/adapter.js b/packages/mdc-top-app-bar/adapter.js
index b4b3c793bc2..6b63e016613 100644
--- a/packages/mdc-top-app-bar/adapter.js
+++ b/packages/mdc-top-app-bar/adapter.js
@@ -47,7 +47,6 @@ class MDCTopAppBarAdapter {
    */
   hasClass(className) {}
 
-
   /**
    * Registers an event handler on the navigation icon element for a given event.
    * @param {string} type
@@ -66,6 +65,18 @@ class MDCTopAppBarAdapter {
    * Emits an event when the navigation icon is clicked.
    */
   notifyNavigationIconClicked() {}
+
+  /** @param {function(!Event)} handler */
+  registerScrollHandler(handler) {}
+
+  /** @param {function(!Event)} handler */
+  deregisterScrollHandler(handler) {}
+
+  /** @return {number} */
+  getViewportScrollY() {}
+
+  /** @return {number} */
+  getTotalActionItems() {}
 }
 
 export default MDCTopAppBarAdapter;
diff --git a/packages/mdc-top-app-bar/constants.js b/packages/mdc-top-app-bar/constants.js
index 5df19786358..c846c3944c1 100644
--- a/packages/mdc-top-app-bar/constants.js
+++ b/packages/mdc-top-app-bar/constants.js
@@ -18,9 +18,17 @@
 /** @enum {string} */
 const strings = {
   NAVIGATION_EVENT: 'MDCTopAppBar:nav',
+  ROOT_SELECTOR: '.mdc-top-app-bar',
   TITLE_SELECTOR: '.mdc-top-app-bar__title',
-  MENU_ICON_SELECTOR: '.mdc-top-app-bar__menu-icon',
-  ACTION_ICON_SELECTOR: '.mdc-top-app-bar__icon',
+  NAVIGATION_ICON_SELECTOR: '.mdc-top-app-bar__navigation-icon',
+  ACTION_ITEM_SELECTOR: '.mdc-top-app-bar__action-item',
 };
 
-export {strings};
+/** @enum {string} */
+const cssClasses = {
+  SHORT_CLASS: 'mdc-top-app-bar--short',
+  SHORT_HAS_ACTION_ITEM_CLASS: 'mdc-top-app-bar--short-has-action-item',
+  SHORT_COLLAPSED_CLASS: 'mdc-top-app-bar--short-collapsed',
+};
+
+export {strings, cssClasses};
diff --git a/packages/mdc-top-app-bar/foundation.js b/packages/mdc-top-app-bar/foundation.js
index f75f64537b2..0d9be0ccfab 100644
--- a/packages/mdc-top-app-bar/foundation.js
+++ b/packages/mdc-top-app-bar/foundation.js
@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 
-import {strings} from './constants';
-
+import {strings, cssClasses} from './constants';
 import MDCTopAppBarAdapter from './adapter';
-
 import MDCFoundation from '@material/base/foundation';
 
 /**
@@ -31,6 +29,11 @@ class MDCTopAppBarFoundation extends MDCFoundation {
     return strings;
   }
 
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
   /**
    * {@see MDCTopAppBarAdapter} for typing information on parameters and return
    * types.
@@ -44,6 +47,10 @@ class MDCTopAppBarFoundation extends MDCFoundation {
       registerNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {},
       deregisterNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {},
       notifyNavigationIconClicked: () => {},
+      registerScrollHandler: (/* handler: EventListener */) => {},
+      deregisterScrollHandler: (/* handler: EventListener */) => {},
+      getViewportScrollY: () => /* number */ 0,
+      getTotalActionItems: () => /* number */ 0,
     });
   }
 
@@ -52,16 +59,62 @@ class MDCTopAppBarFoundation extends MDCFoundation {
    */
   constructor(adapter) {
     super(Object.assign(MDCTopAppBarFoundation.defaultAdapter, adapter));
+    // State variable for the current top app bar state
+    this.isCollapsed = false;
 
     this.navClickHandler_ = () => this.adapter_.notifyNavigationIconClicked();
+    this.scrollHandler_ = () => this.shortAppBarScrollHandler_();
   }
 
   init() {
+    const isShortTopAppBar = this.adapter_.hasClass(cssClasses.SHORT_CLASS);
+
+    if (isShortTopAppBar) {
+      this.initShortTopAppBar_();
+    }
+
     this.adapter_.registerNavigationIconInteractionHandler('click', this.navClickHandler_);
   }
 
   destroy() {
     this.adapter_.deregisterNavigationIconInteractionHandler('click', this.navClickHandler_);
+    this.adapter_.deregisterScrollHandler(this.scrollHandler_);
+  }
+
+  /**
+   * Used to set the initial style of the short top app bar
+   */
+  initShortTopAppBar_() {
+    const isAlwaysCollapsed = this.adapter_.hasClass(cssClasses.SHORT_COLLAPSED_CLASS);
+
+    if (this.adapter_.getTotalActionItems() > 0) {
+      this.adapter_.addClass(cssClasses.SHORT_HAS_ACTION_ITEM_CLASS);
+    }
+
+    if (!isAlwaysCollapsed) {
+      this.adapter_.registerScrollHandler(this.scrollHandler_);
+      this.shortAppBarScrollHandler_();
+    }
+  }
+
+  /**
+   * Scroll handler for applying/removing the collapsed modifier class
+   * on the short top app bar.
+   */
+  shortAppBarScrollHandler_() {
+    const currentScroll = this.adapter_.getViewportScrollY();
+
+    if (currentScroll <= 0) {
+      if (this.isCollapsed) {
+        this.adapter_.removeClass(cssClasses.SHORT_COLLAPSED_CLASS);
+        this.isCollapsed = false;
+      }
+    } else {
+      if (!this.isCollapsed) {
+        this.adapter_.addClass(cssClasses.SHORT_COLLAPSED_CLASS);
+        this.isCollapsed = true;
+      }
+    }
   }
 }
 
diff --git a/packages/mdc-top-app-bar/index.js b/packages/mdc-top-app-bar/index.js
index 42c3f35847a..0bd9bbdf226 100644
--- a/packages/mdc-top-app-bar/index.js
+++ b/packages/mdc-top-app-bar/index.js
@@ -20,6 +20,7 @@ import MDCTopAppBarFoundation from './foundation';
 import MDCComponent from '@material/base/component';
 import {MDCRipple} from '@material/ripple/index';
 import {strings} from './constants';
+import * as util from './util';
 
 /**
  * @extends {MDCComponent<!MDCTopAppBarFoundation>}
@@ -39,10 +40,10 @@ class MDCTopAppBar extends MDCComponent {
 
   initialize(
     rippleFactory = (el) => MDCRipple.attachTo(el)) {
-    this.navIcon_ = this.root_.querySelector(strings.MENU_ICON_SELECTOR);
+    this.navIcon_ = this.root_.querySelector(strings.NAVIGATION_ICON_SELECTOR);
 
     // Get all icons in the toolbar and instantiate the ripples
-    const icons = [].slice.call(this.root_.querySelectorAll(strings.ACTION_ICON_SELECTOR));
+    const icons = [].slice.call(this.root_.querySelectorAll(strings.ACTION_ITEM_SELECTOR));
     icons.push(this.navIcon_);
 
     this.iconRipples_ = icons.map((icon) => {
@@ -54,6 +55,7 @@ class MDCTopAppBar extends MDCComponent {
 
   destroy() {
     this.iconRipples_.forEach((iconRipple) => iconRipple.destroy());
+    super.destroy();
   }
 
   /**
@@ -86,10 +88,15 @@ class MDCTopAppBar extends MDCComponent {
         notifyNavigationIconClicked: () => {
           this.emit(strings.NAVIGATION_EVENT, {});
         },
+        registerScrollHandler: (handler) => window.addEventListener('scroll', handler, util.applyPassive()),
+        deregisterScrollHandler: (handler) => window.removeEventListener('scroll', handler),
+        getViewportScrollY: () => window.pageYOffset,
+        getTotalActionItems: () =>
+          this.root_.querySelectorAll(strings.ACTION_ITEM_SELECTOR).length,
       })
       )
     );
   }
 }
 
-export {MDCTopAppBar, MDCTopAppBarFoundation};
+export {MDCTopAppBar, MDCTopAppBarFoundation, util};
diff --git a/packages/mdc-top-app-bar/mdc-top-app-bar.scss b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
index 90a8b53d019..add28743c9c 100644
--- a/packages/mdc-top-app-bar/mdc-top-app-bar.scss
+++ b/packages/mdc-top-app-bar/mdc-top-app-bar.scss
@@ -14,6 +14,8 @@
 // limitations under the License.
 //
 
+@import "@material/elevation/mixins";
+@import "@material/animation/variables";
 @import "@material/rtl/mixins";
 @import "@material/typography/mixins";
 @import "./mixins";
@@ -42,7 +44,7 @@
 
   &__section {
     display: inline-flex;
-    flex: 1;
+    flex: 1 1 auto;
     align-items: center;
     min-width: 0;
     padding: $mdc-top-app-bar-section-vertical-padding $mdc-top-app-bar-section-horizontal-padding;
@@ -61,27 +63,72 @@
 
   &__title {
     @include mdc-typography(title);
-    @include mdc-rtl-reflexive-box(margin, left, $mdc-top-app-bar-title-left-padding);
+    @include mdc-rtl-reflexive-box(padding, left, $mdc-top-app-bar-title-left-padding);
 
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
     z-index: 1;
   }
 
-  &__icon,
-  &__menu-icon {
+  &__action-item,
+  &__navigation-icon {
     @include mdc-top-app-bar-icon_;
   }
+}
 
-  @media (max-width: $mdc-top-app-bar-mobile-breakpoint) {
-    .mdc-top-app-bar__row {
-      min-height: $mdc-top-app-bar-mobile-row-height;
-    }
+.mdc-top-app-bar--short {
+  position: fixed;
+  top: 0;
+  right: auto;
+  left: 0;
+  width: 100%;
+  transition: width 250ms $mdc-animation-standard-curve-timing-function;
+  z-index: 4;
 
-    .mdc-top-app-bar__section {
-      padding: $mdc-top-app-bar-mobile-section-padding;
-    }
+  @include mdc-rtl {
+    right: 0;
+    left: auto;
+  }
 
-    .mdc-top-app-bar__title {
-      @include mdc-rtl-reflexive-box(margin, left, $mdc-top-app-bar-mobile-title-left-padding);
-    }
+  .mdc-top-app-bar__row {
+    min-height: $mdc-top-app-bar-mobile-row-height;
+  }
+
+  .mdc-top-app-bar__section {
+    padding: $mdc-top-app-bar-mobile-section-padding;
+  }
+
+  .mdc-top-app-bar__title {
+    transition: opacity 200ms $mdc-animation-standard-curve-timing-function;
+    opacity: 1;
+  }
+}
+
+.mdc-top-app-bar--short-collapsed {
+  @include mdc-top-app-bar-short-border-radius;
+  @include mdc-elevation(4);
+
+  width: $mdc-top-app-bar-short-collapsed-width;
+  transition: width 300ms $mdc-animation-standard-curve-timing-function;
+
+  .mdc-top-app-bar__title {
+    display: none;
+  }
+
+  .mdc-top-app-bar__action-item {
+    transition: padding 150ms $mdc-animation-standard-curve-timing-function;
   }
 }
+
+// stylelint-disable-next-line plugin/selector-bem-pattern
+.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item {
+  width: $mdc-top-app-bar-short-collapsed-width * 2;
+
+  .mdc-top-app-bar__section--align-end {
+    @include mdc-rtl-reflexive-box(padding, right, 12px);
+  }
+}
+
+// Mobile Styles
+@include mdc-top-app-bar-mobile-breakpoint_;
diff --git a/packages/mdc-top-app-bar/package.json b/packages/mdc-top-app-bar/package.json
index 5d9ea017e32..7b0f9f1485f 100644
--- a/packages/mdc-top-app-bar/package.json
+++ b/packages/mdc-top-app-bar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material/top-app-bar",
-  "version": "0.0.0",
+  "version": "0.32.0",
   "description": "The Material Components for the web top app bar component",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,10 @@
     "topappbar"
   ],
   "dependencies": {
+    "@material/animation": "^0.25.0",
     "@material/base": "^0.29.0",
-    "@material/ripple": "^0.31.0",
+    "@material/elevation": "^0.28.0",
+    "@material/ripple": "^0.32.0",
     "@material/rtl": "^0.30.0",
     "@material/theme": "^0.30.0",
     "@material/typography": "^0.28.0"
diff --git a/packages/mdc-top-app-bar/util.js b/packages/mdc-top-app-bar/util.js
new file mode 100644
index 00000000000..cc845c1ce3e
--- /dev/null
+++ b/packages/mdc-top-app-bar/util.js
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+let supportsPassive_;
+
+/**
+ * Determine whether the current browser supports passive event listeners, and if so, use them.
+ * @param {!Window=} globalObj
+ * @param {boolean=} forceRefresh
+ * @return {boolean|{passive: boolean}}
+ */
+function applyPassive(globalObj = window, forceRefresh = false) {
+  if (supportsPassive_ === undefined || forceRefresh) {
+    let isSupported = false;
+    try {
+      globalObj.document.addEventListener('test', null, {get passive() {
+        isSupported = true;
+      }});
+    } catch (e) { }
+
+    supportsPassive_ = isSupported;
+  }
+
+  return supportsPassive_ ? {passive: true} : false;
+}
+
+export {applyPassive};
diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js
index 693a6c89be7..d95ea4d78b5 100644
--- a/scripts/webpack/css-bundle-factory.js
+++ b/scripts/webpack/css-bundle-factory.js
@@ -136,6 +136,7 @@ module.exports = class {
         'mdc.drawer': getAbsolutePath('/packages/mdc-drawer/mdc-drawer.scss'),
         'mdc.elevation': getAbsolutePath('/packages/mdc-elevation/mdc-elevation.scss'),
         'mdc.fab': getAbsolutePath('/packages/mdc-fab/mdc-fab.scss'),
+        'mdc.floating-label': getAbsolutePath('/packages/mdc-floating-label/mdc-floating-label.scss'),
         'mdc.form-field': getAbsolutePath('/packages/mdc-form-field/mdc-form-field.scss'),
         'mdc.grid-list': getAbsolutePath('/packages/mdc-grid-list/mdc-grid-list.scss'),
         'mdc.icon-toggle': getAbsolutePath('/packages/mdc-icon-toggle/mdc-icon-toggle.scss'),
diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js
index 262b48e039a..90d20c241d2 100644
--- a/scripts/webpack/js-bundle-factory.js
+++ b/scripts/webpack/js-bundle-factory.js
@@ -137,6 +137,7 @@ class JsBundleFactory {
         chips: getAbsolutePath('/packages/mdc-chips/index.js'),
         dialog: getAbsolutePath('/packages/mdc-dialog/index.js'),
         drawer: getAbsolutePath('/packages/mdc-drawer/index.js'),
+        floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.js'),
         formField: getAbsolutePath('/packages/mdc-form-field/index.js'),
         gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'),
         iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json
index ade6ee6f845..d4f9b980c9b 100644
--- a/test/build/goldens/build-config-no-env.golden.json
+++ b/test/build/goldens/build-config-no-env.golden.json
@@ -46,6 +46,7 @@
       "chips": "/packages/mdc-chips/index.js",
       "dialog": "/packages/mdc-dialog/index.js",
       "drawer": "/packages/mdc-drawer/index.js",
+      "floatingLabel": "/packages/mdc-floating-label/index.js",
       "formField": "/packages/mdc-form-field/index.js",
       "gridList": "/packages/mdc-grid-list/index.js",
       "iconToggle": "/packages/mdc-icon-toggle/index.js",
@@ -179,6 +180,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json
index 2a370b612d7..e26bc345b9f 100644
--- a/test/build/goldens/build-config-prod-env.golden.json
+++ b/test/build/goldens/build-config-prod-env.golden.json
@@ -46,6 +46,7 @@
       "chips": "/packages/mdc-chips/index.js",
       "dialog": "/packages/mdc-dialog/index.js",
       "drawer": "/packages/mdc-drawer/index.js",
+      "floatingLabel": "/packages/mdc-floating-label/index.js",
       "formField": "/packages/mdc-form-field/index.js",
       "gridList": "/packages/mdc-grid-list/index.js",
       "iconToggle": "/packages/mdc-icon-toggle/index.js",
@@ -179,6 +180,7 @@
       "mdc.drawer": "/packages/mdc-drawer/mdc-drawer.scss",
       "mdc.elevation": "/packages/mdc-elevation/mdc-elevation.scss",
       "mdc.fab": "/packages/mdc-fab/mdc-fab.scss",
+      "mdc.floating-label": "/packages/mdc-floating-label/mdc-floating-label.scss",
       "mdc.form-field": "/packages/mdc-form-field/mdc-form-field.scss",
       "mdc.grid-list": "/packages/mdc-grid-list/mdc-grid-list.scss",
       "mdc.icon-toggle": "/packages/mdc-icon-toggle/mdc-icon-toggle.scss",
diff --git a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
index 3bb60e73972..4b572e2813d 100644
--- a/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
+++ b/test/unit/mdc-chips/mdc-chip-set.foundation.test.js
@@ -42,10 +42,10 @@ const setupTest = () => {
   const mockAdapter = td.object(MDCChipSetFoundation.defaultAdapter);
   const foundation = new MDCChipSetFoundation(mockAdapter);
   const chipA = td.object({
-    toggleActive: () => {},
+    toggleSelected: () => {},
   });
   const chipB = td.object({
-    toggleActive: () => {},
+    toggleSelected: () => {},
   });
   return {foundation, mockAdapter, chipA, chipB};
 };
@@ -64,7 +64,7 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)));
 });
 
-test('on custom MDCChip:interaction event toggles active state with single selection on choice chips', () => {
+test('on custom MDCChip:interaction event toggles selected state with single selection on choice chips', () => {
   const {foundation, mockAdapter, chipA, chipB} = setupTest();
   let chipInteractionHandler;
   td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
@@ -73,7 +73,7 @@ test('on custom MDCChip:interaction event toggles active state with single selec
     });
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(true);
 
-  assert.equal(foundation.activeChips_.length, 0);
+  assert.equal(foundation.selectedChips_.length, 0);
   foundation.init();
 
   chipInteractionHandler({
@@ -81,28 +81,28 @@ test('on custom MDCChip:interaction event toggles active state with single selec
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleActive());
-  assert.equal(foundation.activeChips_.length, 1);
+  td.verify(chipA.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipA.toggleActive());
-  td.verify(chipB.toggleActive());
-  assert.equal(foundation.activeChips_.length, 1);
+  td.verify(chipA.toggleSelected());
+  td.verify(chipB.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleActive());
-  assert.equal(foundation.activeChips_.length, 0);
+  td.verify(chipB.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 0);
 });
 
-test('on custom MDCChip:interaction event toggles active state with multi-selection on filter chips', () => {
+test('on custom MDCChip:interaction event toggles selected state with multi-selection on filter chips', () => {
   const {foundation, mockAdapter, chipA, chipB} = setupTest();
   let chipInteractionHandler;
   td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
@@ -111,7 +111,7 @@ test('on custom MDCChip:interaction event toggles active state with multi-select
     });
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
 
-  assert.equal(foundation.activeChips_.length, 0);
+  assert.equal(foundation.selectedChips_.length, 0);
   foundation.init();
 
   chipInteractionHandler({
@@ -119,30 +119,30 @@ test('on custom MDCChip:interaction event toggles active state with multi-select
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleActive());
-  assert.equal(foundation.activeChips_.length, 1);
+  td.verify(chipA.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleActive());
-  assert.equal(foundation.activeChips_.length, 2);
+  td.verify(chipB.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 2);
 
   chipInteractionHandler({
     detail: {
       chip: chipB,
     },
   });
-  td.verify(chipB.toggleActive());
-  assert.equal(foundation.activeChips_.length, 1);
+  td.verify(chipB.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 1);
 
   chipInteractionHandler({
     detail: {
       chip: chipA,
     },
   });
-  td.verify(chipA.toggleActive());
-  assert.equal(foundation.activeChips_.length, 0);
+  td.verify(chipA.toggleSelected());
+  assert.equal(foundation.selectedChips_.length, 0);
 });
diff --git a/test/unit/mdc-chips/mdc-chip.foundation.test.js b/test/unit/mdc-chips/mdc-chip.foundation.test.js
index 22028bf9410..2accba8c18e 100644
--- a/test/unit/mdc-chips/mdc-chip.foundation.test.js
+++ b/test/unit/mdc-chips/mdc-chip.foundation.test.js
@@ -70,20 +70,20 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
 });
 
-test('#toggleActive adds mdc-chip--activated class if the class does not exist', () => {
+test('#toggleSelected adds mdc-chip--selected class if the class does not exist', () => {
   const {foundation, mockAdapter} = setupTest();
-  td.when(mockAdapter.hasClass(cssClasses.ACTIVATED)).thenReturn(false);
+  td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(false);
 
-  foundation.toggleActive();
-  td.verify(mockAdapter.addClass(cssClasses.ACTIVATED));
+  foundation.toggleSelected();
+  td.verify(mockAdapter.addClass(cssClasses.SELECTED));
 });
 
-test('#toggleActive removes mdc-chip--activated class if the class exists', () => {
+test('#toggleSelected removes mdc-chip--selected class if the class exists', () => {
   const {foundation, mockAdapter} = setupTest();
-  td.when(mockAdapter.hasClass(cssClasses.ACTIVATED)).thenReturn(true);
+  td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(true);
 
-  foundation.toggleActive();
-  td.verify(mockAdapter.removeClass(cssClasses.ACTIVATED));
+  foundation.toggleSelected();
+  td.verify(mockAdapter.removeClass(cssClasses.SELECTED));
 });
 
 test('on click, emit custom event', () => {
diff --git a/test/unit/mdc-chips/mdc-chip.test.js b/test/unit/mdc-chips/mdc-chip.test.js
index 24e1d34eb3c..dd488e5d6d7 100644
--- a/test/unit/mdc-chips/mdc-chip.test.js
+++ b/test/unit/mdc-chips/mdc-chip.test.js
@@ -138,8 +138,8 @@ function setupMockFoundationTest(root = getFixture()) {
   return {root, component, mockFoundation};
 }
 
-test('#toggleActive proxies to foundation', () => {
+test('#toggleSelected proxies to foundation', () => {
   const {component, mockFoundation} = setupMockFoundationTest();
-  component.toggleActive();
-  td.verify(mockFoundation.toggleActive());
+  component.toggleSelected();
+  td.verify(mockFoundation.toggleSelected());
 });
diff --git a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
similarity index 53%
rename from test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
index caca9d96ad9..361966c5f40 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label-foundation.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label-foundation.test.js
@@ -19,23 +19,36 @@ import td from 'testdouble';
 
 import {verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
-import MDCTextFieldLabelFoundation from '../../../packages/mdc-textfield/label/foundation';
+import MDCFloatingLabelFoundation from '../../../packages/mdc-floating-label/foundation';
 
-const {cssClasses} = MDCTextFieldLabelFoundation;
+const {cssClasses} = MDCFloatingLabelFoundation;
 
-suite('MDCTextFieldLabelFoundation');
+const setupTest = () => setupFoundationTest(MDCFloatingLabelFoundation);
+
+suite('MDCFloatingLabelFoundation');
 
 test('exports cssClasses', () => {
-  assert.isOk('cssClasses' in MDCTextFieldLabelFoundation);
+  assert.deepEqual(MDCFloatingLabelFoundation.cssClasses, cssClasses);
 });
 
 test('defaultAdapter returns a complete adapter implementation', () => {
-  verifyDefaultAdapter(MDCTextFieldLabelFoundation, [
+  verifyDefaultAdapter(MDCFloatingLabelFoundation, [
     'addClass', 'removeClass', 'getWidth',
+    'registerInteractionHandler', 'deregisterInteractionHandler',
   ]);
 });
 
-const setupTest = () => setupFoundationTest(MDCTextFieldLabelFoundation);
+test('#init should register animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.init();
+  td.verify(mockAdapter.registerInteractionHandler('animationend', td.matchers.isA(Function)));
+});
+
+test('#destroy should deregister animationend event listener', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.destroy();
+  td.verify(mockAdapter.deregisterInteractionHandler('animationend', td.matchers.isA(Function)));
+});
 
 test('#getWidth returns the width of the label element scaled by 75%', () => {
   const {foundation, mockAdapter} = setupTest();
@@ -44,46 +57,38 @@ test('#getWidth returns the width of the label element scaled by 75%', () => {
   assert.equal(foundation.getWidth(), width);
 });
 
-test('#styleFloat with non-empty value floats the label', () => {
+test('#float called with shouldFloat is true, floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('new value', /* isFocused */ true, /* isBadInput */ false);
+  foundation.float(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleFloat with empty value de-floats the label', () => {
+test('#float called with shouldFloat is false, de-floats the label', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused */ false, /* isBadInput */ false);
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE));
 });
 
-test('#styleShake with valid and invalid input', () => {
+test('#shake called with shouldShake is true, should add shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
+  foundation.shake(true);
   td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#styleFloat with empty value and badInput does not touch floating label', () => {
+test('#shake called with shouldShake is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.styleFloat('', /* isFocused*/ false, /* isBadInput */ true);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
+  foundation.shake(false);
+  td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
 
-test('#styleShake updates shake class', () => {
+test('#float called with shouldFloat is false, should remove shake class', () => {
   const {foundation, mockAdapter} = setupTest();
-
-  foundation.styleShake(/* isValid */ false, /* isFocused */ false);
-  td.verify(mockAdapter.addClass(cssClasses.LABEL_SHAKE));
-
-  foundation.styleShake(/* isValid */ true, /* isFocused */ false);
+  foundation.float(false);
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
+});
 
-  foundation.styleShake(/* isValid */ false, /* isFocused */ true);
+test('#handleShakeAnimationEnd_ should remove LABEL_SHAKE class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.handleShakeAnimationEnd_();
   td.verify(mockAdapter.removeClass(cssClasses.LABEL_SHAKE));
 });
diff --git a/test/unit/mdc-textfield/mdc-text-field-label.test.js b/test/unit/mdc-floating-label/mdc-floating-label.test.js
similarity index 81%
rename from test/unit/mdc-textfield/mdc-text-field-label.test.js
rename to test/unit/mdc-floating-label/mdc-floating-label.test.js
index 6ea3624e6a4..4103210e79f 100644
--- a/test/unit/mdc-textfield/mdc-text-field-label.test.js
+++ b/test/unit/mdc-floating-label/mdc-floating-label.test.js
@@ -17,21 +17,21 @@
 import bel from 'bel';
 import {assert} from 'chai';
 
-import {MDCTextFieldLabel} from '../../../packages/mdc-textfield/label';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label/index';
 
 const getFixture = () => bel`
-  <div class="mdc-text-field__label"></div>
+  <div class="mdc-floating-label"></div>
 `;
 
-suite('MDCTextFieldLabel');
+suite('MDCFloatingLabel');
 
-test('attachTo returns an MDCTextFieldLabel instance', () => {
-  assert.isOk(MDCTextFieldLabel.attachTo(getFixture()) instanceof MDCTextFieldLabel);
+test('attachTo returns an MDCFloatingLabel instance', () => {
+  assert.isOk(MDCFloatingLabel.attachTo(getFixture()) instanceof MDCFloatingLabel);
 });
 
 function setupTest() {
   const root = getFixture();
-  const component = new MDCTextFieldLabel(root);
+  const component = new MDCFloatingLabel(root);
   return {root, component};
 }
 
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 33cee653ced..6604d9ebaf4 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -42,7 +42,8 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'getNativeInput', 'isFocused', 'isRtl', 'activateLineRipple', 'deactivateLineRipple',
-    'setLineRippleTransformOrigin',
+    'setLineRippleTransformOrigin', 'shakeLabel', 'floatLabel', 'hasLabel', 'getLabelWidth',
+    'registerValidationAttributeChangeHandler', 'deregisterValidationAttributeChangeHandler',
   ]);
 });
 
@@ -59,25 +60,16 @@ const setupTest = () => {
     deregisterInteractionHandler: () => {},
     handleInteraction: () => {},
   });
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    styleShake: () => {},
-    styleFloat: () => {},
-  });
   const outline = td.object({
     updateSvgPath: () => {},
   });
   const foundationMap = {
     helperText: helperText,
     icon: icon,
-    label: label,
     outline: outline,
   };
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, helperText, icon, label, outline};
+  return {foundation, mockAdapter, helperText, icon, outline};
 };
 
 test('#constructor sets disabled to false', () => {
@@ -85,8 +77,8 @@ test('#constructor sets disabled to false', () => {
   assert.isNotOk(foundation.isDisabled());
 });
 
-const setupValueTest = (value, optIsValid, optIsBadInput) => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+const setupValueTest = (value, optIsValid, optIsBadInput, hasLabel) => {
+  const {foundation, mockAdapter, helperText} = setupTest();
   const nativeInput = {
     value: value,
     validity: {
@@ -94,10 +86,13 @@ const setupValueTest = (value, optIsValid, optIsBadInput) => {
       badInput: optIsBadInput === undefined ? false : !!optIsBadInput,
     },
   };
+  if (hasLabel) {
+    td.when(mockAdapter.hasLabel()).thenReturn(true);
+  }
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, helperText, label, nativeInput};
+  return {foundation, mockAdapter, helperText, nativeInput};
 };
 
 test('#getValue returns the field\'s value', () => {
@@ -111,41 +106,41 @@ test('#getValue returns the field\'s value', () => {
 
 test('#setValue with non-empty value styles the label', () => {
   const value = 'new value';
-  const {foundation, nativeInput, label} = setupValueTest('');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('', undefined, undefined, true);
   // Initial empty value should not float label.
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(false), {times: 0});
   nativeInput.value = value;
   foundation.setValue(value);
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(value, /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue with empty value styles the label', () => {
-  const {foundation, nativeInput, label} = setupValueTest('old value');
+  const {foundation, nativeInput, mockAdapter} = setupValueTest('old value', undefined, undefined, true);
   // Initial value should float the label.
-  td.verify(label.styleFloat('old value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(true));
   nativeInput.value = '';
   foundation.setValue('');
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
 });
 
 test('#setValue valid and invalid input', () => {
-  const {foundation, mockAdapter, nativeInput, helperText, label} =
-    setupValueTest('', /* isValid */ false);
+  const {foundation, mockAdapter, nativeInput, helperText} =
+    setupValueTest('', /* isValid */ false, undefined, true);
 
   foundation.setValue('invalid');
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
-  td.verify(label.styleFloat('invalid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(true));
+  td.verify(mockAdapter.floatLabel(true));
 
   nativeInput.validity.valid = true;
   foundation.setValue('valid');
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('valid', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
 });
 
 test('#setValue does not affect focused state', () => {
@@ -183,17 +178,18 @@ test('#setValid overrides native validation', () => {
 });
 
 test('#setValid updates classes', () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
 
   foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
-  td.verify(label.styleShake(/* isValid */ false, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(true));
 
   foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
+  td.verify(mockAdapter.shakeLabel(false));
 
   // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
@@ -202,23 +198,19 @@ test('#setValid updates classes', () => {
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
 });
 
-test('#setRequired updates CSS classes', () => {
-  // Native validity checking does not apply in unittests, so manually mark as valid or invalid.
-  const {foundation, mockAdapter, nativeInput, helperText} =
-    setupValueTest('', /* isValid */ false);
+test('#setValid updates classes, but not label methods when hasLabel is false', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
 
-  foundation.setRequired(true);
-  assert.isOk(foundation.isRequired());
+  foundation.setValid(false);
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 
-  nativeInput.validity.valid = true;
-  foundation.setRequired(false);
-  assert.isNotOk(foundation.isRequired());
+  foundation.setValid(true);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 
-  // None of these is affected by setRequired.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
@@ -320,10 +312,12 @@ test('#init adds event listeners', () => {
   td.verify(mockAdapter.registerInputInteractionHandler('touchstart', td.matchers.isA(Function)));
   td.verify(mockAdapter.registerTextFieldInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.registerTextFieldInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)));
 });
 
 test('#destroy removes event listeners', () => {
   const {foundation, mockAdapter} = setupTest();
+  foundation.validationObserver_ = {};
   foundation.destroy();
 
   td.verify(mockAdapter.deregisterInputInteractionHandler('focus', td.matchers.isA(Function)));
@@ -333,10 +327,25 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterInputInteractionHandler('touchstart', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterValidationAttributeChangeHandler(foundation.validationObserver_));
 });
 
 test('#init floats label if the input contains a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.getNativeInput()).thenReturn({
+    value: 'Pre-filled value',
+    disabled: false,
+    validity: {
+      badInput: false,
+    },
+  });
+  foundation.init();
+  td.verify(mockAdapter.floatLabel(true));
+});
+
+test('#init doesnot call floatLabel if there is no label and the input contains a value', () => {
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: 'Pre-filled value',
     disabled: false,
@@ -345,11 +354,11 @@ test('#init floats label if the input contains a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat('Pre-filled value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('#init does not float label if the input does not contain a value', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.getNativeInput()).thenReturn({
     value: '',
     disabled: false,
@@ -358,7 +367,7 @@ test('#init does not float label if the input does not contain a value', () => {
     },
   });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
 });
 
 test('#setHelperTextContent sets the content of the helper text element', () => {
@@ -368,8 +377,9 @@ test('#setHelperTextContent sets the content of the helper text element', () =>
 });
 
 test('#updateOutline updates the SVG path of the outline element', () => {
-  const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getWidth()).thenReturn(30);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(false);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -378,8 +388,9 @@ test('#updateOutline updates the SVG path of the outline element', () => {
 });
 
 test('#updateOutline updates the SVG path of the outline element when dense', () => {
-  const {foundation, mockAdapter, label, outline} = setupTest();
-  td.when(label.getWidth()).thenReturn(30);
+  const {foundation, mockAdapter, outline} = setupTest();
+  td.when(mockAdapter.getLabelWidth()).thenReturn(30);
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.DENSE)).thenReturn(true);
   td.when(mockAdapter.isRtl()).thenReturn(false);
 
@@ -389,18 +400,9 @@ test('#updateOutline updates the SVG path of the outline element when dense', ()
 
 const setupBareBonesTest = () => {
   const mockAdapter = td.object(MDCTextFieldFoundation.defaultAdapter);
-  const label = td.object({
-    getWidth: () => {},
-    floatAbove: () => {},
-    deactivateFocus: () => {},
-    setValidity: () => {},
-    style: () => {},
-  });
-  const foundationMap = {
-    label: label,
-  };
+  const foundationMap = {};
   const foundation = new MDCTextFieldFoundation(mockAdapter, foundationMap);
-  return {foundation, mockAdapter, label};
+  return {foundation, mockAdapter};
 };
 
 test('#updateOutline does nothing if no outline is present', () => {
@@ -411,22 +413,31 @@ test('#updateOutline does nothing if no outline is present', () => {
 });
 
 test('on input styles label if input event occurs without any other events', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let input;
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => input = handler);
+  foundation.init();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  input();
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
+});
 
+test('on input doesnot styles label if input event occurs without any other events but hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let input;
   td.when(mockAdapter.registerInputInteractionHandler('input', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      input = handler;
-    });
+    .thenDo((evtType, handler) => input = handler);
   foundation.init();
-  td.verify(label.styleFloat(), {times: 0});
   input();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ true, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on input does nothing if input event preceded by keydown event', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   const mockEvt = {
     type: 'keydown',
     key: 'Enter',
@@ -449,8 +460,8 @@ test('on input does nothing if input event preceded by keydown event', () => {
   foundation.init();
   keydown(mockEvt);
   input();
-  td.verify(label.styleShake(), {times: 0});
-  td.verify(label.styleFloat(), {times: 0});
+  td.verify(mockAdapter.shakeLabel(), {times: 0});
+  td.verify(mockAdapter.floatLabel(), {times: 0});
 });
 
 test('on focus adds mdc-text-field--focused class', () => {
@@ -478,16 +489,30 @@ test('on focus activates line ripple', () => {
 });
 
 test('on focus styles label', () => {
-  const {foundation, mockAdapter, label} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let focus;
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
   td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
     .thenDo((evtType, handler) => {
       focus = handler;
     });
   foundation.init();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   focus();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ true));
+  td.verify(mockAdapter.shakeLabel(false));
+});
+
+test('on focus do not styles label if hasLabel is false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let focus;
+  td.when(mockAdapter.registerInputInteractionHandler('focus', td.matchers.isA(Function)))
+    .thenDo((evtType, handler) => {
+      focus = handler;
+    });
+  foundation.init();
+  focus();
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on focus makes helper text visible to the screen reader', () => {
@@ -503,7 +528,7 @@ test('on focus makes helper text visible to the screen reader', () => {
 });
 
 const setupBlurTest = () => {
-  const {foundation, mockAdapter, helperText, label} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
   let blur;
   td.when(mockAdapter.registerInputInteractionHandler('blur', td.matchers.isA(Function))).thenDo((evtType, handler) => {
     blur = handler;
@@ -518,7 +543,7 @@ const setupBlurTest = () => {
   td.when(mockAdapter.getNativeInput()).thenReturn(nativeInput);
   foundation.init();
 
-  return {foundation, mockAdapter, blur, nativeInput, helperText, label};
+  return {foundation, mockAdapter, blur, nativeInput, helperText};
 };
 
 test('on blur removes mdc-text-field--focused class', () => {
@@ -528,20 +553,39 @@ test('on blur removes mdc-text-field--focused class', () => {
 });
 
 test('on blur styles label when no input value present and validity checks pass', () => {
-  const {blur, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
+  blur();
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(false));
+});
+
+test('does not style label on blur when no input value present and validity checks pass and hasLabel is false', () => {
+  const {blur, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur styles label if input has a value', () => {
-  const {blur, nativeInput, label} = setupBlurTest();
-  td.verify(label.styleFloat(/* value */ '', /* isFocused */ false), {times: 0});
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.when(mockAdapter.hasLabel()).thenReturn(true);
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
   nativeInput.value = 'non-empty value';
   blur();
-  td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
-  td.verify(label.styleFloat('non-empty value', /* isFocused */ false, /* isBadInput */ false));
+  td.verify(mockAdapter.shakeLabel(false));
+  td.verify(mockAdapter.floatLabel(true));
+});
+
+test('does not style label on blur if input has a value and hasLabel is false', () => {
+  const {blur, nativeInput, mockAdapter} = setupBlurTest();
+  td.verify(mockAdapter.floatLabel(/* value */ '', /* isFocused */ false), {times: 0});
+  nativeInput.value = 'non-empty value';
+  blur();
+  td.verify(mockAdapter.shakeLabel(td.matchers.anything()), {times: 0});
+  td.verify(mockAdapter.floatLabel(td.matchers.anything()), {times: 0});
 });
 
 test('on blur removes mdc-text-field--invalid if custom validity is false and' +
@@ -666,12 +710,44 @@ test('touchstart on the input sets the line ripple origin', () => {
   let clickHandler;
 
   td.when(mockAdapter.registerInputInteractionHandler('touchstart', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      clickHandler = handler;
-    });
+    .thenDo((evtType, handler) => clickHandler = handler);
 
   foundation.init();
   clickHandler(mockEvt);
 
   td.verify(mockAdapter.setLineRippleTransformOrigin(td.matchers.anything()));
 });
+
+test('on validation attribute change calls styleValidity_', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+  let attributeChange;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => attributeChange = handler);
+  foundation.init();
+
+  attributeChange([{attributeName: 'required'}]);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
+
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
+
+test('should not call styleValidity_ on non-whitelisted attribute change', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+  let attributeChange;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => attributeChange = handler);
+  foundation.init();
+
+  attributeChange([{attributeName: 'form'}]);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
+  td.verify(helperText.setValidity(td.matchers.isA(Boolean)), {times: 0});
+
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index c19fb5e5102..d32ac8dd6f6 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -21,8 +21,9 @@ import {assert} from 'chai';
 
 import {MDCRipple} from '../../../packages/mdc-ripple';
 import {MDCLineRipple} from '../../../packages/mdc-line-ripple';
+import {MDCFloatingLabel} from '../../../packages/mdc-floating-label';
 import {MDCTextField, MDCTextFieldFoundation, MDCTextFieldHelperText,
-  MDCTextFieldIcon, MDCTextFieldLabel, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
+  MDCTextFieldIcon, MDCTextFieldOutline} from '../../../packages/mdc-textfield';
 
 const {cssClasses} = MDCTextFieldFoundation;
 
@@ -30,7 +31,7 @@ const getFixture = () => bel`
   <div class="mdc-text-field">
     <i class="material-icons mdc-text-field__icon" tabindex="0">event</i>
     <input type="text" class="mdc-text-field__input" id="my-text-field">
-    <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+    <label class="mdc-floating-label" for="my-text-field">My Label</label>
     <div class="mdc-line-ripple"></div>
   </div>
 `;
@@ -75,6 +76,7 @@ class FakeIcon {
 class FakeLabel {
   constructor() {
     this.destroy = td.func('.destroy');
+    this.shake = td.func('.shake');
   }
 }
 
@@ -97,7 +99,7 @@ test('#constructor when given a `mdc-text-field--outlined` element instantiates
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -126,7 +128,7 @@ test('#constructor when given a `mdc-text-field--outlined` element, initializes
   const root = bel`
     <div class="mdc-text-field mdc-text-field--outlined">
       <input type="text" class="mdc-text-field__input" id="my-text-field">
-      <label class="mdc-text-field__label" for="my-text-field">My Label</label>
+      <label class="mdc-floating-label" for="my-text-field">My Label</label>
       <div class="mdc-text-field__outline"></div>
       <div class="mdc-text-field__idle-outline"></div>
     </div>
@@ -160,10 +162,10 @@ test('#constructor instantiates an icon on the `.mdc-text-field__icon` element i
   assert.instanceOf(component.icon_, MDCTextFieldIcon);
 });
 
-test('#constructor instantiates a label on the `.mdc-text-field__label` element if present', () => {
+test('#constructor instantiates a label on the `.mdc-floating-label` element if present', () => {
   const root = getFixture();
   const component = new MDCTextField(root);
-  assert.instanceOf(component.label_, MDCTextFieldLabel);
+  assert.instanceOf(component.label_, MDCFloatingLabel);
 });
 
 test('#constructor instantiates an outline on the `.mdc-text-field__outline` element if present', () => {
@@ -352,6 +354,26 @@ test('#adapter.deregisterTextFieldInteractionHandler removes an event handler fo
   td.verify(handler(td.matchers.anything()));
 });
 
+test('#adapter.registerValidationAttributeChangeHandler creates a working mutation observer', (done) => {
+  const {root, component} = setupTest();
+  const handler = td.func('ValidationAttributeChangeHandler');
+  td.when(handler(td.matchers.anything(), td.matchers.anything())).thenDo(() => {
+    done();
+  });
+
+  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
+  root.querySelector('.mdc-text-field__input').required = true;
+});
+
+test('#adapter.deregisterValidationAttributeChangeHandler disconnects the passed observer', () => {
+  const {component} = setupTest();
+  const disconnect = td.func('ValidationDisconnect');
+  const observer = {disconnect};
+
+  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler(observer);
+  td.verify(disconnect());
+});
+
 test('#adapter.getNativeInput returns the component input element', () => {
   const {root, component} = setupTest();
   assert.equal(
@@ -417,9 +439,59 @@ test('get/set valid', () => {
 });
 
 test('get/set required', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.required;
-  td.verify(mockFoundation.isRequired());
+  const {component} = setupMockFoundationTest();
   component.required = true;
-  td.verify(mockFoundation.setRequired(true));
+  assert.isTrue(component.required);
+  component.required = false;
+  assert.isFalse(component.required);
+});
+
+test('get/set pattern', () => {
+  const {component} = setupMockFoundationTest();
+  component.pattern = '.{8,}';
+  assert.equal(component.pattern, '.{8,}');
+  component.pattern = '.*';
+  assert.equal(component.pattern, '.*');
+});
+
+test('get/set minLength', () => {
+  const {component} = setupMockFoundationTest();
+  component.minLength = 8;
+  assert.equal(component.minLength, 8);
+  component.minLength = 0;
+  assert.equal(component.minLength, 0);
+});
+
+test('get/set maxLength', () => {
+  const {component} = setupMockFoundationTest();
+  component.maxLength = 10;
+  assert.equal(component.maxLength, 10);
+  component.maxLength = -1;
+  // IE11 has a different value for no maxLength property
+  assert.notEqual(component.maxLength, 10);
+});
+
+test('get/set min', () => {
+  const {component} = setupMockFoundationTest();
+  component.min = '8';
+  assert.equal(component.min, '8');
+  component.min = '0';
+  assert.equal(component.min, '0');
+});
+
+test('get/set max', () => {
+  const {component} = setupMockFoundationTest();
+  assert.equal(component.max, '');
+  component.max = '10';
+  assert.equal(component.max, '10');
+  component.max = '';
+  assert.equal(component.max, '');
+});
+
+test('get/set step', () => {
+  const {component} = setupMockFoundationTest();
+  component.step = '8';
+  assert.equal(component.step, '8');
+  component.step = '10';
+  assert.equal(component.step, '10');
 });
diff --git a/test/unit/mdc-top-app-bar/foundation.test.js b/test/unit/mdc-top-app-bar/foundation.test.js
index c12a689e660..f6c5d8ee1d5 100644
--- a/test/unit/mdc-top-app-bar/foundation.test.js
+++ b/test/unit/mdc-top-app-bar/foundation.test.js
@@ -20,7 +20,8 @@ import {captureHandlers} from '../helpers/foundation';
 
 import {verifyDefaultAdapter} from '../helpers/foundation';
 import MDCTopAppBarFoundation from '../../../packages/mdc-top-app-bar/foundation';
-import {strings} from '../../../packages/mdc-top-app-bar/constants';
+import {strings, cssClasses} from '../../../packages/mdc-top-app-bar/constants';
+import {createMockRaf} from '../helpers/raf';
 
 suite('MDCTopAppBarFoundation');
 
@@ -29,10 +30,16 @@ test('exports strings', () => {
   assert.deepEqual(MDCTopAppBarFoundation.strings, strings);
 });
 
+test('exports cssClasses', () => {
+  assert.isTrue('cssClasses' in MDCTopAppBarFoundation);
+  assert.deepEqual(MDCTopAppBarFoundation.cssClasses, cssClasses);
+});
+
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTopAppBarFoundation, [
     'hasClass', 'addClass', 'removeClass', 'registerNavigationIconInteractionHandler',
-    'deregisterNavigationIconInteractionHandler', 'notifyNavigationIconClicked',
+    'deregisterNavigationIconInteractionHandler', 'notifyNavigationIconClicked', 'registerScrollHandler',
+    'deregisterScrollHandler', 'getViewportScrollY', 'getTotalActionItems',
   ]);
 });
 
@@ -44,7 +51,19 @@ const setupTest = () => {
   return {foundation, mockAdapter};
 };
 
-test('on click emits navigation icon event', () => {
+const createMockHandlers = (foundation, mockAdapter, mockRaf) => {
+  let scrollHandler;
+  td.when(mockAdapter.registerScrollHandler(td.matchers.isA(Function))).thenDo((fn) => {
+    scrollHandler = fn;
+  });
+
+  foundation.init();
+  mockRaf.flush();
+  td.reset();
+  return {scrollHandler};
+};
+
+test('click on navigation icon emits a navigation event', () => {
   const {foundation, mockAdapter} = setupTest();
   const handlers = captureHandlers(mockAdapter, 'registerNavigationIconInteractionHandler');
   foundation.init();
@@ -58,3 +77,82 @@ test('click handler removed from navigation icon during destroy', () => {
   foundation.destroy();
   td.verify(mockAdapter.deregisterNavigationIconInteractionHandler('click', td.matchers.isA(Function)));
 });
+
+test('short top app bar: scroll listener is registered on init', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  foundation.init();
+  td.verify(mockAdapter.registerScrollHandler(td.matchers.isA(Function)), {times: 1});
+});
+
+test('short top app bar: scroll listener is removed on destroy', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  foundation.init();
+  foundation.destroy();
+  td.verify(mockAdapter.deregisterScrollHandler(td.matchers.isA(Function)), {times: 1});
+});
+
+test('short top app bar: scroll listener is not registered if collapsed class exists before init', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)).thenReturn(true);
+  td.when(mockAdapter.getTotalActionItems()).thenReturn(0);
+  foundation.init();
+  td.verify(mockAdapter.registerScrollHandler(td.matchers.anything()), {times: 0});
+});
+
+test('short top app bar: class is added once when page is scrolled from the top', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const mockRaf = createMockRaf();
+
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)).thenReturn(false);
+  td.when(mockAdapter.getTotalActionItems()).thenReturn(0);
+  td.when(mockAdapter.getViewportScrollY()).thenReturn(0);
+
+  const {scrollHandler} = createMockHandlers(foundation, mockAdapter, mockRaf);
+  td.when(mockAdapter.getViewportScrollY()).thenReturn(1);
+
+  scrollHandler();
+  scrollHandler();
+
+  td.verify(mockAdapter.addClass(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS), {times: 1});
+});
+
+test('short top app bar: class is removed once when page is scrolled to the top', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const mockRaf = createMockRaf();
+
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS)).thenReturn(false);
+  td.when(mockAdapter.getTotalActionItems()).thenReturn(0);
+
+  const {scrollHandler} = createMockHandlers(foundation, mockAdapter, mockRaf);
+  // Apply the collapsed class
+  td.when(mockAdapter.getViewportScrollY()).thenReturn(1);
+  scrollHandler();
+
+  // Test removing it
+  td.when(mockAdapter.getViewportScrollY()).thenReturn(0);
+  scrollHandler();
+  scrollHandler();
+
+  td.verify(mockAdapter.removeClass(MDCTopAppBarFoundation.cssClasses.SHORT_COLLAPSED_CLASS), {times: 1});
+});
+
+test('short top app bar: class is added if it has an action item', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  td.when(mockAdapter.getTotalActionItems()).thenReturn(1);
+  foundation.init();
+  td.verify(mockAdapter.addClass(MDCTopAppBarFoundation.cssClasses.SHORT_HAS_ACTION_ITEM_CLASS), {times: 1});
+});
+
+test('short top app bar: class is not added if it does not have an action item', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(MDCTopAppBarFoundation.cssClasses.SHORT_CLASS)).thenReturn(true);
+  td.when(mockAdapter.getTotalActionItems()).thenReturn(0);
+  foundation.init();
+  td.verify(mockAdapter.addClass(MDCTopAppBarFoundation.cssClasses.SHORT_HAS_ACTION_ITEM_CLASS), {times: 0});
+});
diff --git a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js
index 7627ed846bc..82a04eca560 100644
--- a/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js
+++ b/test/unit/mdc-top-app-bar/mdc-top-app-bar.test.js
@@ -20,6 +20,7 @@ import domEvents from 'dom-events';
 import td from 'testdouble';
 
 import {MDCTopAppBar} from '../../../packages/mdc-top-app-bar';
+import {strings} from '../../../packages/mdc-top-app-bar/constants';
 
 function getFixture(removeIcon) {
   const html = bel`
@@ -27,16 +28,17 @@ function getFixture(removeIcon) {
         <header class="mdc-top-app-bar">
       <div class="mdc-top-app-bar__row">
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-          <a href="#" class="material-icons mdc-top-app-bar__menu-icon">menu</a>
+          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
           <span class="mdc-top-app-bar__title">Title</span>
         </section>
         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" 
         role="top-app-bar">
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Download" alt="Download">
+          <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download">
           file_download</a>
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Print this page" alt="Print this page">
+          <a href="#" class="material-icons mdc-top-app-bar__action-item" 
+             aria-label="Print this page" alt="Print this page">
           print</a>
-          <a href="#" class="material-icons mdc-top-app-bar__icon" aria-label="Bookmark this page" 
+          <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Bookmark this page" 
           alt="Bookmark this page">bookmark</a>
           <div class="mdc-menu-anchor">
             <div class="mdc-menu" tabindex="-1" id="demo-menu">
@@ -53,7 +55,7 @@ function getFixture(removeIcon) {
   `;
 
   if (removeIcon) {
-    const icon = html.querySelector('.mdc-top-app-bar__menu-icon');
+    const icon = html.querySelector(strings.NAVIGATION_ICON_SELECTOR);
     icon.parentNode.removeChild(icon);
   }
 
@@ -70,12 +72,11 @@ class FakeRipple {
 
 function setupTest(removeIcon = false) {
   const fixture = getFixture(removeIcon);
-  const root = fixture.querySelector('.mdc-top-app-bar');
-  const adjust = fixture.querySelector('.mdc-top-app-bar-fixed-adjust');
-  const icon = root.querySelector('.mdc-top-app-bar__menu-icon');
+  const root = fixture.querySelector(strings.ROOT_SELECTOR);
+  const icon = root.querySelector(strings.NAVIGATION_ICON_SELECTOR);
   const component = new MDCTopAppBar(root, undefined, (el) => new FakeRipple(el));
 
-  return {root, adjust, component, icon};
+  return {root, component, icon};
 }
 
 suite('MDCTopAppBar');
@@ -86,7 +87,8 @@ test('attachTo initializes and returns an MDCTopAppBar instance', () => {
 
 test('constructor instantiates icon ripples', () => {
   const {root, component} = setupTest();
-  const totalIcons = root.querySelectorAll('.mdc-top-app-bar__icon, .mdc-top-app-bar__menu-icon').length;
+  const selector = strings.ACTION_ITEM_SELECTOR + ',' + strings.NAVIGATION_ICON_SELECTOR;
+  const totalIcons = root.querySelectorAll(selector).length;
 
   assert.isTrue(component.iconRipples_.length === totalIcons);
 });
@@ -123,7 +125,7 @@ test('adapter#removeClass removes a class from the root element', () => {
   assert.isFalse(root.classList.contains('foo'));
 });
 
-test('registerNavigationIconInteractionHandler does not add a handler to the nav icon ', () => {
+test('registerNavigationIconInteractionHandler does not add a handler to the nav icon if the nav icon is null', () => {
   const {component} = setupTest(true);
   const handler = td.func('eventHandler');
 
@@ -140,6 +142,14 @@ test('#adapter.registerNavigationIconInteractionHandler adds a handler to the na
   td.verify(handler(td.matchers.anything()));
 });
 
+test('#adapter.deregisterScrollHandler does not remove a handler from the nav icon if the nav icon is null ', () => {
+  const {component} = setupTest(true);
+  const handler = td.func('eventHandler');
+
+  assert.doesNotThrow(
+    () => component.getDefaultFoundation().adapter_.deregisterNavigationIconInteractionHandler('click', handler));
+});
+
 test('#adapter.deregisterNavigationIconInteractionHandler removes a handler from the nav icon ' +
   'element for a given event', () => {
   const {component, icon} = setupTest();
@@ -150,3 +160,45 @@ test('#adapter.deregisterNavigationIconInteractionHandler removes a handler from
   domEvents.emit(icon, 'click');
   td.verify(handler(td.matchers.anything()), {times: 0});
 });
+
+test('#adapter.registerScrollHandler adds a scroll handler to the window ' +
+  'element for a given event', () => {
+  const {component} = setupTest();
+  const handler = td.func('scrollHandler');
+  component.getDefaultFoundation().adapter_.registerScrollHandler(handler);
+
+  domEvents.emit(window, 'scroll');
+  try {
+    td.verify(handler(td.matchers.anything()));
+  } finally {
+    // Just to be safe
+    window.removeEventListener('scroll', handler);
+  }
+});
+
+test('#adapter.deregisterScrollHandler removes a scroll handler from the window ' +
+  'element for a given event', () => {
+  const {component} = setupTest();
+  const handler = td.func('scrollHandler');
+  window.addEventListener('scroll', handler);
+  component.getDefaultFoundation().adapter_.deregisterScrollHandler(handler);
+  domEvents.emit(window, 'scroll');
+  try {
+    td.verify(handler(td.matchers.anything()), {times: 0});
+  } finally {
+    // Just to be safe
+    window.removeEventListener('scroll', handler);
+  }
+});
+
+test('adapter#getViewportScrollY returns scroll distance', () => {
+  const {component} = setupTest();
+  assert.equal(component.getDefaultFoundation().adapter_.getViewportScrollY(), window.pageYOffset);
+});
+
+test('adapter#getTotalActionItems returns the number of action items on the opposite side of the menu', () => {
+  const {root, component} = setupTest();
+  const adapterReturn = component.getDefaultFoundation().adapter_.getTotalActionItems();
+  const actual = root.querySelectorAll(strings.ACTION_ITEM_SELECTOR).length;
+  assert.isTrue(adapterReturn === actual);
+});
diff --git a/test/unit/mdc-top-app-bar/util.test.js b/test/unit/mdc-top-app-bar/util.test.js
new file mode 100644
index 00000000000..585f36460d9
--- /dev/null
+++ b/test/unit/mdc-top-app-bar/util.test.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {assert} from 'chai';
+import * as util from '../../../packages/mdc-top-app-bar/util';
+
+suite('MDCTopAppBar - util');
+
+test('applyPassive returns an options object for browsers that support passive event listeners', () => {
+  const mockWindow = {
+    document: {
+      addEventListener: function(name, method, options) {
+        return options.passive;
+      },
+    },
+  };
+  assert.deepEqual(util.applyPassive(mockWindow, true), {passive: true});
+});
+
+test('applyPassive returns false for browsers that do not support passive event listeners', () => {
+  const mockWindow = {
+    document: {
+      addEventListener: function() {
+        throw new Error();
+      },
+    },
+  };
+  assert.isFalse(util.applyPassive(mockWindow, true));
+});