open-index/open-npm huggingface dataset:
npm package: @haxtheweb/a11y-behaviors
Description: Accessibility behaviors / mix-ins to improve a11y overall
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-behaviors&gt;

11
> Behaviors / mixins to improve A11y in elements

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

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


<script type="module">

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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-carousel
Description: Slider that allows comparison of two images
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-carousel&gt;

Compare
> Slider that allows comparison of two images

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

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


<script type="module">
  import '@haxtheweb/a11y-carousel/a11y-carousel.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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-collapse
Description: Start of a11y-collapse
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-collapse&gt;

11
> Start of a11y-collapse

## 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-collapse/a11y-collapse.js';


<script type="module">
  import '@haxtheweb/a11y-collapse/a11y-collapse.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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-compare-image
Description: Slider that allows comparison of two images
Author: haxtheweb
Latest version: 25.0.0

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

Compare
> Slider that allows comparison of two images

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

```js
/* In an existing module / web component */
import '@haxtheweb/a11y-compare-image/a11y-compare-image.js';


<script type="module">
  import '@haxtheweb/a11y-compare-image/a11y-compare-image.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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-details
Description: accessible progressive disclosure with detail and summary
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-details&gt;

11
> accessible progressive disclosure with detail and summary

## 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/a11y-details/a11y-details.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/a11y-details/a11y-details.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-figure
Description: accessible figure with image description in details
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-figure&gt;

11
> accessible figure with image description in details

## 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/a11y-figure/a11y-figure.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/a11y-figure/a11y-figure.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-gif-player
Description: Play gifs in an accessible way by having the user click to play their animation
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-gif-player&gt;

11
> An accessible animated gif "player"

## 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-gif-player/a11y-gif-player.js';



```

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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-media-player
Description: A feature rich, highly accessible video player
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-media-player&gt;

11
> 

## 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/a11y-media-player/a11y-media-player.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/a11y-media-player/a11y-media-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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-menu-button
Description: Accessible menu button
Author: haxtheweb
Latest version: 25.0.0

# &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/a11y-menu-button.js';



```

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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-tabs
Description: accessible and responsive tabbed interface
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-tabs&gt;

11
> accessible and responsive tabbed interface

## 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/a11y-tabs/a11y-tabs.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/a11y-tabs/a11y-tabs.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/a11y-utils
Description: a collection of accessibility patterns and styles
Author: haxtheweb
Latest version: 25.0.0

# &lt;a11y-utils&gt;

11
> a collection of accessibility patterns and styles

## 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/a11y-utils/a11y-utils.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/a11y-utils/a11y-utils.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/absolute-position-behavior
Description: Abstracting the positioning behavior to be resusable in other elements
Author: haxtheweb
Latest version: 25.0.0

# &lt;absolute-position-behavior&gt;

Position
> Abstracting the positioning behavior from paper-tooltip to be resusable in other 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 '@haxtheweb/absolute-position-behavior/absolute-position-behavior.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/absolute-position-behavior/absolute-position-behavior.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/accent-card
Description: Start of accent-card
Author: haxtheweb
Latest version: 25.0.0

# &lt;accent-card&gt;

Card
> Start of accent-card

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

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


<script type="module">
  import '@haxtheweb/accent-card/accent-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 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

Card

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/aframe-player
Description: A-frame 3D player in the browser via data binding w/ polymer
Author: haxtheweb
Latest version: 25.0.0

# &lt;aframe-player&gt;

Player
> 3D Player and data binding for a-frame elements

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

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


<script type="module">
  import '@haxtheweb/aframe-player/aframe-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 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



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/air-horn
Description: demonstrative purposes via meme
Author: haxtheweb
Latest version: 25.0.0

# &lt;air-horn&gt;

Horn
> demonstrative purposes via meme

## 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/air-horn/air-horn.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/air-horn/air-horn.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/anchor-behaviors
Description: handles anchors and params in the url
Author: haxtheweb
Latest version: 25.0.0

# &lt;anchor-behaviors&gt;

Behaviors
> handles anchors and params in the url

## 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/anchor-behaviors/anchor-behaviors.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/anchor-behaviors/anchor-behaviors.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

Behaviors

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/app-editor-hax
Description: HAX but for mobile / desktop application development
Author: haxtheweb
Latest version: 9.0.1

# &lt;app-editor-hax&gt;

Editor
> HAX geared toward application development

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

  import {AppEditorHax} from '@haxtheweb/app-editor-hax/app-editor-hax.js';
</script>
```

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

Editor  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/app-hax
Description: HAX+HAXcms as a full app experience
Author: haxtheweb
Latest version: 25.0.0

# &lt;app-hax&gt;

Hax
> HAX+HAXcms as a full app 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/app-hax/app-hax.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/app-hax/app-hax.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

Hax

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/audio-player
Description: simple audio web component to match video
Author: haxtheweb
Latest version: 25.0.0

# &lt;audio-player&gt;

Player
> simple audio web component to match video

## 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/audio-player/audio-player.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/audio-player/audio-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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/author-card
Description: Webcomponent author-card following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# author-card
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 `./author-card.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/author-card.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/awesome-explosion
Description: An awesome, explosion.
Author: haxtheweb
Latest version: 25.0.0

# &lt;awesome-explosion&gt;

Explosion
> A stinking awesome, explosion.

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

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


<script type="module">
  import '@haxtheweb/awesome-explosion/awesome-explosion.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

Explosion

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/b-r
Description: Creates break statements to show conditional rendering
Author: haxtheweb
Latest version: 25.0.0

# &lt;b-r&gt;

R
> Creates break statements to show conditional rendering

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/b-r/b-r.js"></script>
```
# Tag Properties
`amount="number"` Specify the number of br tags to be inserted. No value or 0 will use the screen height to generate br tags.

## Develop / Demo
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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/barcode-reader
Description: Reads barcodes
Author: haxtheweb
Latest version: 25.0.0

# &lt;barcode-reader&gt;

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

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/barcode-reader/barcode-reader.js"></script>
```
## Usage after imported
barcode-reader will give controls to show/hide and start the scanner, but the submit button to utilize the data is left up to the website.

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

## Develop / Demo
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

Reader

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/baseline-build-hax
Description: create an inflexible baseline build of hax with all elements
Author: haxtheweb
Latest version: 25.0.0

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

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

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

```js
/* In an existing JS module / web component */
import '@haxtheweb/baseline-build-hax/baseline-build-hax.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/baseline-build-hax/baseline-build-hax.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

Build

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/beaker-broker
Description: A broker element to make working with Beaker Browser's API even easier.
Author: haxtheweb
Latest version: 25.0.0

# &lt;beaker-broker&gt;

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

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

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


<script type="module">
  import '@haxtheweb/beaker-broker/beaker-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 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

Broker

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/bootstrap-theme
Description: Hax bootstrap themeing
Author: haxtheweb
Latest version: 25.0.0

# &lt;bootstrap-theme&gt;

Theme
> Hax bootstrap themeing

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/bootstrap-theme/bootstrap-theme.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

Theme

## License
[MIT License](http://opensource.org/licenses/MIT)
npm package: @haxtheweb/chartist-render
Description: Rendering Chartist
Author: haxtheweb
Latest version: 25.0.0

# &lt;chartist-render&gt;

Render
> Chartist render wrapper

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

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



```

## 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/chat-agent
Description: chatbot agent style chat widget
Author: btopro
Latest version: 25.0.0

# &lt;chat-agent&gt;

Agent
> chatbot agent style chat widget

## 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/chat-agent/chat-agent.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/chat-agent/chat-agent.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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/check-it-out
Description: View codepen or stackblitz demos
Author: haxtheweb
Latest version: 25.0.0

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

It
> View codepen or stackblitz demos

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

```js
/* In an existing JS module / web component */
import '@haxtheweb/check-it-out/check-it-out.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/check-it-out/check-it-out.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

It

## License
[MIT License](http://opensource.org/licenses/MIT)
npm package: @haxtheweb/circle-progress
Description: A circle that illustrates progression via the outline of the element
Author: haxtheweb
Latest version: 9.0.1

# &lt;circle-progress&gt;

Progress
> Progress as tracked around the outside of a circle

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

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

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

Progress  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/citation-element
Description: A simple way of citing things on the web.
Author: haxtheweb
Latest version: 25.0.0

# &lt;citation-element&gt;

Element
> Correctly cite a resource on the internet

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

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


<script type="module">
  import '@haxtheweb/citation-element/citation-element.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

Element

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/clean-one
Description: Clean HAXcms theme, one.
Author: haxtheweb
Latest version: 25.0.0

# &lt;clean-one&gt;

One
> Clean HAXcms theme, one.

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/clean-one/clean-one.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

One

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

# clean-portfolio-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 `./clean-portfolio-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/clean-portfolio-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/clean-two
Description: A 2nd clean theme
Author: haxtheweb
Latest version: 25.0.0

# &lt;clean-two&gt;

Two
> A 2nd clean theme

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/clean-two/clean-two.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

Two

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/cms-hax
Description: HAX integration geared toward CMSs
Author: haxtheweb
Latest version: 25.0.0

# &lt;cms-hax&gt;

Hax
> HAX integration for CMSs

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

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


<script type="module">
  import '@haxtheweb/cms-hax/cms-hax.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

Hax

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/code-editor
Description: Data binding wrapped on top of a popular code editor
Author: haxtheweb
Latest version: 25.0.0

# &lt;code-editor&gt;

Editor
> Code editor element with data binding

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

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


<script type="module">
  import '@haxtheweb/code-editor/code-editor.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

Editor

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/code-sample
Description: A wrapper element for highlight.js
Author: haxtheweb
Latest version: 25.0.0

# &lt;code-sample&gt;

Sample
> A wrapper element for highlight.js

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/code-sample/code-sample.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

Sample

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/collection-list
Description: listing and display elements for collections of items
Author: haxtheweb
Latest version: 25.0.0

# &lt;collection-list&gt;

List
> listing and display elements for collections of items

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/collection-list/collection-list.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

List

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