open-index/open-npm huggingface dataset:
npm package: @polymer/iron-swipeable-container
Description: A container that alows any of its nested children to be swiped away.
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-swipeable-container.svg)](https://www.npmjs.com/package/@polymer/iron-swipeable-container)
[![Build status](https://travis-ci.org/PolymerElements/iron-swipeable-container.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-swipeable-container)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-swipeable-container)

## &lt;iron-swipeable-container&gt;
`<iron-swipeable-container>` is a container that allows any of its nested
children (native or custom elements) to be swiped away. By default it supports
a curved or horizontal transition, but the transition duration and properties
can be customized.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-swipeable-container),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-swipeable-container/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-swipeable-container
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-swipeable-container/iron-swipeable-container.js';
    </script>
  </head>
  <body>
    <iron-swipeable-container>
      <div>I can be swiped</div>
      <paper-card heading="Me too!"></paper-card>
    </iron-swipeable-container>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-swipeable-container/iron-swipeable-container.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <iron-swipeable-container>
      <div>I can be swiped</div>
      <paper-card heading="Me too!"></paper-card>
    </iron-swipeable-container>
    `;
  }
}
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-swipeable-container
cd iron-swipeable-container
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-test-helpers
Description: Utility classes to help make testing easier
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-test-helpers.svg)](https://www.npmjs.com/package/@polymer/iron-test-helpers)
[![Build status](https://travis-ci.org/PolymerElements/iron-test-helpers.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-test-helpers)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-test-helpers)

## iron-test-helpers

A set of utility classes to make testing easier. For more details on the methods
available, please check the documentation of `mock-interactions.js` and
`test-helpers.js`

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-test-helpers).

## Usage

### Mock Interactions

This is a set of methods to simulate mouse or keyboard interaction with an
element.

```javascript
import {pressSpace, tap} from '@polymer/iron-test-helpers/mock-interactions.js';

test('can be triggered with space', function(done) {
  button.addEventListener('keydown', function() {
    done();
  });
  pressSpace(button);
});

test('can be clicked', function(done) {
  button.addEventListener('click', function() {
    done();
  });
  tap(button);
});
```

### Note on globals

Note that in version 3.x, importing `mock-interactions.js` and `test-helpers.js`
will also set the `window.MockInteractions` and `window.TestHelpers` globals,
respectively (and importing `iron-test-helpers.js` will set both). This is done
only for backwards compatibility, and will be removed in the next major version.
All users should migrate away from globals and onto direct ES module imports.

## 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-test-helpers
cd iron-test-helpers
npm install
npm install -g polymer-cli
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-validatable-behavior
Description: Provides a behavior for an element that validates user input
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-validatable-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-validatable-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-validatable-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-validatable-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-validatable-behavior)

## IronValidatableBehavior
Use `IronValidatableBehavior` to implement an element that validates user input. By using this behaviour, your custom element will get a public `validate()` method, which
will return the validity of the element, and a corresponding `invalid` attribute,
which can be used for styling. Can be used alongside an element implementing
the  `IronValidatableBehavior` behaviour.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-validatable-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-validatable-behavior/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-validatable-behavior
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronValidatableBehavior} from '@polymer/iron-validatable-behavior/iron-validatable-behavior.js';

class SampleElement extends mixinBehaviors([IronValidatableBehavior], PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          border: 1px solid green;
          color: green;
        }
        :host([invalid]) {
          border: 1px solid red;
          color: red;
        }
      </style>
      <input id="input">
    `;

    // Override this method if you want to implement custom validity
    // for your element. This element is only valid if the value in the
    // input is "cat".
    function _getValidity() {
      return this.$.input.value === 'cat';
    }
  }
}
customElements.define('sample-element', SampleElement);
```

### In an html file using the element
```html
<html>
  <head>
    <script type="module" src="./sample-element.js"></script>
  </head>
  <body>
    <sample-element id="el"></sample-element>
    <button onclick="el.validate()">Validate!</button>
  </body>
</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-validatable-behavior
cd iron-validatable-behavior
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-validator-behavior
Description: Implements a input validator
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-validator-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-validator-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-validator-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-validator-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-validator-behavior)

## IronValidatorBehavior
Use `IronValidatorBehavior` to implement a custom input/form validator. Element
instances implementing this behavior will be registered for use in elements that implement
`IronValidatableBehavior`.

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-validator-behavior),
  [Demo](https://www.webcomponents.org/element/@polymer/iron-validator-behavior/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/iron-validator-behavior
```

### In a Polymer 3 element that is a validator
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronValidatorBehavior} from '@polymer/iron-validator-behavior/iron-validator-behavior.js';

class SampleValidator extends mixinBehaviors([IronValidatorBehavior], PolymerElement){
  // This validator only validates strings, and is only valid if
  // the value is "cat".
  function validate(value) {
    return value === 'cat';
  }
}
customElements.define('sample-validator', SampleValidator);
```

### Using this validator element in an html file
```html
<html>
  <head>
    <script type="module">
      import '../sample-validator.js';
    </script>
  </head>
  <body>
    <sample-validator id="aValidator"></sample-validator>
    <input id="input">
    <script>
      input.addEventListener('input', function(event) {
        var valid = aValidator.validate(input.value);
        if (valid)
          input.removeAttribute('invalid');
        else
          input.setAttribute('invalid', true);
      });
    </script>
  </body>
</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-validator-behavior
cd iron-validator-behavior
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/neon-elements
Description: Neon elements implement special effects.
Latest version: 0.0.3

# neon-elements

The neon elements are for flashy transitions and animations.

## Roadmap

### Elements in progress

_No elements currently in progress - we release the `neon-animations` component which contains a ton of neat animation features, including much of the behavior previously in `core-animated-pages`._

### Elements planned
_Elements we're planning on building soon but haven't started yet_

[Lot's we're planning on here, but nothing explicit to list. If there are specific animations you'd like to see, feel free to file issues!]

### Elements not planned, notably
_Elements we're not planning on building as part of this product line, but that one might be wondering about_

[None]
npm package: @polymer/paper-behaviors
Description: Common behaviors across the paper elements
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-behaviors.svg)](https://www.npmjs.com/package/@polymer/paper-behaviors)
[![Build status](https://travis-ci.org/PolymerElements/paper-behaviors.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-behaviors)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-behaviors)

## &lt;paper-behaviors&gt;
`<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`
      <style>
        :host {
          display: block;
        }
        /* Some properties inherited from the behaviour */
        :host([disabled]) {
          background-color: grey;
          pointer-events: none;
        }
        :host([active]),
        :host([pressed]) {
          background-color: blue;
        }
      </style>
      <div>I am a ripple-y button</div>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-button
Description: Material design button
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-button.svg)](https://www.npmjs.com/package/@polymer/paper-button)
[![Build status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-button)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-button)

## &lt;paper-button&gt;

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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-button/paper-button.js';
    </script>
  </head>
  <body>
    <paper-button class="pink">link</paper-button>
    <paper-button raised class="indigo">raised</paper-button>
    <paper-button toggles raised class="green">toggles</paper-button>
    <paper-button disabled class="disabled">disabled</paper-button>
  </body>
</html>
```
### 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`
      <paper-button class="pink">link</paper-button>
      <paper-button raised class="indigo">raised</paper-button>
      <paper-button toggles raised class="green">toggles</paper-button>
      <paper-button disabled class="disabled">disabled</paper-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-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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-card
Description: Material design piece of paper with unique related data
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-card.svg)](https://www.npmjs.com/package/@polymer/paper-card)
[![Build status](https://travis-ci.org/PolymerElements/paper-card.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-card)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-card)

## &lt;paper-card&gt;
`paper-card` is a container with a drop shadow.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-card),
  [Demo](https://www.webcomponents.org/element/@polymer/paper-card/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/paper-card
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-card/paper-card.js';
      import '@polymer/paper-button/paper-button.js';
    </script>
  </head>
  <body>
    <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
      <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
      <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-button/paper-button.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
      <div class="card-content">
        Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
      <div class="card-actions">
        <paper-button>Share</paper-button>
        <paper-button>Explore!</paper-button>
      </div>
    </paper-card>
    `;
  }
}
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-card
cd paper-card
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-checkbox
Description: A material design checkbox
Author: The Polymer Authors
Latest version: 3.1.0

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-checkbox.svg)](https://www.npmjs.com/package/@polymer/paper-checkbox)
[![Build status](https://travis-ci.org/PolymerElements/paper-checkbox.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-checkbox)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-checkbox)

## &lt;paper-checkbox&gt;

`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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-checkbox/paper-checkbox.js';
    </script>
  </head>
  <body>
    <paper-checkbox>Unchecked</paper-checkbox>
    <paper-checkbox checked>Checked</paper-checkbox>
    <paper-checkbox disabled>Disabled</paper-checkbox>
  </body>
</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/paper-checkbox/paper-checkbox.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-checkbox>Unchecked</paper-checkbox>
      <paper-checkbox checked>Checked</paper-checkbox>
      <paper-checkbox disabled>Disabled</paper-checkbox>
    `;
  }
}

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:<port>/demo/
```

### Running the tests

```sh
polymer test --npm
```
npm package: @polymer/paper-dialog-behavior
Description: Implements a behavior used for material design dialogs
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-dialog-behavior.svg)](https://www.npmjs.com/package/@polymer/paper-dialog-behavior)
[![Build status](https://travis-ci.org/PolymerElements/paper-dialog-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-dialog-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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 `<paper-dialog-impl>` implements this behavior:

```html
<paper-dialog-impl>
  <h2>Header</h2>
  <div>Dialog body</div>
  <div class="paper-dialog-buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm>Accept</paper-button>
  </div>
</paper-dialog-impl>
```

`paper-dialog-shared-styles.js` provide styles for a header, content area, and an action area for buttons.
Use the `<h2>` 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`
      <style include="paper-dialog-shared-styles"></style>
      <slot></slot>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-elements
Description: Paper elements are a set of visual elements that implement Google's Material Design.
Latest version: 0.0.3

#paper-elements

The paper elements are a set of UI components designed to implement Google's [material design](http://www.google.com/design/spec/material-design/introduction.html) guidelines.

## Roadmap

### Elements recently released

* [`paper-listbox`](https://github.com/polymerelements/paper-listbox) - An alternative to `paper-menu` with a different interface, with much better accessibility and performance.
* [`paper-menu-button`](https://github.com/polymerelements/paper-menu-button) - A button that opens up a menu overlay
* [`paper-tooltip`](https://github.com/polymerelements/paper-tooltip) - A tooltip that shows on hover
* [`paper-badge`](https://github.com/polymerelements/paper-badge) - A circular text badge representing a status or notification
* [`paper-card`](https://github.com/polymerelements/paper-card) - A material design-style card
* [`paper-dropdown-menu`](https://github.com/polymerelements/paper-dropdown-menu) - A material design-style browser select element
* [`paper-submenu`](https://github.com/polymerelements/paper-menu) - A material design-style menu with nestable subsections 

### Elements in progress

We're currently working hard on honing existing elements and fixing open issues. 

### Elements planned
_Elements we're planning on building soon but haven't started yet_

**Short-term**
_Nothing on the super short-term list_

**Mid-term**
* `paper-bottom-sheet` - a [material design bottom sheet](https://www.google.com/design/spec/components/bottom-sheets.html) this can easily be created with `neon-animation` ([example](https://googlewebcomponents.github.io/places-app/))
* `paper date and time pickers` - [material design date and time pickers](https://www.google.com/design/spec/components/pickers.html#)
* `paper steppers` - [material design steppers](https://www.google.com/design/spec/components/steppers.html#)
* `paper cascading menu` - the desktop cascading version of the [material design dropdown menus](https://www.google.com/design/spec/components/menus.html#menus-usage)

**Longer term**
* `paper-chip` - a [material design chip](http://www.google.com/design/spec/components/chips.html)
* `paper-data-table` - a [material design data table](http://www.google.com/design/spec/components/data-tables.html). This one is very complex, and tentatively planned for the mid- to distant-future (i.e. months not weeks)

### Third-Party elements
_Elements not built directly by the Polymer core team, but which are of notably high quality and fill current gaps in the element set._
* [`paper-datatable`](https://github.com/David-Mulder/paper-datatable) by [David-Mulder](https://github.com/David-Mulder/) - a material design data table for displaying tabular data, sorting by columns, and more.

### Elements not planned, notably
_Elements we're not planning on building as part of this product line, but that one might be wondering about_

* `paper-shadow` - this behavior is now provided by [`paper-material`](https://github.com/polymerelements/paper-material)
npm package: @polymer/paper-fab
Description: A material design floating action button
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-fab.svg)](https://www.npmjs.com/package/@polymer/paper-fab)
[![Build status](https://travis-ci.org/PolymerElements/paper-fab.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-fab)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-fab)

## &lt;paper-fab&gt;
`paper-fab` is a floating action button. It contains an image placed in the center and
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
the user touches the button, a ripple effect emanates from the center of the button.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-fab),
  [Demo](https://www.webcomponents.org/element/@polymer/paper-fab/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/paper-fab
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-fab/paper-fab.js';
      import '@polymer/iron-icons/iron-icons.html';
    </script>
  </head>
  <body>
    <paper-fab icon="favorite"></paper-fab>
    <paper-fab label="😻"></paper-fab>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-fab/paper-fab.js';
import '@polymer/iron-icons/iron-icons.html';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
    <paper-fab icon="favorite"></paper-fab>
    <paper-fab label="😻"></paper-fab>
    `;
  }
}
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-fab
cd paper-fab
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-icon-button
Description: A material design icon button
Author: The Polymer Authors
Latest version: 3.0.2

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-icon-button.svg)](https://www.npmjs.com/package/@polymer/paper-icon-button)
[![Build status](https://travis-ci.org/PolymerElements/paper-icon-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-icon-button)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-icon-button)

## &lt;paper-icon-button&gt;
`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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-icon-button/paper-icon-button.js';
      import '@polymer/iron-icons/iron-icons.js';
    </script>
  </head>
  <body>
    <paper-icon-button icon="favorite"></paper-icon-button>
  </body>
</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`
      <paper-icon-button icon="favorite"></paper-icon-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-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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-input
Description: Material design text fields
Author: The Polymer Authors
Latest version: 3.2.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-input.svg)](https://www.npmjs.com/package/@polymer/paper-input)
[![Build status](https://travis-ci.org/PolymerElements/paper-input.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-input)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-input)

## &lt;paper-input&gt;
`<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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-input/paper-input.js';
    </script>
  </head>
  <body>
    <paper-input always-float-label label="Floating label"></paper-input>
  </body>
</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`
      <paper-input always-float-label label="Floating label"></paper-input>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-material
Description: A material design container that looks like a lifted sheet of paper
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-material.svg)](https://www.npmjs.com/package/@polymer/paper-material)
[![Build status](https://travis-ci.org/PolymerElements/paper-material.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-material)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-material)

## &lt;paper-material&gt;
`paper-material` is a container that renders two shadows on top of each other to
create the effect of a lifted piece of paper.

⚠️ As of the 2.0 release, this element is **deprecated** in favour of the shared styles in [`PolymerElements/paper-styles`](https://github.com/PolymerElements/paper-styles/blob/master/element-styles/paper-material-styles.html). Please see the implementation of [`PolymerElements/paper-button`](https://github.com/PolymerElements/paper-button/blob/master/paper-button.html#L114) for an example.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-material),
  [Demo](https://www.webcomponents.org/element/@polymer/paper-material/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/paper-material
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-material/paper-material.js';
    </script>
  </head>
  <body>
    <paper-material elevation="1">
      <div>Some content</div>
    </paper-material>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-material/paper-material.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-material elevation="1">
        <div>Some content</div>
      </paper-material>
    `;
  }
}
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-material
cd paper-material
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-progress
Description: A material design progress bar
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-progress.svg)](https://www.npmjs.com/package/@polymer/paper-progress)
[![Build status](https://travis-ci.org/PolymerElements/paper-progress.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-progress)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-progress)

## &lt;paper-progress&gt;

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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-progress/paper-progress.js';
    </script>
  </head>
  <body>
    <paper-progress indeterminate class="blue"></paper-progress>
    <paper-progress indeterminate class="slow red"></paper-progress>
    <paper-progress value="40" secondary-progress="80"></paper-progress>
  </body>
</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`
      <paper-progress indeterminate class="blue"></paper-progress>
      <paper-progress indeterminate class="slow red"></paper-progress>
      <paper-progress value="40" secondary-progress="80"></paper-progress>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/paper-radio-button
Description: A material design radio button
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-radio-button.svg)](https://www.npmjs.com/package/@polymer/paper-radio-button)
[![Build status](https://travis-ci.org/PolymerElements/paper-radio-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-radio-button)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-radio-button)

## &lt;paper-radio-button&gt;

`paper-radio-button` is a button that can be either checked or unchecked. The
user can tap the radio button to check or uncheck it.

Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons
are inside a radio group, exactly one radio button in the group can be checked
at any time.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-radio-button),
  [Demo](https://www.webcomponents.org/element/@polymer/paper-radio-button/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/paper-radio-button
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-radio-button/paper-radio-button.js';
    </script>
  </head>
  <body>
    <paper-radio-button>Unchecked</paper-radio-button>
    <paper-radio-button checked>Checked</paper-radio-button>
    <paper-radio-button disabled>Disabled</paper-radio-button>
  </body>
</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/paper-radio-button/paper-radio-button.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-radio-button>Unchecked</paper-radio-button>
      <paper-radio-button checked>Checked</paper-radio-button>
      <paper-radio-button disabled>Disabled</paper-radio-button>
    `;
  }
}

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-radio-button
cd paper-radio-button
npm install
npm install -g polymer-cli
```

### Running the demo locally

```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests

```sh
polymer test --npm
```
npm package: @polymer/paper-radio-group
Description: A group of material design radio buttons
Author: The Polymer Authors
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-radio-group.svg)](https://www.npmjs.com/package/@polymer/paper-radio-group)
[![Build status](https://travis-ci.org/PolymerElements/paper-radio-group.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-radio-group)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-radio-group)

## &lt;paper-radio-group&gt;

`<paper-radio-group>` allows user to select at most one radio button from a set.
Checking one radio button that belongs to a radio group unchecks any previously
checked radio button within the same group. Use `selected` to get or set the
selected radio button.

The `<paper-radio-button>` elements inside the group must have the `name`
attribute set.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-radio-group),
  [Demo](https://www.webcomponents.org/element/@polymer/paper-radio-group/demo/demo/index.html).

## Usage

### Installation

```
npm install --save @polymer/paper-radio-group
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-radio-button/paper-radio-button.js';
      import '@polymer/paper-radio-group/paper-radio-group.js';
    </script>
  </head>
  <body>
    <paper-radio-group selected="small">
      <paper-radio-button name="small">Small</paper-radio-button>
      <paper-radio-button name="medium">Medium</paper-radio-button>
      <paper-radio-button name="large">Large</paper-radio-button>
    </paper-radio-group>
  </body>
</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/paper-radio-button/paper-radio-button.js';
import '@polymer/paper-radio-group/paper-radio-group.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-radio-group selected="small">
        <paper-radio-button name="small">Small</paper-radio-button>
        <paper-radio-button name="medium">Medium</paper-radio-button>
        <paper-radio-button name="large">Large</paper-radio-button>
      </paper-radio-group>
    `;
  }
}

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-radio-group
cd paper-radio-group
npm install
npm install -g polymer-cli
```

### Running the demo locally

```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/
```

### Running the tests

```sh
polymer test --npm
```
npm package: @polymer/paper-ripple
Description: Adds a material design ripple to any container
Author: The Polymer Authors
Latest version: 3.0.2

[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-ripple.svg)](https://www.npmjs.com/package/@polymer/paper-ripple)
[![Build status](https://travis-ci.org/PolymerElements/paper-ripple.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-ripple)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-ripple)

## &lt;paper-ripple&gt;
`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
<html>
  <head>
    <script type="module">
      import '@polymer/paper-ripple/paper-ripple.js';
    </script>
  </head>
  <body>
    <div style="position: relative">
      <paper-ripple>Click here</paper-ripple>
    </div>
  </body>
</html>
```
### 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`
      <div style="position: relative">
        <paper-ripple>Click here</paper-ripple>
      </div>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```