open-index/open-npm huggingface dataset:
npm package: @polymer/paper-slider
Description: A material design-style slider
Latest version: 3.0.1

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

## &lt;paper-slider&gt;
Material design: [Sliders](https://www.google.com/design/spec/components/sliders.html)

`paper-slider` allows user to select a value from a range of values by
moving the slider thumb.  The interactive nature of the slider makes it a
great choice for settings that reflect intensity levels, such as volume,
brightness, or color saturation.

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

## Usage

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

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-slider/paper-slider.js';
    </script>
  </head>
  <body>
    <paper-slider
        value="183"
        max="255"
        secondary-progress="200"
        editable>
    </paper-slider>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-slider/paper-slider.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-slider
        value="183"
        max="255"
        secondary-progress="200"
        editable>
    </paper-slider>
    `;
  }
}
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-slider
cd paper-slider
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-spinner
Description: A material design spinner
Author: The Polymer Authors
Latest version: 3.0.2

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

## &lt;paper-spinner&gt;
Element providing a multiple color material design circular spinner.

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

## Usage

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

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

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-spinner active></paper-spinner>
    `;
  }
}
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-spinner
cd paper-spinner
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-tabs
Description: Material design tabs
Author: The Polymer Authors
Latest version: 3.1.0

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

## &lt;paper-tabs&gt;

`<paper-tabs>` makes it easy to explore and switch between different views or
functional aspects of an app, or to browse categorized data sets.

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

## Usage

### Installation

```
npm install --save @polymer/paper-tabs
```

### In an HTML file

```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-tabs/paper-tabs.js';
      import '@polymer/paper-tabs/paper-tab.js';
    </script>
  </head>
  <body>
    <paper-tabs selected="0" scrollable>
      <paper-tab>Tab 0</paper-tab>
      <paper-tab>Tab 1</paper-tab>
      <paper-tab>Tab 2</paper-tab>
      <paper-tab>Tab 3</paper-tab>
    </paper-tabs>
  </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-tabs/paper-tabs.js';
import '@polymer/paper-tabs/paper-tab.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-tabs selected="0" scrollable>
        <paper-tab>Tab 0</paper-tab>
        <paper-tab>Tab 1</paper-tab>
        <paper-tab>Tab 2</paper-tab>
        <paper-tab>Tab 3</paper-tab>
      </paper-tabs>
    `;
  }
}

customElements.define('example-element', ExampleElement);
```

## Contributing

If you want to send a PR to this element, here are the instructions for running
the tests and demo locally:

### Installation

```sh
git clone https://github.com/PolymerElements/paper-tabs
cd paper-tabs
npm install
npm install -g polymer-cli
```

### Running the demo locally

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

### Running the tests

```sh
polymer test --npm
```
npm package: @polymer/paper-toggle-button
Description: A material design toggle button control
Author: The Polymer Authors
Latest version: 3.0.1

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

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

`<paper-toggle-button>` provides a ON/OFF switch that user can toggle the state
by tapping or by dragging the switch.

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

## Usage

### Installation

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

### In an HTML file

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

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-toggle-button checked></paper-toggle-button>
      <paper-toggle-button disabled></paper-toggle-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-toggle-button
cd paper-toggle-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-tooltip
Description: Material design tooltip popup for content
Author: The Polymer Authors
Latest version: 3.0.1

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

## &lt;paper-tooltip&gt;
`<paper-tooltip>` is a label that appears on hover and focus when the user
hovers over an element with the cursor or with the keyboard. It will be centered
to an anchor element specified in the `for` attribute, or, if that doesn't exist,
centered to the parent node containing it.

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

## Usage

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

### In an html file
```html
<html>
  <head>
    <script type="module">
      import '@polymer/paper-tooltip/paper-tooltip.js';
    </script>
  </head>
  <body>
    <div style="display:inline-block">
      <button>Click me!</button>
      <paper-tooltip>Tooltip text</paper-tooltip>
    </div>

    <div>
      <button id="btn">Click me!</button>
      <paper-tooltip for="btn">Tooltip text</paper-tooltip>
    </div>
  </body>
</html>
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-tooltip/paper-tooltip.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <div style="display:inline-block">
        <button>Click me!</button>
        <paper-tooltip>Tooltip text</paper-tooltip>
      </div>

      <div>
        <button id="btn">Click me!</button>
        <paper-tooltip for="btn">Tooltip text</paper-tooltip>
      </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-tooltip
cd paper-tooltip
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/performance-benchmark
Description: <!---
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
performance-analysis.html  performance-benchmark.html  performance-test.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

-->


<!-- No docs for <performance-analysis> found. -->

<!-- No docs for <performance-benchmark> found. -->

<!-- No docs for <performance-test> found. -->
npm package: @polymer/platinum-https-redirect
Description: Force a redirect to HTTPS when not on a local web server.
Latest version: 0.0.3


<!---

This README is automatically generated from the comments in these files:
platinum-https-redirect.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

-->

_[Demo and API Docs](https://elements.polymer-project.org/elements/platinum-https-redirect)_


##&lt;platinum-https-redirect&gt;

The `<platinum-https-redirect>` element redirects the current page to HTTPS, unless the page is
loaded from a web server running on `localhost`.

Using [HTTP Strict Transport Security](https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security)
(HSTS) can be used to enforce HTTPS for an entire
[origin](https://html.spec.whatwg.org/multipage/browsers.html#origin), following the first visit to
any page on the origin. Configuring the underlying web server to
[redirect](https://en.wikipedia.org/wiki/HTTP_301) all HTTP requests to their HTTPS equivalents
takes care of enforcing HTTPS on the initial visit as well.
Both options provide a more robust approach to enforcing HTTPS, but require access to the underlying
web server's configuration in order to implement.

This element provides a client-side option when HSTS and server-enforced redirects aren't possible,
such as when deploying code on a shared-hosting provider like
[GitHub Pages](https://pages.github.com/).

It comes in handy when used with other `<platinum-*>` elements, since those elements use
[features which are restricted to HTTPS](http://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features),
with an exception to support local web servers.

It can be used by just adding it to any page, e.g.

```html
<platinum-https-redirect></platinum-https-redirect>
```