open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/lrndesign-gallery
Description: displays images as a carousel or grid with the ability to zoom
Author: nikkimk
Latest version: 7.0.11

# &lt;lrndesign-gallery&gt;

Gallery
> displays images as a carousel or grid with the ability to zoom

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

Gallery (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/lrndesign-gallerycard
Description: Automated conversion of lrndesign-gallerycard/
Author: btopro
Latest version: 7.0.11

# &lt;lrndesign-gallerycard&gt;

Gallerycard
> Automated conversion of lrndesign-gallerycard/

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

  import {LrndesignGallerycard} from '@lrnwebcomponents/lrndesign-gallerycard';
</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

Gallerycard (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/lrndesign-image
Description: Automated conversion of lrndesign-image/
Author: btopro
Latest version: 0.0.31

# &lt;lrndesign-image&gt;

Image
> Automated conversion of lrndesign-image/

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

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

  import {LrndesignImage} from '@lrnwebcomponents/lrndesign-image';
</script>
```

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

## Code style

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

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

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

# &lt;lrndesign-imagecarousel&gt;

Imagecarousel
> Automated conversion of lrndesign-imagecarousel/

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

  import {LrndesignImagecarousel} from '@lrnwebcomponents/lrndesign-imagecarousel';
</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

Imagecarousel (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/lrndesign-imagemap
Description: Automated conversion of lrndesign-imagemap/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrndesign-imagemap&gt;

Imagemap
> Automated conversion of lrndesign-imagemap/

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

  import {LrndesignImagemap} from '@lrnwebcomponents/lrndesign-imagemap';
</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

Imagemap (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/lrndesign-mapmenu
Description: Automated conversion of lrndesign-mapmenu/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrndesign-mapmenu&gt;

Mapmenu
> Automated conversion of lrndesign-mapmenu/

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

  import {LrndesignMapmenu} from '@lrnwebcomponents/lrndesign-mapmenu';
</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

Mapmenu (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/lrndesign-materialwordart
Description: Automated conversion of lrndesign-materialwordart/
Author: btopro
Latest version: 0.0.28

# &lt;lrndesign-materialwordart&gt;

Materialwordart
> Automated conversion of lrndesign-materialwordart/

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

  import {LrndesignMaterialwordart} from '@lrnwebcomponents/lrndesign-materialwordart';
</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

Materialwordart (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/lrndesign-panelcard
Description: Automated conversion of lrndesign-panelcard/
Author: btopro
Latest version: 4.0.4

# &lt;lrndesign-panelcard&gt;

Panelcard
> Automated conversion of lrndesign-panelcard/

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

  import {LrndesignPanelcard} from '@lrnwebcomponents/lrndesign-panelcard';
</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

Panelcard (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/lrndesign-paperstack
Description: Automated conversion of lrndesign-paperstack/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrndesign-paperstack&gt;

Paperstack
> Automated conversion of lrndesign-paperstack/

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

  import {LrndesignPaperstack} from '@lrnwebcomponents/lrndesign-paperstack';
</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

Paperstack (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/lrndesign-progress-spinner
Description: Automated conversion of lrndesign-progress-spinner/
Author: btopro
Latest version: 0.0.28

# &lt;lrndesign-progress-spinner&gt;

Progress
> Automated conversion of lrndesign-progress-spinner/

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

  import {LrndesignProgressSpinner} from '@lrnwebcomponents/lrndesign-progress-spinner';
</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/lrndesign-sidecomments
Description: Automated conversion of lrndesign-sidecomments/
Author: btopro
Latest version: 0.0.31

# &lt;lrndesign-sidecomments&gt;

Sidecomments
> Automated conversion of lrndesign-sidecomments/

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

  import {LrndesignSidecomments} from '@lrnwebcomponents/lrndesign-sidecomments';
</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

Sidecomments (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/lrndesign-sidenote
Description: Automated conversion of lrndesign-sidenote/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrndesign-sidenote&gt;

Sidenote
> Automated conversion of lrndesign-sidenote/

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

  import {LrndesignSidenote} from '@lrnwebcomponents/lrndesign-sidenote';
</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

Sidenote (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/lrndesign-stepper
Description: Automated conversion of lrndesign-stepper/
Author: btopro
Latest version: 7.0.11

# &lt;lrndesign-stepper&gt;

Stepper
> Automated conversion of lrndesign-stepper/

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

  import {LrndesignStepper} from '@lrnwebcomponents/lrndesign-stepper';
</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

Stepper (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/lrndesign-steppercollapse
Description: Automated conversion of lrndesign-steppercollapse/
Author: btopro
Latest version: 0.0.31

# &lt;lrndesign-steppercollapse&gt;

Steppercollapse
> Automated conversion of lrndesign-steppercollapse/

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

  import {LrndesignSteppercollapse} from '@lrnwebcomponents/lrndesign-steppercollapse';
</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

Steppercollapse (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/lrndesign-timeline
Description: an element that displays events on a timeline
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrndesign-timeline&gt;

Timeline
> an element that displays events on a timeline

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

Timeline (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/lrnservice-gitbook
Description: Automated conversion of lrnservice-gitbook/
Author: btopro
Latest version: 0.0.28

# &lt;lrnservice-gitbook&gt;

Gitbook
> Automated conversion of lrnservice-gitbook/

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

  import {LrnserviceGitbook} from '@lrnwebcomponents/lrnservice-gitbook';
</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

Gitbook (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/lrnsys-button
Description: Automated conversion of lrnsys-button/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrnsys-button&gt;

Button
> Automated conversion of lrnsys-button/

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

  import {LrnsysButton} from '@lrnwebcomponents/lrnsys-button';
</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

Button (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/lrnsys-chartjs
Description: Automated conversion of lrnsys-chartjs/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrnsys-chartjs&gt;

Chartjs
> Automated conversion of lrnsys-chartjs/

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

  import {LrnsysChartjs} from '@lrnwebcomponents/lrnsys-chartjs';
</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

Chartjs (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/lrnsys-comment
Description: Automated conversion of lrnsys-comment/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrnsys-comment&gt;

Comment
> Automated conversion of lrnsys-comment/

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

  import {LrnsysComment} from '@lrnwebcomponents/lrnsys-comment';
</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

Comment (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/lrnsys-layout
Description: Automated conversion of lrnsys-layout/
Author: haxtheweb
Latest version: 8.0.2

# &lt;lrnsys-layout&gt;

Layout
> Automated conversion of lrnsys-layout/

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

  import {LrnsysLayout} from '@lrnwebcomponents/lrnsys-layout';
</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

Layout (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/lrnsys-lazyload
Description: Automated conversion of lrnsys-lazyload/
Author: btopro
Latest version: 0.0.28

# &lt;lrnsys-lazyload&gt;

Lazyload
> Automated conversion of lrnsys-lazyload/

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

  import {LrnsysLazyload} from '@lrnwebcomponents/lrnsys-lazyload';
</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

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

# &lt;lrnsys-outline&gt;

Outline
> Automated conversion of lrnsys-outline/

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

  import {LrnsysOutline} from '@lrnwebcomponents/lrnsys-outline';
</script>
```

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

## Code style

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

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

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