open-index/open-npm huggingface dataset:
npm package: @haxtheweb/count-up
Description: count up js wrapper with minimal styling
Author: haxtheweb
Latest version: 25.0.0

# &lt;count-up&gt;

Up
> count up js wrapper with minimal styling

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

```js
/* In an existing JS module / web component */
import '@haxtheweb/count-up/count-up.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/count-up/count-up.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Up

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/course-design
Description: some different elements specific to the design of educational materials. Lots of small elements and a catch all repo
Author: haxtheweb
Latest version: 25.0.0

# &lt;course-design&gt;

Design
> some different elements specific to the design of educational materials. Lots of small elements and a catch all repo

## 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 '@haxtheweb/course-design/course-design.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/course-design/course-design.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Design

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/course-model
Description: view 3d models with multiple angel rotation for a course experience
Author: haxtheweb
Latest version: 25.0.0

# &lt;course-model&gt;

Model
> view 3d models with multiple angel rotation for a course experience

## 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 '@haxtheweb/course-model/course-model.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/course-model/course-model.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Model

## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/csv-render
Description: Remote render a CSV file in place as an accessible table.
Author: haxtheweb
Latest version: 25.0.0

# &lt;csv-render&gt;

Render
> Render a CSV file as a highly accessible table element

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

```js
/* In an existing module / web component */
import '@haxtheweb/csv-render/csv-render.js';


<script type="module">
  import '@haxtheweb/csv-render/csv-render.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.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

Render

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/d-d-d
Description: design, develop, destroy the competition
Author: haxtheweb
Latest version: 25.0.0

# &lt;d-d-d&gt;

D
> design, develop, destroy the competition

## 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 '@haxtheweb/d-d-d/d-d-d.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/d-d-d/d-d-d.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

D

## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/d-d-docs
Description: Webcomponent d-d-docs following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# d-d-docs
DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com

## Install dependencies
- `npm install` - installs dependencies so you can work

## Commands
- `npm start` - runs your web component for development, reloading on file changes
- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
- `npm run release` - this will build your code, update the version, and publish it to npm for others to use

## Working with your web component
- edit `./d-d-docs.js`
- edit your 'demo' by modifying `./index.html`
- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
- if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
- if you add additional `.js` files / web components then place them under `/lib/`
- to improve HAX wiring edit file in `/lib/d-d-docs.haxProperties.json`
- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.

## Recommended setup
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output

## Recommended Integrated Development Environment (IDE)
- [VSCode](https://code.visualstudio.com/Download)

### Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

# Credits
A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.

Never. Stop. innovating.
npm package: @haxtheweb/data-viz
Description: display pouch-db data using graphs
Author: haxtheweb
Latest version: 25.0.0

# &lt;data-viz&gt;

Viz
> display pouch-db data using graphs

## 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 '@haxtheweb/data-viz/data-viz.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/data-viz/data-viz.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Viz

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/date-card
Description: A simple presentation of a date
Author: haxtheweb
Latest version: 25.0.0

# &lt;date-card&gt;

Card
> A simple presentation of a date

## 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 '@haxtheweb/date-card/date-card.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/date-card/date-card.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Card

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/deduping-fix
Description: A very simple fix for Failed to execute 'define' on 'CustomElementRegistry'
Author: haxtheweb
Latest version: 25.0.0

# Deduping fix

This is a utility that helps fix a core issue with "the platform" in that if two things try to call window.customElements.define('tag-name',ClassName) and reference the same tag-name, it is a hard bricking issue. This problem can pop up in local development for a number of reasons (or timing with legacy platforms and dynamically imported assets) and so this little utility helps rewrite this global function to perform it's same function, but issue a warning if already defined as opposed to outright failing.

## Usage

```js
  <script src="./node_modules/@haxtheweb/deduping-fix/deduping-fix.js"></script>
```
npm package: @haxtheweb/demo-snippet
Description: Webcomponent demo-snippet following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# demo-snippet
DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com

## Install dependencies
- `npm install` - installs dependencies so you can work

## Commands
- `npm start` - runs your web component for development, reloading on file changes
- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
- `npm run release` - this will build your code, update the version, and publish it to npm for others to use

## Working with your web component
- edit `./demo-snippet.js`
- edit your 'demo' by modifying `./index.html`
- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
- if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
- if you add additional `.js` files / web components then place them under `/lib/`
- to improve HAX wiring edit file in `/lib/demo-snippet.haxProperties.json`
- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.

## Recommended setup
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output

## Recommended Integrated Development Environment (IDE)
- [VSCode](https://code.visualstudio.com/Download)

### Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

# Credits
A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.

Never. Stop. innovating.
npm package: @haxtheweb/discord-embed
Description: widgetbot.io based embed widget for discord threads and channels
Author: haxtheweb
Latest version: 25.0.0

# &lt;discord-embed&gt;

Embed
> widgetbot.io based embed widget for discord threads and channels

## 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 '@haxtheweb/discord-embed/discord-embed.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/discord-embed/discord-embed.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Embed

## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/disqus-embed
Description: Disqus service integration
Author: haxtheweb
Latest version: 25.0.0

# &lt;disqus-embed&gt;

Embed
> Disqus service integration

## 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 '@haxtheweb/disqus-embed/disqus-embed.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/disqus-embed/disqus-embed.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Embed

## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/dl-behavior
Description: Start of download thing
Author: haxtheweb
Latest version: 25.0.0

# &lt;dl-behavior&gt;

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

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.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

File

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/documentation-player
Description: playlist like element but for documenting web components in the context of hax
Author: haxtheweb
Latest version: 25.0.0

# &lt;documentation-player&gt;

Player
> playlist like element but for documenting web components in the context of hax

## 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 '@haxtheweb/documentation-player/documentation-player.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/documentation-player/documentation-player.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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



## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/drawing-icons
Description: iconset for drawing toolbar buttons
Author: haxtheweb
Latest version: 9.0.1

# &lt;drawing-icons&gt;

Icons
> iconset for drawing toolbar buttons

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

  import {DrawingIcons} from '@haxtheweb/drawing-icons';
</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/haxtheweb/webcomponents.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

Icons  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: @haxtheweb/dynamic-import-registry
Description: maintain manage the registration and usage of dynamic imports
Author: haxtheweb
Latest version: 25.0.0

# &lt;dynamic-import-registry&gt;

Import
> maintain manage the registration and usage of dynamic imports

## 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 '@haxtheweb/dynamic-import-registry/dynamic-import-registry.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/dynamic-import-registry/dynamic-import-registry.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Import

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/editable-list
Description: a listing of items that can be edited in place with operations
Author: haxtheweb
Latest version: 9.0.1

# &lt;editable-list&gt;

List
> a listing of items that can be edited in place with operations

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

## Code style

List  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: @haxtheweb/editable-outline
Description: a simple outline thats contenteditable in nature
Author: haxtheweb
Latest version: 9.0.1

# &lt;editable-outline&gt;

Outline
> a simple outline thats contenteditable in nature

## 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 '@haxtheweb/editable-outline/editable-outline.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/editable-outline/editable-outline.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/editable-outline/editable-outline.js';
  // imperative form
  import {EditableOutline} from '@haxtheweb/editable-outline';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/editable-outline/editable-outline.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/editable-outline/editable-outline.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/haxtheweb/webcomponents.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  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: @haxtheweb/editable-table
Description: A table that's editable
Author: haxtheweb
Latest version: 25.0.0

# &lt;editable-table&gt;

Table
> A table that can be edited on the front end

## 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 '@haxtheweb/editable-table/editable-table.js';


<script type="module">
  import '@haxtheweb/editable-table/editable-table.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.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

Table

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/elmsln-apps
Description: The applications of ELMSLN in one place to make it easier to work on
Author: haxtheweb
Latest version: 9.0.0-alpha.0

# &lt;elmsln-apps&gt;

Apps
> The applications of ELMSLN in one place to make it easier to work on

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

Apps  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: @haxtheweb/elmsln-loading
Description: Basic loading spinner based on the ELMS:LN icon
Author: haxtheweb
Latest version: 25.0.0

# &lt;elmsln-loading&gt;

Loading
> ELMS:LN logo that spins as a loading icon

## 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 '@haxtheweb/elmsln-loading/elmsln-loading.js';


<script type="module">
  import '@haxtheweb/elmsln-loading/elmsln-loading.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.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

Loading

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/elmsln-studio
Description: Studio App for ELMS:LN
Author: haxtheweb
Latest version: 9.0.0-alpha.0

# &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 '@haxtheweb/elmsln-studio/elmsln-studio.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/elmsln-studio/elmsln-studio.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/elmsln-studio/elmsln-studio.js';
  // imperative form
  import {ElmslnStudio} from '@haxtheweb/elmsln-studio';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/elmsln-studio/elmsln-studio.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/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/haxtheweb/webcomponents.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  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: @haxtheweb/enhanced-text
Description: take text and process it with various enhancements
Author: haxtheweb
Latest version: 25.0.0

# &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 '@haxtheweb/enhanced-text/enhanced-text.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/enhanced-text/enhanced-text.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Text

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/es-global-bridge
Description: A very simple class to help bridge global scoped code with ES Modules
Author: haxtheweb
Latest version: 25.0.0

# 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: @haxtheweb/event-badge
Description: a conference style badge
Author: haxtheweb
Latest version: 25.0.0

# &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 '@haxtheweb/event-badge/event-badge.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/event-badge/event-badge.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Badge

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/evo-to-wc
Description: Converts evolution content to web component equivalents.
Author: haxtheweb
Latest version: 10.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 '@haxtheweb/a11y-menu-button.js';



```

## Develop / Demo
Run `npm 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
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.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  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: @haxtheweb/example-hax-element
Description: Webcomponent example-hax-element following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# example-hax-element
DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com

## Install dependencies
- `npm install` - installs dependencies so you can work

## Commands
- `npm start` - runs your web component for development, reloading on file changes
- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
- `npm run release` - this will build your code, update the version, and publish it to npm for others to use

## Working with your web component
- edit `./example-hax-element.js`
- edit your 'demo' by modifying `./index.html`
- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
- if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
- if you add additional `.js` files / web components then place them under `/lib/`
- to improve HAX wiring edit file in `/lib/example-hax-element.haxProperties.json`
- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.

## Recommended setup
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output

## Recommended Integrated Development Environment (IDE)
- [VSCode](https://code.visualstudio.com/Download)

### Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

# Credits
A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.

Never. Stop. innovating.
npm package: @haxtheweb/example-haxcms-theme
Description: Webcomponent example-haxcms-theme following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# example-haxcms-theme
DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com

## Install dependencies
- `npm install` - installs dependencies so you can work

## Commands
- `npm start` - runs your web component for development, reloading on file changes
- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
- `npm run release` - this will build your code, update the version, and publish it to npm for others to use

## Working with your web component
- edit `./example-haxcms-theme.js`
- edit your 'demo' by modifying `./index.html`
- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
- if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
- if you add additional `.js` files / web components then place them under `/lib/`
- to improve HAX wiring edit file in `/lib/example-haxcms-theme.haxProperties.json`
- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.

## Recommended setup
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output

## Recommended Integrated Development Environment (IDE)
- [VSCode](https://code.visualstudio.com/Download)

### Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

# Credits
A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.

Never. Stop. innovating.
npm package: @haxtheweb/figure-label
Description: Figure label element to mark media assets within content.
Author: haxtheweb
Latest version: 25.0.0

# &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 '@haxtheweb/figure-label/figure-label.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/figure-label/figure-label.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

Label

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/file-system-broker
Description: singleton to simplify interactions with the file system on a user&#39;s device
Author: haxtheweb
Latest version: 25.0.0

# &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 '@haxtheweb/file-system-broker/file-system-broker.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/file-system-broker/file-system-broker.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

System

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/fill-in-the-blanks
Description: Fill in the blanks question
Latest version: 25.0.0

# &lt;fill-in-the-blanks&gt;

In
> Fill in the blanks question

## 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 '@haxtheweb/fill-in-the-blanks/fill-in-the-blanks.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/fill-in-the-blanks/fill-in-the-blanks.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.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

In

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