From 494389944ef2ad60e2ed44f634d7f5d59ef1a563 Mon Sep 17 00:00:00 2001
From: "J. Yi" <93548144+jyyi1@users.noreply.github.com>
Date: Thu, 9 Mar 2023 00:05:02 -0500
Subject: [PATCH] =?UTF-8?q?chore(manager):=20=F0=9F=93=84=20re-generate=20?=
=?UTF-8?q?dependency=20licenses=20(#1305)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Our [`licenses.txt`](https://github.com/Jigsaw-Code/outline-server/blob/508a5a2af5e076716ce91cbb08217075fe675e98/src/server_manager/web_app/ui_components/licenses/licenses.txt) file for Outline Manager is not correct, it is just a simple duplication of the [`README.md`](https://github.com/Jigsaw-Code/outline-server/blob/508a5a2af5e076716ce91cbb08217075fe675e98/src/server_manager/README.md). In this PR, I re-generate the `licenses.txt` file with all dependencies and update the steps in order to correctly generate it.
---
.../web_app/ui_components/licenses/README.md | 8 +-
.../ui_components/licenses/licenses.txt | 11200 +++++++++++++++-
2 files changed, 11163 insertions(+), 45 deletions(-)
diff --git a/src/server_manager/web_app/ui_components/licenses/README.md b/src/server_manager/web_app/ui_components/licenses/README.md
index dadd46f7..cd789c0d 100644
--- a/src/server_manager/web_app/ui_components/licenses/README.md
+++ b/src/server_manager/web_app/ui_components/licenses/README.md
@@ -4,12 +4,18 @@
- `cd` to the root of your clone of this repo
- Ensure `node_modules` is up to date and only include dependencies of the Electron app by running `npm ci && npm run action server_manager/web_app/build`
+- Copy `LICENSE` and the entire `node_modules` folder to `./src/server_manager/LICENSE` and `./src/server_manager/node_modules`
- `cd src/server_manager`
- `npx generate-license-file --input package.json --output web_app/ui_components/licenses/licenses.txt`
- `cd web_app/ui_components/licenses`
- `cat db-ip_license.txt >> licenses.txt`
-Done!
+Done! (remember to delete the `./src/server_manager/node_modules` folder)
+
+> Note that the third step of copying `LICENSE` and `node_modules` is required because:
+>
+> - `generate-license-file` iterates all dependencies under `node_modules` folder in the current directory
+> - `generate-license-file` will try to find a `LICENSE` file in the current directory, if not found, it will use `README.md` instead which is not what we want
## Check
diff --git a/src/server_manager/web_app/ui_components/licenses/licenses.txt b/src/server_manager/web_app/ui_components/licenses/licenses.txt
index 72fafa77..ceead765 100644
--- a/src/server_manager/web_app/ui_components/licenses/licenses.txt
+++ b/src/server_manager/web_app/ui_components/licenses/licenses.txt
@@ -1,79 +1,11191 @@
+The following NPM packages may be included in this product:
+
+ - @formatjs/intl-unified-numberformat@3.3.7
+ - @formatjs/intl-utils@2.3.0
+
+These packages each contain the following license and notice below:
+
+MIT License
+
+Copyright (c) 2019 FormatJS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
The following NPM package may be included in this product:
- - outline-manager@1.9.0
+ - @polymer/app-layout@3.1.0
This package contains the following license and notice below:
-# Outline Manager
+[](https://www.npmjs.com/package/@polymer/app-layout)
+[](https://travis-ci.org/PolymerElements/app-layout)
+[](https://webcomponents.org/element/@polymer/app-layout)
-## Running
+## App Layout
-To run the Outline Manager Electron app:
+
+
+A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.
+
+## What is inside
+
+### Elements
+
+- [app-box](https://github.com/PolymerElements/app-layout/tree/master/app-box) - A container element that can have scroll effects - visual effects based on scroll position.
+
+- [app-drawer](https://github.com/PolymerElements/app-layout/tree/master/app-drawer) - A navigation drawer that can slide in from the left or right.
+
+- [app-drawer-layout](https://github.com/PolymerElements/app-layout/tree/master/app-drawer-layout) - A wrapper element that positions an app-drawer and other content.
+
+- [app-grid](https://github.com/PolymerElements/app-layout/tree/master/app-grid) - A helper class useful for creating responsive, fluid grid layouts using custom properties.
+
+- [app-header](https://github.com/PolymerElements/app-layout/tree/master/app-header) - A container element for app-toolbars at the top of the screen that can have scroll effects - visual effects based on scroll position.
+
+- [app-header-layout](https://github.com/PolymerElements/app-layout/tree/master/app-header-layout) - A wrapper element that positions an app-header and other content.
+
+- [app-toolbar](https://github.com/PolymerElements/app-layout/tree/master/app-toolbar) - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
+
+### Templates
+
+The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:
+
+- **Getting started**
+([Demo](https://polymerelements.github.io/app-layout/templates/getting-started) - [Source](/templates/getting-started))
+
+- **Landing page**
+([Demo](https://polymerelements.github.io/app-layout/templates/landing-page) - [Source](/templates/landing-page))
+
+- **Publishing: Zuperkülblog**
+([Demo](https://polymerelements.github.io/app-layout/templates/publishing) - [Source](/templates/publishing))
+
+- **Shop: Shrine**
+([Demo](https://polymerelements.github.io/app-layout/templates/shrine) - [Source](/templates/shrine))
+
+- **Blog: Pesto**
+([Demo](https://polymerelements.github.io/app-layout/templates/pesto) - [Source](/templates/pesto))
+
+- **Scroll effects: Test drive**
+([Demo](https://polymerelements.github.io/app-layout/templates/test-drive) - [Source](/templates/test-drive))
+
+### Patterns
+
+Sample code for various UI patterns:
+
+- **Transform navigation:**
+As more screen space is available, side navigation can transform into tabs.
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/transform-navigation/index.html) - [Source](/patterns/transform-navigation/x-app.html))
+
+- **Expand Card:**
+Content cards may expand to take up more horizontal space.
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/expand-card/index.html) - [Source](/patterns/expand-card/index.html))
+
+- **Material Design Responsive Toolbar:**
+Toolbar changes its height and padding to adapt mobile screen size.
+([Demo](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/patterns/md-responsive-toolbar/index.html) - [Source](/patterns/md-responsive-toolbar/index.html))
+
+## Users
+
+Here are some web apps built with App Layout:
+
+- [Youtube Web](https://www.youtube.com/new)
+- [Google I/O 2016](https://events.google.com/io2016/)
+- [Polymer project site](https://www.polymer-project.org/summit)
+- [Polymer summit](https://www.polymer-project.org/summit)
+- [Shop](https://shop.polymer-project.org)
+- [News](https://news.polymer-project.org)
+- [webcomponents.org](https://www.webcomponents.org/)
+- [Chrome Status](https://www.chromestatus.com/)
+- [Project Fi](https://fi.google.com/about/)
+- [NASA Open Source Software](https://code.nasa.gov/)
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/app-layout),
+ [Demo](https://www.webcomponents.org/element/@polymer/app-layout/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/app-layout
```
-To run the Outline Manager Electron app with a development build (code not minified):
+### In an html file
+```html
+
+
+
+
+
+
+
+
My app
+
+
+
+
+
```
-BUILD_ENV=development npm run action server_manager/electron_app/start
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/app-layout/app-layout.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
My app
+
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
```
-## Development Server
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
-To run the Outline Manager as a web app on the browser and listen for changes:
-
-```
-npm run action server_manager/web_app/start
+### Installation
+```sh
+git clone https://github.com/PolymerElements/app-layout
+cd app-layout
+npm install
+npm install -g polymer-cli
```
-## Gallery Server for UI Development
-
-We have a server app to for quickly iterating on UI components. To spin it up, run
-
-```
-npm run action server_manager/web_app/start_gallery
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
```
-Changes to UI components will be hot reloaded into the gallery.
-
-## Debug an existing binary
-
-You can run an existing binary in debug mode by setting `OUTLINE_DEBUG=true`.
-This will enable the Developer menu on the application window.
-
-## Packaging
-
-To build the app binary:
-```
-npm run action server_manager/electron_app/package_${PLATFORM}
+### Running the tests
+```sh
+polymer test --npm
```
-Where `${PLATFORM}` is one of `linux`, `macos`, `only_windows`.
+-----------
-The per-platform standalone apps will be at `build/electron_app/static/dist`.
+The following NPM package may be included in this product:
-- Windows: zip files. Only generated if you have [wine](https://www.winehq.org/download) installed.
-- Linux: tar.gz files.
-- macOS: dmg files if built from macOS, zip files otherwise.
+ - @polymer/app-localize-behavior@3.0.1
-## Releases
+This package contains the following license and notice below:
-To perform a release, use
+[](https://www.npmjs.com/package/@polymer/app-localize-behavior)
+[](https://travis-ci.org/PolymerElements/app-localize-behavior)
+[](https://webcomponents.org/element/@polymer/app-localize-behavior)
+
+## <app-localize-behavior>
+`app-localize-behavior` is a behavior that wraps the [format.js](http://formatjs.io/) library to
+help you internationalize your application. Note that if you're on a browser that
+does not natively support the [Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+object, you must load the polyfill yourself. An example polyfill can
+be found [here](https://github.com/andyearnshaw/Intl.js/).
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/app-localize-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/app-localize-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
```
-npm run action server_manager/electron_app/release
+npm install --save @polymer/app-localize-behavior
```
-This will perform a clean and reinstall all dependencies to make sure the build is not tainted.
+### In an html file using the localized element
+```html
+
+
+
+
+
+
-## Error reporting
+
+
+
+
+
+
+
+```
+
+### Localizing a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+
+class SampleElement extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
{{localize('hello', 'name', 'Batman')}}
+ `;
+ }
+
+ static get properties() {
+ return {
+ language: { value: 'en' },
+ }
+ }
+
+ function attached() {
+ this.loadResources(this.resolveUrl('locales.json'));
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/app-localize-behavior
+cd app-localize-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/font-roboto@3.0.2
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-input)
+[](https://travis-ci.org/PolymerElements/paper-input)
+[](https://webcomponents.org/element/@polymer/font-roboto)
+
+## font-roboto
+`font-roboto` loads the Roboto family of fonts from Google Fonts.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/font-roboto).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/font-roboto
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
This text is in Roboto.
+
+
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/font-roboto/roboto.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
This text is in Roboto.
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/font-roboto
+cd font-roboto
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-a11y-announcer@3.2.0
+
+This package contains the following license and notice below:
+
+
+[](https://www.npmjs.com/package/@polymer/iron-a11y-announcer)
+[](https://travis-ci.org/PolymerElements/iron-a11y-announcer)
+[](https://webcomponents.org/element/@polymer/iron-a11y-announcer)
+
+## <iron-a11y-announcer>
+
+`iron-a11y-announcer` is a singleton element that is intended to add a11y
+to features that require on-demand announcement from screen readers. In
+order to make use of the announcer, it is best to request its availability
+in the announcing element.
+Note: announcements are only audible if you have a screen reader enabled.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-a11y-announcer),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-a11y-announcer/demo/demo/index.html)
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-a11y-announcer
+```
+
+### In an html file
+```html
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+ function attached() {
+ IronA11yAnnouncer.requestAvailability();
+ }
+
+ // After the `iron-a11y-announcer` has been made available, elements can
+ // make announces by firing bubbling `iron-announce` events.
+ // Note: announcements are only audible if you have a screen reader enabled.
+ function announce() {
+ IronA11yAnnouncer.instance.fire('iron-announce',
+ {text: 'Hello there!'}, {bubbles: true});
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-a11y-announcer
+cd iron-a11y-announcer
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+## Known Issues
+This element doesn't work on Firefox (it doesn't read anything in Voice Over), since
+`aria-live` has been broken since the Quantum redesign (see the [MDN docs demo](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions))
+-- we tested it on Firefox 60, but it doesn't look like a regression, so
+it's probably broken on older versions as well.
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-a11y-keys-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-a11y-keys-behavior)
+[](https://travis-ci.org/PolymerElements/iron-a11y-keys-behavior)
+[](https://webcomponents.org/element/@polymer/iron-a11y-keys-behavior)
+
+## <iron-a11y-keys-behavior>
+`Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
+keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
+The element takes care of browser differences with respect to Keyboard events
+and uses an expressive syntax to filter key presses.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-a11y-keys-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-a11y-keys-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-a11y-keys-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
+
+class SampleElement extends extends mixinBehaviors([IronA11yKeysBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
[[pressed]]
+ `;
+ }
+
+ static get properties() {
+ return {
+ pressed: {type: String, readOnly: true, value: ''},
+ keyBindings: {
+ 'space': '_onKeydown', // same as 'space:keydown'
+ 'shift+tab': '_onKeydown',
+ 'enter:keypress': '_onKeypress',
+ 'esc:keyup': '_onKeyup'
+ }
+ }
+ }
+
+ function _onKeydown: function(event) {
+ console.log(event.detail.combo); // KEY+MODIFIER, e.g. "shift+tab"
+ console.log(event.detail.key); // KEY only, e.g. "tab"
+ console.log(event.detail.event); // EVENT, e.g. "keydown"
+ console.log(event.detail.keyboardEvent); // the original KeyboardEvent
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-a11y-keys-behavior
+cd iron-a11y-keys-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-ajax@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-ajax)
+[](https://travis-ci.org/PolymerElements/iron-ajax)
+[](https://webcomponents.org/element/@polymer/iron-ajax)
+
+## <iron-ajax>
+
+The `iron-ajax` element declaratively exposes network request functionality to
+Polymer's data-binding system.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-ajax),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-ajax/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-ajax
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-ajax/iron-ajax.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-ajax
+cd iron-ajax
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-autogrow-textarea@3.0.3
+
+This package contains the following license and notice below:
+
+
+[](https://www.npmjs.com/package/@polymer/iron-autogrow-textarea)
+[](https://travis-ci.org/PolymerElements/iron-autogrow-textarea)
+[](https://webcomponents.org/element/@polymer/iron-autogrow-textarea)
+
+
+## <iron-autogrow-textarea>
+
+`iron-autogrow-textarea` is an element containing a textarea that grows in height as more
+lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
+never scroll.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-autogrow-textarea),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-autogrow-textarea/demo/demo/index.html).
+
+
+ ## Usage
+
+ ### Installation
+ ```
+ npm install --save @polymer/iron-autogrow-textarea
+ ```
+
+ ### In an html file
+ ```html
+
+
+
+
+
+
+
+
+ ```
+ ### In a Polymer 3 element
+ ```js
+ import {PolymerElement, html} from '@polymer/polymer';
+ import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea.js';
+
+ class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+ }
+ customElements.define('sample-element', SampleElement);
+ ```
+
+ ## Contributing
+ If you want to send a PR to this element, here are
+ the instructions for running the tests and demo locally:
+
+ ### Installation
+ ```sh
+ git clone https://github.com/PolymerElements/iron-autogrow-textarea
+ cd iron-autogrow-textarea
+ npm install
+ npm install -g polymer-cli
+ ```
+
+ ### Running the demo locally
+ ```sh
+ polymer serve --npm
+ open http://127.0.0.1:/demo/
+ ```
+
+ ### Running the tests
+ ```sh
+ polymer test --npm
+ ```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-behaviors@3.0.1
+
+This package contains the following license and notice below:
+
+
+
+[](https://www.npmjs.com/package/@polymer/iron-behaviors)
+[](https://travis-ci.org/PolymerElements/iron-behaviors)
+[](https://webcomponents.org/element/@polymer/iron-behaviors)
+
+## <iron-behaviors>
+`` provides a set of behaviors for the iron elements.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-behaviors),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-behaviors/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-behaviors
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronButtonState} from '../iron-button-state.js';
+import {IronControlState} from '../iron-control-state.js';
+
+class SampleElement extends mixinBehaviors([IronButtonState, IronControlState], PolymerElement) {
+ static get template() {
+ return html`
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-behaviors
+cd iron-behaviors
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-checked-element-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-checked-element-behavior)
+[](https://travis-ci.org/PolymerElements/iron-checked-element-behavior)
+[](https://webcomponents.org/element/@polymer/iron-checked-element-behavior)
+
+## IronCheckedElementBehavior
+
+Use `IronCheckedElementBehavior` to implement a custom element that has a
+`checked` property, which can be used for validation if the element is also
+`required`. Element instances implementing this behavior will also be
+registered for use in an `iron-form` element.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-checked-element-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-checked-element-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-checked-element-behavior
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronCheckedElementBehavior} from '../iron-checked-element-behavior.js';
+
+class SimpleCheckbox extends mixinBehaviors(IronCheckedElementBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+
+
+
+ {{label}}
+ `;
+ }
+
+ static get properties() {
+ return {label: {type: String, value: 'not validated'}};
+ }
+
+ _checkValidity() {
+ this.validate();
+ this.label = this.invalid ? 'is invalid' : 'is valid';
+ }
+}
+
+customElements.define('simple-checkbox', SimpleCheckbox);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-checked-element-behavior
+cd iron-checked-element-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-collapse@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-collapse)
+[](https://travis-ci.org/PolymerElements/iron-collapse)
+[](https://webcomponents.org/element/@polymer/iron-collapse)
+
+## <iron-collapse>
+`iron-collapse` creates a collapsible block of content. By default, the content
+will be collapsed. Use `opened` or `toggle()` to show/hide the content. The
+aria-expanded attribute should only be set on the button that controls the
+collapsable area, not on the area itself. See
+https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element#Description
+
+`iron-collapse` adjusts the max-height/max-width of the collapsible element to show/hide
+the content. So avoid putting padding/margin/border on the collapsible directly,
+and instead put a div inside and style that.
+
+```html
+
+
+
+
+
Content goes here...
+
+
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--iron-collapse-transition-duration` | Animation transition duration | `300ms` |
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-collapse),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-collapse/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-collapse
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
Content goes here...
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-collapse/iron-collapse.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
Content goes here...
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-collapse
+cd iron-collapse
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-dropdown@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-dropdown)
+[](https://travis-ci.org/PolymerElements/iron-dropdown)
+[](https://webcomponents.org/element/@polymer/iron-dropdown)
+
+## <iron-dropdown>
+
+`` displays content inside a fixed-position container,
+positioned relative to another element.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-dropdown),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-dropdown/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-dropdown
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
+
+
+
Hello!
+
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-dropdown/iron-dropdown.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+
Hello!
+
+ `;
+ }
+
+ _openDropdown() {
+ this.$.dropdown.open();
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+In the above example, the `
` assigned to the `dropdown-content` slot will
+be hidden until the dropdown element has `opened` set to true, or when the
+`open` method is called on the element.
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-dropdown
+cd iron-dropdown
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-fit-behavior@3.1.0
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-fit-behavior)
+[](https://travis-ci.org/PolymerElements/iron-fit-behavior)
+[](https://webcomponents.org/element/@polymer/iron-fit-behavior)
+
+## IronFitBehavior
+
+`IronFitBehavior` positions and fits an element in the bounds of another
+element and optionally centers it in the window or the other element.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-fit-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-fit-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-fit-behavior
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronFitBehavior} from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
+
+class SimpleFit extends mixinBehaviors(IronFitBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+ verticalAlign: [[verticalAlign]], horizontalAlign: [[horizontalAlign]]
+ `;
+ }
+}
+
+customElements.define('simple-fit', SimpleFit);
+```
+
+Then, in your HTML:
+
+```html
+
+
+
+
+
+ The <simple-fit> below will be positioned within this div.
+
+
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-fit-behavior
+cd iron-fit-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-flex-layout@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-flex-layout)
+[](https://travis-ci.org/PolymerElements/iron-flex-layout)
+[](https://webcomponents.org/element/@polymer/iron-flex-layout)
+
+## <iron-flex-layout>
+The `` component provides simple ways to use
+[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
+also known as flexbox. Note that this is an old element, that was written
+before all modern browsers had non-prefixed flex styles. As such, nowadays you
+don't really need to use this element anymore, and can use CSS flex styles
+directly in your code.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-flex-layout),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-flex-layout/demo/demo/index.html).
+
+This component provides two different ways to use flexbox:
+
+1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+The layout class stylesheet provides a simple set of class-based flexbox rules, that
+let you specify layout properties directly in markup. You must include this file
+in every element that needs to use them.
+
+1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
+The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-flex-layout
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+
horizontal layout center alignment
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-flex-layout
+cd iron-flex-layout
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-form-element-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-form-element-behavior)
+[](https://travis-ci.org/PolymerElements/iron-form-element-behavior)
+[](https://webcomponents.org/element/@polymer/iron-form-element-behavior)
+
+## IronFormElementBehavior
+`IronFormElementBehavior` adds a `name`, `value` and `required` properties to
+a custom element. This element is deprecated, and only exists for back compatibility
+with Polymer 1.x (where `iron-form` was a type extension), and
+it is not something you want to use. No contributions or fixes will be accepted.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-form-element-behavior).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-form-element-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronFormElementBehavior} from '@polymer/iron-form-element-behavior/iron-form-element-behavior.js';
+
+class SampleElement extends mixinBehaviors([IronFormElementBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-icon@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-icon)
+[](https://travis-ci.org/PolymerElements/iron-icon)
+[](https://webcomponents.org/element/@polymer/iron-icon)
+
+## <iron-icon>
+
+The `iron-icon` element displays an icon. By default an icon renders as a 24px
+square.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-icon),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-icon/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-icon
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-icon/iron-icon.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-icon
+cd iron-icon
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-icons@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-icons)
+[](https://travis-ci.org/PolymerElements/iron-icons)
+[](https://webcomponents.org/element/@polymer/iron-icons)
+
+## <iron-icons>
+
+`iron-icons` is a utility import that includes the definition for the
+`iron-icon` element, `iron-iconset-svg` element, as well as an import for the
+default icon set.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-icons),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-icons
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-icons/iron-icons.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-icons
+cd iron-icons
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-iconset-svg@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-iconset-svg)
+[](https://travis-ci.org/PolymerElements/iron-iconset-svg)
+[](https://webcomponents.org/element/@polymer/iron-iconset-svg)
+
+## <iron-iconset-svg>
+
+The `iron-iconset-svg` element allows users to define their own icon sets that
+contain svg icons.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-iconset-svg),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-iconset-svg/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-iconset-svg
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+
+You can use an `` anywhere you could put a custom element,
+such as in the shadow root of another component to expose icons to it. However,
+if you're going to be creating many instances of the containing component, you
+should move your `` out to a separate module. This prevents a
+redundant `` from being added to the shadow root of each
+instance of that component. See the demo (and specifically
+`demo/svg-sample-icons.js`) for an example.
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
+import '@polymer/iron-icon/iron-icon.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-iconset-svg
+cd iron-iconset-svg
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-input@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-input)
+[](https://travis-ci.org/PolymerElements/iron-input)
+[](https://webcomponents.org/element/@polymer/iron-input)
+
+## <iron-input>
+`` adds two-way binding and custom validators using `Polymer.IronValidatorBehavior`
+to ``.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-input),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-input/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-input
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-input/iron-input.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+### Two-way binding
+
+By default you can only get notified of changes to an `input`'s `value` due to user input:
+
+```html
+
+```
+
+`iron-input` adds the `bind-value` property that mirrors the `value` property, and can be used
+for two-way data binding. `bind-value` will notify if it is changed either by user input or by script.
+
+```html
+
+
+
+```
+
+### Custom validators
+
+You can use custom validators that implement `Polymer.IronValidatorBehavior` with ``.
+
+```html
+
+
+
+```
+
+### Stopping invalid input
+
+It may be desirable to only allow users to enter certain characters. You can use the
+`prevent-invalid-input` and `allowed-pattern` attributes together to accomplish this. This feature
+is separate from validation, and `allowed-pattern` does not affect how the input is validated.
+
+```html
+
+
+
+
+```
+
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-input
+cd iron-input
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-media-query@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-media-query)
+[](https://travis-ci.org/PolymerElements/iron-media-query)
+[](https://webcomponents.org/element/@polymer/iron-media-query)
+
+## <iron-media-query>
+`iron-media-query` can be used to data bind to a CSS media query.
+The `query` property is a bare CSS media query.
+The `query-matches` property is a boolean representing whether the page matches that media query.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-media-query),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-media-query/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-media-query
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/iron-media-query/iron-media-query.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-media-query
+cd iron-media-query
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-menu-behavior@3.0.2
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-menu-behavior)
+[](https://travis-ci.org/PolymerElements/iron-menu-behavior)
+[](https://webcomponents.org/element/@polymer/iron-menu-behavior)
+
+## `IronMenuBehavior`, `IronMenubarBehavior`
+
+`IronMenuBehavior` and `IronMenubarBehavior` implement accessible menu and
+menubar behaviors.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-menu-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-menu-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-menu-behavior
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronMenuBehavior} from '@polymer/iron-menu-behavior/iron-menu-behavior.js';
+
+class SimpleMenu extends mixinBehaviors(IronMenuBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+
+
+ `;
+ }
+}
+
+customElements.define('simple-menu', SimpleMenu);
+```
+
+Then, in your HTML:
+
+```html
+
+
+
+
+
+
Item 0
+
Item 1
+
Item 2 (disabled)
+
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-menu-behavior
+cd iron-menu-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-meta@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-meta)
+[](https://travis-ci.org/PolymerElements/iron-meta)
+[](https://webcomponents.org/element/@polymer/iron-meta)
+
+## <iron-meta>
+
+`iron-meta` is a generic element you can use for sharing information across the
+DOM tree.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-meta),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-meta/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-meta
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-meta/iron-meta.js';
+
+class ExampleElement extends PolymerElement {
+ static get properties() {
+ return {
+ prop: String,
+ };
+ }
+
+ static get template() {
+ return html`
+
+ info: [[prop]]
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-meta
+cd iron-meta
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-overlay-behavior@3.0.3
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-overlay-behavior)
+[](https://travis-ci.org/PolymerElements/iron-overlay-behavior)
+[](https://webcomponents.org/element/@polymer/iron-overlay-behavior)
+
+## IronOverlayBehavior
+
+Use `IronOverlayBehavior` to implement an element that can be hidden or shown, and displays
+on top of other content. It includes an optional backdrop, and can be used to implement a variety
+of UI controls including dialogs and drop downs. Multiple overlays may be displayed at once.
+
+See the [demo source code](https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.js)
+for an example.
+
+### Closing and canceling
+
+An overlay may be hidden by closing or canceling. The difference between close and cancel is user
+intent. Closing generally implies that the user acknowledged the content on the overlay. By default,
+it will cancel whenever the user taps outside it or presses the escape key. This behavior is
+configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click` properties.
+`close()` should be called explicitly by the implementer when the user interacts with a control
+in the overlay element. When the dialog is canceled, the overlay fires an 'iron-overlay-canceled'
+event. Call `preventDefault` on this event to prevent the overlay from closing.
+
+### Positioning
+
+By default the element is sized and positioned to fit and centered inside the window. You can
+position and size it manually using CSS. See `Polymer.IronFitBehavior`.
+
+### Backdrop
+
+Set the `with-backdrop` attribute to display a backdrop behind the overlay. The backdrop is
+appended to `` and is of type ``. See its doc page for styling
+options.
+
+In addition, `with-backdrop` will wrap the focus within the content in the light DOM.
+Override the [`_focusableNodes` getter](#Polymer.IronOverlayBehavior:property-_focusableNodes)
+to achieve a different behavior.
+
+### Limitations
+
+The element is styled to appear on top of other content by setting its `z-index` property. You
+must ensure no element has a stacking context with a higher `z-index` than its parent stacking
+context. You should place this element as a child of `` whenever possible.
+
+## <iron-overlay-backdrop>
+
+`iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a
+singleton.
+
+### Styling
+
+The following custom properties and mixins are available for styling.
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--iron-overlay-backdrop-background-color` | Backdrop background color | #000 |
+| `--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6 |
+| `--iron-overlay-backdrop` | Mixin applied to `iron-overlay-backdrop`. | {} |
+| `--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-backdrop` when it is displayed | {} |
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-overlay-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-overlay-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-overlay-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronOverlayBehavior} from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
+
+class SampleElement extends mixinBehaviors(IronOverlayBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+
Overlay Content
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-overlay-behavior
+cd iron-overlay-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-pages@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-pages)
+[](https://travis-ci.org/PolymerElements/iron-pages)
+[](https://webcomponents.org/element/@polymer/iron-pages)
+
+## <iron-pages>
+
+`iron-pages` is used to select one of its children to show. One use is to cycle
+through a list of children "pages".
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-pages),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-pages/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-pages
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
Page 0
+
Page 1
+
Page 2
+
Page 3
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/iron-pages/iron-pages.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
Page 0
+
Page 1
+
Page 2
+
Page 3
+
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-pages
+cd iron-pages
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-range-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-range-behavior)
+[](https://travis-ci.org/PolymerElements/iron-range-behavior)
+[](https://webcomponents.org/element/@polymer/iron-range-behavior)
+
+## `IronRangeBehavior`
+
+`IronRangeBehavior` provides the behavior for something with a minimum to
+maximum range.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-range-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-range-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-range-behavior
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import {IronRangeBehavior} from '@polymer/iron-range-behavior/iron-range-behavior.js';
+
+class SimpleRange extends mixinBehaviors(IronRangeBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+
+ [[ratio]]%
+
+ `;
+ }
+}
+
+customElements.define('simple-range', SimpleRange);
+```
+
+Then, in your HTML:
+
+```html
+
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/iron-range-behavior
+cd iron-range-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-resizable-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-resizable-behavior)
+[](https://travis-ci.org/PolymerElements/iron-resizable-behavior)
+[](https://webcomponents.org/element/@polymer/iron-resizable-behavior)
+
+## IronResizableBehavior
+
+`IronResizableBehavior` is a behavior that can be used in Polymer elements to
+coordinate the flow of resize events between "resizers" (elements that control the
+size or hidden state of their children) and "resizables" (elements that need to be
+notified when they are resized or un-hidden by their parents in order to take
+action on their new measurements).
+
+Elements that perform measurement should add the `IronResizableBehavior` behavior to
+their element definition and listen for the `iron-resize` event on themselves.
+This event will be fired when they become showing after having been hidden,
+when they are resized explicitly by another resizable, or when the window has been
+resized.
+
+Note, the `iron-resize` event is non-bubbling.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-resizable-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+
+class SampleElement extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
+ width: [[width]]
+ height: [[height]]
+ `;
+ }
+
+ static get properties() {
+ return {
+ width: Number,
+ height: Number,
+ }
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.addEventListener('iron-resize', this.onIronResize.bind(this));
+ }
+
+ onIronResize() {
+ this.width = this.offsetWidth;
+ this.height = this.offsetHeight;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-resizable-behavior
+cd iron-resizable-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-scroll-target-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-scroll-target-behavior)
+[](https://travis-ci.org/PolymerElements/iron-scroll-target-behavior)
+[](https://webcomponents.org/element/@polymer/iron-scroll-target-behavior)
+
+## IronScrollTargetBehavior
+
+`IronScrollTargetBehavior` allows an element to respond to scroll events from a
+designated scroll target.
+
+Elements that consume this behavior can override the `_scrollHandler`
+method to add logic on the scroll event.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-scroll-target-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-scroll-target-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-scroll-target-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronScrollTargetBehavior} from '@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js';
+
+class SampleElement extends mixinBehaviors(IronScrollTargetBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
Scrollable content here
+ `;
+ }
+
+ _scrollHandler() {
+ console.log('_scrollHandler', this._scrollTop, this._scrollLeft);
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-scroll-target-behavior
+cd iron-scroll-target-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/iron-selector@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/iron-selector)
+[](https://travis-ci.org/PolymerElements/iron-selector)
+[](https://webcomponents.org/element/@polymer/iron-selector)
+
+## <iron-selector>, `IronSelectableBehavior`, `IronMultiSelectableBehavior`
+
+`iron-selector` is an element which can be used to manage a list of elements
+that can be selected. Tapping on the item will make the item selected. The
+`selected` indicates which item is being selected. The default is to use the
+index of the item. `iron-selector`'s functionality is entirely defined by
+`IronMultiSelectableBehavior`.
+
+`IronSelectableBehavior` gives an element the concept of a selected child
+element. By default, the element will select one of its selectable children
+when a ['tap'
+event](https://www.polymer-project.org/3.0/docs/devguide/gesture-events#gesture-event-types)
+(synthesized by Polymer, roughly 'click') is dispatched to it.
+
+`IronSelectableBehavior` lets you ...
+
+ - decide which children should be considered selectable (`selectable`),
+ - retrieve the currently selected element (`selectedItem`) and all elements
+ in the selectable set (`items`),
+ - change the selection (`select`, `selectNext`, etc.),
+ - decide how selected elements are modified to indicate their selected state
+ (`selectedClass`, `selectedAttribute`),
+
+... among other things.
+
+`IronMultiSelectableBehavior` includes all the features of
+`IronSelectableBehavior` as well as a `multi` property, which can be set to
+`true` to indicate that the element can have multiple selected child elements.
+It also includes the `selectedItems` and `selectedValues` properties for
+working with arrays of selectable elements and their corresponding values
+(`multi` is `true`) - similar to the single-item versions provided by
+`IronSelectableBehavior`: `selectedItem` and `selected`.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-selector),
+ [Demo](https://www.webcomponents.org/element/@polymer/iron-selector/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/iron-selector
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+
this entire element will be animated after one second
+ `;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ // must be set here because properties is static and cannot reference "this"
+ this.animationConfig = {
+ // provided by neon-animation/animations/scale-down-animation.js
+ name: 'scale-down-animation',
+ node: this,
+ };
+
+ setTimeout(() => this.playAnimation(), 1000);
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+### ``
+A simple element that implements NeonAnimatableBehavior.
+
+#### In an html file
+```html
+
+
+
+
+
+
this entire element and its parent will be animated after one second
+
+
+
+
+
+```
+
+#### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
+import '@polymer/neon-animation/neon-animatable.js';
+import '@polymer/neon-animation/animations/scale-down-animation.js';
+
+class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
this div will not be animated
+
+
this div and its parent will be animated after one second
+
+ `;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ // must be set here because properties is static and cannot reference "this"
+ this.animationConfig = {
+ // provided by neon-animation/animations/scale-down-animation.js
+ name: 'scale-down-animation',
+ node: this.$.animatable,
+ };
+
+ setTimeout(() => this.playAnimation(), 1000);
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+### ``
+`neon-animated-pages` manages a set of pages and runs an animation when
+switching between them.
+
+#### In an html file
+```html
+
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
+
+
+```
+
+#### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/neon-animation/neon-animated-pages.js';
+import '@polymer/neon-animation/neon-animatable.js';
+import '@polymer/neon-animation/animations/slide-from-right-animation.js';
+import '@polymer/neon-animation/animations/slide-left-animation.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ `;
+ }
+
+ increase() {
+ this.$.pages.selected = this.$.pages.selected + 1 % 5;
+ }
+
+ decrease() {
+ this.$.pages.selected = (this.$.pages.selected - 1 + 5) % 5;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+#### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';
+import '@polymer/neon-animation/animations/neon-animatable.js';
+import '@polymer/neon-animation/animations/scale-down-animation.js';
+
+class SampleElement extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
this div will not be animated
+
+
this div and its parent will be animated after one second
+
+ `;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+
+ // must be set here because properties is static and cannot reference "this"
+ this.animationConfig = {
+ // provided by neon-animation/animations/scale-down-animation.js
+ name: 'scale-down-animation',
+ node: this.$.animatable,
+ };
+
+ setTimeout(() => this.playAnimation(), 1000);
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/neon-animation
+cd neon-animation
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-behaviors@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-behaviors)
+[](https://travis-ci.org/PolymerElements/paper-behaviors)
+[](https://webcomponents.org/element/@polymer/paper-behaviors)
+
+## <paper-behaviors>
+`` is a set of behaviours to help implement Material Design elements:
+
+- `PaperCheckedElementBehavior` to implement a custom element
+that has a `checked` property similar to `IronCheckedElementBehavior`
+and is compatible with having a ripple effect.
+- `PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
+- `PaperRippleBehavior` dynamically implements a ripple
+when the element has focus via pointer or keyboard. This behavior is intended to be used in conjunction with and after
+`IronButtonState` and `IronControlState`.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-behaviors),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-behaviors/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-behaviors
+```
+
+### Example of using one of the behaviours in a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {PaperButtonBehavior} from '@polymer/paper-behaviors/paper-button-behavior.js';
+
+class SampleElement extends mixinBehaviors([PaperButtonBehavior], PolymerElement) {
+ static get template() {
+ return html`
+
+
I am a ripple-y button
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-behaviors
+cd paper-behaviors
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-button@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-button)
+[](https://travis-ci.org/PolymerElements/paper-button)
+[](https://webcomponents.org/element/@polymer/paper-button)
+
+## <paper-button>
+
+Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
+
+`paper-button` is a button. When the user touches the button, a ripple effect emanates from the point of contact. It may be flat or raised. A raised button is styled with a shadow.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-button),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-button/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-button
+```
+
+### In an html file
+```html
+
+
+
+
+
+ link
+ raised
+ toggles
+ disabled
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-button/paper-button.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+ link
+ raised
+ toggles
+ disabled
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-button
+cd paper-button
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-checkbox@3.1.0
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-checkbox)
+[](https://travis-ci.org/PolymerElements/paper-checkbox)
+[](https://webcomponents.org/element/@polymer/paper-checkbox)
+
+## <paper-checkbox>
+
+`paper-checkbox` is a button that can be either checked or unchecked. User can
+tap the checkbox to check or uncheck it. Usually you use checkboxes to allow
+user to select multiple options from a set. If you have a single ON/OFF option,
+avoid using a single checkbox and use `paper-toggle-button` instead.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-checkbox),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-checkbox/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/paper-checkbox
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+ Unchecked
+ Checked
+ Disabled
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/paper-checkbox/paper-checkbox.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+ Unchecked
+ Checked
+ Disabled
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/paper-checkbox
+cd paper-checkbox
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-dialog-behavior@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-dialog-behavior)
+[](https://travis-ci.org/PolymerElements/paper-dialog-behavior)
+[](https://webcomponents.org/element/@polymer/paper-dialog-behavior)
+
+## PaperDialogBehavior
+
+Use `PaperDialogBehavior` and `paper-dialog-shared-styles.js` to implement a Material Design
+dialog.
+
+For example, if `` implements this behavior:
+
+```html
+
+
Header
+
Dialog body
+
+ Cancel
+ Accept
+
+
+```
+
+`paper-dialog-shared-styles.js` provide styles for a header, content area, and an action area for buttons.
+Use the `
` tag for the header and the `paper-dialog-buttons` or `buttons` class for the action area. You can use the
+`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area.
+
+Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
+dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
+to include `confirmed: true`.
+
+### Accessibility
+
+This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
+to override this attribute with `role="alertdialog"`.
+
+If `modal` is set, the element will prevent the focus from exiting the element.
+It will also ensure that focus remains in the dialog.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-dialog-behavior),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-dialog-behavior/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-dialog-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {PaperDialogBehavior} from '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';
+
+class SampleElement extends mixinBehaviors(PaperDialogBehavior, PolymerElement) {
+ static get template() {
+ return html`
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-dialog-behavior
+cd paper-dialog-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-dialog-scrollable@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-dialog-scrollable)
+[](https://travis-ci.org/PolymerElements/paper-dialog-scrollable)
+[](https://webcomponents.org/element/@polymer/paper-dialog-scrollable)
+
+## <paper-dialog-scrollable>
+`paper-dialog-scrollable` implements a scrolling area used in a Material Design dialog. It shows
+a divider at the top and/or bottom indicating more content, depending on scroll position. Use this
+together with elements implementing `PaperDialogBehavior`.
+
+```html
+
+
Header
+
+ Lorem ipsum...
+
+
+ OK
+
+
+```
+
+It shows a top divider after scrolling if it is not the first child in its parent container,
+indicating there is more content above. It shows a bottom divider if it is scrollable and it is not
+the last child in its parent container, indicating there is more content below. The bottom divider
+is hidden if it is scrolled to the bottom.
+
+If `paper-dialog-scrollable` is not a direct child of the element implementing `PaperDialogBehavior`,
+remember to set the `dialogElement`:
+
+```html
+
+
Header
+
+
Sub-header
+
+ Lorem ipsum...
+
+
+
+ OK
+
+
+
+
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-dialog-scrollable` | Mixin for the scrollable content | {} |
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-dialog-scrollable),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-dialog-scrollable/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-dialog-scrollable
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
Heading
+
+
Scrolalble content...
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-dialog/paper-dialog.js';
+import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
Heading
+
+
Scrolalble content...
+
+
+ `;
+ }
+
+ _openDialog() {
+ this.$.dialog.open();
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-dialog-scrollable
+cd paper-dialog-scrollable
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-dialog@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-dialog)
+[](https://travis-ci.org/PolymerElements/paper-dialog)
+[](https://webcomponents.org/element/@polymer/paper-dialog)
+
+## <paper-dialog>
+`` is a dialog with Material Design styling and optional animations when it is
+opened or closed. It provides styles for a header, content area, and an action area for buttons.
+You can use the `` element (in its own repository) if you need a scrolling
+content area. To autofocus a specific child element after opening the dialog, give it the `autofocus`
+attribute. See `PaperDialogBehavior` and `IronOverlayBehavior` for specifics.
+
+For example, the following code implements a dialog with a header, scrolling content area and
+buttons. Focus will be given to the `dialog-confirm` button when the dialog is opened.
+
+```html
+
+
Header
+
+ Lorem ipsum...
+
+
+ Cancel
+ Accept
+
+
+```
+
+### Styling
+
+See the docs for `PaperDialogBehavior` for the custom properties available for styling
+this element.
+
+### Animations
+
+Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+is opened or closed. See the documentation in
+[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+
+For example:
+
+```html
+
+
+
+
Header
+
Dialog body
+
+```
+
+### Accessibility
+
+See the docs for `PaperDialogBehavior` for accessibility features implemented by this
+element.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-dialog),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-dialog/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-dialog
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
Content
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-dialog/paper-dialog.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
Content
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-dialog
+cd paper-dialog
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-dropdown-menu@3.2.0
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-dropdown-menu)
+[](https://travis-ci.org/PolymerElements/paper-dropdown-menu)
+[](https://webcomponents.org/element/@polymer/paper-dropdown-menu)
+
+## <paper-dropdown-menu>
+`paper-dropdown-menu` is similar to a native browser select element.
+`paper-dropdown-menu` works with selectable content.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-dropdown-menu),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-dropdown-menu/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-dropdown-menu
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+ allosaurus
+ brontosaurus
+ carcharodontosaurus
+ diplodocus
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+ allosaurus
+ brontosaurus
+ carcharodontosaurus
+ diplodocus
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-dropdown-menu
+cd paper-dropdown-menu
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-icon-button@3.0.2
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-icon-button)
+[](https://travis-ci.org/PolymerElements/paper-icon-button)
+[](https://webcomponents.org/element/@polymer/paper-icon-button)
+
+## <paper-icon-button>
+`paper-icon-button` is a button with an image placed at the center. When the user touches
+the button, a ripple effect emanates from the center of the button.
+
+`paper-icon-button` does not include a default icon set. To use icons from the default
+set, include `@polymer/iron-icons/iron-icons.js`, and use the `icon` attribute to specify which icon
+from the icon set to use.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-icon-button),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-icon-button/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-icon-button
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/iron-icons/iron-icons.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-icon-button
+cd paper-icon-button
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-input@3.2.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-input)
+[](https://travis-ci.org/PolymerElements/paper-input)
+[](https://webcomponents.org/element/@polymer/paper-input)
+
+## <paper-input>
+`` is a single-line text field with Material Design styling.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-input),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-input/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-input
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-input/paper-input.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-input
+cd paper-input
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-item@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-item)
+[](https://travis-ci.org/PolymerElements/paper-item)
+[](https://webcomponents.org/element/@polymer/paper-item)
+
+## <paper-item>
+`` is an interactive list item. By default, it is a horizontal flexbox.
+```html
+Item
+```
+
+Use this element with `` to make Material Design styled two-line and three-line
+items.
+
+```html
+
+
+
Show your status
+
Your status is visible to everyone
+
+
+
+```
+
+To use `paper-item` as a link, wrap it in an anchor tag. Since `paper-item` will
+already receive focus, you may want to prevent the anchor tag from receiving
+focus as well by setting its tabindex to -1.
+
+```html
+
+ Polymer Project
+
+```
+
+If you are concerned about performance and want to use `paper-item` in a `paper-listbox`
+with many items, you can just use a native `button` with the `paper-item` class
+applied (provided you have correctly included the shared styles):
+
+```html
+
+
+
+
+
+
+
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-item-min-height` | Minimum height of the item | `48px` |
+| `--paper-item` | Mixin applied to the item | `{}` |
+| `--paper-item-selected-weight` | The font weight of a selected item | `bold` |
+| `--paper-item-selected` | Mixin applied to selected paper-items | `{}` |
+| `--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color` |
+| `--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` |
+| `--paper-item-focused` | Mixin applied to focused paper-items | `{}` |
+| `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` |
+
+### Accessibility
+
+This element has `role="listitem"` by default. Depending on usage, it may be more appropriate to set
+`role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
+
+```html
+
+
+ Show your status
+
+
+
+```
+
+
+
+## <paper-icon-item>
+
+`` is a convenience element to make an item with icon. It is an interactive list
+item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
+varying widths, but you want the item bodies to line up. Use this like a ``. The child
+node with the slot `item-icon` is placed in the icon area.
+
+```html
+
+
+ Favorite
+
+
+
+ Avatar
+
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-item-icon-width` | Width of the icon area | `56px` |
+| `--paper-item-icon` | Mixin applied to the icon area | `{}` |
+| `--paper-icon-item` | Mixin applied to the item | `{}` |
+| `--paper-item-selected-weight` | The font weight of a selected item | `bold` |
+| `--paper-item-selected` | Mixin applied to selected paper-items | `{}` |
+| `--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color` |
+| `--paper-item-disabled` | Mixin applied to disabled paper-items | `{}` |
+| `--paper-item-focused` | Mixin applied to focused paper-items | `{}` |
+| `--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}` |
+
+### Changes in 2.0
+
+Distribution is now done with the `slot="item-icon"` attributes (replacing the `item-icon` attribute):
+
+
+
+ Favorite
+
+
+## <paper-item-body>
+
+Use `` in a `` or `` to make two- or
+three- line items. It is a flex item that is a vertical flexbox.
+
+```html
+
+
+
Show your status
+
Your status is visible to everyone
+
+
+```
+
+The child elements with the `secondary` attribute is given secondary text styling.
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px` |
+| `--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px` |
+| `--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color` |
+| `--paper-item-body-secondary` | Mixin applied to the `secondary` area | `{}` |
+
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-item),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-item/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-item
+```
+
+### In an html file
+```html
+
+
+
+
+
+ Item
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-item/paper-item.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+ Item
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-item
+cd paper-item
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-listbox@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-listbox)
+[](https://travis-ci.org/PolymerElements/paper-listbox)
+[](https://webcomponents.org/element/@polymer/paper-listbox)
+
+## <paper-listbox>
+`` implements an accessible listbox control with Material Design styling. The focused item
+is highlighted, and the selected item has bolded text.
+
+```html
+
+ Item 1
+ Item 2
+
+```
+
+An initial selection can be specified with the `selected` attribute.
+
+```html
+
+ Item 1
+ Item 2
+
+```
+
+Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
+and multiple item can be selected.
+
+```html
+
+ Item 1
+ Item 2
+
+```
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-listbox-background-color` | Menu background color | `--primary-background-color` |
+| `--paper-listbox-color` | Menu foreground color | `--primary-text-color` |
+| `--paper-listbox` | Mixin applied to the listbox | `{}` |
+
+### Accessibility
+
+`` has `role="listbox"` by default. A multi-select listbox will also have
+`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
+down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
+of a listbox item will also focus it.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-listbox),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-listbox/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-listbox
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
item 1
+
item 2
+
item 3
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-listbox/paper-listbox.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
item 1
+
item 2
+
item 3
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-listbox
+cd paper-listbox
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-menu-button@3.1.0
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-menu-button)
+[](https://travis-ci.org/PolymerElements/paper-menu-button)
+[](https://webcomponents.org/element/@polymer/paper-menu-button)
+
+## <paper-menu-button>
+
+`paper-menu-button` allows one to compose a designated "trigger" element with
+another element that represents "content", to create a dropdown menu that
+displays the "content" when the "trigger" is clicked.
+
+The child element assigned to the `dropdown-trigger` slot will be used as the
+"trigger" element. The child element assigned to the `dropdown-content` slot will be
+used as the "content" element.
+
+The `paper-menu-button` is sensitive to its content's `iron-select` events. If
+the "content" element triggers an `iron-select` event, the `paper-menu-button`
+will close automatically.
+
+### Styling
+
+The following custom properties and mixins are also available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `--primary-background-color` |
+| `--paper-menu-button` | Mixin applied to the paper-menu-button | `{}` |
+| `--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}` |
+| `--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}` |
+| `--paper-menu-button-content` | Mixin applied to the paper-menu-button content | `{}` |
+
+## paper-menu-button-animations.js
+
+Defines these animations:
+- <paper-menu-grow-height-animation>
+- <paper-menu-grow-width-animation>
+- <paper-menu-shrink-height-animation>
+- <paper-menu-shrink-width-animation>
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-menu-button),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-menu-button/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-menu-button
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+ Share
+ Settings
+ Help
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/paper-item/paper-item.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-menu-button/paper-menu-button.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+ Share
+ Settings
+ Help
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-menu-button
+cd paper-menu-button
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-progress@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-progress)
+[](https://travis-ci.org/PolymerElements/paper-progress)
+[](https://webcomponents.org/element/@polymer/paper-progress)
+
+## <paper-progress>
+
+The progress bars are for situations where the percentage completed can be
+determined. They give users a quick sense of how much longer an operation
+will take.
+
+There is also a secondary progress which is useful for displaying intermediate
+progress, such as the buffer level during a streaming playback progress bar.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-progress),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-progress/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-progress
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-progress/paper-progress.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-progress
+cd paper-progress
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-ripple@3.0.2
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-ripple)
+[](https://travis-ci.org/PolymerElements/paper-ripple)
+[](https://webcomponents.org/element/@polymer/paper-ripple)
+
+## <paper-ripple>
+`paper-ripple` provides a visual effect that other paper elements can
+use to simulate a rippling effect emanating from the point of contact. The
+effect can be visualized as a concentric circle with motion.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-ripple),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-ripple/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-ripple
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+ Click here
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-ripple/paper-ripple.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ Click here
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-ripple
+cd paper-ripple
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-styles@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-styles)
+[](https://travis-ci.org/PolymerElements/paper-styles)
+[](https://webcomponents.org/element/@polymer/paper-styles)
+
+## <paper-styles>
+1. [default-theme.js](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html): text,
+background and accent colors that match the default Material Design theme
+
+1. [shadow.js](https://github.com/PolymerElements/paper-styles/blob/master/shadow.html): Material Design
+[elevation](https://material.io/design/environment/light-shadows.html#shadows) and shadow styles
+
+1. [typography.js](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
+Material Design [font](http://www.google.com/design/spec/style/typography.html#typography-styles) styles and sizes
+
+1. [demo-pages.js](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html): generic styles
+used in the PolymerElements demo pages
+
+1. [color.js](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
+a complete list of the colors defined in the Material Design [palette](https://www.google.com/design/spec/style/color.html)
+
+We recommend importing each of these individual files, and using the style mixins
+available in each ones, rather than the aggregated `paper-styles.html` as a whole.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-styles),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-styles/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-styles
+```
+
+### In an html file
+```html
+
+
+
+
+
+
Headline
+
This is a lifted paper
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-styles/typography.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+
Headline
+
This is a lifted paper
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-styles
+cd paper-styles
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-tabs@3.1.0
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-tabs)
+[](https://travis-ci.org/PolymerElements/paper-tabs)
+[](https://webcomponents.org/element/@polymer/paper-tabs)
+
+## <paper-tabs>
+
+`` makes it easy to explore and switch between different views or
+functional aspects of an app, or to browse categorized data sets.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-tabs),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-tabs/demo/demo/index.html).
+
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/paper-tabs
+```
+
+### In an HTML file
+
+```html
+
+
+
+
+
+
+ Tab 0
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+
+```
+
+### In a Polymer 3 element
+
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+import '@polymer/paper-tabs/paper-tabs.js';
+import '@polymer/paper-tabs/paper-tab.js';
+
+class ExampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ Tab 0
+ Tab 1
+ Tab 2
+ Tab 3
+
+ `;
+ }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/paper-tabs
+cd paper-tabs
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-toast@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-toast)
+[](https://travis-ci.org/PolymerElements/paper-toast)
+[](https://webcomponents.org/element/@polymer/paper-toast)
+
+## <paper-toast>
+`paper-toast` provides a subtle notification toast. Only one `paper-toast` will
+be visible on screen.
+
+Use `opened` to show the toast:
+
+Example:
+
+```html
+
+```
+
+Also `open()` or `show()` can be used to show the toast:
+
+Example:
+
+```html
+Open Toast
+
+
+...
+
+openToast: function() {
+ this.$.toast.open();
+}
+```
+
+Set `duration` to 0, a negative number or Infinity to persist the toast on screen:
+
+Example:
+
+```html
+
+ Show more
+
+```
+
+`` is affected by the [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) of its container. Adding `` inside elements that create a new stacking context - e.g. ``, `` or `` - might result in toasts partially obstructed or clipped. Add `` to the top level (``) element, outside the structure, e.g.:
+
+```html
+
+
+
+
+```
+
+You can then use custom events to communicate with it from within child components, using `addEventListener` and `dispatchEvent`.
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--paper-toast-background-color` | The paper-toast background-color | `#323232` |
+| `--paper-toast-color` | The paper-toast color | `#f1f1f1` |
+
+This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
+In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-toast),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-toast/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-toast
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-toast/paper-toast.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
+ `;
+ }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-toast
+cd paper-toast
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - @polymer/paper-tooltip@3.0.1
+
+This package contains the following license and notice below:
+
+[](https://www.npmjs.com/package/@polymer/paper-tooltip)
+[](https://travis-ci.org/PolymerElements/paper-tooltip)
+[](https://webcomponents.org/element/@polymer/paper-tooltip)
+
+## <paper-tooltip>
+`` is a label that appears on hover and focus when the user
+hovers over an element with the cursor or with the keyboard. It will be centered
+to an anchor element specified in the `for` attribute, or, if that doesn't exist,
+centered to the parent node containing it.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-tooltip),
+ [Demo](https://www.webcomponents.org/element/@polymer/paper-tooltip/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-tooltip
+```
+
+### In an html file
+```html
+
+
+
+
+
+
+
+ Tooltip text
+
+
+
+
+ Tooltip text
+
+
+
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-tooltip/paper-tooltip.js';
+
+class SampleElement extends PolymerElement {
+ static get template() {
+ return html`
+
`.
+[Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output)
+
+```html
+
+
+
+
+
Hello world!
+
+
+
+```
+
+Documentation
+-------------
+
+* [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)
+* [Examples of usage](/docs/examples.md)
+* [Live demos](https://web-animations.github.io/web-animations-demos)
+* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
+* [W3C specification](https://drafts.csswg.org/web-animations/)
+
+We love feedback!
+-----------------
+
+* For feedback on the API and the specification:
+ * File an issue on GitHub:
+ * Alternatively, send an email to with subject line
+"[web-animations] ... message topic ..."
+([archives](http://lists.w3.org/Archives/Public/public-fx/)).
+
+* For issues with the polyfill, report them on GitHub:
+.
+
+Keep up-to-date
+---------------
+
+Breaking polyfill changes will be announced on this low-volume mailing list:
+[web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!forum/web-animations-changes).
+
+More info
+---------
+
+* [Technical details about the polyfill](/docs/support.md)
+ * [Browser support](/docs/support.md#browser-support)
+ * [Fallback to native](/docs/support.md#native-fallback)
+ * [Feature list](/docs/support.md#features)
+ * [Feature deprecation and removal processes](/docs/support.md#process-for-breaking-changes)
+* To test experimental API features, try one of the
+ [experimental targets](/docs/experimental.md)
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - webidl-conversions@3.0.1
+
+This package contains the following license and notice below:
+
+# The BSD 2-Clause License
+
+Copyright (c) 2014, Domenic Denicola
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+-----------
+
+The following NPM package may be included in this product:
+
+ - whatwg-url@5.0.0
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2015–2016 Sebastian Mayr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
-----------