@lion/ui 0.15.0 → 0.15.2

package/docs/components/input/index.md

@@ -1,7 +1,7 @@
 ---
+title: Input
 parts:
   - Input
-title: Input
 eleventyNavigation:
   key: Input
   order: 20

package/docs/components/input/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Input: Overview'
 parts:
   - Input
   - Overview
-title: 'Input: Overview'
 eleventyNavigation:
   key: 'Input: Overview'
   order: 10
@@ -35,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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input: Use Cases'
 parts:
   - Input
   - Use Cases
-title: 'Input: Use Cases'
 eleventyNavigation:
   key: 'Input: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Amount
 parts:
   - Input Amount
-title: Input Amount
 eleventyNavigation:
   key: Input Amount
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Amount: Overview'
 parts:
   - Input Amount
   - Overview
-title: 'Input Amount: Overview'
 eleventyNavigation:
   key: 'Input Amount: Overview'
   order: 10
@@ -36,13 +36,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/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/014a136cb197f258d6ec53188e1fb64e286a59ba/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,8 +1,8 @@
 ---
+title: 'Input Amount: Use Cases'
 parts:
   - Input Amount
   - Use Cases
-title: 'Input Amount: Use Cases'
 eleventyNavigation:
   key: 'Input Amount: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Amount Dropdown
 parts:
   - Input Amount Dropdown
-title: Input Amount Dropdown
 eleventyNavigation:
   key: Input Amount Dropdown
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Amount Dropdown: Use Cases'
 parts:
   - Input Amount Dropdown
   - Use Cases
-title: 'Input Amount Dropdown: Use Cases'
 eleventyNavigation:
   key: 'Input Amount Dropdown: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Date
 parts:
   - Input Date
-title: Input Date
 eleventyNavigation:
   key: Input Date
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Date: Overview'
 parts:
   - Input Date
   - Overview
-title: 'Input Date: Overview'
 eleventyNavigation:
   key: 'Input Date: Overview'
   order: 10
@@ -28,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/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/014a136cb197f258d6ec53188e1fb64e286a59ba/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,8 +1,8 @@
 ---
+title: 'Input Date: Use Cases'
 parts:
   - Input Date
   - Use Cases
-title: 'Input Date: Use Cases'
 eleventyNavigation:
   key: 'Input Date: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Datepicker
 parts:
   - Input Datepicker
-title: Input Datepicker
 eleventyNavigation:
   key: Input Datepicker
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Datepicker: Overview'
 parts:
   - Input Datepicker
   - Overview
-title: 'Input Datepicker: Overview'
 eleventyNavigation:
   key: 'Input Datepicker: Overview'
   order: 10
@@ -14,7 +14,7 @@ eleventyNavigation:
 
 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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -30,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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/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/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/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/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Datepicker: Use Cases'
 parts:
   - Input Datepicker
   - Use Cases
-title: 'Input Datepicker: Use Cases'
 eleventyNavigation:
   key: 'Input Datepicker: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Email
 parts:
   - Input Email
-title: Input Email
 eleventyNavigation:
   key: Input Email
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Email: Overview'
 parts:
   - Input Email
   - Overview
-title: 'Input Email: Overview'
 eleventyNavigation:
   key: 'Input Email: Overview'
   order: 10
@@ -27,8 +27,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Email: Use Cases'
 parts:
   - Input Email
   - Use Cases
-title: 'Input Email: Use Cases'
 eleventyNavigation:
   key: 'Input Email: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input File
 parts:
   - Input File
-title: Input File
 eleventyNavigation:
   key: Input File
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input File: Overview'
 parts:
   - Input File
   - Overview
-title: 'Input File: Overview'
 eleventyNavigation:
   key: 'Input File: Overview'
   order: 10
@@ -27,7 +27,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
 - Default labels and validation messages in different languages
 - Options for multi file upload and drop-zone.
 

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input File: Use Cases'
 parts:
   - Input File
   - Use Cases
-title: 'Input File: Use Cases'
 eleventyNavigation:
   key: 'Input File: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Iban
 parts:
   - Input Iban
-title: Input Iban
 eleventyNavigation:
   key: Input Iban
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Iban: Overview'
 parts:
   - Input Iban
   - Overview
-title: 'Input Iban: Overview'
 eleventyNavigation:
   key: 'Input Iban: Overview'
   order: 10
@@ -28,9 +28,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Iban: Use Cases'
 parts:
   - Input Iban
   - Use Cases
-title: 'Input Iban: Use Cases'
 eleventyNavigation:
   key: 'Input Iban: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Range
 parts:
   - Input Range
-title: Input Range
 eleventyNavigation:
   key: Input Range
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Range: Overview'
 parts:
   - Input Range
   - Overview
-title: 'Input Range: Overview'
 eleventyNavigation:
   key: 'Input Range: Overview'
   order: 10
@@ -25,11 +25,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Range: Use Cases'
 parts:
   - Input Range
   - Use Cases
-title: 'Input Range: Use Cases'
 eleventyNavigation:
   key: 'Input Range: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Stepper
 parts:
   - Input Stepper
-title: Input Stepper
 eleventyNavigation:
   key: Input Stepper
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Stepper: Overview'
 parts:
   - Input Stepper
   - Overview
-title: 'Input Stepper: Overview'
 eleventyNavigation:
   key: 'Input Stepper: Overview'
   order: 10
@@ -30,7 +30,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md).
 - Set `min` and `max` value to define the range.
 - Set `step` value in integer or decimal to increase and decrease the value.
 - Use `ArrowUp` or `ArrowDown` to update the value.

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Stepper: Use Cases'
 parts:
   - Input Stepper
   - Use Cases
-title: 'Input Stepper: Use Cases'
 eleventyNavigation:
   key: 'Input Stepper: Use Cases'
   order: 20

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

@@ -1,7 +1,7 @@
 ---
+title: Input Tel
 parts:
   - Input Tel
-title: Input Tel
 eleventyNavigation:
   key: Input Tel
   order: 20

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Tel: Overview'
 parts:
   - Input Tel
   - Overview
-title: 'Input Tel: Overview'
 eleventyNavigation:
   key: 'Input Tel: Overview'
   order: 10
@@ -51,7 +51,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input/overview.md)
 - Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
 - Can be configured with a list of allowed region codes
 - Will be preconfigured with region derived from locale

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Tel: Use Cases'
 parts:
   - Input Tel
   - Use Cases
-title: 'Input Tel: Use Cases'
 eleventyNavigation:
   key: 'Input Tel: Use Cases'
   order: 20
@@ -34,7 +34,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
 It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
 Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
 
-The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/#allowed-regions) are not configured,
+The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -49,11 +49,11 @@ export const regionCodesTable = () => {
 The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
 should be applied. It is dependent on the following factors:
 
-- [allowed regions](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
-  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
+  [.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
 - the modelValue or viewValue: once it contains sufficient info to derive its region code (and
-  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/#allowed-regions) if configured)
-- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/#allowed-regions) if configured)
+- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/#allowed-regions) if configured)
 
 What follows from the list above is that .activeRegion can change dynamically, after a value
 change in the text box by the user (or when locales or allowed regions would be changed by the
@@ -142,7 +142,7 @@ export const heuristic = () => {
 Once it is configured, validation and formatting will be restricted to those
 values that are present in this list.
 
-> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story

package/docs/components/input-tel-dropdown/extensions.md

@@ -1,8 +1,8 @@
 ---
+title: 'Input Tel Dropdown: Extensions'
 parts:
   - Input Tel Dropdown
   - Extensions
-title: 'Input Tel Dropdown: Extensions'
 eleventyNavigation:
   key: 'Input Tel Dropdown: Extensions'
   order: 30

package/docs/components/input-tel-dropdown/index.md

@@ -1,7 +1,7 @@
 ---
+title: Input Tel Dropdown
 parts:
   - Input Tel Dropdown
-title: Input Tel Dropdown
 eleventyNavigation:
   key: Input Tel Dropdown
   order: 20

package/docs/components/input-tel-dropdown/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Input Tel Dropdown: Overview'
 parts:
   - Input Tel Dropdown
   - Overview
-title: 'Input Tel Dropdown: Overview'
 eleventyNavigation:
   key: 'Input Tel Dropdown: Overview'
   order: 10
@@ -31,7 +31,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/components/input-tel/overview.md)
 - Shows dropdown list with all possible regions
 - Shows only allowed regions in dropdown list when .allowedRegions is configured
 - Highlights regions on top of dropdown list when .preferredRegions is configured

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

@@ -1,8 +1,8 @@
 ---
+title: 'Input Tel Dropdown: Use Cases'
 parts:
   - Input Tel Dropdown
   - Use Cases
-title: 'Input Tel Dropdown: Use Cases'
 eleventyNavigation:
   key: 'Input Tel Dropdown: Use Cases'
   order: 20

package/docs/components/listbox/index.md

@@ -1,7 +1,7 @@
 ---
+title: Listbox
 parts:
   - Listbox
-title: Listbox
 eleventyNavigation:
   key: Listbox
   order: 20

package/docs/components/listbox/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Listbox: Overview'
 parts:
   - Listbox
   - Overview
-title: 'Listbox: Overview'
 eleventyNavigation:
   key: 'Listbox: Overview'
   order: 10

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

@@ -1,8 +1,8 @@
 ---
+title: 'Listbox: Use Cases'
 parts:
   - Listbox
   - Use Cases
-title: 'Listbox: Use Cases'
 eleventyNavigation:
   key: 'Listbox: Use Cases'
   order: 20
@@ -151,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
 
 ## Validation
 
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/4c077fbf1de58ec799dd263ebe7d94dfef1262c0/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/014a136cb197f258d6ec53188e1fb64e286a59ba/docs/fundamentals/systems/form/validate.md).

package/docs/components/pagination/index.md

@@ -1,7 +1,7 @@
 ---
+title: Pagination
 parts:
   - Pagination
-title: Pagination
 eleventyNavigation:
   key: Pagination
   order: 30

package/docs/components/pagination/overview.md

@@ -1,8 +1,8 @@
 ---
+title: 'Pagination: Overview'
 parts:
   - Pagination
   - Overview
-title: 'Pagination: Overview'
 eleventyNavigation:
   key: 'Pagination: Overview'
   order: 10

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

@@ -1,8 +1,8 @@
 ---
+title: 'Pagination: Use Cases'
 parts:
   - Pagination
   - Use Cases
-title: 'Pagination: Use Cases'
 eleventyNavigation:
   key: 'Pagination: Use Cases'
   order: 20

package/docs/components/progress-indicator/examples.md

@@ -1,8 +1,8 @@
 ---
+title: 'Progress Indicator: Examples'
 parts:
   - Progress Indicator
   - Examples
-title: 'Progress Indicator: Examples'
 eleventyNavigation:
   key: 'Progress Indicator: Examples'
   order: 30

package/docs/components/progress-indicator/index.md

@@ -1,7 +1,7 @@
 ---
+title: Progress Indicator
 parts:
   - Progress Indicator
-title: Progress Indicator
 eleventyNavigation:
   key: Progress Indicator
   order: 30