@lion/ui 0.11.1 → 0.11.3

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

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

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Email >> Overview ||10
+---
+parts:
+  - Input Email
+  - Overview
+title: 'Input Email: Overview'
+eleventyNavigation:
+  key: 'Input Email: Overview'
+  order: 10
+  parent: Input Email
+  title: Overview
+---
+
+# Input Email: Overview
 
 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
 
@@ -15,8 +27,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input Email >> Use Cases ||20
+---
+parts:
+  - Input Email
+  - Use Cases
+title: 'Input Email: Use Cases'
+eleventyNavigation:
+  key: 'Input Email: Use Cases'
+  order: 20
+  parent: Input Email
+  title: Use Cases
+---
+
+# Input Email: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input File >> Overview ||10
+---
+parts:
+  - Input File
+  - Overview
+title: 'Input File: Overview'
+eleventyNavigation:
+  key: 'Input File: Overview'
+  order: 10
+  parent: Input File
+  title: Overview
+---
+
+# Input File: Overview
 
 A web component based on the file input field.
 
@@ -15,7 +27,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input File >> Use Cases ||20
+---
+parts:
+  - Input File
+  - Use Cases
+title: 'Input File: Use Cases'
+eleventyNavigation:
+  key: 'Input File: Use Cases'
+  order: 20
+  parent: Input File
+  title: Use Cases
+---
+
+# Input File: Use Cases
 
 ```js script
 import { Required, Validator } from '@lion/ui/form-core.js';

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Iban >> Overview ||10
+---
+parts:
+  - Input Iban
+  - Overview
+title: 'Input Iban: Overview'
+eleventyNavigation:
+  key: 'Input Iban: Overview'
+  order: 10
+  parent: Input Iban
+  title: Overview
+---
+
+# Input Iban: Overview
 
 A web component based on the generic text input field.
 Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
@@ -16,9 +28,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input Iban >> Use Cases ||20
+---
+parts:
+  - Input Iban
+  - Use Cases
+title: 'Input Iban: Use Cases'
+eleventyNavigation:
+  key: 'Input Iban: Use Cases'
+  order: 20
+  parent: Input Iban
+  title: Use Cases
+---
+
+# Input Iban: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Range >> Overview ||10
+---
+parts:
+  - Input Range
+  - Overview
+title: 'Input Range: Overview'
+eleventyNavigation:
+  key: 'Input Range: Overview'
+  order: 10
+  parent: Input Range
+  title: Overview
+---
+
+# Input Range: Overview
 
 A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
 
@@ -13,11 +25,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/593b753f0f99acb36ea6009677bc7fdda9184184/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

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

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Stepper >> Overview ||10
+---
+parts:
+  - Input Stepper
+  - Overview
+title: 'Input Stepper: Overview'
+eleventyNavigation:
+  key: 'Input Stepper: Overview'
+  order: 10
+  parent: Input Stepper
+  title: Overview
+---
+
+# Input Stepper: Overview
 
 A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
 
@@ -18,7 +30,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input Stepper >> Use Cases ||20
+---
+parts:
+  - Input Stepper
+  - Use Cases
+title: 'Input Stepper: Use Cases'
+eleventyNavigation:
+  key: 'Input Stepper: Use Cases'
+  order: 20
+  parent: Input Stepper
+  title: Use Cases
+---
+
+# Input Stepper: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Tel >> Overview ||10
+---
+parts:
+  - Input Tel
+  - Overview
+title: 'Input Tel: Overview'
+eleventyNavigation:
+  key: 'Input Tel: Overview'
+  order: 10
+  parent: Input Tel
+  title: Overview
+---
+
+# Input Tel: Overview
 
 Input field for entering phone numbers, including validation, formatting and mobile keyboard support.
 
@@ -39,7 +51,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input Tel >> Use Cases ||20
+---
+parts:
+  - Input Tel
+  - Use Cases
+title: 'Input Tel: Use Cases'
+eleventyNavigation:
+  key: 'Input Tel: Use Cases'
+  order: 20
+  parent: Input Tel
+  title: Use Cases
+---
+
+# Input Tel: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -22,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/docs/components/input-tel/#allowed-regions) are not configured,
 all of them will be supported as values of Input Tel.
 
 ```js story
@@ -37,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/593b753f0f99acb36ea6009677bc7fdda9184184/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/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/593b753f0f99acb36ea6009677bc7fdda9184184/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/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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
@@ -130,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/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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/api-table.md

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

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

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

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

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

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

@@ -1,4 +1,16 @@
-# Input Tel Dropdown >> Overview ||10
+---
+parts:
+  - Input Tel Dropdown
+  - Overview
+title: 'Input Tel Dropdown: Overview'
+eleventyNavigation:
+  key: 'Input Tel Dropdown: Overview'
+  order: 10
+  parent: Input Tel Dropdown
+  title: Overview
+---
+
+# Input Tel Dropdown: Overview
 
 Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.
 
@@ -19,7 +31,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/593b753f0f99acb36ea6009677bc7fdda9184184/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/0c3425c2b9f0cbb8c2680b033ba775170b92c641/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,4 +1,16 @@
-# Input Tel Dropdown >> Use Cases ||20
+---
+parts:
+  - Input Tel Dropdown
+  - Use Cases
+title: 'Input Tel Dropdown: Use Cases'
+eleventyNavigation:
+  key: 'Input Tel Dropdown: Use Cases'
+  order: 20
+  parent: Input Tel Dropdown
+  title: Use Cases
+---
+
+# Input Tel Dropdown: Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

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