open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/simple-datepicker
Description: a simple datepicker field
Author: nikkimk
Latest version: 2.1.5

# &lt;simple-datepicker&gt;

Datepicker
> a simple datepicker field

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-datepicker/simple-datepicker.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-datepicker/simple-datepicker.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-datepicker/simple-datepicker.js';
  // imperative form
  import {SimpleDatepicker} from '@lrnwebcomponents/simple-datepicker';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-datepicker/simple-datepicker.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-datepicker/simple-datepicker.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Datepicker (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-datetime
Description: Automated conversion of simple-datetime/
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-datetime&gt;

Datetime
> Automated conversion of simple-datetime/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-datetime.js';
/* At top of an application */
<script type="module" src="simple-datetime.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-datetime.js';

  import {SimpleDatetime} from '@lrnwebcomponents/simple-datetime';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Datetime (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-drawer
Description: a singleton drawer element
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-drawer&gt;

Drawer
> a singleton drawer element

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-drawer/simple-drawer.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-drawer/simple-drawer.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-drawer/simple-drawer.js';
  // imperative form
  import {SimpleDrawer} from '@lrnwebcomponents/simple-drawer';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-drawer/simple-drawer.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-drawer/simple-drawer.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Drawer (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-emoji
Description: simplify emoji creation and management
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-emoji&gt;

Emoji
> simplify emoji creation and management

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-emoji/simple-emoji.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-emoji/simple-emoji.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-emoji/simple-emoji.js';
  // imperative form
  import {SimpleEmoji} from '@lrnwebcomponents/simple-emoji';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-emoji/simple-emoji.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-emoji/simple-emoji.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Emoji (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-fields
Description: Uses JSON Schema or an array of fields to display a series of fields
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-fields&gt;

Fields
> Uses JSON Schema or an array of fieldsto display a series of fields

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-fields/simple-fields.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-fields/simple-fields.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-fields/simple-fields.js';
  // imperative form
  import {SimpleFields} from '@lrnwebcomponents/simple-fields';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-fields/simple-fields.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-fields/simple-fields.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Fields (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-filter
Description: a super class element to provide filtering capabilities
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-filter&gt;

Filter
> a super class element to provide filtering capabilities

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-filter/simple-filter.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-filter/simple-filter.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-filter/simple-filter.js';
  // imperative form
  import {SimpleFilter} from '@lrnwebcomponents/simple-filter';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-filter/simple-filter.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-filter/simple-filter.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Filter (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-icon
Description: Render an SVG based icon
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-icon&gt;

Icon
> Render an SVG based icon

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-icon/simple-icon.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-icon/simple-icon.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-icon/simple-icon.js';
  // imperative form
  import {SimpleIcon} from '@lrnwebcomponents/simple-icon';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-icon/simple-icon.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-icon/simple-icon.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Icon (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-icon-picker
Description: Uses simple-picker to create an icon picker
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-icon-picker&gt;

Icon
> Uses simple-picker to create an icon picker

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-icon-picker/simple-icon-picker.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-icon-picker/simple-icon-picker.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-icon-picker/simple-icon-picker.js';
  // imperative form
  import {SimpleIconPicker} from '@lrnwebcomponents/simple-icon-picker';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-icon-picker/simple-icon-picker.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-icon-picker/simple-icon-picker.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Icon (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-image
Description: Automated conversion of simple-image/
Author: btopro
Latest version: 2.7.10

# &lt;simple-image&gt;

Image
> Automated conversion of simple-image/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-image.js';
/* At top of an application */
<script type="module" src="simple-image.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-image.js';

  import {SimpleImage} from '@lrnwebcomponents/simple-image';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Image (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-img
Description: simple image manipulation with a microservice
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-img&gt;

Img
> simple image manipulation with a microservice

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-img/simple-img.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-img/simple-img.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-img/simple-img.js';
  // imperative form
  import {SimpleImg} from '@lrnwebcomponents/simple-img';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-img/simple-img.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-img/simple-img.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
yarn start
```

## Test

```bash
yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Img (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-login
Description: a simple login form
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-login&gt;

Login
> a simple login form

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-login/simple-login.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-login/simple-login.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-login/simple-login.js';
  // imperative form
  import {SimpleLogin} from '@lrnwebcomponents/simple-login';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-login/simple-login.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-login/simple-login.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Login (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-modal
Description: A simple modal that ensures accessibility and stack order context appropriately
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-modal&gt;

Modal
> A simple modal that ensures accessibility and stack order context appropriately

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-modal.js';
/* At top of an application */
<script type="module" src="simple-modal.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-modal.js';

  import {SimpleModal} from '@lrnwebcomponents/simple-modal';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Modal (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-outline-theme
Description: Automated conversion of simple-outline-theme/
Author: btopro
Latest version: 0.0.28

# &lt;simple-outline-theme&gt;

Outline
> Automated conversion of simple-outline-theme/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-outline-theme.js';
/* At top of an application */
<script type="module" src="simple-outline-theme.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-outline-theme.js';

  import {SimpleOutlineTheme} from '@lrnwebcomponents/simple-outline-theme';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Outline (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-pages
Description: toggle between pages
Author: btopro
Latest version: 4.1.0

# &lt;simple-pages&gt;

Pages
> toggle between pages

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-pages/simple-pages.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-pages/simple-pages.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-pages/simple-pages.js';
  // imperative form
  import {SimplePages} from '@lrnwebcomponents/simple-pages';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-pages/simple-pages.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-pages/simple-pages.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Pages (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-picker
Description: a simple picker for swatches, icons, etc.
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-picker&gt;

Picker
> a simple picker for swatches, icons, etc.

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-picker.js';
/* At top of an application */
<script type="module" src="simple-picker.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-picker.js';

  import {SimplePicker} from '@lrnwebcomponents/simple-picker';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Picker (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-popover
Description: A popover alertdialog that is positioned next to a target element
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-popover&gt;

Popover
> A popover alertdialog that is positioned next to a target element

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-popover/simple-popover.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-popover/simple-popover.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-popover/simple-popover.js';
  // imperative form
  import {SimplePopover} from '@lrnwebcomponents/simple-popover';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-popover/simple-popover.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-popover/simple-popover.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Popover (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-progress
Description: a simple progress slider bar
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-progress&gt;

Progress
> a simple progress slider bar

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-progress/simple-progress.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-progress/simple-progress.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-progress/simple-progress.js';
  // imperative form
  import {SimpleProgress} from '@lrnwebcomponents/simple-progress';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-progress/simple-progress.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-progress/simple-progress.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Progress (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-range-input
Description: simple styling on a range input
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-range-input&gt;

Range
> simple styling on a range input

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/simple-range-input/simple-range-input.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/simple-range-input/simple-range-input.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-range-input/simple-range-input.js';
  // imperative form
  import {SimpleRangeInput} from '@lrnwebcomponents/simple-range-input';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/simple-range-input/simple-range-input.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/simple-range-input/simple-range-input.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Range (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-search
Description: Automated conversion of simple-search
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-search&gt;

Search
> Automated conversion of simple-search

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-search.js';
/* At top of an application */
<script type="module" src="simple-search.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-search.js';

  import {SimpleSearch} from '@lrnwebcomponents/simple-search';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Search (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/simple-timer
Description: Automated conversion of simple-timer/
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-timer&gt;

Timer
> Automated conversion of simple-timer/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@lrnwebcomponents/simple-timer.js';
/* At top of an application */
<script type="module" src="simple-timer.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/simple-timer.js';

  import {SimpleTimer} from '@lrnwebcomponents/simple-timer';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/elmsln/lrnwebcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Timer (and all lrnwebcomponents) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)