open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/html-block
Description: A basic HTML block that provides HAXschema wiring
Author: haxtheweb
Latest version: 8.0.2

# &lt;html-block&gt;

Block
> A basic HTML block that provides HAXschema wiring

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

Block (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/i18n-manager
Description: Internationalization management singleton and helper mixin to allow shipping localizations with elements in an app agnostic manner
Author: haxtheweb
Latest version: 8.0.2

# &lt;i18n-manager&gt;

18
> internationalization management singleton and helper classes

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

18 (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/iconset-demo
Description: iterates through an iconset array to generate a demo of all of the icons
Author: nikkimk
Latest version: 2.8.0

# &lt;iconset-demo&gt;

Demo
> iterates through an iconset array to generate a demo of all of the icons

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

  import {IconsetDemo} from '@lrnwebcomponents/iconset-demo';
</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

Demo (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/iframe-loader
Description: Adds a loading indicator for iframes.
Author: haxtheweb
Latest version: 8.0.2

# &lt;iframe-loader&gt;

Loader
> Adds a loading indicator for iframes.

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

Loader (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/image-compare-slider
Description: Slider that allows comparison of two images
Author: haxtheweb
Latest version: 8.0.2

# &lt;image-compare-slider&gt;

Compare
> Slider that allows comparison of two images

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

  import {ImageCompareSlider} from '@lrnwebcomponents/image-compare-slider/image-compare-slider.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

Compare (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/image-inspector
Description: Inspector tools on an image wrapping open seadragon library
Author: haxtheweb
Latest version: 8.0.2

# &lt;image-inspector&gt;

Inspector
> Inspector tools on an image wrapping open seadragon library

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

  import {ImageInspector} from '@lrnwebcomponents/image-inspector/image-inspector.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

Inspector (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/img-pan-zoom
Description: Start of img-pan-zoom
Author: haxtheweb
Latest version: 8.0.2

# &lt;img-pan-zoom&gt;

Pan
> Start of img-pan-zoom

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

  import {ImgPanZoom} from '@lrnwebcomponents/img-pan-zoom';
</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

Pan (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/img-view-modal
Description: Slider that allows comparison of two images
Author: haxtheweb
Latest version: 8.0.2

# &lt;img-view-modal&gt;

Compare
> Slider that allows comparison of two images

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

  import {imgViewModal} from '@lrnwebcomponents/img-view-modal/img-view-modal.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

Compare (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/inline-audio
Description: audio that enhances the experience but is not required by being selectable inline with text content
Author: haxtheweb
Latest version: 8.0.2

# &lt;inline-audio&gt;

Audio
> audio that enhances the experience but is not required by being selectable inline with text 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/inline-audio/inline-audio.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/inline-audio/inline-audio.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/inline-audio/inline-audio.js';
  // imperative form
  import {InlineAudio} from '@lrnwebcomponents/inline-audio';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/inline-audio/inline-audio.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/inline-audio/inline-audio.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

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)
npm package: @lrnwebcomponents/intersection-element
Description: VanillaJS Intersection element / capabilities to mix into other elements
Author: haxtheweb
Latest version: 8.0.2

# intersection-element
VanillaJS intersection oberver partcial element. Does nothing on it's own but wires up an element to correctly do intersection observation and running a callback when visible in the browsing window. Reasonable defaults that can be overloaded as needed.
npm package: @lrnwebcomponents/iron-a11y-announcer
Description: Automated conversion of iron-a11y-announcer/
Author: btopro
Latest version: 0.0.32

# &lt;iron-a11y-announcer&gt;

A
> Automated conversion of iron-a11y-announcer/

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

  import {IronA11YAnnouncer} from '@lrnwebcomponents/iron-a11y-announcer';
</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

A (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/iron-data-table
Description: Start of iron-data-table
Author: btopro
Latest version: 2.0.10

# &lt;iron-data-table&gt;

Data
> Start of iron-data-table

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

  import {IronDataTable} from '@lrnwebcomponents/iron-data-table';
</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

Data (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/item-overlay-ops
Description: A wrapper that provides an overlay of operations to any element, usually a card.
Author: haxtheweb
Latest version: 8.0.2

# &lt;item-overlay-ops&gt;

Overlay
> A wrapper that provides an overlay of operations to any element, usually a card.

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

  import {ItemOverlayOps} from '@lrnwebcomponents/item-overlay-ops/item-overlay-ops.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

Overlay (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/json-editor
Description: simple JSON blob data binding to a text area
Author: haxtheweb
Latest version: 8.0.2

# &lt;json-editor&gt;

Editor
> simple JSON blob data binding to a text area

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

Editor (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/json-outline-schema
Description: JS based state management helper for the json outline schema spec
Author: haxtheweb
Latest version: 8.0.2

# &lt;json-outline-schema&gt;

Outline
> 

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

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/jwt-login
Description: JSON Web Token login broker / manager
Author: haxtheweb
Latest version: 8.0.2

# &lt;jwt-login&gt;

Login
> JSON Web Token login broker / manager

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

  import {JwtLogin} from '@lrnwebcomponents/jwt-login/jwt-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 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

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/layout-builder
Description: A new UI for adding content to layouts
Author: haxtheweb
Latest version: 8.0.2

# &lt;layout-builder&gt;

Builder
> A new UI for adding content to layouts

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

Builder (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/lazy-image-helpers
Description: helpers for building lazy loading images
Author: haxtheweb
Latest version: 8.0.2

# &lt;lazy-image-helpers&gt;

Image
> helpers for building lazy loading images

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

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/lazy-import-discover
Description: Break people&#39;s brains on simplifying webcomponent integrations
Author: haxtheweb
Latest version: 8.0.2

# &lt;lazy-import-discover&gt;

Import
> Break people&#39;s brains on simplifying webcomponent integrations

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

Import (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/learn-two-theme
Description: Learn2 theme for HAXcms
Author: haxtheweb
Latest version: 8.0.2

# &lt;learn-two-theme&gt;

Two
> Learn2 theme for HAXcms

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

Two (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/lesson-overview
Description: Clean presentation of what to expect in an upcoming lesson of instruction
Author: haxtheweb
Latest version: 8.0.2

# &lt;lesson-overview&gt;

Overview
> Clean presentation of what to expect in an upcoming lesson of instruction

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

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