Merge branch 'master' into publish-demos

lerna.json

@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.0.0"
+  "version": "0.1.0"
 }

packages/base/package.json

@@ -5,7 +5,10 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "license": "Apache-2.0",
   "dependencies": {
     "@polymer/lit-element": "^0.4.0"

packages/button/README.md

@@ -0,0 +1,61 @@
+# mwc-button
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-button is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-button in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-button to your project:
+
+      ```npm i @material/mwc-button```
+
+  1. Import the mwc-button definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-button/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Button} from "@material/mwc-button"```
+
+  1. Create an instance of mwc-button in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-button>Click Here!</mwc-button>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-button is published on [npm](https://www.npmjs.com/package/@material/mwc-button) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-button uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-button.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/button/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-button.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/checkbox/README.md

@@ -0,0 +1,61 @@
+# mwc-checkbox
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-checkbox is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-checkbox in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-checkbox to your project:
+
+      ```npm i @material/mwc-checkbox```
+
+  1. Import the mwc-checkbox definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-checkbox/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Checkbox} from "@material/mwc-checkbox"```
+
+  1. Create an instance of mwc-checkbox in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-checkbox></mwc-checkbox>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-checkbox is published on [npm](https://www.npmjs.com/package/@material/mwc-checkbox) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-checkbox uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-checkbox.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/checkbox/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-checkbox.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/fab/README.md

@@ -0,0 +1,61 @@
+# mwc-fab
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-fab is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-fab in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-fab to your project:
+
+      ```npm i @material/mwc-fab```
+
+  1. Import the mwc-fab definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-fab/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Fab} from "@material/mwc-fab"```
+
+  1. Create an instance of mwc-fab in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-fab>sentiment_very_satisfied</mwc-fab>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-fab is published on [npm](https://www.npmjs.com/package/@material/mwc-fab) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-fab uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-fab.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/fab/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-fab.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/icon/README.md

@@ -5,12 +5,12 @@ A [Material Components](https://material.io/components/) icon implementation usi
 
  * The easiest way to try out mwc-icon is to use one of these online tools:
 
-* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/lit-element-example?file=index.js), [Glitch](https://glitch.com/edit/#!/hello-lit-element?path=index.html)
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
 
-* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/zezilad/edit?html,output),
-[CodePen](https://codepen.io/sorvell/pen/BxZgPN).
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
 
-* You can also copy [this HTML file](https://gist.githubusercontent.com/sorvell/48f4b7be35c8748e8f6db5c66d36ee29/raw/2427328cf1ebae5077902a6bff5ddd8db45e83e4/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
 
 * When you're ready to use mwc-icon in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
 

packages/icon/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-icon.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/radio/README.md

@@ -0,0 +1,61 @@
+# mwc-radio
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-radio is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-radio in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-radio to your project:
+
+      ```npm i @material/mwc-radio```
+
+  1. Import the mwc-radio definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-radio/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Radio} from "@material/mwc-radio"```
+
+  1. Create an instance of mwc-radio in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-radio></mwc-radio>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-radio is published on [npm](https://www.npmjs.com/package/@material/mwc-radio) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-radio uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-radio.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/radio/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-radio.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/ripple/README.md

@@ -0,0 +1,61 @@
+# mwc-ripple
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-ripple is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-ripple in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-ripple to your project:
+
+      ```npm i @material/mwc-ripple```
+
+  1. Import the mwc-ripple definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-ripple/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Ripple} from "@material/mwc-ripple"```
+
+  1. Create an instance of mwc-ripple in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-ripple></mwc-ripple>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-ripple is published on [npm](https://www.npmjs.com/package/@material/mwc-ripple) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-ripple uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-ripple.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/ripple/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-ripple.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

packages/switch/README.md

@@ -0,0 +1,61 @@
+# mwc-switch
+A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)
+
+## Getting started
+
+ * The easiest way to try out mwc-switch is to use one of these online tools:
+
+* Runs in all [supported](#supported-browsers) browsers: [StackBlitz](https://stackblitz.com/edit/mwc-icon-example?file=index.js), [Glitch](https://glitch.com/edit/#!/mwc-icon-example?path=index.html)
+
+* Runs in browsers with [JavaScript Modules](https://caniuse.com/#search=modules): [JSBin](http://jsbin.com/qibisux/edit?html,output),
+[CodePen](https://codepen.io/azakus/pen/deZLja).
+
+* You can also copy [this HTML file](https://gist.githubusercontent.com/azakus/f01e9fc2ed04e781ad5a52ded7b296e7/raw/266f2f4f91cbfe89b2acc6ec63957b1a3cfe9b39/index.html) into a local file and run it in any browser that supports [JavaScript Modules]((https://caniuse.com/#search=modules)).
+
+* When you're ready to use mwc-switch in a project, install it via [npm](https://www.npmjs.com/). To run the project in the browser, a module-compatible toolctain is required. We recommend installing the [Polymer CLI](https://github.com/Polymer/polymer-cli) and using its development server as follows.
+
+  1. Ensure the webcomponents polyfills are included in your HTML page
+
+      - Install webcomponents polyfills
+
+          ```npm i @webcomponents/webcomponentsjs```
+
+      - Add webcomponents polyfills to your HTML page
+
+          ```<script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>```
+
+  1. Add mwc-switch to your project:
+
+      ```npm i @material/mwc-switch```
+
+  1. Import the mwc-switch definition into your HTML page:
+
+      ```<script type="module" src="@material/mwc-switch/index.js"></script>```
+
+      Or into your module script:
+
+      ```import {Switch} from "@material/mwc-switch"```
+
+  1. Create an instance of mwc-switch in your HTML page, or via any framework that [supports rendering Custom Elements](https://custom-elements-everywhere.com/):
+
+      ```<mwc-switch>sentiment_very_satisfied</mwc-switch>```
+
+  1. Install the Polymer CLI:
+
+      ```npm i -g polymer-cli@next```
+
+  1. Run the development server and open a browser pointing to its URL:
+
+      ```polymer serve```
+
+  > mwc-switch is published on [npm](https://www.npmjs.com/package/@material/mwc-switch) using JavaScript Modules.
+  This means it can take advantage of the standard native JavaScript module loader available in all current major browsers.
+  >
+  > However, since mwc-switch uses npm convention to reference dependencies by name, a light transform to rewrite specifiers to URLs is required to get it to run in the browser. The polymer-cli's development server `polymer serve` automatically handles this transform.
+
+  Tools like [WebPack](https://webpack.js.org/) and [Rollup](https://rollupjs.org/) can also be used to serve and/or bundle mwc-switch.
+
+## Supported Browsers
+
+The last 2 versions of all modern browsers are supported, including
+Chrome, Safari, Opera, Firefox, Edge. In addition, Internet Explorer 11 is also supported.

packages/switch/package.json

@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "description": "",
   "main": "mwc-switch.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },