open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/merit-badge
Description: visual badge to communicate obtaining a skill
Author: haxtheweb
Latest version: 8.0.2

# &lt;merit-badge&gt;

Badge
> visual badge to communicate obtaining a skill

## 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/merit-badge/merit-badge.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/merit-badge/merit-badge.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/merit-badge/merit-badge.js';
  // imperative form
  import {MeritBadge} from '@lrnwebcomponents/merit-badge';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/merit-badge/merit-badge.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/merit-badge/merit-badge.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

Badge (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/micro-copy-heading
Description: small call to action / attention that acts as a heading too
Author: haxtheweb
Latest version: 8.0.2

# &lt;micro-copy-heading&gt;

Copy
> small call to action / attention that acts as a heading too

## 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/micro-copy-heading/micro-copy-heading.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/micro-copy-heading/micro-copy-heading.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/micro-copy-heading/micro-copy-heading.js';
  // imperative form
  import {MicroCopyHeading} from '@lrnwebcomponents/micro-copy-heading';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/micro-copy-heading/micro-copy-heading.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/micro-copy-heading/micro-copy-heading.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

Copy (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/micro-frontend-registry
Description: A singleton for registration and managing access to leverage microservices for web components
Author: haxtheweb
Latest version: 8.0.2

# &lt;micro-frontend-registry&gt;

Frontend
> A singleton for registration and managing access to leverage microservices for web components

## 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/micro-frontend-registry/micro-frontend-registry.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js';
  // imperative form
  import {MicroFrontendRegistry} from '@lrnwebcomponents/micro-frontend-registry';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/micro-frontend-registry/micro-frontend-registry.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

Frontend (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/moar-sarcasm
Description: Provide a laugh and a good example of VanillaJS for demos
Author: haxtheweb
Latest version: 8.0.2

# &lt;moar-sarcasm&gt;

Sarcasm
> Provide a laugh and a good example of VanillaJS for demos

## 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/moar-sarcasm/moar-sarcasm.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/moar-sarcasm/moar-sarcasm.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/moar-sarcasm/moar-sarcasm.js';
  // imperative form
  import {MoarSarcasm} from '@lrnwebcomponents/moar-sarcasm';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/moar-sarcasm/moar-sarcasm.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/moar-sarcasm/moar-sarcasm.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

Sarcasm (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/moment-element
Description: Start of moment-element
Author: haxtheweb
Latest version: 8.0.2

# &lt;moment-element&gt;

Element
> Start of moment-element

## 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/moment-element.js';
/* At top of an application */
<script type="module" src="moment-element.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/moment-element.js';

  import {MomentElement} from '@lrnwebcomponents/moment-element';
</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

Element (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/mtz-marked-editor
Description: Automated conversion of mtz-marked-editor
Author: haxtheweb
Latest version: 8.0.2

# &lt;mtz-marked-editor&gt;

Marked
> Automated conversion of mtz-marked-editor/

## 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/mtz-marked-editor.js';
/* At top of an application */
<script type="module" src="mtz-marked-editor.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/mtz-marked-editor.js';

  import {MtzMarkedEditor} from '@lrnwebcomponents/mtz-marked-editor';
</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

Marked (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/multiple-choice
Description: Automated conversion of multiple-choice/
Author: haxtheweb
Latest version: 8.0.2

# &lt;multiple-choice&gt;

Choice
> Automated conversion of multiple-choice/

## 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/multiple-choice.js';
/* At top of an application */
<script type="module" src="multiple-choice.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/multiple-choice.js';

  import {MultipleChoice} from '@lrnwebcomponents/multiple-choice';
</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

Choice (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/music-player
Description: Visualize different types of music and simple format player
Author: haxtheweb
Latest version: 8.0.2

# &lt;music-player&gt;

Player
> Visualize different types of music and simple format player

## 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/music-player/music-player.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/music-player/music-player.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/music-player/music-player.js';
  // imperative form
  import {MusicPlayer} from '@lrnwebcomponents/music-player';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/music-player/music-player.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/music-player/music-player.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

Player (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/mutation-observer-import-mixin
Description: a SuperClass mixin that dynamically imports undefined custom element definitions
Author: haxtheweb
Latest version: 8.0.2

# &lt;mutation-observer-import-mixin&gt;

Observer
> a SuperClass mixin that dynamically imports undefined custom element definitions

## 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/mutation-observer-import-mixin/mutation-observer-import-mixin.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/mutation-observer-import-mixin/mutation-observer-import-mixin.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/mutation-observer-import-mixin/mutation-observer-import-mixin.js';
  // imperative form
  import {MutationObserverImportMixin} from '@lrnwebcomponents/mutation-observer-import-mixin';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/mutation-observer-import-mixin/mutation-observer-import-mixin.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/mutation-observer-import-mixin/mutation-observer-import-mixin.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

Observer (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/nav-card
Description: an accent card of link lists
Author: haxtheweb
Latest version: 8.0.2

# &lt;nav-card&gt;

Card
> an accent card of link lists

## 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/nav-card/nav-card.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/nav-card/nav-card.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/nav-card/nav-card.js';
  // imperative form
  import {NavCard} from '@lrnwebcomponents/nav-card';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/nav-card/nav-card.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/nav-card/nav-card.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

Card (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/oer-schema
Description: Automated conversion of oer-schema/
Author: haxtheweb
Latest version: 8.0.2

# &lt;oer-schema&gt;

Schema
> Automated conversion of oer-schema/

## 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/oer-schema.js';
/* At top of an application */
<script type="module" src="oer-schema.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/oer-schema.js';

  import {OerSchema} from '@lrnwebcomponents/oer-schema';
</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

Schema (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/opt-img
Description: an optimized image delivery
Author: haxtheweb
Latest version: 8.0.2

# &lt;opt-img&gt;

Img
> an optimized image delivery

## 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/opt-img/opt-img.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/opt-img/opt-img.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/opt-img/opt-img.js';
  // imperative form
  import {OptImg} from '@lrnwebcomponents/opt-img';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/opt-img/opt-img.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/opt-img/opt-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/outline-designer
Description: tools to modify and visualize JSON Outline Schema for editing
Author: haxtheweb
Latest version: 8.0.2

# &lt;outline-designer&gt;

Designer
> tools to modify and visualize JSON Outline Schema for editing

## 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/outline-designer/outline-designer.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/outline-designer/outline-designer.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/outline-designer/outline-designer.js';
  // imperative form
  import {OutlineDesigner} from '@lrnwebcomponents/outline-designer';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/outline-designer/outline-designer.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/outline-designer/outline-designer.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

Designer (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/outline-player
Description: Automated conversion of outline-player/
Author: haxtheweb
Latest version: 8.0.2

# &lt;outline-player&gt;

Player
> Automated conversion of outline-player/

## 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/outline-player.js';
/* At top of an application */
<script type="module" src="outline-player.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/outline-player.js';

  import {OutlinePlayer} from '@lrnwebcomponents/outline-player';
</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

Player (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/page-break
Description: a visual break but also helps manage hierarchy
Author: haxtheweb
Latest version: 8.0.2

# &lt;page-break&gt;

Break
> a visual break but also helps manage hierarchy

## 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/page-break/page-break.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/page-break/page-break.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/page-break/page-break.js';
  // imperative form
  import {PageBreak} from '@lrnwebcomponents/page-break';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/page-break/page-break.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/page-break/page-break.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

Break (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/page-contents-menu
Description: Links that jump you to the right place in the page&#39;s content
Author: haxtheweb
Latest version: 8.0.2

# &lt;page-contents-menu&gt;

Contents
> Links that jump you to the right place in the page&#39;s content

## 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/page-contents-menu/page-contents-menu.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/page-contents-menu/page-contents-menu.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/page-contents-menu/page-contents-menu.js';
  // imperative form
  import {PageContentsMenu} from '@lrnwebcomponents/page-contents-menu';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/page-contents-menu/page-contents-menu.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/page-contents-menu/page-contents-menu.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

Contents (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/page-flag
Description: visual flag for notes about a piece of content
Author: haxtheweb
Latest version: 8.0.2

# &lt;page-flag&gt;

Flag
> visual flag for notes about a piece of content

## 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/page-flag/page-flag.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/page-flag/page-flag.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/page-flag/page-flag.js';
  // imperative form
  import {PageFlag} from '@lrnwebcomponents/page-flag';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/page-flag/page-flag.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/page-flag/page-flag.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

Flag (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/page-scroll-position
Description: Automated conversion of page-scroll-position/
Author: haxtheweb
Latest version: 8.0.2

# &lt;page-scroll-position&gt;

Scroll
> Automated conversion of page-scroll-position/

## 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/page-scroll-position.js';
/* At top of an application */
<script type="module" src="page-scroll-position.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/page-scroll-position.js';

  import {PageScrollPosition} from '@lrnwebcomponents/page-scroll-position';
</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

Scroll (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/page-section
Description: A well designed section of a page with many options for marketing purposes
Author: haxtheweb
Latest version: 8.0.2

# &lt;page-section&gt;

Section
> A well designed section of a page with many options for marketing purposes

## 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/page-section/page-section.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/page-section/page-section.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/page-section/page-section.js';
  // imperative form
  import {PageSection} from '@lrnwebcomponents/page-section';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/page-section/page-section.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/page-section/page-section.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

Section (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
[ License](http://opensource.org/licenses/)
npm package: @lrnwebcomponents/paper-audio-player
Description: Automated conversion of paper-audio-player/
Author: btopro
Latest version: 4.1.0

# &lt;paper-audio-player&gt;

Audio
> Automated conversion of paper-audio-player/

## 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/paper-audio-player.js';
/* At top of an application */
<script type="module" src="paper-audio-player.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/paper-audio-player.js';

  import {PaperAudioPlayer} from '@lrnwebcomponents/paper-audio-player';
</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

Audio (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)