open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/awesome-explosion
Description: An awesome, explosion.
Author: haxtheweb
Latest version: 8.0.2

# &lt;awesome-explosion&gt;

Explosion
> A stinking awesome, explosion.

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

  import {AwesomeExplosion} from '@lrnwebcomponents/awesome-explosion/awesome-explosion.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

Explosion (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/b-r
Description: Creates break statements to show conditional rendering
Author: haxtheweb
Latest version: 8.0.2

# &lt;b-r&gt;

R
> Creates break statements to show conditional rendering

## 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/b-r/b-r.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/b-r/b-r.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/b-r/b-r.js';
  // imperative form
  import {BR} from '@lrnwebcomponents/b-r';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/b-r/b-r.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/b-r/b-r.js"></script>
```
# Tag Properties
`amount="number"` Specify the number of br tags to be inserted. No value or 0 will use the screen height to generate br tags.

## 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

R (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/barcode-reader
Description: Reads barcodes
Author: haxtheweb
Latest version: 8.0.2

# &lt;barcode-reader&gt;

Reader
> Element to read barcodes and QR codes through a video stream

## 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/barcode-reader/barcode-reader.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/barcode-reader/barcode-reader.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/barcode-reader/barcode-reader.js';
  // imperative form
  import {BarcodeReader} from '@lrnwebcomponents/barcode-reader';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/barcode-reader/barcode-reader.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/barcode-reader/barcode-reader.js"></script>
```
## Usage after imported
barcode-reader will give controls to show/hide and start the scanner, but the submit button to utilize the data is left up to the website.

## Component Specific Attributes
`value` Value of the result. 
`scale` Scale of the video as a number, no percentage sign.
`hideinput` Include value to hide the input tag and result. Shown by default.

## 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

Reader (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/baseline-build-hax
Description: create an inflexible baseline build of hax with all elements
Author: haxtheweb
Latest version: 8.0.2

# &lt;baseline-build-hax&gt;

Build
> create an inflexible baseline build of hax with all elements

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

Build (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/beaker-broker
Description: A broker element to make working with Beaker Browser's API even easier.
Author: haxtheweb
Latest version: 8.0.2

# &lt;beaker-broker&gt;

Broker
> A broker element that can play nicely with Beaker Browser and make the API even easier to work with then it already is.

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

  import {BeakerBroker} from '@lrnwebcomponents/beaker-broker/beaker-broker.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

Broker (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/bootstrap-theme
Description: Hax bootstrap themeing
Author: haxtheweb
Latest version: 8.0.2

# &lt;bootstrap-theme&gt;

Theme
> Hax bootstrap themeing

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

Theme (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
[MIT License](http://opensource.org/licenses/MIT)
npm package: @lrnwebcomponents/car-window
Description: Describe how a car window works
Author: btopro
Latest version: 0.0.22
Deprecated: this package has been deprecated

# &lt;car-window&gt;

Window
> Describe how a car window works

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

  import {CarWindow} from '@lrnwebcomponents/car-window';
</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

Window (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/chartist-render
Description: Rendering Chartist
Author: haxtheweb
Latest version: 8.0.2

# &lt;chartist-render&gt;

Render
> Chartist render wrapper

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

  import {ChartistRender} from '@lrnwebcomponents/chartist-render/chartist-render.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

Render (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/check-it-out
Description: View codepen or stackblitz demos
Author: haxtheweb
Latest version: 8.0.2

# &lt;check-it-out&gt;

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

It (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
[MIT License](http://opensource.org/licenses/MIT)
npm package: @lrnwebcomponents/chemical-element-visualisation
Description: Visualization of some different chemistry elements
Author: heymp
Latest version: 2.3.1

# &lt;chemical-element-visualisation&gt;

Element
> Visualization of chemical elements

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

  import {ChemicalElementVisualisation} from '@lrnwebcomponents/chemical-element-visualisation/chemical-element-visualisation.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

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/circle-progress
Description: A circle that illustrates progression via the outline of the element
Author: haxtheweb
Latest version: 8.0.2

# &lt;circle-progress&gt;

Progress
> Progress as tracked around the outside of a circle

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

  import {CircleProgress} from '@lrnwebcomponents/circle-progress/circle-progress.js';
</script>
```

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

## Test

```bash
$ yarn run test
```

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

## Contributing

1. Fork it! `git clone 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

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

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

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/citation-element
Description: A simple way of citing things on the web.
Author: haxtheweb
Latest version: 8.0.2

# &lt;citation-element&gt;

Element
> Correctly cite a resource on the internet

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

  import {CitationElement} from '@lrnwebcomponents/citation-element/citation-element.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

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/clean-one
Description: Clean HAXcms theme, one.
Author: haxtheweb
Latest version: 8.0.2

# &lt;clean-one&gt;

One
> Clean HAXcms theme, one.

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

One (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/clean-two
Description: A 2nd clean theme
Author: haxtheweb
Latest version: 8.0.2

# &lt;clean-two&gt;

Two
> A 2nd clean theme

## 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/clean-two/clean-two.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/clean-two/clean-two.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/clean-two/clean-two.js';
  // imperative form
  import {CleanTwo} from '@lrnwebcomponents/clean-two';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/clean-two/clean-two.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/clean-two/clean-two.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/cms-hax
Description: HAX integration geared toward CMSs
Author: haxtheweb
Latest version: 8.0.2

# &lt;cms-hax&gt;

Hax
> HAX integration for CMSs

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

  import {CmsHax} from '@lrnwebcomponents/cms-hax/cms-hax.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

Hax (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/code-editor
Description: Data binding wrapped on top of a popular code editor
Author: haxtheweb
Latest version: 8.0.2

# &lt;code-editor&gt;

Editor
> Code editor element with data binding

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

  import {CodeEditor} from '@lrnwebcomponents/code-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 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

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/code-sample
Description: A wrapper element for highlight.js
Author: haxtheweb
Latest version: 8.0.2

# &lt;code-sample&gt;

Sample
> A wrapper element for highlight.js

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

Sample (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/collection-list
Description: listing and display elements for collections of items
Author: haxtheweb
Latest version: 8.0.2

# &lt;collection-list&gt;

List
> listing and display elements for collections of items

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

List (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/contenta-polymer
Description: Contenta integration with Polymer
Author: btopro
Latest version: 2.0.10

# &lt;contenta-polymer&gt;

Polymer
> Contenta integration with polymer

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

  import {ContentaPolymer} from '@lrnwebcomponents/contenta-polymer/contenta-polymer.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

Polymer (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/count-up
Description: count up js wrapper with minimal styling
Author: haxtheweb
Latest version: 8.0.2

# &lt;count-up&gt;

Up
> count up js wrapper with minimal styling

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

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