material_components_web-sass 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d55522dc5fb6cd66e3c953551a16eb9740b586f5
-  data.tar.gz: b29da9138be004b7ae8563d9ced77155765377ac
+  metadata.gz: 59f1f332cb247cd990daa0eb55e74a2c6ee66a97
+  data.tar.gz: 688dbe9025f3e7d289bb129e496f1a3d05acfeb4
 SHA512:
-  metadata.gz: 627f3366f81b281cf9fa9354c2ead3c7e7a49086f5b0cd0f214c3ff7433be386fdb18f982cd9d33e4598dc72a8c3731bb08cbff442810a0d0830840fcba92b7f
-  data.tar.gz: d9114795c64440c83610b67f41763fbdffa1433ab265bd34b7ceaeff9895ec987edd08f3736999600d7b9495a526e72ade71d17bafffcbfb5b597ad79d6ea5e8
+  metadata.gz: 383cb970896719d80de84c2cc8adab4e2525dce76cc747465e600f19c58c40cc0406648b8f55739eef0ed82d6fa3b44e7e89a74dc5ca4a6f3488f10dc8f10e5e
+  data.tar.gz: '08a151b718467b56e3c591f7e06f135a2b551190fca774a5986fcb719d3c0b897244f55a6e59d309e2d3f405cf10dbb7c2520b3305872ef36d82ff848044c20a'

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.3.0 (2017-01-24)
+
+- Update assets to match upstream version
+
+Library version: 
+
+- Material Components for the web v0.3.0
+- Material Icons v3.0.0
+
 ## 0.2.0 (2017-01-10)
 
 - Update assets to match upstream version

data/lib/material_components_web/sass/version.rb

@@ -1,5 +1,5 @@
 module MaterialComponentsWeb
   module Sass
-    VERSION = '0.2.0'.freeze
+    VERSION = '0.3.0'.freeze
   end
 end

data/vendor/assets/javascripts/material-components-web.js

@@ -316,7 +316,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 	  }]);
 
-	  function MDCComponent(root, foundation) {
+	  function MDCComponent(root) {
+	    var foundation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getDefaultFoundation();
+
 	    _classCallCheck(this, MDCComponent);
 
 	    this.root_ = root;
@@ -326,7 +328,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    this.initialize.apply(this, args);
-	    this.foundation_ = foundation === undefined ? this.getDefaultFoundation() : foundation;
+	    this.foundation_ = foundation;
 	    this.foundation_.init();
 	    this.initialSyncWithDOM();
 	  }
@@ -1457,6 +1459,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    _this.cancelBgBounded_ = function () {};
 	    _this.cancelFgBounded_ = function () {};
 	    _this.cancelFgUnbounded_ = function () {};
+	    _this.unboundedCoords_ = {
+	      left: 0,
+	      top: 0
+	    };
 	    return _this;
 	  }
 
@@ -1586,8 +1592,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	          VAR_XF_ORIGIN_X = _MDCRippleFoundation$3.VAR_XF_ORIGIN_X,
 	          VAR_XF_ORIGIN_Y = _MDCRippleFoundation$3.VAR_XF_ORIGIN_Y;
 
-	      this.adapter_.updateCssVariable(VAR_XF_ORIGIN_X, left + 'px');
-	      this.adapter_.updateCssVariable(VAR_XF_ORIGIN_Y, top + 'px');
+	      this.adapter_.updateCssVariable(VAR_XF_ORIGIN_X, left - this.unboundedCoords_.left + 'px');
+	      this.adapter_.updateCssVariable(VAR_XF_ORIGIN_Y, top - this.unboundedCoords_.top + 'px');
 	      this.adapter_.addClass(FG_UNBOUNDED_ACTIVATION);
 	    }
 	  }, {
@@ -1806,10 +1812,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.adapter_.updateCssVariable(VAR_FG_UNBOUNDED_TRANSFORM_DURATION, this.xfDuration_ + 'ms');
 
 	      if (this.adapter_.isUnbounded()) {
-	        var left = -(fgSize / 2) + this.frame_.width / 2;
-	        var top = -(fgSize / 2) + this.frame_.height / 2;
-	        this.adapter_.updateCssVariable(VAR_LEFT, left + 'px');
-	        this.adapter_.updateCssVariable(VAR_TOP, top + 'px');
+	        this.unboundedCoords_ = {
+	          left: Math.round(-(fgSize / 2) + this.frame_.width / 2),
+	          top: Math.round(-(fgSize / 2) + this.frame_.height / 2)
+	        };
+	        this.adapter_.updateCssVariable(VAR_LEFT, this.unboundedCoords_.left + 'px');
+	        this.adapter_.updateCssVariable(VAR_TOP, this.unboundedCoords_.top + 'px');
 	      }
 	    }
 	  }]);
@@ -3280,12 +3288,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	        registerInputBlurHandler: function registerInputBlurHandler(handler) {
 	          return _this3.input_.addEventListener('blur', handler);
 	        },
+	        registerInputInputHandler: function registerInputInputHandler(handler) {
+	          return _this3.input_.addEventListener('input', handler);
+	        },
+	        registerInputKeydownHandler: function registerInputKeydownHandler(handler) {
+	          return _this3.input_.addEventListener('keydown', handler);
+	        },
 	        deregisterInputFocusHandler: function deregisterInputFocusHandler(handler) {
 	          return _this3.input_.removeEventListener('focus', handler);
 	        },
 	        deregisterInputBlurHandler: function deregisterInputBlurHandler(handler) {
 	          return _this3.input_.removeEventListener('blur', handler);
 	        },
+	        deregisterInputInputHandler: function deregisterInputInputHandler(handler) {
+	          return _this3.input_.removeEventListener('input', handler);
+	        },
+	        deregisterInputKeydownHandler: function deregisterInputKeydownHandler(handler) {
+	          return _this3.input_.removeEventListener('keydown', handler);
+	        },
 	        getNativeInput: function getNativeInput() {
 	          return _this3.input_;
 	        }
@@ -3429,6 +3449,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        deregisterInputFocusHandler: function deregisterInputFocusHandler() /* handler: EventListener */{},
 	        registerInputBlurHandler: function registerInputBlurHandler() /* handler: EventListener */{},
 	        deregisterInputBlurHandler: function deregisterInputBlurHandler() /* handler: EventListener */{},
+	        registerInputInputHandler: function registerInputInputHandler() /* handler: EventListener */{},
+	        deregisterInputInputHandler: function deregisterInputInputHandler() /* handler: EventListener */{},
+	        registerInputKeydownHandler: function registerInputKeydownHandler() /* handler: EventListener */{},
+	        deregisterInputKeydownHandler: function deregisterInputKeydownHandler() /* handler: EventListener */{},
 	        setHelptextAttr: function setHelptextAttr() /* name: string, value: string */{},
 	        removeHelptextAttr: function removeHelptextAttr() /* name: string, value: string */{},
 	        getNativeInput: function getNativeInput() {
@@ -3446,12 +3470,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var _this = _possibleConstructorReturn(this, (MDCTextfieldFoundation.__proto__ || Object.getPrototypeOf(MDCTextfieldFoundation)).call(this, _extends(MDCTextfieldFoundation.defaultAdapter, adapter)));
 
+	    _this.receivedUserInput_ = false;
 	    _this.inputFocusHandler_ = function () {
 	      return _this.activateFocus_();
 	    };
 	    _this.inputBlurHandler_ = function () {
 	      return _this.deactivateFocus_();
 	    };
+	    _this.inputInputHandler_ = function () {
+	      return _this.autoCompleteFocus_();
+	    };
+	    _this.inputKeydownHandler_ = function () {
+	      return _this.receivedUserInput_ = true;
+	    };
 	    return _this;
 	  }
 
@@ -3461,6 +3492,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.adapter_.addClass(MDCTextfieldFoundation.cssClasses.UPGRADED);
 	      this.adapter_.registerInputFocusHandler(this.inputFocusHandler_);
 	      this.adapter_.registerInputBlurHandler(this.inputBlurHandler_);
+	      this.adapter_.registerInputInputHandler(this.inputInputHandler_);
+	      this.adapter_.registerInputKeydownHandler(this.inputKeydownHandler_);
 	    }
 	  }, {
 	    key: 'destroy',
@@ -3468,6 +3501,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.adapter_.removeClass(MDCTextfieldFoundation.cssClasses.UPGRADED);
 	      this.adapter_.deregisterInputFocusHandler(this.inputFocusHandler_);
 	      this.adapter_.deregisterInputBlurHandler(this.inputBlurHandler_);
+	      this.adapter_.deregisterInputInputHandler(this.inputInputHandler_);
+	      this.adapter_.deregisterInputKeydownHandler(this.inputKeydownHandler_);
 	    }
 	  }, {
 	    key: 'activateFocus_',
@@ -3480,6 +3515,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.adapter_.addClassToLabel(LABEL_FLOAT_ABOVE);
 	      this.showHelptext_();
 	    }
+	  }, {
+	    key: 'autoCompleteFocus_',
+	    value: function autoCompleteFocus_() {
+	      if (!this.receivedUserInput_) {
+	        this.activateFocus_();
+	      }
+	    }
 	  }, {
 	    key: 'showHelptext_',
 	    value: function showHelptext_() {
@@ -3501,6 +3543,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	      this.adapter_.removeClass(FOCUSED);
 	      if (!input.value) {
 	        this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
+	        this.receivedUserInput_ = false;
 	      }
 	      if (isValid) {
 	        this.adapter_.removeClass(INVALID);

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

@@ -1,27 +1,27 @@
-/**
- * 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.
- */
+//
+// 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 "@material/animation/variables";
 @import "@material/animation/functions";
 @import "@material/elevation/mixins";
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
-/* postcss-bem-linter: define button */
-/* stylelint-disable declaration-property-unit-whitelist */
+// postcss-bem-linter: define button
 .mdc-button {
   @include mdc-typography(body2);
   @include mdc-theme-prop(color, text-primary-on-light);
@@ -35,21 +35,22 @@
   border-radius: 2px;
   outline: none;
   background: transparent;
-  font-size: 14px; /* Override font to specifically be px as spec defined pt */
+  font-size: 14px; // Override font to specifically be px as spec defined pt
   font-weight: 500;
-  line-height: 36px; /* Override line-height so text aligns centered */
+  line-height: 36px; // Override line-height so text aligns centered
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
   box-sizing: border-box;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(black, .18);
 
   @include mdc-theme-dark {
     @include mdc-theme-prop(color, text-primary-on-dark);
+    -webkit-tap-highlight-color: rgba(white, .18);
   }
 
-  /* postcss-bem-linter: ignore */
+  // postcss-bem-linter: ignore
   &::before {
     position: absolute;
     top: 0;
@@ -71,11 +72,9 @@
   &:active::before {
     transition: mdc-animation-enter(opacity, 120ms);
 
-    /*
-      Slightly darker value for visual distinction.
-      This allows a full base that has distinct modes.
-      Progressive enhancement with ripples will provide complete button spec alignment.
-    */
+    // Slightly darker value for visual distinction.
+    // This allows a full base that has distinct modes.
+    // Progressive enhancement with ripples will provide complete button spec alignment.
     opacity: .18;
   }
 
@@ -98,7 +97,7 @@
 
   &--dense {
     height: 32px;
-    font-size: .8125rem; /* 13sp */
+    font-size: .8125rem; // 13sp
     line-height: 32px;
   }
 
@@ -115,15 +114,12 @@
     @include mdc-theme-dark(".mdc-button") {
       @include mdc-theme-prop(background-color, primary);
 
-      /* postcss-bem-linter: ignore */
+      // postcss-bem-linter: ignore
       &::before {
-        /*
-          We are explicitly not fully adhering to Material Design here.
-          This should be the 700-shade when active instead of a black shade.
-          Due to the complexity involved in adhering fully it is being ignored.
-          Instead re-using the existing architecture for shading works just fine.
-          - With <3 from Garbee
-        */
+        // We are explicitly not fully adhering to Material Design here.
+        // This should be the 700-shade when active instead of a black shade.
+        // Due to the complexity involved in adhering fully it is being ignored.
+        // Instead re-using the existing architecture for shading works just fine.
         color: black;
       }
     }
@@ -136,12 +132,12 @@
       @include mdc-theme-prop(color, primary);
     }
 
-    /* postcss-bem-linter: ignore */
+    // postcss-bem-linter: ignore
     &.mdc-button--raised {
       @include mdc-theme-prop(background-color, primary);
       @include mdc-theme-prop(color, text-primary-on-primary);
 
-      /* postcss-bem-linter: ignore */
+      // postcss-bem-linter: ignore
       &::before {
         color: black;
       }
@@ -155,12 +151,12 @@
       @include mdc-theme-prop(color, accent);
     }
 
-    /* postcss-bem-linter: ignore */
+    // postcss-bem-linter: ignore
     &.mdc-button--raised {
       @include mdc-theme-prop(background-color, accent);
       @include mdc-theme-prop(color, text-primary-on-accent);
 
-      /* postcss-bem-linter: ignore */
+      // postcss-bem-linter: ignore
       &::before {
         color: black;
       }
@@ -171,7 +167,6 @@
     padding: 0 8px;
   }
 
-  /* stylelint-disable selector-no-type */
   fieldset:disabled &,
   &:disabled {
     color: rgba(0, 0, 0, .26);
@@ -196,4 +191,33 @@
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
+
+.mdc-button.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+
+  overflow: hidden;
+
+  @include mdc-theme-dark(".mdc-button", true) {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
+  }
+
+  @each $theme-style in (primary, accent) {
+    &.mdc-button--#{$theme-style} {
+      @include mdc-ripple-bg((pseudo: "::before", theme-style: $theme-style, opacity: .12));
+      @include mdc-ripple-fg((pseudo: "::after", theme-style: $theme-style, opacity: .12));
+    }
+  }
+}
+
+.mdc-button--raised.mdc-ripple-upgraded {
+  @each $theme-style in (primary, accent) {
+    &.mdc-button--#{$theme-style} {
+      @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .14));
+      @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .14));
+    }
+  }
+}

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

@@ -19,9 +19,6 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
-/* All variables are local, so disable pattern checking. */
-/* stylelint-disable scss/dollar-variable-pattern */
-
 @mixin mdc-drawer-toolbar-spacer_() {
   &__toolbar-spacer {
     display: flex;
@@ -141,5 +138,3 @@
   @include mdc-drawer-header_;
   @include mdc-drawer-list_;
 }
-
-/* stylelint-enable scss/dollar-variable-pattern */

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

@@ -1,25 +1,24 @@
-/**
- * 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.
- */
+// 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 "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/elevation/mixins";
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 
-/* postcss-bem-linter: define fab */
+// postcss-bem-linter: define fab
 .mdc-fab {
   display: inline-flex;
   position: relative;
@@ -36,7 +35,7 @@
   fill: currentColor;
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, .18);
 
   @include mdc-theme-prop(background-color, accent);
   @include mdc-theme-prop(color, text-primary-on-accent);
@@ -98,17 +97,15 @@
     border: 0;
   }
 
-  /*
-    This allows for using SVGs within them to align properly in all browsers.
-    Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
-  */
+  // This allows for using SVGs within them to align properly in all browsers.
+  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
 
-  /* stylelint-disable selector-no-type */
-
-  /* postcss-bem-linter: ignore */
+  // stylelint-disable selector-no-type
+  // postcss-bem-linter: ignore
   > svg {
     width: 100%;
   }
+  // stylelint-enable selector-no-type
 
   fieldset:disabled &,
   &:disabled {
@@ -126,4 +123,17 @@
   width: 100%;
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
+
+.mdc-fab.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+  @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+
+  overflow: hidden;
+}
+
+.mdc-fab--plain.mdc-ripple-upgraded {
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+}

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

@@ -1,51 +1,44 @@
-/**
- * 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.
- */
-
+// 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 "@material/ripple/mixins";
 @import "@material/rtl/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/typography/variables";
 
-/**
- * Sets the width and height of a detail element to the specified dimension.
- */
+$mdc-list-side-padding: 16px;
+
+// Sets the width and height of a detail element to the specified dimension.
 @mixin mdc-list-detail-size_($size) {
   width: $size;
   height: $size;
 }
 
-/**
- * Sets the width and height of the start detail element, as well as calculates the margins for
- * the start detail element such that the text is always offset by 72px, which is defined within
- * the spec.
- */
+// Sets the width and height of the start detail element, as well as calculates the margins for
+// the start detail element such that the text is always offset by 72px, which is defined within
+// the spec.
 @mixin mdc-list-start-detail-size_($size) {
-  /* stylelint-disable scss/dollar-variable-pattern */
-
   $text-offset: 72px;
-  $side-padding: 16px;
+  $side-padding: $mdc-list-side-padding;
   $margin-value: $text-offset - $side-padding - $size;
 
   @include mdc-list-detail-size_($size);
   @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
-
-  /* stylelint-enable scss/dollar-variable-pattern */
 }
 
-/* postcss-bem-linter: define list */
+// postcss-bem-linter: define list
 
 .mdc-list {
   @include mdc-typography(subheading2);
@@ -56,10 +49,10 @@
   }
 
   margin: 0;
-  padding: 8px 16px 0;
+  padding: 8px $mdc-list-side-padding 0;
 
-  /* According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
-   * same as for subheading1. */
+  // According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
+  // same as for subheading1.
   line-height: map-get(map-get($mdc-typography-styles, subheading1), line-height);
   list-style-type: none;
 }
@@ -69,9 +62,9 @@
   font-size: .812rem;
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
-/* postcss-bem-linter: define list-item */
+// postcss-bem-linter: define list-item
 
 .mdc-list-item {
   display: flex;
@@ -85,7 +78,7 @@
 
   &__end-detail {
     @include mdc-list-detail-size_(24px);
-    @include mdc-rtl-reflexive-property(margin, auto, 16px, ".mdc-list-item");
+    @include mdc-rtl-reflexive-property(margin, auto, $mdc-list-side-padding, ".mdc-list-item");
   }
 
   &__text {
@@ -100,16 +93,16 @@
         @include mdc-theme-prop(color, text-secondary-on-dark);
       }
 
-      /* Match the font size to the primary text when dense */
-      /* stylelint-disable plugin/selector-bem-pattern */
+      // Match the font size to the primary text when dense
+      // stylelint-disable plugin/selector-bem-pattern
       .mdc-list--dense & {
         font-size: inherit;
       }
-      /* stylelint-enable plugin/selector-bem-pattern */
+      // stylelint-enable plugin/selector-bem-pattern
     }
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-list--dense & {
     height: 40px;
 
@@ -147,12 +140,43 @@
   .mdc-list--two-line.mdc-list--dense & {
     height: 60px;
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end //
+
+// Override anchor tag styles for the use-case of a list being used for navigation
+// stylelint-disable selector-no-type,selector-no-qualifying-type
+a.mdc-list-item {
+  color: inherit;
+  text-decoration: none;
+}
+// stylelint-enable selector-no-type,selector-no-qualifying-type
+
+.mdc-list-item.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-ripple-fg((pseudo: "::after"));
+
+  position: relative;
+  // Cause the upgraded list item to cover the entirety of the list, causing ripples to emanate
+  // across the entire list element.
+  left: $mdc-list-side-padding * -1;
+  width: calc(100% + #{$mdc-list-side-padding * 2});
+  padding: 0 $mdc-list-side-padding;
+  overflow: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  @include mdc-theme-dark(".mdc-list") {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .12));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .12));
+  }
+}
 
-/* postcss-bem-linter: define list-divider */
+// postcss-bem-linter: define list-divider
 
 .mdc-list-divider {
   height: 0;
@@ -166,19 +190,19 @@
 }
 
 .mdc-list-divider--inset {
-  $mdc-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ 16px;
+  $mdc-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ $mdc-list-side-padding;
 
   @include mdc-rtl-reflexive-box(margin, left, $mdc-list-divider-inset-amt, ".mdc-list-group");
 
   width: calc(100% - #{$mdc-list-divider-inset-amt});
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
-/* postcss-bem-linter: define list-group */
+// postcss-bem-linter: define list-group
 
 .mdc-list-group {
-  padding: 0 16px;
+  padding: 0 $mdc-list-side-padding;
 
   &__subheader {
     $mdc-list-subheader-virtual-height: 3rem;
@@ -196,12 +220,12 @@
     margin: $mdc-list-subheader-margin 0;
   }
 
-  /* Reset padding on mdc-list since it's already accounted for by the list group. */
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // Reset padding on mdc-list since it's already accounted for by the list group.
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-list {
     padding: 0;
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end

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

@@ -46,7 +46,6 @@
 }
 
 @mixin mdc-ripple-color_($config) {
-  /* stylelint-disable scss/dollar-variable-pattern */
   $base-color: map-get($config, base-color);
   $opacity: map-get($config, opacity);
   $theme-style: map-get($config, theme-style);
@@ -55,7 +54,6 @@
   @if ($theme-style) {
     $theme-value: map-get($mdc-theme-property-values, $theme-style);
     $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
-    /* stylelint-enable scss/dollar-variable-pattern */
 
     background-color: rgba($theme-value, $opacity);
 
@@ -72,9 +70,7 @@
 }
 
 @mixin mdc-ripple-bg-base_($config) {
-  /* stylelint-disable scss/dollar-variable-pattern */
   $radius: map-get($config, radius);
-  /* stylelint-enable scss/dollar-variable-pattern */
 
   @include mdc-ripple-color_($config);
 
@@ -91,10 +87,8 @@
 }
 
 @mixin mdc-ripple-bg($config: ()) {
-  /* stylelint-disable scss/dollar-variable-pattern */
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
-  /* stylelint-enable scss/dollar-variable-pattern */
 
   /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
   @if ($pseudo) {
@@ -146,10 +140,8 @@
 }
 
 @mixin mdc-ripple-fg($config: ()) {
-  /* stylelint-disable scss/dollar-variable-pattern */
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
-  /* stylelint-enable scss/dollar-variable-pattern */
 
   /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
   @if ($pseudo) {

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

@@ -131,8 +131,6 @@
  * trying to flip the values, use mdc-rtl-reflexive-property().
  */
 @mixin mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector: null) {
-  /* stylelint-disable scss/dollar-variable-pattern */
-
   @if (index((right, left), $default-direction) == null) {
     @error "Invalid default direction #{default-direction}. Please specifiy either right or left";
   }
@@ -146,8 +144,6 @@
   }
 
   @include mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector);
-
-  /* stylelint-enable scss/dollar-variable-pattern */
 }
 
 /**
@@ -177,14 +173,10 @@
  * A 4th optional $root-selector argument can be given, which will be passed to `mdc-rtl`.
  */
 @mixin mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector: null) {
-  /* stylelint-disable scss/dollar-variable-pattern */
-
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
 
   @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector);
-
-  /* stylelint-enable scss/dollar-variable-pattern */
 }
 
 /**
@@ -215,8 +207,6 @@
  * An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
  */
 @mixin mdc-rtl-reflexive-position($pos, $value, $root-selector: null) {
-  /* stylelint-disable scss/dollar-variable-pattern */
-
   @if (index((right, left), $pos) == null) {
     @error "Invalid position #{pos}. Please specifiy either right or left";
   }
@@ -230,8 +220,6 @@
   }
 
   @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector);
-
-  /* stylelint-enable scss/dollar-variable-pattern */
 }
 
 @mixin mdc-rtl-reflexive_(

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

@@ -20,9 +20,7 @@
 @import "@material/rtl/mixins";
 
 @mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
-  // stylelint-disable scss/dollar-variable-pattern
   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);
-  // stylelint-enable scss/dollar-variable-pattern
 }
 
 // postcss-bem-linter: define select
@@ -177,3 +175,97 @@
     }
   }
 }
+
+// postcss-bem-linter: define multi-select
+.mdc-multi-select {
+  appearance: none;
+  width: 250px;
+  padding: 0;
+  border: 1px solid;
+
+  @include mdc-theme-prop(border-color, text-hint-on-light);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(border-color, text-hint-on-dark);
+  }
+
+  outline: none;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-group {
+    margin: 16px 0 0;
+    padding: 0 0 0 16px;
+
+    @include mdc-theme-prop(color, text-hint-on-light);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(color, text-hint-on-dark);
+    }
+
+    font-weight: normal;
+
+    &:last-child {
+      margin-bottom: 16px;
+    }
+
+    .mdc-list-divider {
+      margin-left: -16px;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-item {
+    margin: 0 0 0 -16px;
+    padding: 0 16px;
+
+    @include mdc-theme-prop(color, text-primary-on-light);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    &:first-child {
+      margin-top: 12px;
+    }
+
+    &:last-child {
+      margin-bottom: 8px;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-item:checked {
+    background-color: rgba(black, .12);
+
+    @include mdc-theme-prop(background-color, background);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(background-color, text-primary-on-dark);
+    }
+
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
+.mdc-multi-select:focus .mdc-list-item:checked {
+  @include mdc-theme-prop(background-color, primary);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(background-color, text-primary-on-dark);
+  }
+}
+
+// height for option elements cannot be controlled
+// with CSS. Use the font-size rule instead.
+
+// stylelint-disable plugin/selector-bem-pattern
+.mdc-list-divider {
+  margin-bottom: 8px;
+  padding-top: 8px;
+  font-size: 0;
+}
+// stylelint-enable plugin/selector-bem-pattern
+
+// postcss-bem-linter: end

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

@@ -32,7 +32,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   @return #{$property} 180ms $mdc-animation-fast-out-slow-in-timing-function;
 }
 
-/* postcss-bem-linter: define textfield */
+// postcss-bem-linter: define textfield
 .mdc-textfield {
   @include mdc-typography-base;
   // We use only a subset of the MDC typography values here as changing things such as line-height
@@ -97,13 +97,13 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     transition: mdc-textfield-transition(transform), mdc-textfield-transition(color);
     cursor: text;
 
-    /* stylelint-disable plugin/selector-bem-pattern */
+    // stylelint-disable plugin/selector-bem-pattern
     @include mdc-rtl(".mdc-textfield") {
       right: 0;
       left: auto;
       transform-origin: right top;
     }
-    /* stylelint-enable plugin/selector-bem-pattern */
+    // stylelint-enable plugin/selector-bem-pattern
 
     @include mdc-theme-dark(".mdc-textfield") {
       @include mdc-theme-prop(color, text-hint-on-dark);
@@ -116,6 +116,16 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 }
 
+// Move label when textfield gets autofilled in Chrome
+.mdc-textfield__input {
+  // stylelint-disable plugin/selector-bem-pattern
+  &:-webkit-autofill + .mdc-textfield__label {
+    transform: translateY(-100%) scale(.75, .75);
+    cursor: auto;
+  }
+  // stylelint-enable plugin/selector-bem-pattern  
+}
+
 .mdc-textfield--upgraded:not(.mdc-textfield--fullwidth) {
   display: inline-flex;
   position: relative;
@@ -229,13 +239,13 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     border-bottom: 1px dotted $mdc-textfield-disabled-border-on-dark;
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-textfield__input,
   .mdc-textfield__label,
   & + .mdc-textfield-helptext {
     @include mdc-theme-prop(color, text-disabled-on-light);
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-textfield__input,
   .mdc-textfield__label {
@@ -245,11 +255,11 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 
   @include mdc-theme-dark(".mdc-textfield", true) {
-    /* stylelint-disable plugin/selector-bem-pattern */
+    // stylelint-disable plugin/selector-bem-pattern
     + .mdc-textfield-helptext {
       @include mdc-theme-prop(colr, text-disabled-on-dark);
     }
-    /* stylelint-enable plugin/selector-bem-pattern */
+    // stylelint-enable plugin/selector-bem-pattern
   }
 
   .mdc-textfield__label {
@@ -274,11 +284,9 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 }
 
 .mdc-textfield--multiline {
-  /* stylelint-disable scss/dollar-variable-pattern */
   $padding-inset: 4px;
   $label-offset-y: $padding-inset + 2;
   $label-offset-x: $padding-inset;
-  /* stylelint-enable scss/dollar-variable-pattern */
 
   display: flex;
   height: initial;
@@ -288,7 +296,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     content: initial;
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
 
   .mdc-textfield__input {
     padding: $padding-inset;
@@ -344,7 +352,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
       }
     }
   }
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-textfield--fullwidth {
@@ -356,7 +364,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   border-bottom: 1px solid $mdc-textfield-divider-on-light;
   outline: none;
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
 
   &:not(.mdc-textfield--multiline) {
     height: 56px;
@@ -394,7 +402,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     }
   }
 
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-textfield__input {
     width: 100%;
@@ -450,9 +458,9 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
-/* postcss-bem-linter: define textfield-helptext */
+// postcss-bem-linter: define textfield-helptext
 
 .mdc-textfield-helptext {
   @include mdc-theme-prop(color, text-hint-on-light);
@@ -467,7 +475,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     @include mdc-theme-prop(color, text-hint-on-dark);
   }
 
-  /* stylelint-disable plugin/selector-bem-pattern */
+  // stylelint-disable plugin/selector-bem-pattern
   .mdc-textfield + & {
     margin-bottom: 8px;
   }
@@ -480,7 +488,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
     opacity: 1;
   }
 
-  /* stylelint-enable plugin/selector-bem-pattern */
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-textfield-helptext--persistent {
@@ -489,7 +497,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   will-change: initial;
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
 .mdc-textfield--invalid {
   + .mdc-textfield-helptext--validation-msg {
@@ -505,8 +513,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 }
 
 // mdc-form-field tweaks to align text field label correctly
-/* stylelint-disable selector-no-type */
+// stylelint-disable selector-no-type
 .mdc-form-field > .mdc-textfield + label {
   align-self: flex-start;
 }
-/* stylelint-enable selector-no-type */
+// stylelint-enable selector-no-type

data/vendor/assets/stylesheets/@material/theme/_functions.scss

@@ -16,9 +16,6 @@
 
 @import "./constants";
 
-/* All variables are local, so disable pattern checking. */
-/* stylelint-disable scss/dollar-variable-pattern */
-
 /**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@@ -60,5 +57,3 @@
     @return "light";
   }
 }
-
-/* stylelint-enable scss/dollar-variable-pattern */

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

@@ -16,9 +16,6 @@
 
 @import "./variables";
 
-/* All variables are local, so disable pattern checking. */
-/* stylelint-disable scss/dollar-variable-pattern */
-
 /**
  * Applies the correct theme color style to the specified property.
  * $property is typically color or background-color, but can be any CSS property that accepts color values.
@@ -100,5 +97,3 @@
     }
   }
 }
-
-/* stylelint-enable scss/dollar-variable-pattern */

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

@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-// All variables are local, so disable pattern checking.
-// stylelint-disable scss/dollar-variable-pattern
-
 @import "./variables";
 
 @mixin mdc-typography-base {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-01-09 00:00:00.000000000 Z
+date: 2017-01-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -187,7 +187,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.2
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: Material Components for the web (MDC-Web) with Material Icons and Roboto