material_components_web-sass 0.24.0 → 0.25.0

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

@@ -16,3 +16,5 @@
 
 $mdc-slider-default-assumed-bg-color: white !default;
 $mdc-slider-dark-theme-assumed-bg-color: #333 !default;
+
+$mdc-slider-baseline-rail-opacity: .26;

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

@@ -17,29 +17,34 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/rtl/mixins";
+@import "./keyframes";
+@import "./mixins";
 @import "./variables";
 
-$mdc-slider-main-grey: #bdbdbd;
-$mdc-slider-dark-theme-grey: #5c5c5c;
-
 // postcss-bem-linter: define slider
 
-@keyframes mdc-slider-emphasize {
-  0% {
-    animation-timing-function: ease-out;
-  }
+.mdc-slider {
+  @include mdc-slider-color-accessible(secondary);
 
-  50% {
-    animation-timing-function: ease-in;
-    transform: scale(.85);
-  }
+  &--disabled {
+    $light-color: #9a9a9a;
+    $dark-color: #787878;
 
-  100% {
-    transform: scale(.571);
+    @include mdc-slider-highlight-color_($light-color);
+    @include mdc-slider-rail-color_($light-color);
+    @include mdc-slider-rail-tick-mark-color_($light-color);
+    @include mdc-slider-thumb-color_($light-color);
+    @include mdc-slider-thumb-stroke-cutout_($mdc-slider-default-assumed-bg-color);
+
+    @include mdc-theme-dark(".mdc-slider", true) {
+      @include mdc-slider-highlight-color_($dark-color);
+      @include mdc-slider-rail-color_($dark-color);
+      @include mdc-slider-rail-tick-mark-color_($dark-color);
+      @include mdc-slider-thumb-color_($dark-color);
+      @include mdc-slider-thumb-stroke-cutout_($mdc-slider-dark-theme-assumed-bg-color);
+    }
   }
-}
 
-.mdc-slider {
   position: relative;
   width: 100%;
   height: 48px;
@@ -56,17 +61,10 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     top: 50%;
     width: 100%;
     height: 2px;
-    background-color: $mdc-slider-main-grey;
     overflow: hidden;
-
-    @include mdc-theme-dark(".mdc-slider") {
-      background-color: $mdc-slider-dark-theme-grey;
-    }
   }
 
   &__track {
-    @include mdc-theme-prop(background-color, primary);
-
     position: absolute;
     width: 100%;
     height: 100%;
@@ -89,16 +87,12 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
       margin-left: 0;
     }
 
+    // Last marker at the very end of the slider (right-most in LTR, left-most in RTL)
     &::after {
       display: block;
       width: 2px;
       height: 2px;
-      background-color: $mdc-slider-dark-theme-grey;
       content: "";
-
-      @include mdc-theme-dark(".mdc-slider", true) {
-        background-color: $mdc-slider-main-grey;
-      }
     }
   }
 
@@ -109,12 +103,7 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
       display: block;
       width: 2px;
       height: 2px;
-      background-color: $mdc-slider-dark-theme-grey;
       content: "";
-
-      @include mdc-theme-dark(".mdc-slider", true) {
-        background-color: $mdc-slider-main-grey;
-      }
     }
 
     &:first-child::after {
@@ -135,9 +124,6 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
   }
 
   &__thumb {
-    @include mdc-theme-prop(fill, primary);
-    @include mdc-theme-prop(stroke, primary);
-
     position: absolute;
     top: 0;
     left: 0;
@@ -147,8 +133,6 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
   }
 
   &__focus-ring {
-    @include mdc-theme-prop(background-color, primary);
-
     width: 21px;
     height: 21px;
     transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
@@ -157,9 +141,6 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
   }
 
   &__pin {
-    @include mdc-theme-prop(background-color, primary);
-    @include mdc-theme-prop(color, text-primary-on-primary);
-
     display: flex;
     position: absolute;
     top: 0;
@@ -207,82 +188,6 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
 
 .mdc-slider--disabled {
   cursor: auto;
-
-  .mdc-slider__track {
-    background-color: $mdc-slider-main-grey;
-
-    @include mdc-theme-dark(".mdc-slider", true) {
-      background-color: $mdc-slider-dark-theme-grey;
-    }
-  }
-
-  // We use !important here to override all styles without having to use excessive
-  // :not() selectors or intricate compound selectors.
-  .mdc-slider__thumb {
-    fill: $mdc-slider-main-grey !important;
-    stroke: $mdc-slider-default-assumed-bg-color !important;
-    stroke: var(--mdc-slider-bg-color-behind-component, $mdc-slider-default-assumed-bg-color) !important;
-
-    @include mdc-theme-dark(".mdc-slider", true) {
-      fill: $mdc-slider-dark-theme-grey !important;
-      stroke: $mdc-slider-dark-theme-assumed-bg-color !important;
-      stroke: var(--mdc-slider-bg-color-behind-component, $mdc-slider-dark-theme-assumed-bg-color) !important;
-    }
-  }
-}
-
-.mdc-slider--off {
-  .mdc-slider__track {
-    opacity: 0;
-  }
-
-  // stylelint-disable-next-line plugin/selector-bem-pattern
-  .mdc-slider__thumb {
-    fill: $mdc-slider-default-assumed-bg-color;
-    fill: var(--mdc-slider-bg-color-behind-component, $mdc-slider-default-assumed-bg-color);
-    stroke: $mdc-slider-main-grey;
-
-    @include mdc-theme-dark(".mdc-slider", true) {
-      fill: $mdc-slider-dark-theme-assumed-bg-color;
-      fill: var(--mdc-slider-bg-color-behind-component, $mdc-slider-dark-theme-assumed-bg-color);
-      stroke: $mdc-slider-dark-theme-grey;
-    }
-  }
-
-  .mdc-slider__pin {
-    background-color: $mdc-slider-main-grey;
-
-    @include mdc-theme-dark(".mdc-slider", true) {
-      background-color: $mdc-slider-dark-theme-grey;
-    }
-  }
-
-  // stylelint-disable plugin/selector-bem-pattern
-  &.mdc-slider--focus {
-    .mdc-slider__thumb {
-      fill: #dedede;
-
-      @include mdc-theme-dark(".mdc-slider", true) {
-        fill: #82848c;
-        stroke: #82848c;
-      }
-    }
-  }
-
-  &.mdc-slider--active.mdc-slider--focus {
-    .mdc-slider__thumb {
-      stroke: #8c8c8c;
-
-      @include mdc-theme-dark(".mdc-slider", true) {
-        stroke: $mdc-slider-dark-theme-grey;
-      }
-    }
-  }
-
-  .mdc-slider__focus-ring {
-    background-color: $mdc-slider-main-grey;
-  }
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-slider--in-transit {
@@ -324,11 +229,6 @@ $mdc-slider-dark-theme-grey: #5c5c5c;
     .mdc-slider__thumb {
       animation: none;
     }
-
-    .mdc-slider__focus-ring {
-      transform: none;
-      opacity: 0;
-    }
   }
 
   &.mdc-slider--display-markers {

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

@@ -86,6 +86,10 @@
     }
   }
 
+  &__action-wrapper {
+    @include mdc-rtl-reflexive-property(padding, 24px, 0);
+  }
+
   &--action-on-bottom {
     flex-direction: column;
   }
@@ -117,6 +121,10 @@
     @include mdc-theme-dark(".mdc-snackbar") {
       @include mdc-theme-prop(color, text-primary-on-light);
     }
+
+    @media (min-width: $mdc-snackbar-tablet-breakpoint) {
+      @include mdc-rtl-reflexive-property(padding, 0, 24px);
+    }
   }
 
   &--multiline &__text {

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

@@ -21,13 +21,13 @@
 @mixin mdc-text-field-textarea-corner-radius($radius) {
   border-radius: $radius;
 
-  .mdc-textfield__label {
+  .mdc-text-field__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;
   }
 
-  .mdc-textfield__input {
+  .mdc-text-field__input {
     // The input element is required to have 2 pixels shaved off
     // of the radius of its parent. This prevents an ugly space of
     // background between the two borders in each corner when the

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

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

data/vendor/assets/stylesheets/@material/textfield/{mdc-textfield.scss → mdc-text-field.scss}

@@ -24,15 +24,15 @@
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
 
-@function mdc-textfield-transition($property) {
+@function mdc-text-field-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 {
+// postcss-bem-linter: define text-field
+.mdc-text-field {
   display: inline-block;
   position: relative;
   margin-bottom: 8px;
@@ -52,9 +52,9 @@
 
     width: 100%;
     padding: 0 0 8px;
-    transition: mdc-textfield-transition(opacity);
+    transition: mdc-text-field-transition(opacity);
     border: none;
-    border-bottom: 1px solid $mdc-textfield-underline-on-light-idle;
+    border-bottom: 1px solid $mdc-text-field-underline-on-light-idle;
     background: none;
     font-size: inherit;
     appearance: none;
@@ -62,19 +62,19 @@
     &::placeholder {
       @include mdc-theme-prop(color, text-hint-on-light);
 
-      transition: mdc-textfield-transition(color);
+      transition: mdc-text-field-transition(color);
       opacity: 1;
     }
 
     &:hover {
-      border-color: $mdc-textfield-underline-on-light;
+      border-color: $mdc-text-field-underline-on-light;
     }
 
     &:focus {
       outline: none;
 
       &::placeholder {
-        @include mdc-theme-prop(color, $mdc-textfield-light-placeholder);
+        @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
       }
     }
 
@@ -86,10 +86,10 @@
     @include mdc-theme-dark {
       @include mdc-theme-prop(color, text-primary-on-dark);
 
-      border-bottom: 1px solid $mdc-textfield-underline-on-dark-idle;
+      border-bottom: 1px solid $mdc-text-field-underline-on-dark-idle;
 
       &:hover {
-        border-bottom: 1px solid $mdc-textfield-underline-on-dark;
+        border-bottom: 1px solid $mdc-text-field-underline-on-dark;
       }
 
       &::placeholder {
@@ -97,7 +97,7 @@
       }
 
       &:focus::placeholder {
-        @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
+        @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
       }
     }
   }
@@ -111,7 +111,7 @@
     width: 100%;
     height: 2px;
     transform: scaleX(0);
-    transition: mdc-textfield-transition(transform), mdc-textfield-transition(opacity);
+    transition: mdc-text-field-transition(transform), mdc-text-field-transition(opacity);
     opacity: 0;
     z-index: 2;
   }
@@ -120,7 +120,7 @@
     transform: scaleX(1);
   }
 
-  .mdc-textfield__input:focus ~ .mdc-textfield__bottom-line {
+  .mdc-text-field__input:focus ~ .mdc-text-field__bottom-line {
     opacity: 1;
   }
 
@@ -129,20 +129,20 @@
     bottom: 8px;
     left: 0;
     transform-origin: left top;
-    transition: mdc-textfield-transition(transform), mdc-textfield-transition(color);
-    color: $mdc-textfield-underline-on-light-idle;
+    transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
+    color: $mdc-text-field-underline-on-light-idle;
     cursor: text;
 
     // stylelint-disable plugin/selector-bem-pattern
-    @include mdc-rtl(".mdc-textfield") {
+    @include mdc-rtl(".mdc-text-field") {
       right: 0;
       left: auto;
       transform-origin: right top;
     }
     // stylelint-enable plugin/selector-bem-pattern
 
-    @include mdc-theme-dark(".mdc-textfield") {
-      @include mdc-theme-prop(color, $mdc-textfield-dark-label);
+    @include mdc-theme-dark(".mdc-text-field") {
+      @include mdc-theme-prop(color, $mdc-text-field-dark-label);
     }
 
     &--float-above {
@@ -152,17 +152,17 @@
   }
 }
 
-// Move label when textfield gets autofilled in Chrome
-.mdc-textfield__input {
+// Move label when text-field gets autofilled in Chrome
+.mdc-text-field__input {
   // stylelint-disable plugin/selector-bem-pattern
-  &:-webkit-autofill + .mdc-textfield__label {
+  &:-webkit-autofill + .mdc-text-field__label {
     transform: translateY(-100%) scale(.75, .75);
     cursor: auto;
   }
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-textfield--box {
+.mdc-text-field--box {
   @include mdc-ripple-surface;
   @include mdc-ripple-color(black, .04);
   @include mdc-ripple-radius;
@@ -171,14 +171,14 @@
   display: inline-flex;
   position: relative;
   height: 56px;
-  background-color: $mdc-textfield-box-background;
+  background-color: $mdc-text-field-box-background;
   overflow: hidden;
 
-  @include mdc-theme-dark(".mdc-textfield", true) {
-    background-color: $mdc-textfield-box-background-dark;
+  @include mdc-theme-dark(".mdc-text-field", true) {
+    background-color: $mdc-text-field-box-background-dark;
   }
 
-  @include mdc-theme-dark(".mdc-textfield", true) {
+  @include mdc-theme-dark(".mdc-text-field", true) {
     @include mdc-ripple-color(white, .05);
   }
 
@@ -187,20 +187,20 @@
   // we would normally disable it (on combined selectors) as a workaround.
 
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-textfield__input {
+  .mdc-text-field__input {
     align-self: flex-end;
     box-sizing: border-box;
     height: 100%;
     padding: 20px 16px 0;
   }
 
-  .mdc-textfield__label {
+  .mdc-text-field__label {
     @include mdc-rtl-reflexive-position(left, 16px);
 
     position: absolute;
     bottom: 20px;
-    width: calc(100% - #{$mdc-textfield-icon-padding});
-    color: $mdc-textfield-box-secondary-text;
+    width: calc(100% - #{$mdc-text-field-icon-padding});
+    color: $mdc-text-field-box-secondary-text;
     text-overflow: ellipsis;
     white-space: nowrap;
     pointer-events: none;
@@ -209,7 +209,7 @@
     // when the ripple is activated behind it.
     will-change: transform;
 
-    @include mdc-theme-dark(".mdc-textfield") {
+    @include mdc-theme-dark(".mdc-text-field") {
       @include mdc-theme-prop(color, text-secondary-on-dark);
     }
 
@@ -218,44 +218,44 @@
     }
   }
 
-  .mdc-textfield__label--float-above {
-    &.mdc-textfield__label--shake {
+  .mdc-text-field__label--float-above {
+    &.mdc-text-field__label--shake {
       animation: invalid-shake-float-above-box 250ms 1;
     }
   }
 
-  &.mdc-textfield--disabled {
-    @include mdc-theme-prop(color, $mdc-textfield-light-placeholder);
+  &.mdc-text-field--disabled {
+    @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
 
     border-bottom: none;
-    background-color: $mdc-textfield-box-disabled-background;
+    background-color: $mdc-text-field-box-disabled-background;
 
-    @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);
+    @include mdc-theme-dark(".mdc-text-field", true) {
+      @include mdc-theme-prop(background-color, $mdc-text-field-dark-background);
+      @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
 
       border-bottom: none;
     }
 
-    .mdc-textfield__label {
+    .mdc-text-field__label {
       bottom: 20px;
     }
 
-    .mdc-textfield__icon {
-      @include mdc-theme-prop(color, $mdc-textfield-disabled-icon-on-light);
+    .mdc-text-field__icon {
+      @include mdc-theme-prop(color, $mdc-text-field-disabled-icon-on-light);
 
       @include mdc-theme-dark() {
-        @include mdc-theme-prop(color, $mdc-textfield-disabled-icon-on-dark);
+        @include mdc-theme-prop(color, $mdc-text-field-disabled-icon-on-dark);
       }
     }
   }
 
-  &.mdc-textfield--dense {
-    .mdc-textfield__input {
+  &.mdc-text-field--dense {
+    .mdc-text-field__input {
       padding: 12px 12px 0;
     }
 
-    .mdc-textfield__label {
+    .mdc-text-field__label {
       @include mdc-rtl-reflexive-position(left, 12px);
 
       bottom: 20px;
@@ -268,196 +268,196 @@
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-textfield--with-leading-icon .mdc-textfield__icon,
-.mdc-textfield--with-trailing-icon .mdc-textfield__icon {
+.mdc-text-field--with-leading-icon .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon .mdc-text-field__icon {
   position: absolute;
   bottom: 16px;
   cursor: pointer;
 
-  @include mdc-theme-dark(".mdc-textfield") {
+  @include mdc-theme-dark(".mdc-text-field") {
     @include mdc-theme-prop(color, text-secondary-on-dark);
   }
 }
 
-.mdc-textfield--with-leading-icon {
-  .mdc-textfield__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-icon-padding, $mdc-textfield-icon-position);
+.mdc-text-field--with-leading-icon {
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-icon-position);
   }
 
-  .mdc-textfield__icon {
-    @include mdc-rtl-reflexive-position(left, $mdc-textfield-icon-position);
+  .mdc-text-field__icon {
+    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-position);
   }
 
-  .mdc-textfield__label {
-    @include mdc-rtl-reflexive-position(left, $mdc-textfield-icon-padding);
+  .mdc-text-field__label {
+    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
   }
 }
 
-.mdc-textfield--with-trailing-icon {
-  .mdc-textfield__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-textfield-icon-position, $mdc-textfield-icon-padding);
+.mdc-text-field--with-trailing-icon {
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-position, $mdc-text-field-icon-padding);
   }
 
-  .mdc-textfield__icon {
-    @include mdc-rtl-reflexive-position(right, $mdc-textfield-icon-position);
+  .mdc-text-field__icon {
+    @include mdc-rtl-reflexive-position(right, $mdc-text-field-icon-position);
   }
 }
 
-.mdc-textfield__icon:not([tabindex]),
-.mdc-textfield__icon[tabindex="-1"] {
+.mdc-text-field__icon:not([tabindex]),
+.mdc-text-field__icon[tabindex="-1"] {
   cursor: default;
   pointer-events: none;
 }
 
 // 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 {
+.mdc-text-field--with-leading-icon.mdc-text-field--dense .mdc-text-field__icon,
+.mdc-text-field--with-trailing-icon.mdc-text-field--dense .mdc-text-field__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-text-field--with-leading-icon.mdc-text-field--dense {
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-dense-icon-position);
   }
 
-  .mdc-textfield__icon {
-    @include mdc-rtl-reflexive-position(left, $mdc-textfield-dense-icon-position);
+  .mdc-text-field__icon {
+    @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-position);
   }
 
-  .mdc-textfield__label {
-    @include mdc-rtl-reflexive-position(left, $mdc-textfield-dense-icon-padding);
+  .mdc-text-field__label {
+    @include mdc-rtl-reflexive-position(left, $mdc-text-field-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-text-field--with-trailing-icon.mdc-text-field--dense {
+  .mdc-text-field__input {
+    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-position, $mdc-text-field-dense-icon-padding);
   }
 
-  .mdc-textfield__icon {
-    @include mdc-rtl-reflexive-position(right, $mdc-textfield-dense-icon-position);
+  .mdc-text-field__icon {
+    @include mdc-rtl-reflexive-position(right, $mdc-text-field-dense-icon-position);
   }
 }
 // stylelint-enable plugin/selector-bem-pattern
 
-.mdc-textfield--upgraded:not(.mdc-textfield--fullwidth):not(.mdc-textfield--box) {
+.mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box) {
   display: inline-flex;
   position: relative;
   align-items: flex-end;
   box-sizing: border-box;
   margin-top: 16px;
 
-  &:not(.mdc-textfield--textarea) {
+  &:not(.mdc-text-field--textarea) {
     height: 48px;
   }
 
-  .mdc-textfield__label {
+  .mdc-text-field__label {
     pointer-events: none;
   }
 }
 
-.mdc-textfield--invalid {
-  .mdc-textfield__label {
-    color: $mdc-textfield-error-on-light;
+.mdc-text-field--invalid {
+  .mdc-text-field__label {
+    color: $mdc-text-field-error-on-light;
   }
 
-  .mdc-textfield__input {
-    border-color: $mdc-textfield-error-on-light;
+  .mdc-text-field__input {
+    border-color: $mdc-text-field-error-on-light;
   }
 
-  .mdc-textfield__bottom-line {
-    background-color: $mdc-textfield-error-on-light;
+  .mdc-text-field__bottom-line {
+    background-color: $mdc-text-field-error-on-light;
   }
 }
 
 // stylelint-disable plugin/selector-bem-pattern
-.mdc-textfield--invalid.mdc-textfield--textarea {
-  border-color: $mdc-textfield-error-on-light;
+.mdc-text-field--invalid.mdc-text-field--textarea {
+  border-color: $mdc-text-field-error-on-light;
 }
 
-.mdc-textfield__label--float-above {
-  &.mdc-textfield__label--shake {
+.mdc-text-field__label--float-above {
+  &.mdc-text-field__label--shake {
     animation: invalid-shake-float-above-standard 250ms 1;
   }
 }
 // stylelint-enable plugin/selector-bem-pattern
 
-.mdc-textfield--dense {
+.mdc-text-field--dense {
   margin-top: 12px;
   margin-bottom: 4px;
   font-size: .813rem;
 
-  .mdc-textfield__label--float-above {
+  .mdc-text-field__label--float-above {
     // NOTE: This is an eyeball'd approximation of what's in the mocks.
     transform: translateY(calc(-100% - 2px)) scale(.923, .923);
   }
 }
 
-.mdc-textfield--disabled {
+.mdc-text-field--disabled {
   pointer-events: none;
 
-  .mdc-textfield__input {
-    border-bottom: 1px dotted $mdc-textfield-disabled-border-on-light;
+  .mdc-text-field__input {
+    border-bottom: 1px dotted $mdc-text-field-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-text-field", true) {
+      border-bottom: 1px dotted $mdc-text-field-disabled-border-on-dark;
     }
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-textfield__input,
-  .mdc-textfield__label,
-  + .mdc-textfield-helptext {
+  .mdc-text-field__input,
+  .mdc-text-field__label,
+  + .mdc-text-field-helptext {
     @include mdc-theme-prop(color, text-disabled-on-light);
   }
   // stylelint-enable plugin/selector-bem-pattern
 
-  .mdc-textfield__input,
-  .mdc-textfield__label {
-    @include mdc-theme-dark(".mdc-textfield") {
+  .mdc-text-field__input,
+  .mdc-text-field__label {
+    @include mdc-theme-dark(".mdc-text-field") {
       @include mdc-theme-prop(color, text-disabled-on-dark);
     }
   }
 
-  @include mdc-theme-dark(".mdc-textfield", true) {
+  @include mdc-theme-dark(".mdc-text-field", true) {
     // stylelint-disable plugin/selector-bem-pattern
-    + .mdc-textfield-helptext {
+    + .mdc-text-field-helptext {
       @include mdc-theme-prop(color, text-disabled-on-dark);
     }
     // stylelint-enable plugin/selector-bem-pattern
   }
 
-  .mdc-textfield__label {
+  .mdc-text-field__label {
     bottom: 8px;
     cursor: default;
   }
 }
 
-.mdc-textfield--invalid.mdc-textfield--disabled {
-  .mdc-textfield__label {
+.mdc-text-field--invalid.mdc-text-field--disabled {
+  .mdc-text-field__label {
     @include mdc-theme-prop(color, text-disabled-on-light);
 
-    @include mdc-theme-dark(".mdc-textfield") {
+    @include mdc-theme-dark(".mdc-text-field") {
       @include mdc-theme-prop(color, text-disabled-on-dark);
     }
   }
 }
 
-.mdc-textfield__input:required + .mdc-textfield__label::after {
+.mdc-text-field__input:required + .mdc-text-field__label::after {
   margin-left: 1px;
   content: "*";
 
-  .mdc-textfield--focused & {
-    color: $mdc-textfield-error-on-light;
+  .mdc-text-field--focused & {
+    color: $mdc-text-field-error-on-light;
 
-    @include mdc-theme-dark(".mdc-textfield", true) {
-      color: $mdc-textfield-error-on-dark;
+    @include mdc-theme-dark(".mdc-text-field", true) {
+      color: $mdc-text-field-error-on-dark;
     }
   }
 }
 
-.mdc-textfield--textarea {
+.mdc-text-field--textarea {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
 
   $padding-inset: 16px;
@@ -470,12 +470,12 @@
   border: 1px solid $mdc-textarea-border-on-light;
   overflow: hidden;
 
-  @include mdc-theme-dark(".mdc-textfield") {
+  @include mdc-theme-dark(".mdc-text-field") {
     border-color: $mdc-textarea-border-on-dark;
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-textfield__input {
+  .mdc-text-field__input {
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
@@ -485,10 +485,10 @@
     }
 
     &:invalid:not(:focus) {
-      border-color: $mdc-textfield-error-on-light;
+      border-color: $mdc-text-field-error-on-light;
     }
 
-    @include mdc-theme-dark(".mdc-textfield") {
+    @include mdc-theme-dark(".mdc-text-field") {
       &:hover {
         border-bottom-color: transparent;
       }
@@ -498,12 +498,12 @@
       }
 
       &:invalid:not(:focus) {
-        border-color: $mdc-textfield-error-on-dark;
+        border-color: $mdc-text-field-error-on-dark;
       }
     }
   }
 
-  .mdc-textfield__label {
+  .mdc-text-field__label {
     @include mdc-rtl-reflexive-position(left, 1px);
 
     top: $label-offset-y;
@@ -511,7 +511,7 @@
     padding: 8px 16px;
     background-color: $mdc-textarea-light-background;
 
-    @include mdc-theme-dark(".mdc-textfield") {
+    @include mdc-theme-dark(".mdc-text-field") {
       background-color: $mdc-textarea-dark-background;
     }
 
@@ -523,53 +523,53 @@
     }
   }
 
-  &.mdc-textfield--disabled {
+  &.mdc-text-field--disabled {
     border-style: solid;
-    border-color: $mdc-textfield-disabled-border-on-light;
+    border-color: $mdc-text-field-disabled-border-on-light;
     background-color: $mdc-textarea-disabled-background-on-light;
 
-    @include mdc-theme-dark(".mdc-textfield") {
-      border-color: $mdc-textfield-disabled-border-on-dark;
+    @include mdc-theme-dark(".mdc-text-field") {
+      border-color: $mdc-text-field-disabled-border-on-dark;
       background-color: $mdc-textarea-disabled-background-on-dark;
     }
 
-    .mdc-textfield__label {
+    .mdc-text-field__label {
       background-color: $mdc-textarea-disabled-background-on-light;
 
-      @include mdc-theme-dark(".mdc-textfield") {
+      @include mdc-theme-dark(".mdc-text-field") {
         background-color: $mdc-textarea-disabled-background-on-dark;
       }
     }
   }
 
-  &:not(.mdc-textfield--upgraded) {
-    .mdc-textfield__input {
+  &:not(.mdc-text-field--upgraded) {
+    .mdc-text-field__input {
       padding-top: $padding-inset;
     }
   }
 }
 
-.mdc-textfield--textarea.mdc-textfield--focused {
+.mdc-text-field--textarea.mdc-text-field--focused {
   @include mdc-theme-prop(border-color, primary);
 }
 
 // stylelint-enable plugin/selector-bem-pattern
 
-.mdc-textfield--fullwidth {
+.mdc-text-field--fullwidth {
   width: 100%;
 
   // stylelint-disable plugin/selector-bem-pattern
 
-  &:not(.mdc-textfield--textarea) {
+  &:not(.mdc-text-field--textarea) {
     display: block;
     box-sizing: border-box;
     height: 56px;
     margin: 0;
     border: none;
-    border-bottom: 1px solid $mdc-textfield-divider-on-light;
+    border-bottom: 1px solid $mdc-text-field-divider-on-light;
     outline: none;
 
-    .mdc-textfield__input {
+    .mdc-text-field__input {
       width: 100%;
       height: 100%;
       padding: 0;
@@ -580,7 +580,7 @@
   }
 
   @include mdc-theme-dark {
-    border-bottom: 1px solid $mdc-textfield-divider-on-dark;
+    border-bottom: 1px solid $mdc-text-field-divider-on-dark;
   }
 
   // stylelint-enable plugin/selector-bem-pattern
@@ -588,53 +588,53 @@
 
 // Graceful degredation for css-only inputs
 
-.mdc-textfield {
-  &: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;
+.mdc-text-field {
+  &:not(.mdc-text-field--upgraded):not(.mdc-text-field--textarea) .mdc-text-field__input {
+    transition: mdc-text-field-transition(border-bottom-color);
+    border-bottom: 1px solid $mdc-text-field-divider-on-light;
   }
 
-  &:not(.mdc-textfield--upgraded) .mdc-textfield__input {
+  &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
     &:focus {
       @include mdc-theme-prop(border-color, primary);
     }
 
     &:disabled {
-      @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
+      @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
 
       border-bottom-style: dotted;
     }
 
     // stylelint-disable selector-max-specificity
     &:invalid:not(:focus) {
-      border-color: $mdc-textfield-error-on-light;
+      border-color: $mdc-text-field-error-on-light;
     }
     // stylelint-enable selector-max-specificity
   }
 
   @include mdc-theme-dark {
-    &:not(.mdc-textfield--upgraded) .mdc-textfield__input {
+    &:not(.mdc-text-field--upgraded) .mdc-text-field__input {
       &:not(:focus) {
         border-color: rgba(white, .12);
       }
 
       &:disabled {
-        @include mdc-theme-prop(color, $mdc-textfield-dark-placeholder);
+        @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
 
-        border-color: $mdc-textfield-disabled-border-on-dark;
+        border-color: $mdc-text-field-disabled-border-on-dark;
         background-color: $mdc-textarea-disabled-background-on-dark;
       }
 
       // stylelint-disable selector-max-specificity
       &:invalid:not(:focus) {
-        border-color: $mdc-textfield-error-on-dark;
+        border-color: $mdc-text-field-error-on-dark;
       }
       // stylelint-enable selector-max-specificity
     }
   }
 }
 
-.mdc-textfield--box:not(.mdc-textfield--upgraded) {
+.mdc-text-field--box:not(.mdc-text-field--upgraded) {
   height: 56px;
 
   &::before,
@@ -642,20 +642,20 @@
     border-radius: 0;
   }
 
-  .mdc-textfield__input {
+  .mdc-text-field__input {
     padding-top: 0;
   }
 }
 
 // postcss-bem-linter: end
 
-// postcss-bem-linter: define textfield-helptext
+// postcss-bem-linter: define text-field-helptext
 
-.mdc-textfield-helptext {
+.mdc-text-field-helptext {
   @include mdc-theme-prop(color, text-hint-on-light);
 
   margin: 0;
-  transition: mdc-textfield-transition(opacity);
+  transition: mdc-text-field-transition(opacity);
   opacity: 0;
   font-size: .75rem;
   will-change: opacity;
@@ -665,19 +665,19 @@
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-textfield + & {
+  .mdc-text-field + & {
     margin-bottom: 8px;
   }
 
-  .mdc-textfield--dense + & {
+  .mdc-text-field--dense + & {
     margin-bottom: 4px;
   }
 
-  .mdc-textfield--focused + &:not(#{&}--validation-msg) {
+  .mdc-text-field--focused + &:not(#{&}--validation-msg) {
     opacity: 1;
   }
 
-  .mdc-textfield--box + & {
+  .mdc-text-field--box + & {
     margin-right: 16px;
     margin-left: 16px;
   }
@@ -685,7 +685,7 @@
   // stylelint-enable plugin/selector-bem-pattern
 }
 
-.mdc-textfield-helptext--persistent {
+.mdc-text-field-helptext--persistent {
   transition: none;
   opacity: 1;
   will-change: initial;
@@ -693,22 +693,22 @@
 
 // postcss-bem-linter: end
 
-.mdc-textfield--invalid {
-  + .mdc-textfield-helptext--validation-msg {
+.mdc-text-field--invalid {
+  + .mdc-text-field-helptext--validation-msg {
     opacity: 1;
-    color: $mdc-textfield-error-on-light;
+    color: $mdc-text-field-error-on-light;
   }
 
-  @include mdc-theme-dark(".mdc-textfield", true) {
-    + .mdc-textfield-helptext--validation-msg {
-      color: $mdc-textfield-error-on-dark;
+  @include mdc-theme-dark(".mdc-text-field", true) {
+    + .mdc-text-field-helptext--validation-msg {
+      color: $mdc-text-field-error-on-dark;
     }
   }
 }
 
 // mdc-form-field tweaks to align text field label correctly
 // stylelint-disable selector-max-type
-.mdc-form-field > .mdc-textfield + label {
+.mdc-form-field > .mdc-text-field + label {
   align-self: flex-start;
 }
 // stylelint-enable selector-max-type