Merge branch 'master' into chore/release

Author: asyncliz

docs/migrating-from-mdl.md

@@ -99,10 +99,10 @@ MDC Web:
 
 ```html
 <label class="mdc-text-field">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 
@@ -126,10 +126,10 @@ element, with the component’s class name as the value. For example:
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 

docs/open_source/rotation.md

@@ -1 +1 @@
-@use './material-components-web';
+@use "./material-components-web";

packages/material-components-web/index.scss

@@ -33,10 +33,10 @@ properly.
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 
 <!-- at the bottom of the page -->
@@ -54,10 +54,10 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
 
 ```html
 <label class="mdc-text-field" data-mdc-auto-init="MDCTextField">
-  <div class="mdc-text-field__ripple"></div>
+  <span class="mdc-text-field__ripple"></span>
   <input class="mdc-text-field__input" type="text" aria-labelledby="label">
   <span id="label" class="mdc-floating-label">Input Label</span>
-  <div class="mdc-line-ripple"></div>
+  <span class="mdc-line-ripple"></span>
 </label>
 ```
 

packages/mdc-auto-init/README.md

@@ -1,4 +1,3 @@
-@use "sass:list";
 //
 // Copyright 2018 Google Inc.
 //
@@ -21,6 +20,8 @@
 // THE SOFTWARE.
 //
 
+@use "sass:list";
+
 // This variable is not intended to be overridden externally; it uses !default to avoid being reset
 // every time this file is imported.
 $styles-emitted_: () !default;

packages/mdc-base/_mixins.scss

@@ -1,4 +1,3 @@
-
 //
 // Copyright 2017 Google Inc.
 //

packages/mdc-chips/mdc-chips.scss

@@ -20,7 +20,7 @@
 
 $breakpoints: (
   desktop: 840px,
-  tablet: 480px,
+  tablet: 600px,
   phone: 0px
 ) !default;
 

packages/mdc-layout-grid/_variables.scss

@@ -32,7 +32,7 @@ npm install @material/line-ripple
 ### HTML Structure
 
 ```html
-<div class="mdc-line-ripple"></div>
+<span class="mdc-line-ripple"></span>
 ```
 
 ### Styles

packages/mdc-line-ripple/README.md

@@ -28,7 +28,7 @@ import {createMockFoundation} from '../../../testing/helpers/foundation';
 const getFixture = () => {
   const wrapper = document.createElement('div');
   wrapper.innerHTML = `
-    <div class="mdc-line-ripple"></div>
+    <span class="mdc-line-ripple"></span>
   `;
   const el = wrapper.firstElementChild as HTMLElement;
   wrapper.removeChild(el);

packages/mdc-line-ripple/test/component.test.ts

@@ -33,13 +33,13 @@ npm install @material/notched-outline
 ### HTML Structure
 
 ```html
-<div class="mdc-notched-outline">
-  <div class="mdc-notched-outline__leading"></div>
-  <div class="mdc-notched-outline__notch">
+<span class="mdc-notched-outline">
+  <span class="mdc-notched-outline__leading"></span>
+  <span class="mdc-notched-outline__notch">
     <span class="mdc-floating-label">Label</span>
-  </div>
-  <div class="mdc-notched-outline__trailing"></div>
-</div>
+  </span>
+  <span class="mdc-notched-outline__trailing"></span>
+</span>
 ```
 
 > Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when