[pull] master from material-components:master

.github/workflows/release-canary.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/release-nightly.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/release-pull-request.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/release.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
           registry-url: https://registry.npmjs.org/
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
       - uses: actions/cache@v2
         with:
           path: ~/.npm
@@ -44,7 +44,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
       - uses: actions/cache@v2
         with:
           path: |
@@ -64,7 +64,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
       - uses: actions/cache@v2
         with:
           path: |
@@ -96,7 +96,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 14
       - uses: actions/cache@v2
         with:
           path: |
@@ -108,22 +108,3 @@ jobs:
       - name: Run dependency tests
         run: |
           npm run test:dependency
-  sass-test:
-    runs-on: ubuntu-latest
-    needs: install
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 10
-      - uses: actions/cache@v2
-        with:
-          path: |
-            node_modules
-            packages/*/node_modules
-            !packages/*/node_modules/@material
-          key: ${{ runner.os }}-lerna-${{ hashFiles('package-lock.json', 'packages/**/package.json') }}
-      - run: npm run link
-      - name: Run Sass tests
-        run: |
-          npm run test:sass

.stylelintrc.yaml

@@ -42,7 +42,11 @@ rules:
     - true
     - ignorePseudoElements:
         ng-deep
-  scss/at-rule-no-unknown: true
+  scss/at-rule-no-unknown:
+    - true
+    - ignoreAtRules:
+      - provide
+      - require
   # No config allows this:
   #
   # ```scss

README.md

@@ -1,6 +1,17 @@
 [![Version](https://img.shields.io/npm/v/material-components-web.svg)](https://www.npmjs.com/package/material-components-web)
 [![Chat](https://img.shields.io/discord/259087343246508035.svg)](https://discord.gg/material-components)
 
+Note:
+
+This project is no longer actively maintained. While automated updates may
+still occur, the team will not be prioritizing new features or bug fixes, and
+those updates will be turned off in the future.
+
+For Angular users, our friends at Angular Material moved away from this
+library, and they expect that this may actually allow for faster iteration - see
+their [blog post](https://blog.angular.dev/the-future-of-material-support-in-angular-7fa0662ecc4b)
+for more information.
+
 # Material Components for the web
 
 Material Components for the web helps developers execute [Material Design](https://www.material.io).
@@ -47,7 +58,7 @@ Material Components for the web is the successor to [Material Design Lite](https
 <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
 <!-- Instantiate single textfield component rendered in the document -->
 <script>
-  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
+  mdc.textField.MDCTextField.attachTo(document.querySelector<HTMLElement>('.mdc-text-field'));
 </script>
 ```
 
@@ -96,7 +107,7 @@ Import `MDCTextField` module to instantiate text field component.
 
 ```js
 import {MDCTextField} from '@material/textfield';
-const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
+const textField = new MDCTextField(document.querySelector<HTMLElement>('.mdc-text-field'));
 ```
 
 This'll initialize text field component on a single `.mdc-text-field` element.

docs/authoring-components.md

@@ -127,7 +127,7 @@ class RedblueTogglePrototype {
   toggle(isToggled = undefined) {
     const wasToggledExplicitlySet = isToggled === Boolean(isToggled);
     const toggled = wasToggledExplicitlySet ? isToggled : !this.toggled;
-    const toggleColorEl = this.root.querySelector('.redblue-toggle__color');
+    const toggleColorEl = this.root.querySelector<HTMLElement>('.redblue-toggle__color');
     let toggleColor;
 
     this.root.setAttribute('aria-pressed', String(toggled));
@@ -142,7 +142,7 @@ class RedblueTogglePrototype {
   }
 }
 
-new RedblueTogglePrototype(document.querySelector('.redblue-toggle'));
+new RedblueTogglePrototype(document.querySelector<HTMLElement>('.redblue-toggle'));
 ```
 
 Note how the JS Component does not reference MDC Web in any way, nor does it have any notion
@@ -335,7 +335,7 @@ class RedblueToggle extends MDCComponent {
       addClass: className => this.root.classList.add(className),
       removeClass: className => this.root.classList.remove(className),
       setToggleColorTextContent: textContent => {
-        this.root.querySelector('.redblue-toggle__color').textContent = textContent;
+        this.root.querySelector<HTMLElement>('.redblue-toggle__color').textContent = textContent;
       },
     });
   }

docs/docsite-index.md

@@ -42,7 +42,7 @@ Then include MDC markup...
 ...and instantiate JavaScript:
 
 ```js
-mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
+mdc.ripple.MDCRipple.attachTo(document.querySelector<HTMLElement>('.foo-button'));
 ```
 
 However, it is highly recommended to install Material Components for the web via npm and consume its ES Modules and Sass directly. This is outlined in the steps below.
@@ -105,7 +105,7 @@ However, it is highly recommended to install Material Components for the web via
 
     ```js
     import {MDCRipple} from '@material/ripple';
-    const ripple = new MDCRipple(document.querySelector('.foo-button'));
+    const ripple = new MDCRipple(document.querySelector<HTMLElement>('.foo-button'));
     ```
 
     This will produce a Material Design ripple on the button when it is pressed!

docs/getting-started.md

@@ -38,7 +38,7 @@ Then include MDC markup...
 ...and instantiate JavaScript:
 
 ```js
-mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
+mdc.ripple.MDCRipple.attachTo(document.querySelector<HTMLElement>('.foo-button'));
 ```
 
 ## Installing Locally
@@ -392,7 +392,7 @@ We need to tell our `app.js` to import the ES2015 file for `@material/ripple`. W
 
 ```js
 import {MDCRipple} from '@material/ripple/index';
-const ripple = new MDCRipple(document.querySelector('.foo-button'));
+const ripple = new MDCRipple(document.querySelector<HTMLElement>('.foo-button'));
 ```
 
 > Note: We explicitly reference `index` within each MDC Web package in order to import the ES2015 source directly.

karma.conf.js

@@ -26,22 +26,10 @@ const HEADLESS_LAUNCHERS = {
     base: 'ChromeHeadless',
     flags: ['--no-sandbox'],
   },
-  'FirefoxHeadless': {
-    base: 'Firefox',
-    flags: ['-headless'],
-  },
-};
-const SAUCE_LAUNCHERS = {
-  'sl-ie': {
-    base: 'SauceLabs',
-    browserName: 'internet explorer',
-    version: '11',
-    platform: 'Windows 10',
-  },
 };
 const USE_SAUCE = Boolean(process.env.SAUCE_USERNAME && process.env.SAUCE_ACCESS_KEY);
 const PROGRESS = USE_SAUCE ? 'dots' : 'progress';
-const customLaunchers = Object.assign({}, USE_SAUCE ? SAUCE_LAUNCHERS : {}, HEADLESS_LAUNCHERS);
+const customLaunchers = Object.assign({}, HEADLESS_LAUNCHERS);
 const browsers = USE_SAUCE ? Object.keys(customLaunchers) : ['Chrome'];
 
 // Files to include in Jasmine tests.

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "12.0.0",
+  "version": "14.0.0",
   "command": {
     "version": {
       "conventionalCommits": true

package.json

@@ -58,7 +58,6 @@
     "eslint": "^5.1.0",
     "eslint-config-google": "^0.11.0",
     "eslint-plugin-mocha": "^5.0.0",
-    "fibers": "^4.0.2",
     "fs-extra": "^7.0.0",
     "fs-readdir-recursive": "^1.1.0",
     "glob": "^7.1.6",
@@ -83,7 +82,7 @@
     "prettier": "^2.2.1",
     "recast": "^0.17.3",
     "resolve": "^1.3.2",
-    "sass": "^1.34.1",
+    "sass": "^1.41.1",
     "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "stylelint": "^13.8.0",
@@ -97,7 +96,7 @@
     "ts-node": "^8.0.3",
     "tslib": "^2.1.0",
     "tslint": "^5.12.0",
-    "typescript": "^4.2.2",
+    "typescript": "^4.3.5",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "webpack": "^4.34.0",
     "webpack-cli": "^3.3.11"

packages/material-components-web/index.ts

@@ -21,7 +21,7 @@
  * THE SOFTWARE.
  */
 
-import autoInit, {MDCAttachable} from '@material/auto-init/index';
+import autoInit from '@material/auto-init/index';
 import * as banner from '@material/banner/index';
 import * as base from '@material/base/index';
 import * as checkbox from '@material/checkbox/index';
@@ -79,8 +79,7 @@ autoInit.register('MDCSegmentedButton', segmentedButton.MDCSegmentedButton);
 autoInit.register('MDCSelect', select.MDCSelect);
 autoInit.register('MDCSlider', slider.MDCSlider);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
-autoInit.register(
-    'MDCSwitch', switchControl.MDCSwitch as unknown as MDCAttachable);
+autoInit.register('MDCSwitch', switchControl.MDCSwitch);
 autoInit.register('MDCTabBar', tabBar.MDCTabBar);
 autoInit.register('MDCTextField', textField.MDCTextField);
 autoInit.register('MDCTooltip', tooltip.MDCTooltip);

packages/material-components-web/material-components-web.scss

@@ -49,7 +49,7 @@
 @use '@material/segmented-button/styles' as segmented-button-styles;
 @use '@material/slider/styles' as slider-styles;
 @use '@material/snackbar/mdc-snackbar';
-@use '@material/switch/deprecated/mdc-switch';
+@use '@material/switch/styles';
 @use '@material/tab/mdc-tab';
 @use '@material/tab-bar/mdc-tab-bar';
 @use '@material/tab-indicator/mdc-tab-indicator';