material_components_web-sass 0.26.0 → 0.27.0

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

@@ -33,8 +33,8 @@
   @include mdc-radio-ink-color($mdc-radio-baseline-theme-color);
   @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color);
   @include mdc-ripple-surface;
-  @include mdc-ripple-color($mdc-radio-baseline-theme-color, $mdc-radio-ripple-opacity);
   @include mdc-ripple-radius($mdc-radio-ripple-radius);
+  @include mdc-states($mdc-radio-baseline-theme-color);
 
   display: inline-block;
   position: relative;

data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss

@@ -17,6 +17,7 @@
 // MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them.
 
 @import "@material/animation/variables";
+@import "./variables";
 
 @mixin mdc-ripple-keyframes_ {
   @keyframes mdc-ripple-fg-radius-in {
@@ -41,14 +42,14 @@
     }
 
     to {
-      opacity: 1;
+      opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
     }
   }
 
   @keyframes mdc-ripple-fg-opacity-out {
     from {
       animation-timing-function: linear;
-      opacity: 1;
+      opacity: var(--mdc-ripple-fg-opacity, map-get($mdc-ripple-dark-ink-opacities, "press"));
     }
 
     to {

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

@@ -15,8 +15,10 @@
 //
 
 @import "@material/animation/variables";
-@import "@material/theme/variables";
+@import "@material/theme/functions";
+@import "@material/theme/mixins";
 @import "./keyframes";
+@import "./variables";
 
 // Ensure that styles needed by any component using MDC Ripple are emitted, but only once.
 // (Every component using MDC Ripple imports these mixins, but doesn't necessarily import mdc-ripple.scss.)
@@ -53,63 +55,142 @@ $mdc-ripple-common-styles-emitted_: false !default;
   --mdc-ripple-fg-translate-end: 0;
   --mdc-ripple-fg-translate-start: 0;
 
-  will-change: transform, opacity;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &::before,
   &::after {
     position: absolute;
-    transition: opacity 250ms linear;
     border-radius: 50%;
+    opacity: 0;
     pointer-events: none;
     content: "";
+    will-change: transform, opacity;
+  }
+
+  &::before {
+    transition: opacity $mdc-states-wash-duration linear;
+  }
+
+  // Common styles for upgraded surfaces (some of these depend on custom properties set via JS or other mixins)
+
+  &.mdc-ripple-upgraded::after {
+    top: 0;
+    left: 0;
+    transform: scale(0);
+    transform-origin: center center;
+  }
+
+  &.mdc-ripple-upgraded--unbounded::after {
+    top: var(--mdc-ripple-top, 0);
+    left: var(--mdc-ripple-left, 0);
+  }
+
+  &.mdc-ripple-upgraded--foreground-activation::after {
+    animation:
+      $mdc-ripple-translate-duration mdc-ripple-fg-radius-in forwards,
+      $mdc-ripple-fade-in-duration mdc-ripple-fg-opacity-in forwards;
+  }
+
+  &.mdc-ripple-upgraded--foreground-deactivation::after {
+    animation: $mdc-ripple-fade-out-duration mdc-ripple-fg-opacity-out;
+    // Retain transform from mdc-ripple-fg-radius-in activation
+    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
   }
 }
 
-@mixin mdc-ripple-color($color: black, $opacity: .06) {
+@mixin mdc-states-base-color($color) {
   // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
   // cases where this mixin is used to override another inherited use of itself,
   // without needing to re-include mdc-ripple-surface.
   &::before,
   &::after {
-    @include mdc-ripple-color_($color, $opacity);
+    @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
+  }
+}
 
-    opacity: 0;
+@mixin mdc-states-hover-opacity($opacity) {
+  // Background wash styles, for both CSS-only and upgraded stateful surfaces
+  &:hover::before {
+    opacity: $opacity;
   }
+}
+
+@mixin mdc-states-focus-opacity($opacity, $has-nested-focusable-element: false) {
+  // Focus overrides hover by reusing the ::before pseudo-element.
+  // :focus-within generally works on non-MS browsers and matches when a *child* of the element has focus.
+  // It is useful for cases where a component has a focusable element within the root node, e.g. text field,
+  // but undesirable in general in case of nested stateful components.
+  // We use a modifier class for JS-enabled surfaces to support all use cases in all browsers.
+  $cssOnlyFocusSelector: if(
+    $has-nested-focusable-element,
+    "&:not(.mdc-ripple-upgraded):focus::before, &:not(.mdc-ripple-upgraded):focus-within::before",
+    "&:not(.mdc-ripple-upgraded):focus::before"
+  );
+
+  #{$cssOnlyFocusSelector},
+  &.mdc-ripple-upgraded--background-focused::before {
+    // Note that this duration is only effective on focus, not blur
+    transition-duration: 75ms;
+    opacity: $opacity;
+  }
+}
+
+@mixin mdc-states-press-opacity($opacity) {
+  // Styles for non-upgraded (CSS-only) stateful surfaces
 
-  // Note: when :active is applied, :focus is already applied, which will effectively double the effect.
   &:not(.mdc-ripple-upgraded) {
-    &:hover::before,
-    &:focus::before,
+    // Apply press additively by using the ::after pseudo-element
+    &::after {
+      transition: opacity $mdc-ripple-fade-out-duration linear;
+    }
+
     &:active::after {
-      transition-duration: 85ms;
-      opacity: .6;
+      transition-duration: $mdc-ripple-fade-in-duration;
+      opacity: $opacity;
     }
   }
 
-  &.mdc-ripple-upgraded--background-focused::before {
-    opacity: .99999;
+  &.mdc-ripple-upgraded {
+    --mdc-ripple-fg-opacity: $opacity;
   }
+}
 
-  &.mdc-ripple-upgraded--background-active-fill::before {
-    transition-duration: 120ms;
-    opacity: 1;
-  }
+// Simple mixin for base states which automatically selects opacity values based on whether the ink color is
+// light or dark.
+@mixin mdc-states($color: black, $has-nested-focusable-element: false) {
+  @include mdc-states-interactions_($color, $has-nested-focusable-element);
+}
 
-  // Foreground ripple styles
+// Simple mixin for activated states which automatically selects opacity values based on whether the ink color is
+// light or dark.
+@mixin mdc-states-activated($color, $has-nested-focusable-element: false) {
+  $opacity-map: mdc-states-opacities_($color);
+  $activated-opacity: map-get($opacity-map, "activated");
 
-  &.mdc-ripple-upgraded::after {
-    opacity: 0;
-  }
+  &--activated {
+    // Stylelint seems to think that '&' qualifies as a type selector here?
+    // stylelint-disable-next-line selector-max-type
+    &::before {
+      opacity: $activated-opacity;
+    }
 
-  &.mdc-ripple-upgraded--foreground-activation::after {
-    animation: 300ms mdc-ripple-fg-radius-in forwards, 83ms mdc-ripple-fg-opacity-in forwards;
+    @include mdc-states-interactions_($color, $has-nested-focusable-element, $activated-opacity);
   }
+}
 
-  &.mdc-ripple-upgraded--foreground-deactivation::after {
-    animation: 83ms mdc-ripple-fg-opacity-out;
-    // Retain transform from mdc-ripple-fg-radius-in activation
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+// Simple mixin for selected states which automatically selects opacity values based on whether the ink color is
+// light or dark.
+@mixin mdc-states-selected($color, $has-nested-focusable-element: false) {
+  $opacity-map: mdc-states-opacities_($color);
+  $selected-opacity: map-get($opacity-map, "selected");
+
+  &--selected {
+    // stylelint-disable-next-line selector-max-type
+    &::before {
+      opacity: $selected-opacity;
+    }
+
+    @include mdc-states-interactions_($color, $has-nested-focusable-element, $selected-opacity);
   }
 }
 
@@ -141,21 +222,78 @@ $mdc-ripple-common-styles-emitted_: false !default;
   }
 
   // Foreground ripple styles
+
   &.mdc-ripple-upgraded::after {
-    top: 0;
-    left: 0;
     width: var(--mdc-ripple-fg-size, $radius);
     height: var(--mdc-ripple-fg-size, $radius);
-    transform: scale(0);
-    transform-origin: center center;
   }
+}
 
-  &.mdc-ripple-upgraded--unbounded::after {
-    top: var(--mdc-ripple-top, 0);
-    left: var(--mdc-ripple-left, 0);
+//
+// Legacy
+//
+
+@mixin mdc-ripple-color($color: black, $opacity: .06) {
+  // Opacity styles are here (rather than in mdc-ripple-surface) to ensure that opacity is re-initialized for
+  // cases where this mixin is used to override another inherited use of itself,
+  // without needing to re-include mdc-ripple-surface.
+  &::before,
+  &::after {
+    @include mdc-ripple-color_($color, $opacity);
+
+    opacity: 0;
   }
+
+  // Note: when :active is applied, :focus is already applied, which will effectively double the effect.
+  &:not(.mdc-ripple-upgraded) {
+    &:hover::before,
+    &:focus::before,
+    &:active::after {
+      transition-duration: 85ms;
+      opacity: .6;
+    }
+  }
+
+  &.mdc-ripple-upgraded--background-focused::before {
+    opacity: .99999;
+  }
+
+  &.mdc-ripple-upgraded--background-active-fill::before {
+    transition-duration: 120ms;
+    opacity: 1;
+  }
+
+  &.mdc-ripple-upgraded::after {
+    // Set this to 1 for backwards compatibility with how the keyframes were originally coded for use with this mixin
+    --mdc-ripple-fg-opacity: 1;
+  }
+}
+
+//
+// Private
+//
+
+@function mdc-states-opacities_($color) {
+  $color-value: mdc-theme-prop-value($color);
+  $opacity-map: if(
+    mdc-theme-tone($color-value) == "light",
+    $mdc-ripple-light-ink-opacities,
+    $mdc-ripple-dark-ink-opacities
+  );
+
+  @return $opacity-map;
+}
+
+@mixin mdc-states-interactions_($color, $has-nested-focusable-element, $opacity-modifier: 0) {
+  $opacity-map: mdc-states-opacities_($color);
+
+  @include mdc-states-base-color($color);
+  @include mdc-states-hover-opacity(map-get($opacity-map, "hover") + $opacity-modifier);
+  @include mdc-states-focus-opacity(map-get($opacity-map, "focus") + $opacity-modifier, $has-nested-focusable-element);
+  @include mdc-states-press-opacity(map-get($opacity-map, "press") + $opacity-modifier);
 }
 
+// Note: This can be removed when we remove the legacy mdc-ripple-color mixin.
 @mixin mdc-ripple-color_($color, $opacity) {
   // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if type-of($color) == "color" {

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

@@ -14,5 +14,28 @@
 // limitations under the License.
 //
 
+$mdc-ripple-fade-in-duration: 75ms;
+$mdc-ripple-fade-out-duration: 150ms;
+$mdc-ripple-translate-duration: 225ms;
+$mdc-states-wash-duration: 15ms;
+
+$mdc-ripple-dark-ink-opacities: (
+  hover: .04,
+  focus: .12,
+  press: .16,
+  selected: .04,
+  activated: .12
+) !default;
+
+$mdc-ripple-light-ink-opacities: (
+  hover: .08,
+  focus: .24,
+  press: .32,
+  selected: .08,
+  activated: .24
+) !default;
+
+// Legacy
+
 $mdc-ripple-pressed-dark-ink-opacity: .16;
 $mdc-ripple-pressed-light-ink-opacity: .32;

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

@@ -23,7 +23,7 @@
 
 .mdc-ripple-surface {
   @include mdc-ripple-surface;
-  @include mdc-ripple-color;
+  @include mdc-states;
   @include mdc-ripple-radius;
 
   position: relative;
@@ -35,11 +35,11 @@
   }
 
   &--primary {
-    @include mdc-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity);
+    @include mdc-states(primary);
   }
 
   &--accent {
-    @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity);
+    @include mdc-states(secondary);
   }
 }
 

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

@@ -15,69 +15,60 @@
 //
 
 @import "@material/animation/functions";
+@import "@material/animation/variables";
 @import "@material/typography/mixins";
 @import "@material/theme/mixins";
+@import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 
 @mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
   background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E);
 }
 
+$mdc-select-arrow-padding: 26px;
+$mdc-select-label-padding: 16px;
+$mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timing-function;
+
 // postcss-bem-linter: define select
 .mdc-select {
-  $dd-arrow-padding: 24px;
-
   @include mdc-typography(subheading2);
   @include mdc-theme-prop(color, text-primary-on-light);
-  @include mdc-rtl-reflexive-box(padding, right, $dd-arrow-padding);
   @include mdc-select-dd-arrow-svg-bg_;
 
   display: inline-flex;
+  position: relative;
   align-items: center;
   justify-content: flex-start;
-  max-width: calc(100% - #{$dd-arrow-padding});
-  height: 32px;
-  transition:
-    mdc-animation-exit-temporary(border-bottom-color, 150ms),
-    mdc-animation-exit-temporary(background-color, 150ms);
+  box-sizing: border-box;
+  height: 56px;
   border: none;
-  border-bottom: 1px solid rgba(black, .12);
-  border-radius: 0;
-  background-color: transparent;
+  border-radius: 4px 4px 0 0;
+  outline: none;
   background-repeat: no-repeat;
-  background-position: right center;
-  font-family: Roboto, sans-serif;
-  font-size: .936rem;
+  background-position: right 10px center;
   cursor: pointer;
-  // Resets for <select> element
-  appearance: none;
+  overflow: visible;
 
-  &::-ms-expand {
-    display: none;
+  @include mdc-rtl {
+    background-position: left 10px center;
   }
 
   &:focus {
-    @include mdc-theme-prop(border-bottom-color, primary);
+    .mdc-select__bottom-line {
+      @include mdc-theme-prop(background-color, primary);
 
-    outline: none;
-    background-color: rgba(black, .06);
-  }
+      transform: scaleY(2);
 
-  @include mdc-rtl {
-    background-position: left center;
+      &::after {
+        opacity: 1;
+      }
+    }
   }
 
-  @include mdc-theme-dark {
-    @include mdc-theme-prop(color, text-primary-on-dark);
-    @include mdc-select-dd-arrow-svg-bg_(ffffff);
-
-    border-bottom: 1px solid rgba(white, .12);
-
-    &:focus {
-      @include mdc-theme-prop(border-bottom-color, primary);
+  @include mdc-theme-dark(".mdc-select") {
+    @include mdc-select-dd-arrow-svg-bg_("fff", .54);
 
-      background-color: rgba(white, .09);
-    }
+    background-color: rgba(white, .1);
   }
 
   &__menu {
@@ -89,12 +80,116 @@
     z-index: 4; // Should pop up above everything else. temporary-drawer is next highest at 3.
   }
 
+  &__surface {
+    @include mdc-typography(subheading2);
+    @include mdc-theme-prop(color, text-primary-on-light);
+    @include mdc-rtl-reflexive-property(padding, $mdc-select-label-padding, $mdc-select-arrow-padding, ".mdc-select");
+    @include mdc-ripple-surface;
+    @include mdc-ripple-radius;
+    @include mdc-states;
+
+    @include mdc-theme-dark(".mdc-select") {
+      @include mdc-states(white);
+    }
+
+    &::-ms-expand {
+      display: none;
+    }
+
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+    height: 56px;
+    border: none;
+    border-radius: 4px 4px 0 0;
+    outline: none;
+    background-color: rgba(black, .04);
+    // Resets for <select> element
+    appearance: none;
+    overflow: hidden;
+  }
+
+  &__label {
+    @include mdc-rtl-reflexive-position(left, 16px);
+
+    position: absolute;
+    bottom: 12px;
+    transform-origin: left top;
+    transition: $mdc-select-menu-transition;
+    color: rgba(black, .6);
+    pointer-events: none;
+    will-change: transform;
+
+    @include mdc-theme-dark(".mdc-select") {
+      @include mdc-theme-prop(color, text-secondary-on-dark);
+    }
+
+    @include mdc-rtl(".mdc-select") {
+      transform-origin: right top;
+    }
+
+    &--float-above {
+      transform: translateY(-40%) scale(.75, .75);
+    }
+  }
+
   &__selected-text {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 6px;
     transition:
       mdc-animation-exit-temporary(opacity, 125ms),
       mdc-animation-exit-temporary(transform, 125ms);
     white-space: nowrap;
     overflow: hidden;
+
+    @include mdc-theme-dark(".mdc-select") {
+      @include mdc-theme-prop(color, text-secondary-on-dark);
+    }
+  }
+
+  &__bottom-line {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(1);
+    transform-origin: bottom;
+    transition: $mdc-select-menu-transition;
+    background-color: rgba(black, .5);
+
+    &::after {
+      @include mdc-theme-prop(background-color, primary);
+
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      transform: scaleX(0);
+      transition: $mdc-select-menu-transition;
+      opacity: 0;
+      content: "";
+      z-index: 2;
+    }
+  }
+
+  &__bottom-line--active {
+    &::after {
+      transform: scaleX(1);
+      opacity: 1;
+    }
+  }
+
+  // Since the CSS only version's .mdc-select__surface element
+  // is an actual <select> element (and as such gets focus), this
+  // will only apply to CSS only selects
+  &__surface:focus ~ .mdc-select__bottom-line {
+    @include mdc-theme-prop(background-color, primary);
+
+    transform: scaleY(2);
   }
 }
 
@@ -106,6 +201,16 @@
       mdc-animation-enter(transform, 125ms, 125ms);
     opacity: 0;
   }
+
+  .mdc-select__bottom-line {
+    @include mdc-theme-prop(background-color, primary);
+
+    transform: scaleY(2);
+
+    &::after {
+      opacity: 1;
+    }
+  }
 }
 
 .mdc-select--disabled,
@@ -113,11 +218,17 @@
   @include mdc-theme-prop(color, text-disabled-on-light);
   @include mdc-select-dd-arrow-svg-bg_(000000, .38);
 
+  border-bottom-width: 1px;
   border-bottom-style: dotted;
+  opacity: .38;
   cursor: default;
   pointer-events: none;
   // Imitate native disabled functionality
   user-select: none;
+
+  .mdc-select__bottom-line {
+    display: none;
+  }
 }
 
 @each $sel in ("mdc-select--disabled", "mdc-select[disabled]") {
@@ -211,8 +322,8 @@
     .mdc-list-divider {
       margin-left: -16px;
     }
+    // stylelint-enable plugin/selector-bem-pattern
   }
-  // stylelint-enable plugin/selector-bem-pattern
 
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-item {