@lion/ui 0.11.1 → 0.11.3

package/docs/components/drawer/overview.md

@@ -1,4 +1,16 @@
-# Drawer >> Overview ||10
+---
+parts:
+  - Drawer
+  - Overview
+title: 'Drawer: Overview'
+eleventyNavigation:
+  key: 'Drawer: Overview'
+  order: 10
+  parent: Drawer
+  title: Overview
+---
+
+# Drawer: Overview
 
 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an
 animation to disclose the extra content.

package/docs/components/drawer/use-cases.md

@@ -1,4 +1,16 @@
-# Drawer >> Use Cases ||20
+---
+parts:
+  - Drawer
+  - Use Cases
+title: 'Drawer: Use Cases'
+eleventyNavigation:
+  key: 'Drawer: Use Cases'
+  order: 20
+  parent: Drawer
+  title: Use Cases
+---
+
+# Drawer: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/fieldset/api-table.md

@@ -1,4 +1,16 @@
-# Fieldset >> API Table ||90 
+---
+parts:
+  - API Table
+  - Fieldset
+title: 'Fieldset: API Table'
+eleventyNavigation:
+  key: API Table >> Fieldset
+  title: API Table
+  order: 90
+  parent: Fieldset
+---
+# Fieldset: API Table
+ 
 
 ## class: `LionFieldset`, `lion-fieldset`
 

package/docs/components/fieldset/index.md

@@ -1,3 +1,13 @@
-# Fieldset ||20
+---
+parts:
+  - Fieldset
+title: Fieldset
+eleventyNavigation:
+  key: Fieldset
+  order: 20
+  title: Fieldset
+---
+
+# Fieldset
 
 -> go to Overview

package/docs/components/fieldset/overview.md

@@ -1,4 +1,16 @@
-# Fieldset >> Overview ||10
+---
+parts:
+  - Fieldset
+  - Overview
+title: 'Fieldset: Overview'
+eleventyNavigation:
+  key: 'Fieldset: Overview'
+  order: 10
+  parent: Fieldset
+  title: Overview
+---
+
+# Fieldset: Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -20,9 +32,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -31,8 +43,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/fieldset/use-cases.md

@@ -1,4 +1,16 @@
-# Fieldset >> Use Cases ||20
+---
+parts:
+  - Fieldset
+  - Use Cases
+title: 'Fieldset: Use Cases'
+eleventyNavigation:
+  key: 'Fieldset: Use Cases'
+  order: 20
+  parent: Fieldset
+  title: Use Cases
+---
+
+# Fieldset: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/form/api-table.md

@@ -1 +1,12 @@
-# Form >> API Table ||90
+---
+parts:
+  - API Table
+  - Form
+title: 'Form: API Table'
+eleventyNavigation:
+  key: API Table >> Form
+  title: API Table
+  order: 90
+  parent: Form
+---
+# Form: API Table

package/docs/components/form/index.md

@@ -1,3 +1,13 @@
-# Form ||20
+---
+parts:
+  - Form
+title: Form
+eleventyNavigation:
+  key: Form
+  order: 20
+  title: Form
+---
+
+# Form
 
 -> go to Overview

package/docs/components/form/overview.md

@@ -1,4 +1,16 @@
-# Form >> Overview ||10
+---
+parts:
+  - Form
+  - Overview
+title: 'Form: Overview'
+eleventyNavigation:
+  key: 'Form: Overview'
+  order: 10
+  parent: Form
+  title: Overview
+---
+
+# Form: Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -8,7 +20,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -37,11 +49,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

package/docs/components/form/use-cases.md

@@ -1,4 +1,16 @@
-# Form >> Use Cases ||20
+---
+parts:
+  - Form
+  - Use Cases
+title: 'Form: Use Cases'
+eleventyNavigation:
+  key: 'Form: Use Cases'
+  order: 20
+  parent: Form
+  title: Use Cases
+---
+
+# Form: Use Cases
 
 ```js script
 import { html as previewHtml } from '@mdjs/mdjs-preview';
@@ -14,7 +26,7 @@ import '@lion/ui/define/lion-form.js';
 To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`. Then, add a `submit` handler on the `<lion-form>`. You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 
 Another example is checking if the form has errors, and focusing the first field with a validation error.
-To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md).
+To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md).
 
 To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
 
@@ -116,7 +128,7 @@ export const prefilledData = () => {
 };
 ```
 
-Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/formatting-and-parsing.md).
 
 ## Sub forms
 

package/docs/components/icon/api-table.md

@@ -1,4 +1,16 @@
-# Icon >> API Table ||90 
+---
+parts:
+  - API Table
+  - Icon
+title: 'Icon: API Table'
+eleventyNavigation:
+  key: API Table >> Icon
+  title: API Table
+  order: 90
+  parent: Icon
+---
+# Icon: API Table
+ 
 
 ## class: `LionIcon`, `lion-icon`
 

package/docs/components/icon/index.md

@@ -1,3 +1,13 @@
-# Icon ||20
+---
+parts:
+  - Icon
+title: Icon
+eleventyNavigation:
+  key: Icon
+  order: 20
+  title: Icon
+---
+
+# Icon
 
 -> go to Overview

package/docs/components/icon/overview.md

@@ -1,4 +1,16 @@
-# Icon >> Overview ||10
+---
+parts:
+  - Icon
+  - Overview
+title: 'Icon: Overview'
+eleventyNavigation:
+  key: 'Icon: Overview'
+  order: 10
+  parent: Icon
+  title: Overview
+---
+
+# Icon: Overview
 
 A web component for displaying icons.
 

package/docs/components/icon/use-cases.md

@@ -1,4 +1,16 @@
-# Icon >> Use Cases ||20
+---
+parts:
+  - Icon
+  - Use Cases
+title: 'Icon: Use Cases'
+eleventyNavigation:
+  key: 'Icon: Use Cases'
+  order: 20
+  parent: Icon
+  title: Use Cases
+---
+
+# Icon: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -26,7 +38,7 @@ icons.addIconResolver('lion', (iconset, name) => {
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/index.md

@@ -1,4 +1,14 @@
-# Components ||40
+---
+parts:
+  - Components
+title: Components
+eleventyNavigation:
+  key: Components
+  order: 40
+  title: Components
+---
+
+# Components
 
 Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.
 

package/docs/components/input/api-table.md

@@ -1,4 +1,16 @@
-# Input >> API Table ||90 
+---
+parts:
+  - API Table
+  - Input
+title: 'Input: API Table'
+eleventyNavigation:
+  key: API Table >> Input
+  title: API Table
+  order: 90
+  parent: Input
+---
+# Input: API Table
+ 
 
 ## class: `LionInput`, `lion-input`
 

package/docs/components/input/index.md

@@ -1,3 +1,13 @@
-# Input ||20
+---
+parts:
+  - Input
+title: Input
+eleventyNavigation:
+  key: Input
+  order: 20
+  title: Input
+---
+
+# Input
 
 -> go to Overview

package/docs/components/input/overview.md

@@ -1,4 +1,16 @@
-# Input >> Overview ||10
+---
+parts:
+  - Input
+  - Overview
+title: 'Input: Overview'
+eleventyNavigation:
+  key: 'Input: Overview'
+  order: 10
+  parent: Input
+  title: Overview
+---
+
+# Input: Overview
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -23,7 +35,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

package/docs/components/input/use-cases.md

@@ -1,4 +1,16 @@
-# Input >> Use Cases ||20
+---
+parts:
+  - Input
+  - Use Cases
+title: 'Input: Use Cases'
+eleventyNavigation:
+  key: 'Input: Use Cases'
+  order: 20
+  parent: Input
+  title: Use Cases
+---
+
+# Input: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-amount/api-table.md

@@ -1,4 +1,16 @@
-# Input Amount >> API Table ||90 
+---
+parts:
+  - API Table
+  - Input Amount
+title: 'Input Amount: API Table'
+eleventyNavigation:
+  key: API Table >> Input Amount
+  title: API Table
+  order: 90
+  parent: Input Amount
+---
+# Input Amount: API Table
+ 
 
 ## class: `LionInputAmount`, `lion-input-amount`
 

package/docs/components/input-amount/index.md

@@ -1,3 +1,13 @@
-# Input Amount ||20
+---
+parts:
+  - Input Amount
+title: Input Amount
+eleventyNavigation:
+  key: Input Amount
+  order: 20
+  title: Input Amount
+---
+
+# Input Amount
 
 -> go to Overview

package/docs/components/input-amount/overview.md

@@ -1,4 +1,16 @@
-# Input Amount >> Overview ||10
+---
+parts:
+  - Input Amount
+  - Overview
+title: 'Input Amount: Overview'
+eleventyNavigation:
+  key: 'Input Amount: Overview'
+  order: 10
+  parent: Input Amount
+  title: Overview
+---
+
+# Input Amount: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
 
@@ -24,13 +36,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

package/docs/components/input-amount/use-cases.md

@@ -1,4 +1,16 @@
-# Input Amount >> Use Cases ||20
+---
+parts:
+  - Input Amount
+  - Use Cases
+title: 'Input Amount: Use Cases'
+eleventyNavigation:
+  key: 'Input Amount: Use Cases'
+  order: 20
+  parent: Input Amount
+  title: Use Cases
+---
+
+# Input Amount: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-date/api-table.md

@@ -1,4 +1,16 @@
-# Input Date >> API Table ||90 
+---
+parts:
+  - API Table
+  - Input Date
+title: 'Input Date: API Table'
+eleventyNavigation:
+  key: API Table >> Input Date
+  title: API Table
+  order: 90
+  parent: Input Date
+---
+# Input Date: API Table
+ 
 
 ## class: `LionInputDate`, `lion-input-date`
 

package/docs/components/input-date/index.md

@@ -1,3 +1,13 @@
-# Input Date ||20
+---
+parts:
+  - Input Date
+title: Input Date
+eleventyNavigation:
+  key: Input Date
+  order: 20
+  title: Input Date
+---
+
+# Input Date
 
 -> go to Overview

package/docs/components/input-date/overview.md

@@ -1,4 +1,16 @@
-# Input Date >> Overview ||10
+---
+parts:
+  - Input Date
+  - Overview
+title: 'Input Date: Overview'
+eleventyNavigation:
+  key: 'Input Date: Overview'
+  order: 10
+  parent: Input Date
+  title: Overview
+---
+
+# Input Date: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
 
@@ -16,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-date/use-cases.md

@@ -1,4 +1,16 @@
-# Input Date >> Use Cases ||20
+---
+parts:
+  - Input Date
+  - Use Cases
+title: 'Input Date: Use Cases'
+eleventyNavigation:
+  key: 'Input Date: Use Cases'
+  order: 20
+  parent: Input Date
+  title: Use Cases
+---
+
+# Input Date: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/input-datepicker/api-table.md

@@ -1,4 +1,16 @@
-# Input Datepicker >> API Table ||90 
+---
+parts:
+  - API Table
+  - Input Datepicker
+title: 'Input Datepicker: API Table'
+eleventyNavigation:
+  key: API Table >> Input Datepicker
+  title: API Table
+  order: 90
+  parent: Input Datepicker
+---
+# Input Datepicker: API Table
+ 
 
 ## class: `LionInputDatepicker`, `lion-input-datepicker`
 

package/docs/components/input-datepicker/index.md

@@ -1,3 +1,13 @@
-# Input Datepicker ||20
+---
+parts:
+  - Input Datepicker
+title: Input Datepicker
+eleventyNavigation:
+  key: Input Datepicker
+  order: 20
+  title: Input Datepicker
+---
+
+# Input Datepicker
 
 -> go to Overview

package/docs/components/input-datepicker/overview.md

@@ -1,8 +1,20 @@
-# Input Datepicker >> Overview ||10
+---
+parts:
+  - Input Datepicker
+  - Overview
+title: 'Input Datepicker: Overview'
+eleventyNavigation:
+  key: 'Input Datepicker: Overview'
+  order: 10
+  parent: Input Datepicker
+  title: Overview
+---
+
+# Input Datepicker: Overview
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -18,11 +30,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate