material_components_web-sass 0.21.1 → 0.22.0

data/vendor/assets/stylesheets/@material/button/_mixins.scss

@@ -28,10 +28,10 @@
 
   @if ($light-or-dark == "light") {
     @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-button-ripple((base-color: white, opacity: .32));
+    @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-filled-button-ripple-opacity));
   } @else {
     @include mdc-button-ink-color(text-primary-on-light);
-    @include mdc-button-ripple((base-color: black, opacity: .32));
+    @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-filled-button-ripple-opacity));
   }
 }
 
@@ -39,7 +39,7 @@
   // :not(:disabled) is used to support link styled as button
   // as link does not support :enabled style
   &:not(:disabled) {
-    @include mdc-theme-prop(background-color, $color);
+    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
   }
 }
 
@@ -60,12 +60,6 @@
     @include mdc-ripple-base;
     @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config));
     @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config));
-
-    &:not(.mdc-ripple-upgraded) {
-      $tap-highlight-color: rgba(map-get($ripple-config, base-color), map-get($ripple-config, opacity));
-
-      @include mdc-theme-prop(-webkit-tap-highlight-color, $tap-highlight-color);
-    }
   }
 }
 
@@ -100,6 +94,7 @@
   text-align: center;
   user-select: none;
   -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   overflow: hidden;
   vertical-align: middle;
 

data/vendor/assets/stylesheets/@material/button/_variables.scss

@@ -16,3 +16,6 @@
 
 $mdc-button-height: 36px;
 $mdc-dense-button-height: 32px;
+
+$mdc-unfilled-button-ripple-opacity: .16;
+$mdc-filled-button-ripple-opacity: .32;

data/vendor/assets/stylesheets/@material/button/mdc-button.scss

@@ -16,29 +16,23 @@
 
 @import "@material/theme/mixins";
 @import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define button
 .mdc-button {
   @include mdc-button-base_;
   @include mdc-button-corner-radius(2px);
   @include mdc-button-container-fill-color(transparent);
-  @include mdc-button-ink-color(text-primary-on-light);
-  @include mdc-button-ripple((base-color: black, opacity: .16));
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-button-ripple((base-color: white, opacity: .16));
-  }
+  @include mdc-button-ink-color(primary);
+  @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity));
 }
 
 .mdc-button--raised,
 .mdc-button--unelevated {
   @include mdc-button--filled_;
-  @include mdc-button-filled-accessible(black);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-filled-accessible(white);
-  }
+  @include mdc-button-container-fill-color(primary);
+  @include mdc-button-ink-color(text-primary-on-primary);
+  @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity));
 }
 
 .mdc-button--raised {
@@ -48,11 +42,7 @@
 .mdc-button--stroked {
   @include mdc-button--stroked_;
   @include mdc-button-stroke-width(2px);
-  @include mdc-button-stroke-color(text-primary-on-light);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-stroke-color(text-primary-on-dark);
-  }
+  @include mdc-button-stroke-color(primary);
 }
 
 .mdc-button--compact {

data/vendor/assets/stylesheets/@material/checkbox/mdc-checkbox.scss

@@ -98,7 +98,7 @@
     // The frame's ::before element is used as a focus indicator for the checkbox
     &::before {
       @include mdc-checkbox-cover-element;
-      @include mdc-theme-prop(background, primary);
+      @include mdc-theme-prop(background, primary, $edgeOptOut: true);
 
       width: 100%;
       height: 100%;

data/vendor/assets/stylesheets/@material/fab/_mixins.scss

@@ -35,7 +35,7 @@
 }
 
 @mixin mdc-fab-container-color($color) {
-  @include mdc-theme-prop(background-color, $color);
+  @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
 }
 
 @mixin mdc-fab-ink-color($color) {
@@ -74,6 +74,11 @@ $mdc-fab-icon-enter-duration_: 180ms;
   -webkit-appearance: none;
   overflow: hidden;
 
+  &:hover,
+  &:focus {
+    @include mdc-elevation(8);
+  }
+
   &:active {
     @include mdc-elevation(12);
   }

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -37,7 +37,8 @@ $mdc-simple-menu-item-fade-duration: .3s;
   background-color: white;
   white-space: nowrap;
   opacity: 0;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   box-sizing: border-box;
   will-change: transform, opacity;
   z-index: 4;

data/vendor/assets/stylesheets/@material/radio/mdc-radio.scss

@@ -73,7 +73,7 @@ $mdc-radio-transition-duration: 120ms;
     height: $mdc-radio-ui-pct;
 
     &::before {
-      @include mdc-theme-prop(background-color, primary);
+      @include mdc-theme-prop(background-color, primary, $edgeOptOut: true);
 
       position: absolute;
       top: 0;

data/vendor/assets/stylesheets/@material/select/mdc-select.scss

@@ -85,7 +85,6 @@
     left: 0;
     max-height: 100%;
     transform-origin: center center;
-    overflow-y: scroll;
     z-index: 4; // Should pop up above everything else. temporary-drawer is next highest at 3.
   }
 

data/vendor/assets/stylesheets/@material/textfield/_mixins.scss

@@ -0,0 +1,37 @@
+//
+// 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.
+//
+
+@mixin mdc-text-field-invalid-label-shake-keyframes_($modifier, $positionY) {
+  @keyframes invalid-shake-float-above-#{$modifier} {
+    0% {
+      transform: translateX(0) translateY(-#{$positionY}) scale(.75, .75);
+    }
+
+    33% {
+      animation-timing-function: cubic-bezier(.5, 0, .701732, .495819);
+      transform: translateX(10px) translateY(-#{$positionY}) scale(.75, .75);
+    }
+
+    66% {
+      animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352);
+      transform: translateX(-5px) translateY(-#{$positionY}) scale(.75, .75);
+    }
+
+    100% {
+      transform: translateX(0) translateY(-#{$positionY}) scale(.75, .75);
+    }
+  }
+}

data/vendor/assets/stylesheets/@material/textfield/_variables.scss

@@ -0,0 +1,44 @@
+//
+// 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.
+//
+
+$mdc-textfield-error-on-light: #d50000;
+$mdc-textfield-error-on-dark: #ff6e6e;
+$mdc-textfield-divider-on-light: rgba(black, .12);
+$mdc-textfield-divider-on-dark: rgba(white, .12);
+$mdc-textfield-disabled-border-on-light: rgba(#231f20, .26);
+$mdc-textfield-disabled-border-on-dark: rgba(white, .3);
+$mdc-textfield-disabled-icon-on-light: rgba(black, .3);
+$mdc-textfield-disabled-icon-on-dark: rgba(white, .3);
+$mdc-textfield-icon-position: 15px;
+$mdc-textfield-icon-padding: 48px;
+$mdc-textfield-dense-icon-position: 12px;
+$mdc-textfield-dense-icon-padding: 38px;
+$mdc-textfield-underline-on-light: rgba(black, 1);
+$mdc-textfield-underline-on-light-idle: rgba(black, .5);
+$mdc-textfield-underline-on-dark: rgba(white, 1);
+$mdc-textfield-underline-on-dark-idle: rgba(white, .5);
+$mdc-textfield-dark-background: rgba(48, 48, 48, 1);
+$mdc-textfield-dark-label: rgba(white, .6);
+$mdc-textfield-dark-placeholder: rgba(black, .38);
+$mdc-textfield-light-background: rgba(white, 1);
+$mdc-textfield-light-label: rgba(white, .7);
+$mdc-textfield-light-placeholder: rgba(white, .3);
+$mdc-textarea-border-on-light: rgba(black, .73);
+$mdc-textarea-border-on-dark: rgba(white, 1);
+$mdc-textarea-light-background: rgba(white, 1);
+$mdc-textarea-dark-background: rgba(48, 48, 48, 1);
+$mdc-textarea-disabled-background-on-light: rgba(249, 249, 249, 1);
+$mdc-textarea-disabled-background-on-dark: rgba(47, 47, 47, 1);

data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss

@@ -14,6 +14,8 @@
 // limitations under the License.
 //
 
+@import "./mixins";
+@import "./variables";
 @import "@material/animation/variables";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
@@ -22,20 +24,17 @@
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
 
-$mdc-textfield-error-on-light: #d50000;
-$mdc-textfield-error-on-dark: #ff6e6e;
-$mdc-textfield-divider-on-light: rgba(black, .12);
-$mdc-textfield-divider-on-dark: rgba(white, .12);
-$mdc-textfield-disabled-border-on-light: rgba(#231f20, .26);
-$mdc-textfield-disabled-border-on-dark: rgba(white, .3);
-
 @function mdc-textfield-transition($property) {
   @return #{$property} 180ms $mdc-animation-standard-curve-timing-function;
 }
 
+@include mdc-text-field-invalid-label-shake_keyframes_(standard, 100%);
+@include mdc-text-field-invalid-label-shake_keyframes_(box, 50%);
+
 // postcss-bem-linter: define textfield
 .mdc-textfield {
   display: inline-block;
+  position: relative;
   margin-bottom: 8px;
   will-change: opacity, transform, color;
 
@@ -50,7 +49,9 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
     width: 100%;
     padding: 0 0 8px;
+    transition: mdc-textfield-transition(opacity);
     border: none;
+    border-bottom: 1px solid $mdc-textfield-underline-on-light-idle;
     background: none;
     font-size: inherit;
     appearance: none;
@@ -62,11 +63,15 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
       opacity: 1;
     }
 
+    &:hover {
+      border-color: $mdc-textfield-underline-on-light;
+    }
+
     &:focus {
       outline: none;
 
       &::placeholder {
-        @include mdc-theme-prop(color, text-secondary-on-light);
+        @include mdc-theme-prop(color, $mdc-textfield-light-placeholder);
       }
     }
 
@@ -78,24 +83,51 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     @include mdc-theme-dark {
       @include mdc-theme-prop(color, text-primary-on-dark);
 
+      border-bottom: 1px solid $mdc-textfield-underline-on-dark-idle;
+
+      &:hover {
+        border-bottom: 1px solid $mdc-textfield-underline-on-dark;
+      }
+
       &::placeholder {
         @include mdc-theme-prop(color, text-hint-on-dark);
       }
 
       &:focus::placeholder {
-        @include mdc-theme-prop(color, text-secondary-on-dark);
+        @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
       }
     }
   }
 
-  &__label {
-    @include mdc-theme-prop(color, text-hint-on-light);
+  &__bottom-line {
+    @include mdc-theme-prop(background-color, primary);
 
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    transform: scaleX(0);
+    transition: mdc-textfield-transition(transform), mdc-textfield-transition(opacity);
+    opacity: 0;
+    z-index: 2;
+  }
+
+  &__bottom-line--active {
+    transform: scaleX(1);
+  }
+
+  .mdc-textfield__input:focus ~ .mdc-textfield__bottom-line {
+    opacity: 1;
+  }
+
+  &__label {
     position: absolute;
     bottom: 8px;
     left: 0;
     transform-origin: left top;
     transition: mdc-textfield-transition(transform), mdc-textfield-transition(color);
+    color: $mdc-textfield-underline-on-light-idle;
     cursor: text;
 
     // stylelint-disable plugin/selector-bem-pattern
@@ -107,7 +139,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     // stylelint-enable plugin/selector-bem-pattern
 
     @include mdc-theme-dark(".mdc-textfield") {
-      @include mdc-theme-prop(color, text-hint-on-dark);
+      @include mdc-theme-prop(color, $mdc-textfield-dark-label);
     }
 
     &--float-above {
@@ -186,8 +218,12 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
     position: absolute;
     bottom: 20px;
+    width: calc(100% - #{$mdc-textfield-icon-padding});
     color: rgba(black, .6);
+    text-overflow: ellipsis;
+    white-space: nowrap;
     pointer-events: none;
+    overflow: hidden;
     // Force the label into its own layer to prevent to prevent visible layer promotion adjustments
     // when the ripple is activated behind it.
     will-change: transform;
@@ -201,6 +237,12 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     }
   }
 
+  .mdc-textfield__label--float-above {
+    &.mdc-textfield__label--shake {
+      animation: invalid-shake-float-above-box 250ms 1;
+    }
+  }
+
   &.mdc-ripple-upgraded {
     @include mdc-ripple-base;
     // TODO: Add ::before as ripple bg once #194 lands
@@ -224,94 +266,122 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 
   &.mdc-textfield--disabled {
+    @include mdc-theme-prop(background-color, $mdc-textfield-light-background);
+    @include mdc-theme-prop(color, $mdc-textfield-light-placeholder);
+
     border-bottom: none;
     background-color: rgba(black, .02);
-    color: rgba(black, .38);
 
     @include mdc-theme-dark(".mdc-textfield", true) {
+      @include mdc-theme-prop(background-color, $mdc-textfield-dark-background);
+      @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
+
       border-bottom: none;
-      background-color: rgba(white, .05);
     }
 
     .mdc-textfield__label {
       bottom: 20px;
     }
 
-    .mdc-textfield__input {
-      padding-bottom: 0;
+    .mdc-textfield__icon {
+      @include mdc-theme-prop(color, $mdc-textfield-disabled-icon-on-light);
+
+      @include mdc-theme-dark() {
+        @include mdc-theme-prop(color, $mdc-textfield-disabled-icon-on-dark);
+      }
     }
   }
 
-  // TODO: Move into general .mdc-textfield decl and replace ::after textfield styles with this
-  // element as part of #675
-  .mdc-textfield__bottom-line {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    transform: scaleY(1);
-    transform-origin: center bottom;
-    transition:
-      background-color 33ms $mdc-animation-standard-curve-timing-function,
-      mdc-textfield-transition(transform);
-    background-color: rgba(black, .42);
-    pointer-events: none;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      transition: mdc-textfield-transition(opacity);
-      background-color: $mdc-textfield-error-on-light;
-      opacity: 0;
-      content: "";
+  &.mdc-textfield--dense {
+    .mdc-textfield__input {
+      padding: 12px 12px 0;
     }
 
-    @include mdc-theme-dark(".mdc-textfield") {
-      @include mdc-theme-prop(background-color, text-hint-on-dark);
+    .mdc-textfield__label {
+      @include mdc-rtl-reflexive-position(left, 12px);
 
-      &::after {
-        background-color: $mdc-textfield-error-on-dark;
+      bottom: 20px;
+
+      &--float-above {
+        transform: translateY(calc(-75% - 2px)) scale(.923, .923);
       }
     }
   }
+  // stylelint-enable plugin/selector-bem-pattern
+}
 
-  &.mdc-textfield--focused .mdc-textfield__bottom-line {
-    @include mdc-theme-prop(background-color, primary);
+.mdc-textfield--with-leading-icon .mdc-textfield__icon,
+.mdc-textfield--with-trailing-icon .mdc-textfield__icon {
+  position: absolute;
+  bottom: 16px;
+  cursor: pointer;
 
-    transform: scaleY(2);
+  @include mdc-theme-dark(".mdc-textfield") {
+    @include mdc-theme-prop(color, text-secondary-on-dark);
   }
+}
 
-  &.mdc-textfield--disabled .mdc-textfield__bottom-line {
-    display: none;
+.mdc-textfield--with-leading-icon {
+  .mdc-textfield__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-icon-padding, $mdc-textfield-icon-position);
   }
 
-  &.mdc-textfield--invalid .mdc-textfield__bottom-line::after {
-    opacity: 1;
+  .mdc-textfield__icon {
+    @include mdc-rtl-reflexive-position(left, $mdc-textfield-icon-position);
   }
 
-  &.mdc-textfield--dense {
-    height: 44px;
+  .mdc-textfield__label {
+    @include mdc-rtl-reflexive-position(left, $mdc-textfield-icon-padding);
+  }
+}
 
-    .mdc-textfield__input {
-      padding: 12px 12px 0;
-    }
+.mdc-textfield--with-trailing-icon {
+  .mdc-textfield__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-icon-position, $mdc-textfield-icon-padding);
+  }
 
-    .mdc-textfield__label {
-      @include mdc-rtl-reflexive-position(left, 12px);
+  .mdc-textfield__icon {
+    @include mdc-rtl-reflexive-position(right, $mdc-textfield-icon-position);
+  }
+}
 
-      bottom: 12px;
+.mdc-textfield__icon:not([tabindex]),
+.mdc-textfield__icon[tabindex="-1"] {
+  cursor: default;
+  pointer-events: none;
+}
 
-      &--float-above {
-        transform: translateY(calc(-75% - 2px)) scale(.923, .923);
-      }
-    }
+// stylelint-disable plugin/selector-bem-pattern
+.mdc-textfield--with-leading-icon.mdc-textfield--dense .mdc-textfield__icon,
+.mdc-textfield--with-trailing-icon.mdc-textfield--dense .mdc-textfield__icon {
+  bottom: 16px;
+  transform: scale(.8);
+}
+
+.mdc-textfield--with-leading-icon.mdc-textfield--dense {
+  .mdc-textfield__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-dense-icon-padding, $mdc-textfield-dense-icon-position);
+  }
+
+  .mdc-textfield__icon {
+    @include mdc-rtl-reflexive-position(left, $mdc-textfield-dense-icon-position);
+  }
+
+  .mdc-textfield__label {
+    @include mdc-rtl-reflexive-position(left, $mdc-textfield-dense-icon-padding);
+  }
+}
+
+.mdc-textfield--with-trailing-icon.mdc-textfield--dense {
+  .mdc-textfield__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-dense-icon-position, $mdc-textfield-dense-icon-padding);
+  }
+
+  .mdc-textfield__icon {
+    @include mdc-rtl-reflexive-position(right, $mdc-textfield-dense-icon-position);
   }
-  // stylelint-enable plugin/selector-bem-pattern
 }
+// stylelint-enable plugin/selector-bem-pattern
 
 .mdc-textfield--upgraded:not(.mdc-textfield--fullwidth):not(.mdc-textfield--box) {
   display: inline-flex;
@@ -320,25 +390,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   box-sizing: border-box;
   margin-top: 16px;
 
-  &:not(.mdc-textfield--multiline) {
+  &:not(.mdc-textfield--textarea) {
     height: 48px;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      transform: translateY(50%) scaleY(1);
-      transform-origin: center bottom;
-      transition: mdc-textfield-transition(background-color), mdc-textfield-transition(transform);
-      background-color: $mdc-textfield-divider-on-light;
-      content: "";
-
-      @include mdc-theme-dark(".mdc-textfield") {
-        background-color: $mdc-textfield-divider-on-dark;
-      }
-    }
   }
 
   .mdc-textfield__label {
@@ -346,34 +399,31 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 }
 
-.mdc-textfield--focused {
-  @mixin mdc-textfield-after-styles {
-    @include mdc-theme-prop(background-color, primary);
-
-    transform: translateY(100%) scaleY(2);
-    transition: mdc-textfield-transition(transform);
+.mdc-textfield--invalid {
+  .mdc-textfield__label {
+    color: $mdc-textfield-error-on-light;
   }
 
-  @mixin mdc-textfield-label-styles {
-    @include mdc-theme-prop(color, primary);
+  .mdc-textfield__input {
+    border-color: $mdc-textfield-error-on-light;
   }
 
-  &.mdc-textfield--upgraded:not(.mdc-textfield--fullwidth):not(.mdc-textfield--multiline):not(.mdc-textfield--box)::after {
-    @include mdc-textfield-after-styles;
-
-    @include mdc-theme-dark(".mdc-textfield", true) {
-      @include mdc-textfield-after-styles;
-    }
+  .mdc-textfield__bottom-line {
+    background-color: $mdc-textfield-error-on-light;
   }
+}
 
-  .mdc-textfield__label {
-    @include mdc-textfield-label-styles;
+// stylelint-disable plugin/selector-bem-pattern
+.mdc-textfield--invalid.mdc-textfield--textarea {
+  border-color: $mdc-textfield-error-on-light;
+}
 
-    @include mdc-theme-dark(".mdc-textfield") {
-      @include mdc-textfield-label-styles;
-    }
+.mdc-textfield__label--float-above {
+  &.mdc-textfield__label--shake {
+    animation: invalid-shake-float-above-standard 250ms 1;
   }
 }
+// stylelint-enable plugin/selector-bem-pattern
 
 .mdc-textfield--dense {
   margin-top: 12px;
@@ -386,47 +436,15 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 }
 
-.mdc-textfield--invalid {
-  &:not(.mdc-textfield--focused):not(.mdc-textfield--box) {
-    &::after,
-    &.mdc-textfield--upgraded::after {
-      background-color: $mdc-textfield-error-on-light;
-    }
-
-    .mdc-textfield__label {
-      color: $mdc-textfield-error-on-light;
-    }
-  }
-
-  @include mdc-theme-dark(".mdc-textfield", true) {
-    &:not(.mdc-textfield--focused) {
-      &::after,
-      &.mdc-textfield--upgraded::after {
-        background-color: $mdc-textfield-error-on-dark;
-      }
-
-      .mdc-textfield__label {
-        color: $mdc-textfield-error-on-dark;
-      }
-    }
-  }
-}
-
 .mdc-textfield--disabled {
-  border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
   pointer-events: none;
 
-  &::after {
-    display: none;
-  }
-
-  // Account for offset by border
   .mdc-textfield__input {
-    padding-bottom: 7px;
-  }
+    border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
 
-  @include mdc-theme-dark(".mdc-textfield", true) {
-    border-bottom: 1px dotted $mdc-textfield-disabled-border-on-dark;
+    @include mdc-theme-dark(".mdc-textfield", true) {
+      border-bottom: 1px dotted $mdc-textfield-disabled-border-on-dark;
+    }
   }
 
   // stylelint-disable plugin/selector-bem-pattern
@@ -453,11 +471,21 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 
   .mdc-textfield__label {
-    bottom: 7px;
+    bottom: 8px;
     cursor: default;
   }
 }
 
+.mdc-textfield--invalid.mdc-textfield--disabled {
+  .mdc-textfield__label {
+    @include mdc-theme-prop(color, text-disabled-on-light);
+
+    @include mdc-theme-dark(".mdc-textfield") {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+    }
+  }
+}
+
 .mdc-textfield__input:required + .mdc-textfield__label::after {
   margin-left: 1px;
   content: "*";
@@ -471,31 +499,28 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 }
 
-.mdc-textfield--multiline {
-  $padding-inset: 4px;
+.mdc-textfield--textarea {
+  $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
   $label-offset-x: $padding-inset;
 
   display: flex;
   height: initial;
   transition: none;
+  border: 1px solid $mdc-textarea-border-on-light;
+  border-radius: 4px;
 
-  &::after {
-    content: initial;
+  @include mdc-theme-dark(".mdc-textfield") {
+    border-color: $mdc-textarea-border-on-dark;
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-
   .mdc-textfield__input {
     padding: $padding-inset;
-    transition: mdc-textfield-transition(border-color);
-    border: 1px solid $mdc-textfield-divider-on-light;
+    padding-top: $padding-inset * 2;
+    border: 1px solid transparent;
     border-radius: 2px;
 
-    @include mdc-theme-dark(".mdc-textfield") {
-      border-color: $mdc-textfield-divider-on-dark;
-    }
-
     &:focus {
       @include mdc-theme-prop(border-color, primary);
     }
@@ -505,6 +530,14 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     }
 
     @include mdc-theme-dark(".mdc-textfield") {
+      &:hover {
+        border-bottom-color: transparent;
+      }
+
+      &:focus {
+        @include mdc-theme-prop(border-color, secondary);
+      }
+
       &:invalid:not(:focus) {
         border-color: $mdc-textfield-error-on-dark;
       }
@@ -512,100 +545,92 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 
   .mdc-textfield__label {
+    @include mdc-rtl-reflexive-position(left, 1px);
+
     top: $label-offset-y;
-    bottom: initial;
-    left: $label-offset-x;
+    bottom: auto;
+    padding: 8px 16px;
+    background-color: $mdc-textarea-light-background;
 
-    @include mdc-rtl(".mdc-textfield--multiline") {
-      right: $label-offset-x;
-      left: auto;
+    @include mdc-theme-dark(".mdc-textfield") {
+      background-color: $mdc-textarea-dark-background;
     }
 
     &--float-above {
       // 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.
       // Note that the scale factor is an eyeball'd approximation of what's shown in the mocks.
-      transform: translateY(calc(-100% - #{$label-offset-y})) scale(.923, .923);
+      transform: translateY(-50%) scale(.923, .923);
     }
   }
 
   &.mdc-textfield--disabled {
-    border-bottom: none;
+    border-style: solid;
+    border-color: $mdc-textfield-disabled-border-on-light;
+    background-color: $mdc-textarea-disabled-background-on-light;
 
-    .mdc-textfield__input {
-      border: 1px dotted $mdc-textfield-disabled-border-on-light;
+    @include mdc-theme-dark(".mdc-textfield") {
+      border-color: $mdc-textfield-disabled-border-on-dark;
+      background-color: $mdc-textarea-disabled-background-on-dark;
+    }
+
+    .mdc-textfield__label {
+      background-color: $mdc-textarea-disabled-background-on-light;
 
       @include mdc-theme-dark(".mdc-textfield") {
-        border-color: $mdc-textfield-disabled-border-on-dark;
+        background-color: $mdc-textarea-disabled-background-on-dark;
       }
     }
   }
-  // stylelint-enable plugin/selector-bem-pattern
+
+  &:not(.mdc-textfield--upgraded) {
+    .mdc-textfield__input {
+      padding-top: $padding-inset;
+    }
+  }
 }
 
+.mdc-textfield--textarea.mdc-textfield--focused {
+  @include mdc-theme-prop(border-color, primary);
+}
+
+// stylelint-enable plugin/selector-bem-pattern
+
 .mdc-textfield--fullwidth {
-  display: block;
-  box-sizing: border-box;
   width: 100%;
-  margin: 0;
-  border: none;
-  border-bottom: 1px solid $mdc-textfield-divider-on-light;
-  outline: none;
 
   // stylelint-disable plugin/selector-bem-pattern
 
-  &:not(.mdc-textfield--multiline) {
+  &:not(.mdc-textfield--textarea) {
+    display: block;
+    box-sizing: border-box;
     height: 56px;
-  }
-
-  &.mdc-textfield--multiline {
-    padding: 20px 0 0;
-  }
-
-  &.mdc-textfield--dense {
-    &:not(.mdc-textfield--multiline) {
-      height: 48px;
-    }
-
-    &.mdc-textfield--multiline {
-      padding: 16px 0 0;
-    }
-  }
+    margin: 0;
+    border: none;
+    border-bottom: 1px solid $mdc-textfield-divider-on-light;
+    outline: none;
 
-  &.mdc-textfield--disabled {
-    &,
-    &.mdc-textfield--multiline {
-      border-bottom: 1px dotted $mdc-textfield-divider-on-light;
+    .mdc-textfield__input {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      resize: none;
+      // Use !important here to override all other border treatments
+      border: none !important;
     }
   }
 
   @include mdc-theme-dark {
     border-bottom: 1px solid $mdc-textfield-divider-on-dark;
-
-    &.mdc-textfield--disabled {
-      &,
-      &.mdc-textfield--multiline {
-        border-bottom: 1px dotted $mdc-textfield-divider-on-dark;
-      }
-    }
   }
 
   // stylelint-enable plugin/selector-bem-pattern
-
-  .mdc-textfield__input {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    resize: none;
-    // Use !important here to override all other border treatments
-    border: none !important;
-  }
 }
 
 // Graceful degredation for css-only inputs
 
 .mdc-textfield {
-  &:not(.mdc-textfield--upgraded):not(.mdc-textfield--multiline) .mdc-textfield__input {
+  &:not(.mdc-textfield--upgraded):not(.mdc-textfield--textarea) .mdc-textfield__input {
     transition: mdc-textfield-transition(border-bottom-color);
     border-bottom: 1px solid $mdc-textfield-divider-on-light;
   }
@@ -616,10 +641,9 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     }
 
     &:disabled {
-      @include mdc-theme-prop(color, text-disabled-on-light);
+      @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
 
-      border-style: dotted;
-      border-color: $mdc-textfield-disabled-border-on-light;
+      border-bottom-style: dotted;
     }
 
     &:invalid:not(:focus) {
@@ -634,9 +658,10 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
       }
 
       &:disabled {
-        @include mdc-theme-prop(color, text-disabled-on-dark);
+        @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
 
         border-color: $mdc-textfield-disabled-border-on-dark;
+        background-color: $mdc-textarea-disabled-background-on-dark;
       }
 
       &:invalid:not(:focus) {
@@ -647,7 +672,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 }
 
 .mdc-textfield--box:not(.mdc-textfield--upgraded) {
-  height: 36px;
+  height: 56px;
 
   &::before,
   &::after {