import { Story, Meta, html } from '@open-wc/demoing-storybook';

<Meta title="Overlays/Intro" />

# Overlay System

The overlay system allows to create different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
It's designed to be highly flexible, while still delivering sensible defaults.
On top of this, the system was built having accessibility in mind.

## Features

- local rendering (at dom location)
  - positioning with popper.js
- global rendering (at body level)
- fully accessible
- flexible to build multiple overlay components

## Content

The Overlays System offers the following features.

| Package                                                               | Version                                                                                                                              | Description                                            |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| [overlays](?path=/docs/overlays-system-overview--default-story)       | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                         | Overlay System                                         |
| [dialog](?path=/docs/overlays-dialog--default-story)                  | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                               | Dialog element                                         |
| [tooltip](?path=/docs/overlays-tooltip--default-story)                | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                            | Tooltip element                                        |

## How to use

### Installation

```sh
npm i --save @lion/overlays
```