Website · Guides · Components · Documentation · Blog
Lion 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.
- High Performance: Focused on great performance in all relevant browsers with a minimal number of dependencies.
- Accessibility: Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody.
- Flexibility: Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
- Modern Code: Lion is distributes as pure es modules.
- Exposes functions/classes and Web Components: Ships a functionality in it's most appropriate form.
Note: Our 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.
npm i @lion/<package-name>This is the main use case for lion. To import component classes, and extend them for your own design system's components.
import { css } from 'lit';
import { LionInput } from '@lion/input';
class MyInput extends LionInput {
static get styles() {
return [
super.styles,
css`
/* your styles here */
`,
];
}
}
customElements.define('my-input', MyInput);There's a couple of "systems" in lion which have a JavaScript API. Examples are localize, overlays, ajax, etc.
<script type="module">
import { ajax } from '@lion/ajax';
ajax
.fetch('data.json')
.then(response => response.json())
.then(data => {
// do something with the data
});
</script>You can also use the lion elements directly, although this is likely not a common use case.
<script type="module">
import '@lion/input/define';
</script>
<lion-input name="firstName"></lion-input>If you encounter an issue with any of the packages we are offering please open a new bug issue. Be sure to include a description of the expected and the current behavior - additional adding a reproduction always helps.
When you have an idea on how we could improve, please check our discussions to see if there are similar ideas or feature requests. If there are none, please start your feature request as a new discussion topic. Add the title [Feature Request] My awesome feature and a description of what you expect from the improvement and what the use case is.
Lion web components is logically organized in groups of systems.
The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage.
| Package | Version | Description | Accessibility |
|---|---|---|---|
| -- Form System -- | A system that lets you make complex forms with ease, including: validation, translations. | ✔️ | |
| combobox |  |
Text box controlling popup listbox | ✔️ |
| form |  |
Wrapper for multiple form elements | ✔️ |
| form-core |  |
Core functionality for all form controls | ✔️ |
| form-integrations |  |
Shows form elements in an integrated way | ✔️ |
| fieldset |  |
Group for form inputs | ✔️ |
| checkbox-group |  |
Group of checkboxes | ✔️ |
| input |  |
Input element for strings | ✔️ |
| input-amount |  |
Input element for amounts | ✔️ |
| input-date |  |
Input element for dates | ✔️ |
| input-datepicker |  |
Input element for dates with a datepicker | ✔️ |
| input-email |  |
Input element for e-mails | ✔️ |
| input-iban |  |
Input element for IBANs | ✔️ |
| input-range |  |
Input element for a range of values | ✔️ |
| input-stepper |  |
Input stepper element for the predefined range | ✔️ |
| listbox |  |
Interactive list with selectable options | ✔️ |
| radio-group |  |
Group of radios | ✔️ |
| select |  |
Simple native dropdown element | ✔️ |
| select-rich |  |
'rich' version of the native dropdown element | #243 |
| textarea |  |
Multiline text input | ✔️ |
| -- Button System -- | These web components bring common UX patterns while still full integrated with (native) forms. | ||
| button |  |
Button | ✔️ |
| switch |  |
Switch | ✔️ |
| -- Overlay System -- | If something needs to overlay content this is your place. | ||
| overlays |  |
Overlay System | ✔️ |
| dialog |  |
Dialog element | ✔️ |
| tooltip |  |
Tooltip element | #175 |
| -- Navigation System -- | Components which are used to guide users | ||
| accordion |  |
Accordion | ✔️ |
| pagination |  |
Pagination | ✔️ |
| steps |  |
Multi Step System | n/a |
| tabs |  |
Move between a small number of equally important views | n/a |
| -- localize System -- | Localize text, numbers, dates and a way to store/fetch these data. | ||
| localize |  |
Localize and translate your application/components | n/a |
| -- Icon System -- | Loading and displaying icons | ||
| icon |  |
Display our svg icons | #173, #172 |
| -- Others -- | Features not fitting any other category | ||
| core |  |
Core System (exports LitElement, lit-html) | n/a |
| ajax |  |
Fetching data via ajax request | n/a |
| calendar |  |
Standalone calendar | #195, #194 |
| collapsible |  |
Combination of a button and a chunk of extra content | ✔️ |
| -- Helpers -- |  |
Helpers to make your and your life easier | |
| sb-action-logger | Storybook action logger |
Lion Web Components aims to be future-proof and use well-supported proven technology. The stack we have chosen should reflect this.
- lit
- npm
- Open Web Components
- Modern Web
- Mocha
- Chai
- ESLint
- prettier
- ES modules
- Lots and lots of tests
We know from experience that making high quality, accessible UI components is hard and time consuming: it takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every context, supports many edge cases and is accessible in all relevant screen readers.
Lion aims to do the heavy lifting for you. This means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top.
Check out our coding guidelines for more detailed information.
Please note: This project uses Npm Workspaces. If you want to run all demos locally you need to get at least npm 7+ and install all dependencies by executing npm install.
Lion Web Components are only as good as its contributions. Read our contribution guide and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.
Feel free to create a github issue for any feedback or questions you might have. You can also find us on the Lit & Friends slack in the #lion channel.
You can join the Lit & Friends slack by visiting https://lit.dev/slack-invite/.