Merge branch 'mdl-1.1'

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "material-design-lite",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "homepage": "https://github.com/google/material-design-lite",
   "authors": [
     "Material Design Lite team"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-design-lite",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Material Design Components in CSS, JS and HTML",
   "private": true,
   "license": "Apache-2.0",

src/button/README.md

@@ -55,5 +55,5 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
 | `mdl-button--accent` | Applies *accent* color display effect | Colors are defined in `material.min.css` |
 | `mdl-js-ripple-effect` | Applies *ripple* click effect | May be used in combination with any other classes |
 
->**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`. Alternatively, the `mdl-button--disabled` class can be used to achieve the same result.
+>**Note:** Disabled versions of all the available button types are provided, and are invoked with the standard HTML boolean attribute `disabled`. `<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>`. Alternatively, the `mdl-button--disabled` class can be used to achieve the same style but it does not disable the functionality of the element.
 >This attribute may be added or removed programmatically via scripting.

src/data-table/README.md

@@ -147,36 +147,6 @@ A data-table without select checkboxes containing mostly text data.
 </table>
 ```
 
-A table that has name and values for the checkboxes.
-```html
-<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable">
-  <thead>
-    <tr>
-      <th class="mdl-data-table__cell--non-numeric">Material</th>
-      <th>Quantity</th>
-      <th>Unit price</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="acrylic">
-      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
-      <td>250</td>
-      <td>$2.90</td>
-    </tr>
-    <tr data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="plywood">
-      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
-      <td>50</td>
-      <td>$1.25</td>
-    </tr>
-    <tr data-mdl-data-table-selectable-name="materials[]" data-mdl-data-table-selectable-value="laminate">
-      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
-      <td>10</td>
-      <td>$12.35</td>
-    </tr>
-  </tbody>
-</table>
-```
-
 ## Configuration options
 
 The MDL CSS classes apply various predefined visual and behavioral enhancements to the data-table. The table below lists the available classes and their effects.

src/mdlComponentHandler.js

@@ -248,12 +248,10 @@ componentHandler = (function() {
    */
   function upgradeElementsInternal(elements) {
     if (!Array.isArray(elements)) {
-      if (typeof elements.item === 'function') {
-        elements = Array.prototype.slice.call(
-          /** @type {Array.<!Element>|!NodeList|!HTMLCollection} */ (elements)
-        );
-      } else {
+      if (elements instanceof Element) {
         elements = [elements];
+      } else {
+        elements = Array.prototype.slice.call(elements);
       }
     }
     for (var i = 0, n = elements.length, element; i < n; i++) {
@@ -372,6 +370,7 @@ componentHandler = (function() {
         ev = document.createEvent('Events');
         ev.initEvent('mdl-componentdowngraded', true, true);
       }
+      component.element_.dispatchEvent(ev);
     }
   }
 

src/snackbar/_snackbar.scss

@@ -29,7 +29,7 @@
   justify-content: space-between;
   font-family: $preferred_font;
   will-change: transform;
-  transform: translate(-50%, 80px);
+  transform: translate(0, 80px);
   transition: transform 0.25s $animation-curve-fast-out-linear-in;
   pointer-events: none;
   @media(max-width: $snackbar-tablet-breakpoint - 1) {
@@ -42,11 +42,16 @@
     min-width: 288px;
     max-width: 568px;
     border-radius: 2px;
+    transform: translate(-50%, 80px);
   }
   &--active {
-    transform: translate(-50%, 0);
+    transform: translate(0, 0);
     pointer-events: auto;
     transition: transform 0.25s $animation-curve-linear-out-slow-in;
+
+    @media(min-width: $snackbar-tablet-breakpoint) {
+      transform: translate(-50%, 0);
+    }
   }
 
   &__text {