open-index/open-npm huggingface dataset:
npm package: @hydrofoil/shaperone-hydra
Description: Shaperone extensions to integrate with Hydra-driven APIs
Author: Tomasz Pluskiewicz
Latest version: 0.4.1

# `@hydrofoil/shaperon-hydra`

Extends Shaperone forms with Hydra hypermedia awareness

## Quick setup

```js
import shaperoneHydra from '@hydrofoil/shaperone-hydra'
import { configure } from '@hydrofoil/shaperone-wc/configure.js'

shaperoneHydra(configure())
```

## Usage

For usage examples see [https://forms.hypermedia.app/#/extensions/hydra](https://forms.hypermedia.app/#/extensions/hydra)
npm package: @hydrofoil/shaperone-rdf-validate-shacl
Description: SHACL validation support for @hydrofoil/shaperone. Using [rdf-validate-shacl](https://npm.im/rdf-validate-shacl)
Author: Tomasz Pluskiewicz
Latest version: 1.1.1

# @hydrofoil/shaperone-rdf-validate-shacl

SHACL validation support for @hydrofoil/shaperone. Using [rdf-validate-shacl](https://npm.im/rdf-validate-shacl)

## Configuration

See [documentation](https://forms.hypermedia.app/#/validation?id=configuration)

## Options

The exported function has an optional parameter which allows configuring the underlying validation library.

```typescript
import $rdf from 'rdf-ext'
import { validate } from '@hydrofoil/shaperone-rdf-validate-shacl'

validate.with({
  factory: $rdf,
  maxErrors: 10,
})
```
npm package: @hydrofoil/shaperone-wc-material
Description: Rendering forms in Material Design style
Author: Tomasz Pluskiewicz
Latest version: 0.6.1

# mwc-editor-toggle

**Mixins:** SelectableMenuMixin

## Properties

| Property        | Attribute       | Type                             | Default |
|-----------------|-----------------|----------------------------------|---------|
| `editors`       | `editors`       | `SingleEditorMatch[]`            | []      |
| `removeEnabled` | `removeEnabled` | `boolean`                        | false   |
| `selected`      | `selected`      | `NamedNode<string> \| undefined` |         |

## Methods

| Method       | Type                                             |
|--------------|--------------------------------------------------|
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): UncompiledTemplateResult<1>` |

## Events

| Event             | Type                                          |
|-------------------|-----------------------------------------------|
| `editor-selected` | `CustomEvent<{ editor: NamedNode<string>; }>` |
| `object-removed`  |                                               |


# mwc-item-lite

## Properties

| Property      | Attribute    | Type                           | Default |
|---------------|--------------|--------------------------------|---------|
| `noOptions`   | `no-options` | `boolean`                      | true    |
| `optionsSlot` |              | `HTMLSlotElement \| undefined` |         |


# mwc-property-menu

## Properties

| Property   | Attribute  | Type            |
|------------|------------|-----------------|
| `property` | `property` | `PropertyState` |


# mwc-shape-selector

**Mixins:** SelectableMenuMixin

## Properties

| Property   | Attribute  | Type                                             |
|------------|------------|--------------------------------------------------|
| `selected` | `selected` | `NodeShape<DatasetCore<Quad, Quad>> \| undefined` |
| `shapes`   | `shapes`   | `NodeShape<DatasetCore<Quad, Quad>>[] \| undefined` |

## Methods

| Method       | Type                                             |
|--------------|--------------------------------------------------|
| `createItem` | `({ pointer, icon, selected, ...rest }: Item & Record<string, unknown>): UncompiledTemplateResult<1>` |

## Events

| Event            | Type                                             |
|------------------|--------------------------------------------------|
| `shape-selected` | `CustomEvent<{ value: NodeShape<DatasetCore<Quad, Quad>>; }>` |


# wc-menu

## Properties

| Property     | Type           |
|--------------|----------------|
| `menu`       | `Menu`         |
| `menuButton` | `WcMenuButton` |
npm package: @hydrofoil/shaperone-wc-shoelace
Description: ## Properties
Author: Tomasz Pluskiewicz
Latest version: 0.4.1

# sh-sl-autocomplete

## Properties

| Property          | Attribute          | Type                                             | Default |
|-------------------|--------------------|--------------------------------------------------|---------|
| `clearable`       | `clearable`        | `boolean`                                        | false   |
| `debounceTimeout` | `debounce-timeout` | `number`                                         | 350     |
| `empty`           | `empty`            | `boolean`                                        | true    |
| `hoist`           | `hoist`            | `boolean`                                        | true    |
| `inputValue`      | `inputValue`       | `string`                                         | ""      |
| `loading`         | `loading`          | `boolean \| undefined`                           |         |
| `readonly`        | `readonly`         | `boolean`                                        | false   |
| `selected`        | `selected`         | `GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined` |         |

## Methods

| Method                 | Type                          |
|------------------------|-------------------------------|
| `cleared`              | `(e: Event): void`            |
| `dispatchItemSelected` | `(e: CustomEvent<any>): void` |
| `dispatchSearch`       | `(): void`                    |
| `updateEmpty`          | `(e: Event): void`            |

## Events

| Event          | Type                              |
|----------------|-----------------------------------|
| `cleared`      |                                   |
| `itemSelected` | `CustomEvent<{ value: any; }>`    |
| `search`       | `CustomEvent<{ value: string; }>` |


# sh-sl-object

## Properties

| Property       | Attribute      | Type                   |
|----------------|----------------|------------------------|
| `canBeRemoved` | `canBeRemoved` | `boolean \| undefined` |
| `removeIcon`   | `removeIcon`   | `string \| undefined`  |

## Events

| Event     |
|-----------|
| `removed` |


# sh-sl-property

## Properties

| Property      | Attribute     | Type                   |
|---------------|---------------|------------------------|
| `addIcon`     | `addIcon`     | `string \| undefined`  |
| `canAddValue` | `canAddValue` | `boolean \| undefined` |
| `helpText`    | `helpText`    | `string \| undefined`  |
| `label`       | `label`       | `string \| undefined`  |

## Events

| Event   |
|---------|
| `added` |


# sh-sl-with-lang-editor

## Properties

| Property    | Attribute   | Type                    | Default |
|-------------|-------------|-------------------------|---------|
| `language`  | `language`  | `string \| undefined`   |         |
| `languages` | `languages` | `string[] \| undefined` |         |
| `readonly`  | `readonly`  | `boolean`               | false   |

## Events

| Event               | Type                           |
|---------------------|--------------------------------|
| `language-selected` | `CustomEvent<{ value: any; }>` |
npm package: @hydrogen-design-system/component-alert
Description: Hydrogen's alert component.
Author: Josh Beveridge
Latest version: 0.0.27

# Hydrogen's alert component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-alert" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-alert?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-alert --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

* Please ensure that work on this component updates all supported markup where possible.

## Contributing

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-blockquote
Description: Hydrogen's blockquote component.
Author: Josh Beveridge
Latest version: 0.0.8

# Hydrogen's blockquote component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-blockquote" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-blockquote?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-blockquote --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

Hydrogen components require [Cash](https://kenwheeler.github.io/cash/) to work properly. Cash is a lightweight jQuery alternative and will eventually be phased out of Hydrogen in favour of vanilla JavaScript.

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-breadcrumb
Description: Hydrogen's breadcrumb component.
Author: Josh Beveridge
Latest version: 0.0.8

# Hydrogen's breadcrumb component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-breadcrumb" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-breadcrumb?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-breadcrumb --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-button
Description: Hydrogen's button component.
Author: Josh Beveridge
Latest version: 0.0.13

# Hydrogen's button component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-button" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-button?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-button --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-card
Description: Hydrogen's card component.
Author: Josh Beveridge
Latest version: 0.0.7

# Hydrogen's card component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-card" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-card?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-card --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-carousel
Description: Hydrogen's carousel component.
Author: Josh Beveridge
Latest version: 0.0.3

# Hydrogen's carousel component

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-carousel --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's components are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), and [CSSnano](https://cssnano.co/).

Hydrogen components require [Cash](https://kenwheeler.github.io/cash/) to work properly. Cash is a lightweight jQuery alternative and will eventually be phased out of Hydrogen in favour of vanilla JavaScript.

The carousel component leverages [Glider.js](https://nickpiscitelli.github.io/Glider.js/). Documentation on how to implement and modify a carousel can be found there.

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-dialog
Description: Hydrogen's dialog component.
Author: Josh Beveridge
Latest version: 0.0.22

# Hydrogen's dialog component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-dialog" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-dialog?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-dialog --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-forms
Description: Hydrogen's series of form input components.
Author: Josh Beveridge
Latest version: 0.0.14

# Hydrogen's form element components

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-forms" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-forms?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-forms --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`
- `src/styles/inputs`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-horizontal-rule
Description: Hydrogen's horizontal-rule component.
Author: Josh Beveridge
Latest version: 0.0.6

# Hydrogen's horizontal-rule component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-horizontal-rule" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-horizontal-rule?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-horizontal-rule --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-iframe
Description: Hydrogen's iframe component.
Author: Josh Beveridge
Latest version: 0.0.5

# Hydrogen's iframe component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-iframe" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-iframe?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-iframe --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-menu
Description: Hydrogen's menu component.
Author: Josh Beveridge
Latest version: 0.0.16

# Hydrogen's menu component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-menu" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-menu?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-menu --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

Hydrogen's menu requires [Cash](https://kenwheeler.github.io/cash/) to work properly. Cash is a lightweight jQuery alternative and will eventually be phased out of Hydrogen in favour of vanilla JavaScript.

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-overlay
Description: Hydrogen's overlay component.
Author: Josh Beveridge
Latest version: 0.0.7

# Hydrogen's overlay component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-overlay" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-overlay?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-overlay --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-pullquote
Description: Hydrogen's pullquote component.
Author: Josh Beveridge
Latest version: 0.0.6

# Hydrogen's pullquote component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-pullquote" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-pullquote?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-pullquote --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository
npm package: @hydrogen-design-system/component-skip-to-content
Description: Hydrogen's skip-to-content link component.
Author: Josh Beveridge
Latest version: 0.0.6

# Hydrogen's skip-to-content link component

<a href="https://www.npmjs.com/package/@hydrogen-design-system/component-skip-to-content" title="Visit this package on NPM." target="_blank" rel="noreferrer">
    <img alt="npm" src="https://img.shields.io/npm/v/@hydrogen-design-system/component-skip-to-content?color=9864e8&label=release">
</a>

## Installation

You can install this component as a standalone package using `npm install @hydrogen-design-system/component-skip-to-content --save-dev`

This component can also be installed as a part of Hydrogen in its entirety. [Learn more](https://hydrogen.design).

## Usage

For standard usage, please see [Hydrogen's documentation](https://hydrogen.design).

## Contributing

Hydrogen's properties are built using [Gulp](https://gulpjs.com/), [Sass](https://sass-lang.com), [Autoprefixer](https://github.com/postcss/autoprefixer), [CSSnano](https://cssnano.co/), and [Babel](https://babeljs.io/).

This component module contains the following in the `dist` folder:
- the component's code that is imported by @hydrogen-design-system/system
- a versioned, isolated copy of the component that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

This component currently supports the following markup and/or frameworks:
- HTML

**Please ensure that work on this component updates all supported markup where possible.**

The code for this component can be found in:
- `src/markup/`
- `src/scripts/`
- `src/styles/`

You will need:
- [Node](https://nodejs.org/en/)

### _VERSION
`_VERSION` is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have `_VERSION` appended (e.g. data-h2-accordion_VERSION) in the following places:
- `src/markup`
- `src/scripts`
- `src/styles/instance.scss`

It is also important to use `_VERSION` when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in `src/scripts` that follow a `function myNewFunctionName_VERSION () {}` pattern.

### Important commands
- `npm install`
  - installs all development dependencies
- `npm run dev`
  - builds the versioned instance of the component and opens the test file in your browser with browser-sync running so that you can moderate your changes
- `npm run build`
  - runs the build command to process all files for production
  - this will automatically build the system and instanced versions of the component
- `npm publish`
  - builds the component
  - publishes it to the public package repository