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

<Meta title="Intro/Lion Web Components" />

# Lion Web Components

Lion web components is a set of highly performant, accessible and flexible Web Components.
They provide an unopinionated, white label layer that can be extended to your own layer of components.

## Features

- pure es modules
- exposes functions/classes and web components
- provides pure functionality
- fully accessible
- built to be extended

> Note: These demos may look a little bland but that is on purpose. They only come with functional stylings.
> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.

## Systems

Lion web components is logically organized in groups of systems.

| System  | Description |
| ------- | ----------- |
| [Forms](?path=/docs/forms-intro--page) | A system that lets you make complex forms with ease. Add validation, translations and use a wide range of pre made form controls. |
| [Buttons](?path=/docs/buttons-intro--page) | Every application needs buttons to allow interactions. These web components bring common UX patterns while still full integrated with (native) forms. |
| [Overlays](?path=/docs/overlays-intro--page) | If something needs to overlay content this is your place. Dialogs, Tooltips and a full overlay system to build more if needed  |
| [Navigation](?path=/docs/navigation-intro--page) | Components which are used to guide users |
| [Localize](?path=/docs/localize-intro--page) | Localize text, numbers, dates and a way to store/fetch these data within web components  |
| [Icons](?path=/docs/icons-intro--page) | Loading and displaying icons |
| [Others](?path=/docs/others-intro--page) | Features not fitting any other category |
| [Helpers](?path=/docs/helpers-intro--page) | Helpers to make your and your life easier |

## Packages

If you need more details these are the actual npm packages we are publishing

| Package                                                               | Version                                                                                                                              | Description                                            |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
| **-- Forms --**                                                       |                                                                                                                                      |                                                        |
| [form](?path=/docs/forms-form-overview--page)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
| [field](?path=/docs/forms-system-overview--page)                | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
| [fieldset](?path=/docs/forms-fieldset-overview--page)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
| [validate](?path=/docs/form-system-validate-system--page)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         |
| [checkbox](?path=/docs/forms-checkbox--default-story)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  |
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    |
| [input](?path=/docs/forms-input--default-story)                       | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                  | Input element for strings                              |
| [input-amount](?path=/docs/forms-input-amount--default-story)         | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)             | Input element for amounts                              |
| [input-date](?path=/docs/forms-input-date--default-story)             | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                   | Input element for dates                                |
| [input-datepicker](?path=/docs/forms-input-datepicker--default-story) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker              |
| [input-email](?path=/docs/forms-input-email--default-story)           | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                | Input element for e-mails                              |
| [input-iban](?path=/docs/forms-input-iban--default-story)             | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                   | Input element for IBANs                                |
| [input-range](?path=/docs/forms-input-range--default-story)           | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                | Input element for a range of values                    |
| [radio](?path=/docs/forms-radio--default-story)                       | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio)                                  | Radio from element                                     |
| [radio-group](?path=/docs/forms-radio-group--default-story)           | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                | Group of radios                                        |
| [select](?path=/docs/forms-select--default-story)                     | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                               | Simple native dropdown element                         |
| [textarea](?path=/docs/forms-textarea--default-story)                 | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                         | Multiline text input                                   |
| **-- Buttons --**                                                       |                                                                                                                                      |                                                        |
| [button](?path=/docs/buttons-button--default-story)                   | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                               | Button                                                 |
| [switch](?path=/docs/buttons-switch--default-off)                     | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                               | Switch                                                 |
| **-- Overlays --**                                                    |                                                                                                                                      |                                                        |
| [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                                        |
| **-- Icons --**                                                    |                                                                                                                                      |                                                        |
| [icon](?path=/docs/icons-icon--default-story)                         | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                     | Display our svg icons                                  |
| **-- Navigation --**                                                    |                                                                                                                                      |                                                        |
| [steps](?path=/docs/navigation-steps--default-story)                  | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                  | Multi Step System                                      |
| [tabs](?path=/docs/navigation-tabs--default-story)                    | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                      | Move between a small number of equally important views |
| **-- Others --**                                                    |                                                                                                                                      |                                                        |
| [core](?path=/docs/deep-dives-core--page)                             | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                     | Core System (exports LitElement, lit-html)             |
| [localize](?path=/docs/localize-localize--default-story)              | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                         | Localize and translate your application/components     |
| [ajax](?path=/docs/others-ajax--default-story)                         | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                     | Fetching data via ajax request                         |
| [calendar](?path=/docs/calendar--default-story)                       | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                         | Standalone calendar                                    |