open-index/open-npm huggingface dataset:
npm package: @haxtheweb/relative-heading
Description: Start of relative-heading
Author: haxtheweb
Latest version: 25.0.0

# &lt;relative-heading&gt;

Heading
> outputs the correct heading hierarchy based on parent&#39;s heading

## 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/relative-heading/relative-heading.js';

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

Heading

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/replace-tag
Description: Loading helpers and css
Author: haxtheweb
Latest version: 25.0.0

# &lt;replace-tag&gt;

Helpers
> Loading helpers and css

## 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/replace-tag/replace-tag.js';

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

Helpers

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/responsive-grid
Description: Automated conversion of responsive-grid/
Author: haxtheweb
Latest version: 25.0.0

# &lt;responsive-grid&gt;

Grid
> Automated conversion of responsive-grid/

## 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/responsive-grid.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

Grid

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/responsive-utility
Description: Automated conversion of responsive-utility/
Author: haxtheweb
Latest version: 25.0.0

# &lt;responsive-utility&gt;

Utility
> Automated conversion of responsive-utility/

## 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/responsive-utility.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

Utility

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/retro-card
Description: Simple card in a cool retro design
Author: haxtheweb
Latest version: 25.0.0

# &lt;retro-card&gt;

Card
> Simple card in a cool retro design based off of PSU DMD program style

## 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/retro-card/retro-card.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/retro-card/retro-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/rich-text-editor
Description: a standalone rich text editor
Author: haxtheweb
Latest version: 25.0.0

# &lt;rich-text-editor&gt;

Text
> a standalone rich text editor

## 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/rich-text-editor/rich-text-editor.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/rich-text-editor/rich-text-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 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/rpg-character
Description: Little RPG character that&#39;s remixable
Author: haxtheweb
Latest version: 25.0.0

# &lt;rpg-character&gt;

Character
> Little RPG character that&#39;s remixable

## 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/rpg-character/rpg-character.js';

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

Character

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/runkit-embed
Description: Embed >
Latest version: 25.0.0

# &lt;runkit-embed&gt;

Embed
> 

## 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/runkit-embed/runkit-embed.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/runkit-embed/runkit-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
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/schema-behaviors
Description: Apply schema helper behaviors to existing Polymer (Legacy) based elements
Author: haxtheweb
Latest version: 25.0.0

# &lt;schema-behaviors&gt;

Behaviors
> Automated conversion of schema-behaviors/

## 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/schema-behaviors.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

Behaviors

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

# screen-recorder
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 `./screen-recorder.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/screen-recorder.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/scroll-button
Description: button to scroll to an area or back to top
Author: haxtheweb
Latest version: 25.0.0

# &lt;scroll-button&gt;

Button
> button to scroll to an area or back to top

## 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/scroll-button/scroll-button.js';

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

Button

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/secure-request
Description: Automated conversion of secure-request/
Author: haxtheweb
Latest version: 11.0.5

# &lt;secure-request&gt;

Request
> Automated conversion of secure-request/

## 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/secure-request.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

Request

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/select-menu
Description: Automated conversion of select-menu/
Author: haxtheweb
Latest version: 9.0.1

# &lt;select-menu&gt;

Menu
> Automated conversion of select-menu/

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

  import {SelectMenu} from '@haxtheweb/select-menu';
</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

Menu  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/self-check
Description: Automated conversion of self-check/
Author: haxtheweb
Latest version: 25.0.0

# &lt;self-check&gt;

Check
> Automated conversion of self-check/

## 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/self-check.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

Check

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/shadow-style
Description: write css that is for piercing shadow roots and applying CSS automatically
Author: haxtheweb
Latest version: 25.0.0

# &lt;shadow-style&gt;

Style
> write css that is for piercing shadow roots and applying CSS automatically

## 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/shadow-style/shadow-style.js';

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

Style

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-autocomplete
Description: auto complete either from an endpoint or local json array
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-autocomplete&gt;

Autocomplete
> auto complete either from an endpoint or local json array

## 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/simple-autocomplete/simple-autocomplete.js';

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

Autocomplete

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-blog
Description: Automated conversion of simple-blog/
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-blog&gt;

Blog
> Automated conversion of simple-blog/

## 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/simple-blog.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

Blog

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-blog-card
Description: a card commonly found on a blogging website
Author: haxtheweb
Latest version: 9.0.1

# &lt;simple-blog-card&gt;

Blog
> a card commonly found on a blogging website

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

Blog  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/simple-colors
Description: Automated conversion of simple-colors/
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-colors&gt;

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

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

```js
/* In an existing module / web component */
import '@haxtheweb/simple-colors.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

Colors

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-colors-shared-styles
Description: shared styles for simple-colors
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-colors-shared-styles&gt;

Colors
> shared styles for simple-colors

## 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/simple-colors-shared-styles/simple-colors-shared-styles.js';

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

Colors

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-cta
Description: Simple call to action button
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-cta&gt;

Cta
> Simple call to action button

## 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/simple-cta/simple-cta.js';

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

Cta

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-datetime
Description: Automated conversion of simple-datetime/
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-datetime&gt;

Datetime
> Automated conversion of simple-datetime/

## 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/simple-datetime.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

Datetime

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-drawer
Description: a singleton drawer element
Author: haxtheweb
Latest version: 9.0.1

# &lt;simple-drawer&gt;

Drawer
> a singleton drawer element

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

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

Drawer  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/simple-emoji
Description: simplify emoji creation and management
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-emoji&gt;

Emoji
> simplify emoji creation and management

## 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/simple-emoji/simple-emoji.js';

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

Emoji

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-fields
Description: Uses JSON Schema or an array of fields to display a series of fields
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-fields&gt;

Fields
> Uses JSON Schema or an array of fieldsto display a series of fields

## 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/simple-fields/simple-fields.js';

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

Fields

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-filter
Description: a super class element to provide filtering capabilities
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-filter&gt;

Filter
> a super class element to provide filtering capabilities

## 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/simple-filter/simple-filter.js';

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

Filter

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-icon
Description: Render an SVG based icon
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-icon&gt;

Icon
> Render an SVG based icon

## 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/simple-icon/simple-icon.js';

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

Icon

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-icon-picker
Description: Uses simple-picker to create an icon picker
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-icon-picker&gt;

Icon
> Uses simple-picker to create an icon picker

## 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/simple-icon-picker/simple-icon-picker.js';

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

Icon

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-img
Description: simple image manipulation with a microservice
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-img&gt;

Img
> simple image manipulation with a microservice

## 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/simple-img/simple-img.js';

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

Img

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-login
Description: a simple login form
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-login&gt;

Login
> a simple login form

## 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/simple-login/simple-login.js';

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

Login

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-modal
Description: A simple modal that ensures accessibility and stack order context appropriately
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-modal&gt;

Modal
> A simple modal that ensures accessibility and stack order context appropriately

## 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/simple-modal.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

Modal

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-picker
Description: a simple picker for swatches, icons, etc.
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-picker&gt;

Picker
> a simple picker for swatches, icons, etc.

## 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/simple-picker.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

Picker

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-popover
Description: A popover alertdialog that is positioned next to a target element
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-popover&gt;

Popover
> A popover alertdialog that is positioned next to a target element

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

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

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

Popover

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-progress
Description: a simple progress slider bar
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-progress&gt;

Progress
> a simple progress slider bar

## 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/simple-progress/simple-progress.js';

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

Progress

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-range-input
Description: simple styling on a range input
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-range-input&gt;

Range
> simple styling on a range input

## 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/simple-range-input/simple-range-input.js';

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

Range

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-search
Description: Automated conversion of simple-search
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-search&gt;

Search
> Automated conversion of simple-search

## 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/simple-search.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

Search

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/simple-timer
Description: Automated conversion of simple-timer/
Author: haxtheweb
Latest version: 9.0.1

# &lt;simple-timer&gt;

Timer
> Automated conversion of simple-timer/

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

  import {SimpleTimer} from '@haxtheweb/simple-timer';
</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

Timer  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/simple-toast
Description: A singular toast / message for conistency
Author: haxtheweb
Latest version: 25.0.0

# &lt;simple-toast&gt;

Toast
> A singular toast / message for conistency

## 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/simple-toast/simple-toast.js';

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

Toast

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