open-index/open-npm huggingface dataset:
npm package: @kemet/kemet-accordion
Description: A component that acts like a standard accordion.
Author: Hasani Rogers
Latest version: 1.0.1

# \<kemet-accordion>

## Installation
```bash
npm i @kemet/kemet-accordion
```

## Usage
```js
import '@kemet/kemet-accordion/kemet-accordion.js'
```

```html
<kemet-accordion>
  <a slot="trigger">Trigger</a>
  <div slot="panel">Bacon ipsum dolor amet shoulder sausage short ribs...</div>
</kemet-accordion>
```
[Click here](http://kemet.online/accordion) for more docs.
npm package: @kemet/kemet-carousel
Description: A designless carousel.
Author: Hasani Rogers
Latest version: 1.0.1

# \<kemet-carousel>

## Installation
```bash
npm i @kemet/kemet-carousel
```

## Usage
```js
  import 'kemet-carousel/kemet-carousel.js';
  import 'kemet-carousel/kemet-carousel-slide.js';
  import 'kemet-carousel/kemet-carousel-next.js';
  import 'kemet-carousel/kemet-carousel-prev.js';
  import 'kemet-carousel/kemet-carousel-link.js';
```

```html
<kemet-carousel>
  <div slot="slides">
    <kemet-carousel-slide>Slide One</kemet-carousel-slide>
    <kemet-carousel-slide>Slide Two</kemet-carousel-slide>
    <kemet-carousel-slide>Slide Three</kemet-carousel-slide>
  </div>
  <div slot="pagination">
    <kemet-carousel-prev>Prev</kemet-carousel-prev>
    <kemet-carousel-link slide="0">1</kemet-carousel-link>
    <kemet-carousel-link slide="1">2</kemet-carousel-link>
    <kemet-carousel-link slide="2">3</kemet-carousel-link>
    <kemet-carousel-next>Next</kemet-carousel-next>
  </div>
</kemet-carousel>
```

[Click here](http://kemet.online/carousel) for more docs.
npm package: @kemet/kemet-draggable
Description: A draggable element with the ability to remember its position.
Author: kemet-draggable
Latest version: 1.0.1

# \<kemet-draggable>

## Installation
```bash
npm i @kemet/kemet-draggable
```

## Usage
```js
import '@kemet/kemet-draggable/kemet-draggable.js';;
```

```html
<kemet-draggable measure memory="a-unique-identifier">
  <button>Drag Me!</button>
</kemet-draggable>
```

[Click here](http://kemet.online/draggable) for more docs.
npm package: @kemet/kemet-drawer
Description: A component that adds an off-canvas drawer to the document.
Author: Hasani Rogers
Latest version: 1.3.1

# \<kemet-drawer>

## Installation
```bash
npm i @kemet/kemet-drawer
```

## Usage
```js
import '@kemet/kemet-drawer/kemet-drawer.js';;
```

```html
<kemet-drawer effect="slide">
  <nav slot="navigation">
    [YOUR NAV HERE]
  </nav>
  <section slot="content">
    [YOUR CONTENT HERE]
  </section>
</kemet-drawer>
```

[Click here](http://kemet.online/drawer) for more docs.
npm package: @kemet/kemet-flipcard
Description: A card that has a front and back side which can be flipped.
Author: Hasani Rogers
Latest version: 1.0.0

# \<kemet-flipcard>

## Installation
```bash
npm i @kemet/kemet-flipcard
```

## Usage
```js
import '@kemet/kemet-flipcard/kemet-flipcard.js';
import '@kemet/kemet-flipcard/kemet-flipcard-trigger.js'; // optional
```

```html
<kemet-flipcard>
  <div slot="front">
    <p>This is the front of the card.</p>
  </div>
  <div slot="back">
    <p>This is the back of the card.</p>
  </div>
</kemet-flipcard>
```

[Click here](http://kemet.online/flipcard) for more docs.
npm package: @kemet/kemet-modal
Description: A modal that has many built in effects and flexible styles.
Author: Hasani Rogers
Latest version: 1.0.2

# \<kemet-modal>

## Installation
```bash
npm i @kemet/kemet-modal
```

## Usage
```js
  import '@kemet/kemet-modal/kemet-modal.js';
  import '@kemet/kemet-modal/kemet-modal-close.js'; // optional
```

```html
<kemet-modal effect="[YOUR EFFECT HERE]">
  <div>
    <p>Your modal contents here.</p>
    <kemet-modal-close>
      Your close button here.
    </kemet-modal-close>
  </div>
</kemet-modal>
```

[Click here](http://kemet.online/modal) for more docs.
npm package: @kemet/kemet-popover
Description: Displays an element in position of a trigger. Also acts as a tooltip.
Author: Hasani Rogers
Latest version: 1.0.1

# \<kemet-popover>

## Installation
```bash
npm i @kemet/kemet-popover
```

## Usage
```js
  import '@kemet/kemet-popover/kemet-popover.js';
```

```html
<kemet-popover>
  <button slot="trigger">Popover Trigger</button>
  <span slot="content">Your popover contents here. Supports HTML.</span>
</kemet-popover>
```

[Click here](http://kemet.online/popover) for more docs.
npm package: @kemet/kemet-ratio
Description: Displays a box given an aspect ratio. Especially useful for embeds.
Author: Hasani Rogers
Latest version: 1.0.0

# \<kemet-ratio>

## Installation
```bash
npm i @kemet/kemet-ratio
```

## Usage
```js
  import '@kemet/kemet-ratio/kemet-ratio.js';
```

```html
<kemet-ratio>
  <iframe width="100%" height="100%" title="Kemet Templates" src="https://stackblitz.com/edit/kemet-templates?embed=1&file=index.html"></iframe>
</kemet-ratio>
```

[Click here](http://kemet.online/ratio) for more docs.
npm package: @kemet/kemet-rotator
Description: A component that rotates through an array of text.
Author: Hasani Rogers
Latest version: 1.0.0

# \<kemet-rotator>

## Installation
```bash
npm i @kemet/kemet-rotator
```

## Usage
```js
import '@kemet/kemet-rotator/kemet-rotator.js';
```

```html
<kemet-rotator
  rotation-speed="5000"
  transition-speed="2s">
</kemet-rotator>
```

```js
const rotator = document.querySelector('kemet-rotator');

rotator.messages = [
  'Hello! This is a rotator.',
  'Pass it an array and watch it rotator through the text.',
  'You can set the rotation speed and transition speed!',
  'You can pass it html like <strong><a href="http://kemet.online/rotator">this link</a></strong>!'
];
```

[Click here](http://kemet.online/rotator) for more docs.
npm package: @kemet/kemet-scroll-link
Description: A component that adds a smooth scrolling link to an target.
Author: Hasani Rogers
Latest version: 1.0.0

# \<kemet-scroll-link>

## Installation
```bash
npm i @kemet/kemet-scroll-link
```

## Usage
```js
import '@kemet/kemet-scroll-link/kemet-scroll-link.js';;
```

```html
<kemet-scroll-link>
  <button>Scroll to Top</button>
</kemet-scroll-link>
```

[Click here](http://kemet.online/scrolllink) for more docs.
npm package: @kemet/kemet-scroll-nav
Description: An element that transforms at a scroll point.
Author: Hasani Rogers
Latest version: 1.0.0

# \<kemet-scroll-nav>

## Installation
```bash
npm i @kemet/kemet-scroll-nav
```

## Usage
```js
import '@kemet/kemet-scroll-nav/kemet-scroll-nav.js';
```

```html
<kemet-scroll-nav>
  [Your nav markup here]
</kemet-scroll-nav>
```

[Go here for docs](http://kemet.online/scrollnav).
npm package: @kemet/kemet-scroll-snap
Description: A scroll-snap implementation for responsive sliders.
Author: Hasani Rogers
Latest version: 1.1.4

# \<kemet-scroll-snap>

## Installation
```bash
npm i @kemet/kemet-scroll-snap
```

## Usage
```js
import '@kemet/kemet-scroll-snap/kemet-scroll-snap.js';
import '@kemet/kemet-scroll-snap-slide/kemet-scroll-snap-slide.js';
import '@kemet/kemet-scroll-snap/kemet-scroll-snap-paginator.js'; // optional
```

```html
<kemet-scroll-snap>
  <div slot="slides">
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
    <kemet-scroll-snap-slide>[your content here]</kemet-scroll-snap-slide>
  </div>
  <div slot="pagination">
    <kemet-scroll-snap-paginator></kemet-scroll-snap-paginator>
  </div>
</kemet-scroll-snap>
```

[Go here for docs](http://kemet.online/scrollsnap).
npm package: @kemet/kemet-styles
Description: Kemet Styles ============
Author: Hasani Rogers
Latest version: 1.5.1

Kemet Styles
============

Advanced flex based layouts that work even in IE11!
---------------------------------------------------

```html
<div layout="flexrow">
    <div><span class="box">Item 1</span></div>
    <div><span class="box">Item 2</span></div>
    <div><span class="box">Item 3</span></div>
    <div><span class="box">Item 4</span></div>
</div>
```

[Grab templates and more advanced documentation here](http://kemet.online).


Updates
-------
* 1.1.1 Fixed responsiveness for basis attribute. Adjusted default breakpoints.
* 1.1.2 Added demo and development environment for testing changes.
* 1.1.3 Fixed responsiveness for order attribute. Added order and visibility demos.

* 1.2.0 Added flexiplier config. Added configs for toggling order and visibility. Added text helpers.
* 1.2.1 Updated default media query config iOS friendly breakpoints.

* 1.3.0 Added responsive gutters. Added margin spacer helper classes.
* 1.3.1 Refactored to use Webpack and Stylelint.

* 1.4.0 Added component styles.
* 1.4.1 Fixed component styles interpolation issue.

* 1.5.0 Added scroll snap styles.
* 1.5.1 Fixed missing `/dist` build
npm package: @kemet/kemet-tabs
Description: A collection of components to enable tab behavior.
Author: kemet-tabs
Latest version: 1.0.1

# \<kemet-tabs>

## Installation
```bash
npm i @kemet/kemet-tabs
```

## Usage
```js
  import '@kemet/kemet-tabs/kemet-tabs.js';
  import '@kemet/kemet-tabs/kemet-tab.js';
  import '@kemet/kemet-tabs/kemet-tab-panel.js';
```

```html
<kemet-tabs selected="ffxv">
  <nav slot="links">
    <kemet-tab link="one">One</kemet-tab>
    <kemet-tab link="two">Two</kemet-tab>
    <kemet-tab link="three">Three</kemet-tab>
  </nav>
  <section slot="panels">
    <kemet-tab-panel panel="one">Panel One</kemet-tab-panel>
    <kemet-tab-panel panel="two">Panel Two</kemet-tab-panel>
    <kemet-tab-panel panel="three">Panel Three</kemet-tab-panel>
  </section>
</kemet-tabs>
```

[Click here](http://kemet.online/tabs) for more docs.