@lion/ui 0.22.0 → 0.24.0

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

@@ -16,63 +16,81 @@ eleventyNavigation:
 
 ### Fields
 
-| Name                              | Privacy   | Type               | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| --------------------------------- | --------- | ------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `calendarHeading`                 | public    | `string`           |              | The heading to be added on top of the calendar overlay.
Naming chosen from an Application Developer perspective.
For a Subclasser 'calendarOverlayHeading' would be more appropriate.                                                                                                                                                                                                                     |                |
-| `formatter`                       | public    |                    | `formatDate` |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `modelValue`                      | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `parser`                          | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `placeholder`                     | public    | `string`           | `''`         |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`                        | public    | `boolean`          | `false`      | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                           | public    |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                            | public    | `string`           | `'text'`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_calendarInvokerSlot`            | protected | `string`           | `'suffix'`   | The slot to put the invoker button in. Can be 'prefix', 'suffix', 'before' and 'after'.
Default will be 'suffix'.                                                                                                                                                                                                                                                                                             |                |
-| `_calendarNode`                   | protected | `LionCalendar`     |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_feedbackConditionMeta`          | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`                  | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusCentralDateOnCalendarOpen` | protected | `boolean`          | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_hideOnUserSelect`               | protected | `boolean`          | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_inputNode`                      | protected | `HTMLInputElement` |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_invokerNode`                    | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_isEditingTextField`             | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_isHandlingCalendarUserInput`    | protected | `boolean`          | `false`      |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_overlayContentNode`             | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_overlayInvokerNode`             | protected |                    |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_syncOnUserSelect`               | protected | `boolean`          | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| Name                              | Privacy   | Type                     | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
+| --------------------------------- | --------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `calendarHeading`                 | public    | `string`                 |              | The heading to be added on top of the calendar overlay.
Naming chosen from an Application Developer perspective.
For a Subclasser 'calendarOverlayHeading' would be more appropriate.                                                                                                                                                                                                                     |                |
+| `config`                          | public    | `Partial<OverlayConfig>` | `{}`         | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `formatter`                       | public    |                          | `formatDate` |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
+| `modelValue`                      | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
+| `opened`                          | public    | `boolean`                | `false`      | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                             | OverlayMixin   |
+| `parser`                          | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
+| `placeholder`                     | public    | `string`                 | `''`         |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
+| `readOnly`                        | public    | `boolean`                | `false`      | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
+| `slots`                           | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
+| `type`                            | public    | `string`                 | `'text'`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
+| `_calendarInvokerSlot`            | protected | `string`                 | `'suffix'`   | The slot to put the invoker button in. Can be 'prefix', 'suffix', 'before' and 'after'.&#xA;Default will be 'suffix'.                                                                                                                                                                                                                                                                                             |                |
+| `_calendarNode`                   | protected | `LionCalendar`           |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_feedbackConditionMeta`          | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
+| `_focusableNode`                  | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
+| `_focusCentralDateOnCalendarOpen` | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_hideOnUserSelect`               | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_inputNode`                      | protected | `HTMLInputElement`       |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
+| `_invokerNode`                    | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_isEditingTextField`             | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_isHandlingCalendarUserInput`    | protected | `boolean`                | `false`      |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `_overlayBackdropNode`            | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `_overlayContentNode`             | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `_overlayContentWrapperNode`      | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `_overlayInvokerNode`             | protected |                          |              | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\`         | OverlayMixin   |
+| `_overlayReferenceNode`           | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `_syncOnUserSelect`               | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 
 ### Methods
 
-| Name                             | Privacy   | Description                                                                                                                                                                       | Parameters                                                              | Return   | Inherited From |
-| -------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------- | -------------- |
-| `clear`                          | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                    |                                                                         |          | LionField      |
-| `deserializer`                   | public    |                                                                                                                                                                                   | `serializedValue: string`                                               |          | LionInputDate  |
-| `reset`                          | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                                                                                                            |                                                                         |          | LionField      |
-| `resetInteractionState`          | public    |                                                                                                                                                                                   |                                                                         |          | LionField      |
-| `serializer`                     | public    |                                                                                                                                                                                   | `modelValue: Date`                                                      |          | LionInputDate  |
-| `_calendarTemplate`              | protected | Subclassers can replace this with their custom extension of&#xA;LionCalendar, like \`\<my-calendar id="calendar">\</my-calendar>\`                                                |                                                                         |          |                |
-| `_defineOverlayConfig`           | protected |                                                                                                                                                                                   |                                                                         | `Object` |                |
-| `_invokerIconTemplate`           | protected | Subclassers can replace this with their custom extension invoker icon                                                                                                             |                                                                         |          |                |
-| `_invokerTemplate`               | protected | Subclassers can replace this with their custom extension invoker,&#xA;like \`\<my-button>\<calendar-icon>\</calendar-icon>\</my-button>\`                                         |                                                                         |          |                |
-| `_onCalendarOverlayOpened`       | protected | Lifecycle callback for subclassers                                                                                                                                                |                                                                         |          |                |
-| `_onCalendarUserSelectedChanged` | protected | Triggered when a user selects a date from the calendar overlay                                                                                                                    | `{ target: { selectedDate } }, opts: { target: { selectedDate: Date }}` |          |                |
-| `_onChange`                      | protected | Dispatches custom bubble event                                                                                                                                                    | `ev: Event=`                                                            |          | LionField      |
-| `_onValidatorUpdated`            | protected | Responsible for listening param change event and&#xA;sync the calendar dates with the updated validator params                                                                    | `e: Event\|CustomEvent, metaData: {validator: Validator}`               |          |                |
-| `_overlayFrameTemplate`          | protected |                                                                                                                                                                                   |                                                                         |          |                |
-| `_overlayTemplate`               | protected | Defining this overlay as a templates from OverlayMixin&#xA;this is our source to give as .contentNode to OverlayController.&#xA;Important: do not change the name of this method. |                                                                         |          |                |
-| `_reflectBackOn`                 | protected |                                                                                                                                                                                   |                                                                         |          |                |
-| `_setupOverlayCtrl`              | protected |                                                                                                                                                                                   |                                                                         |          |                |
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `clear`                            | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                                                                                             |                                                                                                              |                     | LionField      |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `deserializer`                     | public    |                                                                                                                                                                                                                                                                                                                            | `serializedValue: string`                                                                                    |                     | LionInputDate  |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `reset`                            | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                                                                                                                                                                                                                                                     |                                                                                                              |                     | LionField      |
+| `resetInteractionState`            | public    |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | LionField      |
+| `serializer`                       | public    |                                                                                                                                                                                                                                                                                                                            | `modelValue: Date`                                                                                           |                     | LionInputDate  |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `_calendarTemplate`                | protected | Subclassers can replace this with their custom extension of&#xA;LionCalendar, like \`\<my-calendar id="calendar">\</my-calendar>\`                                                                                                                                                                                         |                                                                                                              |                     |                |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Object`            | OverlayMixin   |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_invokerIconTemplate`             | protected | Subclassers can replace this with their custom extension invoker icon                                                                                                                                                                                                                                                      |                                                                                                              |                     |                |
+| `_invokerTemplate`                 | protected | Subclassers can replace this with their custom extension invoker,&#xA;like \`\<my-button>\<calendar-icon>\</calendar-icon>\</my-button>\`                                                                                                                                                                                  |                                                                                                              |                     |                |
+| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
+| `_onCalendarOverlayOpened`         | protected | Lifecycle callback for subclassers                                                                                                                                                                                                                                                                                         |                                                                                                              |                     |                |
+| `_onCalendarUserSelectedChanged`   | protected | Triggered when a user selects a date from the calendar overlay                                                                                                                                                                                                                                                             | `{ target: { selectedDate } }, opts: { target: { selectedDate: Date }}`                                      |                     |                |
+| `_onChange`                        | protected | Dispatches custom bubble event                                                                                                                                                                                                                                                                                             | `ev: Event=`                                                                                                 |                     | LionField      |
+| `_onValidatorUpdated`              | protected | Responsible for listening param change event and&#xA;sync the calendar dates with the updated validator params                                                                                                                                                                                                             | `e: Event\|CustomEvent, metaData: {validator: Validator}`                                                    |                     |                |
+| `_overlayFrameTemplate`            | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_overlayTemplate`                 | protected | Defining this overlay as a templates from OverlayMixin&#xA;this is our source to give as .contentNode to OverlayController.&#xA;Important: do not change the name of this method.                                                                                                                                          |                                                                                                              |                     |                |
+| `_reflectBackOn`                   | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
 
 ### Events
 
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
+| Name                 | Type          | Description | Inherited From |
+| -------------------- | ------------- | ----------- | -------------- |
+| `opened-changed`     | `CustomEvent` |             | OverlayMixin   |
+| `user-input-changed` | `Event`       |             | LionField      |
 
 ### Attributes
 
 | Name               | Field           | Inherited From |
 | ------------------ | --------------- | -------------- |
 | `calendar-heading` | calendarHeading |                |
+| `opened`           | opened          | OverlayMixin   |
 | `modelValue`       | modelValue      | LionInputDate  |
 | `readonly`         | readOnly        | LionInput      |
 | `type`             | type            | LionInput      |

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Datepicker: Overview'
+title: 'Overview'
 parts:
   - Input Datepicker
   - Overview
@@ -10,11 +10,11 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Datepicker: Overview
+# 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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Datepicker: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Datepicker
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Datepicker: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Email: Overview'
+title: 'Overview'
 parts:
   - Input Email
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Email: Overview
+# 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.
 
@@ -27,8 +27,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Email: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Email
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Email: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

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

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Iban: Overview'
+title: 'Overview'
 parts:
   - Input Iban
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Iban: Overview
+# 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).
@@ -28,9 +28,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Iban: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Iban
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Iban: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Range: Overview'
+title: 'Overview'
 parts:
   - Input Range
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Range: Overview
+# 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.
 
@@ -25,11 +25,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Range: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Range
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Range: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Stepper: Overview'
+title: 'Overview'
 parts:
   - Input Stepper
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Stepper: Overview
+# 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.
 
@@ -30,7 +30,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Stepper: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Stepper
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Stepper: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Tel: Overview'
+title: 'Overview'
 parts:
   - Input Tel
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Tel: Overview
+# Overview
 
 Input field for entering phone numbers, including validation, formatting and mobile keyboard support.
 
@@ -51,7 +51,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Tel: Use Cases'
+title: 'Use Cases'
 parts:
   - Input Tel
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Input Tel: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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,5 +1,5 @@
 ---
-title: 'Input Tel Dropdown: Extensions'
+title: 'Extensions'
 parts:
   - Input Tel Dropdown
   - Extensions
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Extensions
 ---
 
-# Input Tel Dropdown: Extensions
+# Extensions
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

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

@@ -1,5 +1,5 @@
 ---
-title: 'Input Tel Dropdown: Overview'
+title: 'Overview'
 parts:
   - Input Tel Dropdown
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Input Tel Dropdown: Overview
+# Overview
 
 Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries.
 
@@ -31,7 +31,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input-tel](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/input-tel/overview.md)
+- Extends our [input-tel](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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