@lion/ui 0.11.1 → 0.11.3

package/docs/fundamentals/systems/form/formatting-and-parsing.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Formatting and Parsing
+  - Form
+  - Systems
+title: 'Form: Formatting and Parsing'
+eleventyNavigation:
+  key: Systems >> Form >> Formatting and Parsing
+  title: Formatting and Parsing
+  order: 21
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Formatting and Parsing ||21
 
 ```js script
@@ -23,7 +36,7 @@ Our fields can automatically format/parse/serialize user input or an input set i
 
 Below are some concrete examples of implementations of formatters and parsers mimicking a (basic) amount input.
 
-> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-amount/overview.md).
+> For an actual amount input, check out [lion-input-amount](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-amount/overview.md).
 > This comes with its own formatter, parser, serializer.
 
 ### Parsers & modelValue
@@ -230,16 +243,16 @@ Below we show three flow diagrams to show the flow of formatting, serializing an
 
 Where a user changes the input with their keyboard:
 
-![Standard flow](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
+![Standard flow](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/assets/FormatMixinDiagram-1.svg 'Standard flow')
 
 ### Unparseable flow
 
 Where a user sets the input to something that is not parseable by the parser:
 
-![Unparseable flow](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
+![Unparseable flow](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/assets/FormatMixinDiagram-2.svg 'Unparseable flow')
 
 ### Imperative / programmatic flow
 
 Where the developer sets the modelValue of the input programmatically:
 
-![Imperative flow](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')
+![Imperative flow](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/assets/FormatMixinDiagram-3.svg 'Imperative flow')

package/docs/fundamentals/systems/form/index.md

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

package/docs/fundamentals/systems/form/interaction-states.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Interaction States
+  - Form
+  - Systems
+title: 'Form: Interaction States'
+eleventyNavigation:
+  key: Systems >> Form >> Interaction States
+  title: Interaction States
+  order: 22
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Interaction States ||22
 
 ```js script

package/docs/fundamentals/systems/form/model-value.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - ModelValue
+  - Form
+  - Systems
+title: 'Form: ModelValue'
+eleventyNavigation:
+  key: Systems >> Form >> ModelValue
+  title: ModelValue
+  order: 20
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> ModelValue ||20
 
 The modelValue or model can be considered as the ‘aorta’ of our form system.
@@ -21,7 +34,7 @@ level, via:
 > Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
 > recommended as a means of interaction.
 
-For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/formatting-and-parsing.md)
+For more information about parsing and the Unparseable type, see [Formatting and Parsing](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/formatting-and-parsing.md)
 
 ### Event meta
 

package/docs/fundamentals/systems/form/overview.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Overview
+  - Form
+  - Systems
+title: 'Form: Overview'
+eleventyNavigation:
+  key: Systems >> Form >> Overview
+  title: Overview
+  order: 10
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Overview ||10
 
 This page should be used as a starting point when first using the Form System.
@@ -20,9 +33,9 @@ Fields (think of an input, textarea, select) are the actual form controls the en
 
 On top of this, they feature:
 
-- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
-- Advanced [validation](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) possibilities.
-- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/interaction-states.md).
+- [formatting/parsing/serializing](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
+- Advanced [validation](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md) possibilities.
+- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/interaction-states.md).
 - Provision of labels and help texts in an easy, declarative manner.
 - Accessibility out of the box.
 - Advanced styling possibilities: map your own Design System to the internal HTML structure.
@@ -31,33 +44,33 @@ On top of this, they feature:
 
 ### Platform fields (wrappers)
 
-- [LionInput](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md), a wrapper for `<input>`.
-- [LionTextarea](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
-- [LionSelect](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/select/overview.md), a wrapper for `<select>`.
+- [LionInput](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input/overview.md), a wrapper for `<input>`.
+- [LionTextarea](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
+- [LionSelect](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/select/overview.md), a wrapper for `<select>`.
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like:
 
-- [LionCombobox](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/combobox/overview.md), a custom implementation of a combobox.
-- [LionDate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
-- [LionDatepicker](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
-- [LionListbox](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/listbox/overview.md), a custom implementation of a listbox.
-- [LionInputAmount](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
-- [LionInputEmail](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
-- [LionInputIban](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
-- [LionInputRange](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
-- [LionInputStepper](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
-- [LionSelectRich](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
+- [LionCombobox](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/combobox/overview.md), a custom implementation of a combobox.
+- [LionDate](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
+- [LionDatepicker](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
+- [LionListbox](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/listbox/overview.md), a custom implementation of a listbox.
+- [LionInputAmount](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
+- [LionInputEmail](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
+- [LionInputIban](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
+- [LionInputRange](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
+- [LionInputStepper](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
+- [LionSelectRich](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/select-rich/overview.md), an alternative for `<select>` with multiline options.
 
 ### Choice Input Fields
 
 For form controls which return a `checked-state` you can use the `lion-choice-input` mixin. It is used in:
 
-- [LionCheckbox](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
+- [LionCheckbox](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`.
 - LionOption, an alternative for `<option>`.
-- [LionRadio](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
-- [LionSwitch](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/switch/overview.md), a custom implementation of a switch.
+- [LionRadio](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
+- [LionSwitch](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/switch/overview.md), a custom implementation of a switch.
 
 Which contains the following features:
 
@@ -69,14 +82,14 @@ Which contains the following features:
 
 Fieldsets are groups of fields. They can be considered fields on their own as well, since they partly share the normalized API via `FormControlMixin`. Fieldsets are the basis for:
 
-- [LionFieldset](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
-- [LionForm](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
-- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
-- [LionRadioGroup](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
+- [LionFieldset](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
+- [LionForm](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
+- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
+- [LionRadioGroup](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.
 
 ## Other Resources
 
-- [Model Value](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/model-value.md)
-- [Formatting and parsing](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/formatting-and-parsing.md)
-- [Interaction states](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/interaction-states.md)
-- [Validation System](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md)
+- [Model Value](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/model-value.md)
+- [Formatting and parsing](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/formatting-and-parsing.md)
+- [Interaction states](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/interaction-states.md)
+- [Validation System](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/validate.md)

package/docs/fundamentals/systems/form/styling.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Styling
+  - Form
+  - Systems
+title: 'Form: Styling'
+eleventyNavigation:
+  key: Systems >> Form >> Styling
+  title: Styling
+  order: 40
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Styling ||40
 
 ```js script

package/docs/fundamentals/systems/form/use-cases.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Use Cases
+  - Form
+  - Systems
+title: 'Form: Use Cases'
+eleventyNavigation:
+  key: Systems >> Form >> Use Cases
+  title: Use Cases
+  order: 50
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Use Cases ||50
 
 This is a meta package to show interaction between various form elements.

package/docs/fundamentals/systems/form/validate.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Validate
+  - Form
+  - Systems
+title: 'Form: Validate'
+eleventyNavigation:
+  key: Systems >> Form >> Validate
+  title: Validate
+  order: 30
+  parent: Systems >> Form
+---
+
 # Systems >> Form >> Validate ||30
 
 ```js script
@@ -57,7 +70,7 @@ Validation happens on every change of `modelValue`. A change in modelValue can b
 
 ## When validation feedback will be shown
 
-Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/interaction-states.md),
+Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/interaction-states.md),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Assessing field validation state programmatically
@@ -232,7 +245,7 @@ export const requiredValidator = () => html`
 `;
 ```
 
-The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/#override-fieldname) for more information.
+The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/form/#override-fieldname) for more information.
 
 Specific required messages for a select and file-upload are created.
 

package/docs/fundamentals/systems/icon/index.md

@@ -1,3 +1,15 @@
+---
+parts:
+  - Icon
+  - Systems
+title: 'Systems: Icon'
+eleventyNavigation:
+  key: Systems >> Icon
+  title: Icon
+  order: 40
+  parent: Systems
+---
+
 # Systems >> Icon ||40
 
 -> go to Overview

package/docs/fundamentals/systems/icon/overview.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Overview
+  - Icon
+  - Systems
+title: 'Icon: Overview'
+eleventyNavigation:
+  key: Systems >> Icon >> Overview
+  title: Overview
+  order: 10
+  parent: Systems >> Icon
+---
+
 # Systems >> Icon >> Overview ||10
 
 The icon system provides a way of defining icon sets which are lazily loaded on demand when

package/docs/fundamentals/systems/index.md

@@ -1 +1,11 @@
+---
+parts:
+  - Systems
+title: Systems
+eleventyNavigation:
+  key: Systems
+  title: Systems
+  order: 20
+---
+
 # Systems ||20

package/docs/fundamentals/systems/localize/api-table.md

@@ -1,4 +1,17 @@
-# Systems >> Localize >> API Table ||90 
+---
+parts:
+  - API Table
+  - Localize
+  - Systems
+title: 'Localize: API Table'
+eleventyNavigation:
+  key: API Table >> Localize >> Systems
+  title: API Table
+  order: 90
+  parent: Systems >> Localize
+---
+# Localize: API Table
+ 
 
 ## class: `LocalizeManager`
 

package/docs/fundamentals/systems/localize/dates.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Format Dates
+  - Localize
+  - Systems
+title: 'Localize: Format Dates'
+eleventyNavigation:
+  key: Systems >> Localize >> Format Dates
+  title: Format Dates
+  order: 40
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Format Dates ||40
 
 ## Features

package/docs/fundamentals/systems/localize/index.md

@@ -1,3 +1,15 @@
+---
+parts:
+  - Localize
+  - Systems
+title: 'Systems: Localize'
+eleventyNavigation:
+  key: Systems >> Localize
+  title: Localize
+  order: 30
+  parent: Systems
+---
+
 # Systems >> Localize ||30
 
 -> go to Overview

package/docs/fundamentals/systems/localize/numbers.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Format Numbers
+  - Localize
+  - Systems
+title: 'Localize: Format Numbers'
+eleventyNavigation:
+  key: Systems >> Localize >> Format Numbers
+  title: Format Numbers
+  order: 30
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Format Numbers ||30
 
 ## Features

package/docs/fundamentals/systems/localize/overview.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Overview
+  - Localize
+  - Systems
+title: 'Localize: Overview'
+eleventyNavigation:
+  key: Systems >> Localize >> Overview
+  title: Overview
+  order: 10
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Overview ||10
 
 Is meant to translate text into multiple languages.
@@ -9,15 +22,15 @@ In it's simplest form it is a function that returns the translated text for a na
 - Formatting of numbers, amounts
 - Formatting of dates
 
-Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/use-cases.md).
+Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

package/docs/fundamentals/systems/localize/rationale.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Rationale
+  - Localize
+  - Systems
+title: 'Localize: Rationale'
+eleventyNavigation:
+  key: Systems >> Localize >> Rationale
+  title: Rationale
+  order: 60
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Rationale ||60
 
 ## Requirements

package/docs/fundamentals/systems/localize/text.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Translate Text
+  - Localize
+  - Systems
+title: 'Localize: Translate Text'
+eleventyNavigation:
+  key: Systems >> Localize >> Translate Text
+  title: Translate Text
+  order: 20
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Translate Text ||20
 
 ## As a function

package/docs/fundamentals/systems/localize/use-cases.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Use Cases
+  - Localize
+  - Systems
+title: 'Localize: Use Cases'
+eleventyNavigation:
+  key: Systems >> Localize >> Use Cases
+  title: Use Cases
+  order: 50
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Use Cases ||50
 
 The localization system helps to manage localization data split into locales and automate its loading.

package/docs/fundamentals/systems/overlays/_configuration-positioning.md

@@ -1,5 +1,16 @@
 ---
 eleventyExcludeFromCollections: true
+parts:
+  - Positioning
+  - Configuration
+  - Overlays
+  - Systems
+title: 'Configuration: Positioning'
+eleventyNavigation:
+  key: Systems >> Overlays >> Configuration >> Positioning
+  title: Positioning
+  order: 40
+  parent: Systems >> Overlays >> Configuration
 ---
 
 # Systems >> Overlays >> Configuration >> Positioning ||40

package/docs/fundamentals/systems/overlays/_edge-cases.md

@@ -1,5 +1,15 @@
 ---
 eleventyExcludeFromCollections: true
+parts:
+  - Edge cases
+  - Overlays
+  - Systems
+title: 'Overlays: Edge cases'
+eleventyNavigation:
+  key: Systems >> Overlays >> Edge cases
+  title: Edge cases
+  order: 10
+  parent: Systems >> Overlays
 ---
 
 # Systems >> Overlays >> Edge cases ||10

package/docs/fundamentals/systems/overlays/api-table.md

@@ -1,4 +1,17 @@
-# Systems >> Overlays >> API Table ||90 
+---
+parts:
+  - API Table
+  - Overlays
+  - Systems
+title: 'Overlays: API Table'
+eleventyNavigation:
+  key: API Table >> Overlays >> Systems
+  title: API Table
+  order: 90
+  parent: Systems >> Overlays
+---
+# Overlays: API Table
+ 
 
 ## class: `OverlayController`
 

package/docs/fundamentals/systems/overlays/configuration.md

@@ -1,3 +1,16 @@
+---
+parts:
+  - Configuration
+  - Overlays
+  - Systems
+title: 'Overlays: Configuration'
+eleventyNavigation:
+  key: Systems >> Overlays >> Configuration
+  title: Configuration
+  order: 40
+  parent: Systems >> Overlays
+---
+
 # Systems >> Overlays >> Configuration ||40
 
 ```js script
@@ -99,7 +112,7 @@ export const alertDialog = () => {
 
 ## isTooltip (placementMode: 'local')
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
 - Dialogs have a modal option, tooltips don’t
 - Dialogs have interactive content, tooltips don’t
@@ -430,7 +443,7 @@ Features:
 
 > Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/tooltip/overview.md), where an arrow is set by default.
 
 To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
 Here's a succinct overview of some often used popper properties:

package/docs/fundamentals/systems/overlays/index.md

@@ -1,3 +1,15 @@
+---
+parts:
+  - Overlays
+  - Systems
+title: 'Systems: Overlays'
+eleventyNavigation:
+  key: Systems >> Overlays
+  title: Overlays
+  order: 40
+  parent: Systems
+---
+
 # Systems >> Overlays ||40
 
 -> go to Overview