open-index/open-npm huggingface dataset:
npm package: @polymer/app-layout-templates
Description: Application layout templates
Latest version: 0.0.3

Application Layout Templates
============================

Use the application layout templates provided and start building responsive applications.

### [Application Layout Templates Viewer](http://polymerelements.github.io/app-layout-templates/index.html)

#### Templates:

[Left Nav + View](http://polymerelements.github.io/app-layout-templates/nav-view/index.html)

[Left Nav + Card Feed](http://polymerelements.github.io/app-layout-templates/nav-cards/index.html)

[Left Nav + List + Detail](http://polymerelements.github.io/app-layout-templates/nav-list-detail/index.html)

[List Left + Card over Extended Header](http://polymerelements.github.io/app-layout-templates/list-card-over/index.html)
npm package: @polymer/app-localize-behavior
Description: A behavior to help with internationalizating apps
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;app-localize-behavior&gt;
`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 install --save @polymer/app-localize-behavior
```

### In an html file using the localized element
```html
<html>
  <head>
    <!-- Optional: Intl polyfill -->
    <script src="https://unpkg.com/intl@1.2.5/dist/Intl.min.js"></script>
    <script src="https://unpkg.com/intl@1.2.5/locale-data/jsonp/en.js"></script>
    <script src="https://unpkg.com/intl@1.2.5/locale-data/jsonp/fr.js"></script>

    <!-- Elements using the behaviour -->
    <script type="module" src="sample-element.js"></script>
  </head>
  <body>
    <sample-element></sample-element>
  </body>
</html>
```

### 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`
      <div>{{localize('hello', 'name', 'Batman')}}</div>
    `;
  }

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

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/app-route
Description: App routing expressed as Polymer Custom Elements.
Author: The Polymer Authors
Latest version: 3.0.2

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


## &lt;app-route&gt;
`app-route` is an element that enables declarative, self-describing routing
for a web app.

See: [Documentation](https://www.webcomponents.org/element/@polymer/app-route),
  [Large Demo](https://www.webcomponents.org/element/@polymer/app-route/demo/demo/index.html),
  [Simple Demo](https://www.webcomponents.org/element/@polymer/app-route/demo/demo/simple-demo.html),
  [Data Loading Demo](https://www.webcomponents.org/element/@polymer/app-route/demo/demo/data-loading-demo.html).

## Usage

### Installation
```
npm install --save @polymer/app-route
```

### In an HTML file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-route/app-location.js';
      import '@polymer/app-route/app-route.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-location route="{{route}}"></app-location>
        <app-route
            route="{{route}}"
            pattern="/:page"
            data="{{routeData}}"
            tail="{{subroute}}">
        </app-route>
        <app-route
            route="{{subroute}}"
            pattern="/:id"
            data="{{subrouteData}}">
        </app-route>
      </template>
    </dom-bind>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-route/app-location.js';
import '@polymer/app-route/app-route.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-location route="{{route}}"></app-location>
      <app-route
          route="{{route}}"
          pattern="/:page"
          data="{{routeData}}"
          tail="{{subroute}}">
      </app-route>
      <app-route
          route="{{subroute}}"
          pattern="/:id"
          data="{{subrouteData}}">
      </app-route>
    `;
  }
}
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-route
cd app-route
npm install
npm install -g polymer-cli
```

### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:<port>/demo/index.html
open http://127.0.0.1:<port>/demo/simple-demo.html
open http://127.0.0.1:<port>/demo/data-loading-demo.html
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/chartjs-element
Description: <!---
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
chartjs-element.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->


##&lt;chartjs-element&gt;

Chartjs Element

Easy, object oriented client side graphs for designers and developers.

[http://www.chartjs.org](http://www.chartjs.org)
npm package: @polymer/font-roboto
Description: An HTML import for Roboto
Author: The Polymer Authors
Latest version: 3.0.2

[![Published on NPM](https://img.shields.io/npm/v/@polymer/font-roboto.svg)](https://www.npmjs.com/package/@polymer/paper-input)
[![Build status](https://travis-ci.org/PolymerElements/font-roboto.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/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
<html>
  <head>
    <script type="module">
      import '@polymer/font-roboto/roboto.js';
    </script>
  </head>
  <style>
    body {
      font-family: Roboto;
    }
  </style>
  <body>
    <p>This text is in Roboto.</p>
  </body>
</html>
```

### 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`
      <style>
        p {
          font-family: Roboto;
        }
      </style>
      <p>This text is in Roboto.</p>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/font-roboto-local
Description: An HTML Import for Robot, with local font files
Author: The Polymer Project Authors
Latest version: 3.0.2

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

## font-roboto-local

A version of [font-roboto](https://github.com/PolymerElements/font-roboto) using locally available font files

The font files are subject to the Apache License found here: https://github.com/google/fonts/blob/master/apache/roboto/LICENSE.txt

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

## Usage

### Installation
```
npm install --save @polymer/font-roboto-local
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/font-roboto-local/roboto.js';
    </script>
    <style>
      div { font-family: Roboto; }
    </style>
  </head>
  <body>
    <div>This should be in roboto</div>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/font-roboto-local/roboto.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        div { font-family: Roboto; }
      </style>
      <div>This should be in roboto</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/font-roboto-local
cd font-roboto-local
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/gold-cc-cvc-input
Description: Provides an input field for a credit card cvc number
Author: The Polymer Authors
Latest version: 3.0.2

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

## &lt;gold-cc-cvc-input&gt;

`gold-cc-cvc-input` is a single-line text field with Material Design styling
for entering a credit card's CVC (Card Verification Code). It supports both
4-digit Amex CVCs and non-Amex 3-digit CVCs

See: [Documentation](https://www.webcomponents.org/element/@polymer/gold-cc-cvc-input),
  [Demo](https://www.webcomponents.org/element/@polymer/gold-cc-cvc-input/demo/demo/index.html).

## Usage

### Installation
```
npm install --save @polymer/gold-cc-cvc-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/gold-cc-input/gold-cc-input.js';
      import '@polymer/gold-cc-cvc-input/gold-cc-cvc-input.js';
    </script>
  </head>
  <body>
    <gold-cc-input card-type="{{cardType}}"></gold-cc-input>
    <gold-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-input>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/gold-cc-input/gold-cc-input.js';
import '@polymer/gold-cc-cvc-input/gold-cc-cvc-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <gold-cc-input card-type="{{cardType}}"></gold-cc-input>
      <gold-cc-cvc-input card-type="[[cardType]]"></gold-cc-cvc-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/gold-cc-cvc-input
cd gold-cc-cvc-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/gold-cc-expiration-input
Description: A validating input for a credit card expiration date
Author: The Polymer Authors
Latest version: 3.0.1

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

##&lt;gold-cc-expiration-input&gt;

`gold-cc-expiration-input` is a  single-line text field with Material Design styling
for entering a credit card's expiration date
See: [Documentation](https://www.webcomponents.org/element/@polymer/gold-cc-expiration-input),
  [Demo](https://www.webcomponents.org/element/@polymer/gold-cc-expiration-input/demo/demo/index.html).

## Changes in 3.0
* `date-input` will no longer fire the `dateChanged` event.
  * Instead listen to the non-bubbling `date-changed` event.
* Values set delcaratively will be visible.

## Usage

### Installation
```
npm install --save @polymer/gold-cc-expiration-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/gold-cc-expiration-input/gold-cc-expiration-input.js';
    </script>
  </head>
  <body>
    <gold-cc-expiration-input></gold-cc-expiration-input>
    <gold-cc-expiration-input value="11/15"></gold-cc-expiration-input>
    <gold-cc-expiration-input label="Date"></gold-cc-expiration-input>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/gold-cc-expiration-input/gold-cc-expiration-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <gold-cc-expiration-input></gold-cc-expiration-input>
      <gold-cc-expiration-input value="11/15"></gold-cc-expiration-input>
      <gold-cc-expiration-input label="Date"></gold-cc-expiration-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/gold-cc-expiration-input
cd gold-cc-expiration-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/gold-cc-input
Description: A credit card input field
Author: The Polymer Authors
Latest version: 3.0.1

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


## &lt;gold-cc-input&gt;

`gold-cc-input` is a single-line text field with Material Design styling
for entering a credit card number. As the user types, the number will be
formatted by adding a space every 4 digits.

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

## Usage

### Installation
```
npm install --save @polymer/gold-cc-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/gold-cc-input/gold-cc-input.js';
    </script>
  </head>
  <body>
    <gold-cc-input
          auto-validate
          label="Card number"
          error-message="Enter valid visa or mastercard!"
          card-types='["visa", "mastercard"]'
          value="6011 0000 0000 1233"
          required>
    </gold-cc-input>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/gold-cc-input/gold-cc-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <gold-cc-input
          auto-validate
          label="Card number"
          error-message="Enter valid visa or mastercard!"
          card-types='["visa", "mastercard"]'
          value="6011 0000 0000 1233"
          required>
      </gold-cc-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/gold-cc-input
cd gold-cc-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/gold-elements
Description: The gold elements are built for e-commerce use-cases like checkout flows.
Latest version: 0.0.3

# gold-elements
Elements built for e-commerce-specific use-cases, like checkout flows.

Current elements include:
* `gold-cc-cvc-input`: A credit card verification input field
* `gold-cc-expiration-input`: A field for a credit card expiration date
* `gold-cc-input`: An input field for a credit card number
* `gold-email-input`: An input field for an email address
* `gold-phone-input`: An input field for a phone number
* `gold-zip-input`: An input field for a zip

[Here](https://github.com/notwaldorf/polymer-gold-elements-demo) is a demo of
different checkout forms using all of the available gold elements.

![gold screen shot](/screenshot.png?raw=true)
npm package: @polymer/gold-email-input
Description: An email input field
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
gold-email-input.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->

[![Build Status](https://travis-ci.org/PolymerElements/gold-email-input.svg?branch=master)](https://travis-ci.org/PolymerElements/gold-email-input)

_[Demo and API Docs](https://elements.polymer-project.org/elements/gold-email-input)_


##&lt;gold-email-input&gt;

`<gold-email-input>` is a single-line text field with Material Design styling
for entering an email address.

```html
<gold-email-input></gold-email-input>
```

It may include an optional label, which by default is "Email".

```html
<gold-email-input label="your email address"></gold-email-input>
```

### Validation

The input can be automatically validated as the user is typing by using
the `auto-validate` and `required` attributes. For manual validation, the
element also has a `validate()` method, which returns the validity of the
input as well sets any appropriate error messages and styles.

See `Polymer.PaperInputBehavior` for more API docs.

### Styling

See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.
npm package: @polymer/gold-phone-input
Description: A validating input for a phone number
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;gold-phone-input&gt;
`<gold-phone-input>` is a single-line text field with Material Design styling
for entering a phone number.

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

## Usage

### Installation
```
npm install --save @polymer/gold-phone-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/gold-phone-input/gold-phone-input.js';
    </script>
  </head>
  <body>
    <gold-phone-input
        label="France phone number"
        country-code="33"
        phone-number-pattern="X-XX-XX-XX-XX"
        auto-validate>
    </gold-phone-input>
  </body>
</html>
```

### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/gold-phone-input/gold-phone-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <gold-phone-input
          label="France phone number"
          country-code="33"
          phone-number-pattern="X-XX-XX-XX-XX"
          auto-validate>
      </gold-phone-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/gold-phone-input
cd gold-phone-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/gold-zip-input
Description: An input field for a zip code
Author: The Polymer Authors
Latest version: 3.0.1


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

## &lt;gold-zip-input&gt;

`gold-zip-input` is a single-line text field with Material Design styling
for entering a US zip code.

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

## Usage

### Installation
```
npm install --save @polymer/gold-zip-input
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/gold-zip-input/gold-zip-input.js';
    </script>
  </head>
  <body>
    <gold-zip-input auto-validate value="90210-9999"></gold-zip-input>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/gold-zip-input/gold-zip-input.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <gold-zip-input auto-validate value="90210-9999"></gold-zip-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/gold-zip-input
cd gold-zip-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/iron-a11y-keys
Description: A basic element implementation of iron-a11y-keys-behavior, matching the legacy core-a11y-keys.
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;iron-a11y-keys&gt;
`iron-a11y-keys` provides a cross-browser interface for processing
keyboard commands. The interface adheres to [WAI-ARIA best
practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
It uses an expressive syntax to filter key presses.

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

## Usage

### Installation
```
npm install --save @polymer/iron-a11y-keys
```

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/iron-a11y-keys/iron-a11y-keys.js';
    </script>
  </head>
  <body>
    <iron-a11y-keys id="keys" keys="left right down up"></iron-a11y-keys>

    <script>
      // Where to listen for the keys.
      keys.target = document.body;
      keys.addEventListener('keys-pressed', function(event) {
        console.log(event.detail);
      });
    </script>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-a11y-keys/iron-a11y-keys.js';

class SampleElement extends PolymerElement {
  static get properties() {
    return {
      target: {
        type: Object,
        value: function() {
          return this.$.input;
        }
      },
    }
  }

  static get template() {
    return html`
      <iron-a11y-keys id="a11y"
          target="[[target]]" keys="enter"
          on-keys-pressed="onEnter"></iron-a11y-keys>
      <input id="input" placeholder="Type something. Press enter. Check console.">
    `;
  }

  function onEnter() {
    console.log(this.userInput);
  }
}
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
cd iron-a11y-keys
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-a11y-keys-behavior
Description: A behavior that enables keybindings for greater a11y.
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;iron-a11y-keys-behavior&gt;
`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`
      <pre>[[pressed]]</pre>
    `;
  }

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

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-ajax
Description: Makes it easy to make ajax calls and parse the response
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;iron-ajax&gt;

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
<html>
  <head>
    <script type="module">
      import '@polymer/iron-ajax/iron-ajax.js';
    </script>
  </head>
  <body>
    <iron-ajax
        auto
        url="https://www.googleapis.com/youtube/v3/search"
        params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
        handle-as="json"
        on-response="handleResponse"
        debounce-duration="300">
    </iron-ajax>
  </body>
</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`
      <iron-ajax
          auto
          url="https://www.googleapis.com/youtube/v3/search"
          params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
          handle-as="json"
          on-response="handleResponse"
          debounce-duration="300">
      </iron-ajax>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-autogrow-textarea
Description: A textarea element that automatically grows with input
Author: The Polymer Authors
Latest version: 3.0.3


<!---

This README is automatically generated from the comments in these files:
iron-autogrow-textarea.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

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


## &lt;iron-autogrow-textarea&gt;

`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
  <html>
    <head>
      <script type="module">
        import '@polymer/iron-autogrow-textarea/iron-autogrow-textarea.js';
      </script>
    </head>
    <body>
      <iron-autogrow-textarea></iron-autogrow-textarea>
    </body>
  </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`
        <iron-autogrow-textarea></iron-autogrow-textarea>
      `;
    }
  }
  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:<port>/demo/
  ```

  ### Running the tests
  ```sh
  polymer test --npm
  ```
npm package: @polymer/iron-behaviors
Description: Provides a set of behaviors for the iron elements
Author: The Polymer Authors
Latest version: 3.0.1

<!---
This README is automatically generated from the comments in these files:
iron-button-state.html  iron-control-state.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->

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

## &lt;iron-behaviors&gt;
`<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`
      <style>
        :host {
          display: inline-block;
        }

        :host([disabled]) {
          opacity: 0.3;
          pointer-events: none;
        }

        :host([active]),
        :host([pressed]) {
          background-color: blue;
        }

        :host([focused]) {
          background-color: cornflowerblue;
        }
      </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/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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-checked-element-behavior
Description: Implements an element that has a checked attribute and can be added to a form
Latest version: 3.0.1

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-checked-element-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-checked-element-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-checked-element-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-checked-element-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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`
      <style>
        :host([invalid]) {
          color: red;
        }
      </style>

      <button on-click="_checkValidity">validate</button>
      <input type="checkbox" id="checkbox" checked="{{checked::input}}">
      <span id="labelText">{{label}}</span>
    `;
  }

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

### Running the tests

```sh
polymer test --npm
```
npm package: @polymer/iron-collapse
Description: Provides a collapsable container
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;iron-collapse&gt;
`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
<style>
  .collapse-content {
    padding: 15px;
    border: 1px solid #dedede;
  }
</style>

<iron-collapse>
  <div class="collapse-content">
    <div>Content goes here...</div>
  </div>
</iron-collapse>
```

### 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
<html>
  <head>
    <script type="module">
      import '@polymer/iron-collapse/iron-collapse.js';
    </script>
  </head>
  <body>
    <iron-collapse id="collapse">
      <div>Content goes here...</div>
    </iron-collapse>
  </body>
</html>
```
### 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`
      <iron-collapse id="collapse">
        <div>Content goes here...</div>
      </iron-collapse>
    `;
  }
}
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:<port>/demo/
```

### Running the tests
```sh
polymer test --npm
```
npm package: @polymer/iron-dropdown
Description: An unstyled element that works similarly to a native browser select
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;iron-dropdown&gt;

`<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
<html>
  <head>
    <script type="module">
      import '@polymer/iron-dropdown/iron-dropdown.js';
    </script>
    <style>
      #container {
        display: inline-block;
      }

      iron-dropdown {
        border: 1px solid gray;
        background: white;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <button onclick="dropdown.open();">open the iron-dropdown</button>
      <iron-dropdown id="dropdown" no-overlap>
        <div slot="dropdown-content">Hello!</div>
      </iron-dropdown>
    </div>
  </body>
</html>
```

### 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`
      <style>
        :host {
          display: inline-block;
        }

        iron-dropdown {
          border: 1px solid gray;
          background: white;
          font-size: 2em;
        }
      </style>
      <button on-click="_openDropdown">open the dropdown</button>
      <iron-dropdown id="dropdown" horizontal-align="right" vertical-align="top">
        <div slot="dropdown-content">Hello!</div>
      </iron-dropdown>
    `;
  }

  _openDropdown() {
    this.$.dropdown.open();
  }
}
customElements.define('sample-element', SampleElement);
```

In the above example, the `<div>` 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:<port>/demo/
```

### Running the tests

```sh
polymer test --npm
```