open-index/open-npm huggingface dataset:
npm package: @haxtheweb/filtered-image
Description: An image using an SVG filter. Can be used to make background images have more contrast with text.
Author: haxtheweb
Latest version: 9.0.1

# &lt;filtered-image&gt;

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

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

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

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

## Test

```bash
$ yarn run test
```

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

## Contributing

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

Image  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/flash-card
Description: self check for a card that has a definition on the back
Author: haxtheweb
Latest version: 25.0.0

# &lt;flash-card&gt;

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

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

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

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/flash-card/flash-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/fluid-type
Description: A simple fluid-type sizing wrapper element to apply to anything
Author: haxtheweb
Latest version: 25.0.0

# &lt;fluid-type&gt;

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

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

### JS module
```js
/* In an existing JS module / web component */
import '@haxtheweb/fluid-type/fluid-type.js';
/* At top of an application with build routine */

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

<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/fluid-type/fluid-type.js"></script>
```
### HTML / CSS
```html
<style>
  fluid-type {
    --fluid-type-min-size: 2;
    --fluid-type-max-size: 5;
  }  
</style>
<fluid-type><h1>This is fluid-type</h1></fluid-type>
```

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

Type

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/full-width-image
Description: full width image that flows beyond boundaries
Author: haxtheweb
Latest version: 25.0.0

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

Width
> full width image that flows beyond boundaries

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

```js
/* In an existing JS module / web component */
import '@haxtheweb/full-width-image/full-width-image.js';

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

Width

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/fullscreen-behaviors
Description: Provides state management when only one child can be selected at a time.
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/future-terminal-text
Description: cyberpunk 2077 inspired text for robots presentation
Author: haxtheweb
Latest version: 25.0.0

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

Terminal
> cyberpunk 2077 inspired text for robots presentation

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

```js
/* In an existing JS module / web component */
import '@haxtheweb/future-terminal-text/future-terminal-text.js';

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

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


## Contributing

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

Terminal

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/git-corner
Description: display a quick link with styling to a repo to help with contributions
Author: haxtheweb
Latest version: 25.0.0

# &lt;git-corner&gt;

Corner
> display a quick link with styling to a repo to help with contributions

## 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/git-corner/git-corner.js';

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

Corner

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/github-preview
Description: A simple element that displays information about a github repository.
Author: haxtheweb
Latest version: 25.0.0

# &lt;github-preview&gt;

Preview
> A simple element that displays information about a github repository.

## 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/github-preview/github-preview.js';

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

Preview

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

# glossy-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 `./glossy-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/glossy-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/grade-book
Description: A headless gradebook that supports multiple backends with rubrics
Author: haxtheweb
Latest version: 25.0.0

# &lt;grade-book&gt;

Book
> A headless gradebook that supports multiple backends with rubrics

## 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/grade-book/grade-book.js';

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

Book

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/grafitto-filter
Description: Start of grafitto-filter fork
Author: haxtheweb
Latest version: 9.0.0-alpha.0

# &lt;grafitto-filter&gt;

Filter
> Start of grafitto-filter fork

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

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

  import {GrafittoFilter} from '@haxtheweb/grafitto-filter';
</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

Filter  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/grid-plate
Description: a grid element with 1 to 4 columns via slots
Author: haxtheweb
Latest version: 25.0.0

# &lt;grid-plate&gt;

Plate
> a grid element with 1 to 4 columns via slots

## 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/grid-plate/grid-plate.js';


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

Plate

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/h-a-x
Description: Single tag to transform authoring
Author: haxtheweb
Latest version: 25.0.0

# &lt;h-a-x&gt;

A
> Single tag to transform authoring

## 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/h-a-x/h-a-x.js';

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

A

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/h5p-element
Description: h5p wrapper for loading and presenting .h5p files
Author: haxtheweb
Latest version: 25.0.0

# &lt;h5p-element&gt;

5
> h5p wrapper for loading and presenting unpacked .h5p file directories

## 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/h5p-element/h5p-element.js';

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

5

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/hal-9000
Description: Robot assistant tag, hopefully not evil
Author: haxtheweb
Latest version: 25.0.0

# &lt;hal-9000&gt;

9000
> Robot assistant tag, hopefully not evil

## 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/hal-9000/hal-9000.js';

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

9000

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/hax-cloud
Description: Turn any website into authorware with one tag and a computer
Author: haxtheweb
Latest version: 25.0.0

# &lt;hax-cloud&gt;

Cloud
> Turn any website into authorware with one tag and a computer

## 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/hax-cloud/hax-cloud.js';

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

Cloud

## License
[ License](http://opensource.org/licenses/)
npm package: @haxtheweb/hax-iconset
Description: HAX-specific icons
Author: haxtheweb
Latest version: 25.0.0

# &lt;hax-iconset&gt;

Iconset
> HAX-specific icons

## 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/hax-iconset/hax-iconset.js';

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

Iconset

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/hax-logo
Description: logo element for hax, obviously as a hax capable element.
Author: haxtheweb
Latest version: 25.0.0

# &lt;hax-logo&gt;

Logo
> logo element for hax, obviously as a hax capable 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/hax-logo/hax-logo.js';

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

Logo

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/haxcms-elements
Description: HAX CMS series of elements to provide a full on CMS
Author: haxtheweb
Latest version: 25.0.0

# &lt;haxcms-elements&gt;

Elements
> HAX CMS series of elements to provide a full on CMS

## 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/haxcms-elements/haxcms-elements.js';


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

Elements

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/haxma-theme
Description: HAXma theme for HAXcms inspired by Figma documentation design
Author: haxtheweb
Latest version: 25.0.0

# haxma-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 `./haxma-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/haxma-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/haxor-slevin
Description: Tech blogger theme
Author: haxtheweb
Latest version: 25.0.0

# &lt;haxor-slevin&gt;

Slevin
> Tech blogger 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/haxor-slevin/haxor-slevin.js';

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

Slevin

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/haxschema-builder
Description: dynamically build and visualize HAXschema
Author: haxtheweb
Latest version: 9.0.0-alpha.0

# &lt;haxschema-builder&gt;

Builder
> dynamically build and visualize HAXschema

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

Builder  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/hex-picker
Description: Choose a color by hex or rgba code
Author: haxtheweb
Latest version: 25.0.0

# &lt;hex-picker&gt;

Picker
> Choose a color by hex or rgba code

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

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

Picker

## License
[MIT License](http://opensource.org/licenses/MIT)
npm package: @haxtheweb/hexagon-loader
Description: a simple VJS element that is for showing something is loading
Author: haxtheweb
Latest version: 25.0.0

# &lt;hexagon-loader&gt;

Loader
> 

## 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/hexagon-loader/hexagon-loader.js';

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

Loader

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/html-block
Description: A basic HTML block that provides HAXschema wiring
Author: haxtheweb
Latest version: 25.0.0

# &lt;html-block&gt;

Block
> A basic HTML block that provides HAXschema wiring

## 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/html-block/html-block.js';

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

Block

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/i18n-manager
Description: Internationalization management singleton and helper mixin to allow shipping localizations with elements in an app agnostic manner
Author: haxtheweb
Latest version: 25.0.0

# &lt;i18n-manager&gt;

18
> internationalization management singleton and helper classes

## 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/i18n-manager/i18n-manager.js';

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

18

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/iframe-loader
Description: Adds a loading indicator for iframes.
Author: haxtheweb
Latest version: 25.0.0

# &lt;iframe-loader&gt;

Loader
> Adds a loading indicator for iframes.

## 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/iframe-loader/iframe-loader.js';

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

Loader

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

# &lt;image-compare-slider&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/image-compare-slider/image-compare-slider.js';


<script type="module">
  import '@haxtheweb/image-compare-slider/image-compare-slider.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/image-inspector
Description: Inspector tools on an image wrapping open seadragon library
Author: haxtheweb
Latest version: 25.0.0

# &lt;image-inspector&gt;

Inspector
> Inspector tools on an image wrapping open seadragon library

## 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/image-inspector/image-inspector.js';


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

Inspector

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

# &lt;img-pan-zoom&gt;

Pan
> Start of img-pan-zoom

## 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/img-pan-zoom.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

Pan

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

# &lt;img-view-modal&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/img-view-modal/img-view-modal.js';


<script type="module">
  import '@haxtheweb/img-view-modal/img-view-modal.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/inline-audio
Description: audio that enhances the experience but is not required by being selectable inline with text content
Author: haxtheweb
Latest version: 25.0.0

# &lt;inline-audio&gt;

Audio
> audio that enhances the experience but is not required by being selectable inline with text content

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

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

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

Audio

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/intersection-element
Description: VanillaJS Intersection element / capabilities to mix into other elements
Author: haxtheweb
Latest version: 25.0.0

# intersection-element
VanillaJS intersection oberver partcial element. Does nothing on it's own but wires up an element to correctly do intersection observation and running a callback when visible in the browsing window. Reasonable defaults that can be overloaded as needed.
npm package: @haxtheweb/item-overlay-ops
Description: A wrapper that provides an overlay of operations to any element, usually a card.
Author: haxtheweb
Latest version: 9.0.1

# &lt;item-overlay-ops&gt;

Overlay
> A wrapper that provides an overlay of operations to any element, usually a 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/item-overlay-ops/item-overlay-ops.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/item-overlay-ops/item-overlay-ops.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/item-overlay-ops/item-overlay-ops.js';

  import {ItemOverlayOps} from '@haxtheweb/item-overlay-ops/item-overlay-ops.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

Overlay  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)