open-index/open-npm huggingface dataset:
npm package: @lrnwebcomponents/elmsln-studio
Description: Studio App for ELMS:LN
Author: haxtheweb
Latest version: 8.0.2

# &lt;elmsln-studio&gt;

Studio
> Studio App for ELMS:LN

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

Studio (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/enhanced-text
Description: take text and process it with various enhancements
Author: haxtheweb
Latest version: 8.0.2

# &lt;enhanced-text&gt;

Text
> take text and process it with various enhancements

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

Text (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/es-global-bridge
Description: A very simple class to help bridge global scoped code with ES Modules
Author: haxtheweb
Latest version: 8.0.2

# ES Global bridge

This project helps bridge legacy, non-ESM code with modern ESM code. It generates a Promise for adding a script tag to the page. Then when it's resolved (loaded) it generates an event that can be listened for to make sure that the global classes in that file resolve correctly.
npm package: @lrnwebcomponents/event-badge
Description: a conference style badge
Author: haxtheweb
Latest version: 8.0.2

# &lt;event-badge&gt;

Badge
> a conference style badge

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

## Code style

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

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

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/evo-to-wc
Description: Converts evolution content to web component equivalents.
Author: haxtheweb
Latest version: 8.0.2

# &lt;a11y-menu-button&gt;

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

  import {A11yMenuButton} from '@lrnwebcomponents/a11y-menu-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

11 (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/example-hax-element
Description: Provide an example to pick apart of a working HAX element
Author: haxtheweb
Latest version: 8.0.2

# &lt;example-hax-element&gt;

Hax
> Provide an example to pick apart of a working HAX element

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

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

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/example-haxcms-theme
Description: A basic, well documented example theme for HAXcms
Author: haxtheweb
Latest version: 8.0.2

# &lt;example-haxcms-theme&gt;

Haxcms
> A basic, well documented example theme for HAXcms

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

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

Haxcms (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/exif-data
Description: obtain exif data from slotted elements
Author: btopro
Latest version: 7.0.5

# &lt;exif-data&gt;

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

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

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

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/extensible-toolbar
Description: a toolbar that can be customised with with mixins and json
Author: nikkimk
Latest version: 3.0.5

# &lt;extensible-toolbar&gt;

Toolbar
> a toolbar that can be customised with with mixins and json

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

Toolbar (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/fancy-carousel
Description: Start of fancy-carousel fork
Author: btopro
Latest version: 2.0.10

# &lt;fancy-carousel&gt;

Carousel
> Start of fancy-carousel fork

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

  import {FancyCarousel} from '@lrnwebcomponents/fancy-carousel';
</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

Carousel (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/figure-label
Description: Figure label element to mark media assets within content.
Author: haxtheweb
Latest version: 8.0.2

# &lt;figure-label&gt;

Label
> Figure label element to mark media assets within content.

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

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

Label (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/file-system-broker
Description: singleton to simplify interactions with the file system on a user&#39;s device
Author: haxtheweb
Latest version: 8.0.2

# &lt;file-system-broker&gt;

System
> singleton to simplify interactions with the file system on a user&#39;s device

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

System (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/filtered-image
Description: An image using an SVG filter. Can be used to make background images have more contrast with text.
Author: haxtheweb
Latest version: 8.0.2

# &lt;filtered-image&gt;

Image
> An image using an SVG filter. Can be used to make background images have more contrast with text.

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

## Code style

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

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

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/flash-card
Description: self check for a card that has a definition on the back
Author: haxtheweb
Latest version: 8.0.2

# &lt;flash-card&gt;

Card
> self check for a card that has a definition on the back

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

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

## Test

```bash
yarn run test
```

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

## Contributing

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

## Code style

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

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

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @lrnwebcomponents/fluid-type
Description: A simple fluid-type sizing wrapper element to apply to anything
Author: haxtheweb
Latest version: 8.0.2

# &lt;fluid-type&gt;

Type
> A simple fluid-type sizing wrapper element to apply to anything
> A web component implementation of this article https://andy-bell.design/wrote/custom-property-controlled-fluid-type-sizing/

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

### JS module
```js
/* In an existing JS module / web component */
import '@lrnwebcomponents/fluid-type/fluid-type.js';
/* At top of an application with build routine */
<script type="module" src="@lrnwebcomponents/fluid-type/fluid-type.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@lrnwebcomponents/fluid-type/fluid-type.js';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@lrnwebcomponents/fluid-type/fluid-type.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@lrnwebcomponents/fluid-type/fluid-type.js"></script>
```
### HTML / CSS
```html
<style>
  fluid-type {
    --fluid-type-min-size: 2;
    --fluid-type-max-size: 5;
  }  
</style>
<fluid-type><h1>This is fluid-type</h1></fluid-type>
```

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

Type (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/full-screen-image
Description: full screen banner image with down arrow
Author: btopro
Latest version: 7.0.11

# &lt;full-screen-image&gt;

Screen
> full screen banner image with down arrow

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

Screen (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/full-width-image
Description: full width image that flows beyond boundaries
Author: haxtheweb
Latest version: 8.0.2

# &lt;full-width-image&gt;

Width
> full width image that flows beyond boundaries

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

Width (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/fullscreen-behaviors
Description: Provides state management when only one child can be selected at a time.
Author: haxtheweb
Latest version: 8.0.2

# &lt;simple-colors&gt;

Colors
> a utilty that provides a global set of color classes and variables based on theme and accent color attributes

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

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

  import {FullscreenBehaviors} from '@lrnwebcomponents/simple-colors';
</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

Colors (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/future-terminal-text
Description: cyberpunk 2077 inspired text for robots presentation
Author: haxtheweb
Latest version: 8.0.2

# &lt;future-terminal-text&gt;

Terminal
> cyberpunk 2077 inspired text for robots presentation

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

Terminal (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/game-show-quiz
Description: A game show style quiz interaction
Author: btopro
Latest version: 4.1.0

# &lt;game-show-quiz&gt;

Show
> Game show style quizzing system

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

  import {GameShowQuiz} from '@lrnwebcomponents/game-show-quiz/game-show-quiz.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

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