@lion/ui 0.20.0-menu-system.0 → 0.21.0

package/docs/components/form/overview.md

@@ -20,7 +20,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -49,11 +49,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

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

@@ -26,7 +26,7 @@ import '@lion/ui/define/lion-form.js';
 To submit a form, use a regular `<button>` (or `<lion-button-submit>`) somewhere inside the native `<form>`. Then, add a `submit` handler on the `<lion-form>`. You can use this event to do your own (pre-)submit logic, like getting the serialized form data and sending it to a backend API.
 
 Another example is checking if the form has errors, and focusing the first field with a validation error.
-To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/validate.md).
+To learn more about form validation, please take a look at [validate](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/validate.md).
 
 To fire a submit from JavaScript, select the `<lion-form>` element and call `.submit()`.
 
@@ -128,7 +128,7 @@ export const prefilledData = () => {
 };
 ```
 
-Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/formatting-and-parsing.md).
+Learn more about [formatting and parsing](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/formatting-and-parsing.md).
 
 ## Sub forms
 

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

@@ -25,7 +25,7 @@ import '@lion/ui/define/lion-icon.js';
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

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

@@ -62,6 +62,7 @@ eleventyNavigation:
 | `_helpTextNode`              | protected |                                           |                         | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputId`                   | protected | `string`                                  |                         | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputNode`                 | protected | `HTMLInputElement \| HTMLTextAreaElement` |                         | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField            |
+| `_isEditingTextField`        | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `_isHandlingUserInput`       | protected | `boolean`                                 | `false`                 | Flag that will be set when user interaction takes place (for instance after an 'input'
event). Will be added as meta info to the \`model-value-changed\` event. Depending on
whether a user is interacting, formatting logic will be handled differently.                                                                                                                                                                                                                                                                                                                                         | LionField            |
 | `_isPasting`                 | protected | `boolean`                                 | `false`                 | Whether the user is pasting content. Allows Subclassers to do this in their subclass:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | LionField            |
 | `_isRepropagationEndpoint`   | public    | `boolean`                                 | `false`                 | By default, a field with \_repropagationRole 'choice-group' will act as an
'endpoint'. This means it will be considered as an individual field: for
a select, individual options will not be part of the formPath. They
will.
Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
(from Application Developer perspective) need to be more like fields
(think of an amount-input with a currency select box next to it), can set this
to true to hide private internals in the formPath.                                                      | LionField            |
@@ -92,7 +93,7 @@ eleventyNavigation:
 | `initInteractionState`                   | public    | Evaluations performed on connectedCallback.
This method is public, so it can be called at a later moment (when we need to wait for
registering children for instance) as well.
Since this method will be called twice in last mentioned scenario, it must stay idempotent.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |
 | `makeRequestToBeDisabled`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
 | `parser`                                 | public    | Converts viewValue to modelValue
For instance, a localized date to a Date Object                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `v: string, opts: FormatOptions`                                                                               | `*`                                                           | LionField            |
-| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessro that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
+| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessor that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
 | `removeFromAriaDescribedBy`              | public    | Allows to remove element references from aria-describedby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `removeFromAriaLabelledBy`               | public    | Allows to remove element references from aria-labelledby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `reset`                                  | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |

package/docs/components/input/overview.md

@@ -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/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -67,6 +67,7 @@ eleventyNavigation:
 | `_helpTextNode`              | protected |                                           |                         | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputId`                   | protected | `string`                                  |                         | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputNode`                 | protected | `HTMLInputElement \| HTMLTextAreaElement` |                         | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField            |
+| `_isEditingTextField`        | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `_isHandlingUserInput`       | protected | `boolean`                                 | `false`                 | Flag that will be set when user interaction takes place (for instance after an 'input'
event). Will be added as meta info to the \`model-value-changed\` event. Depending on
whether a user is interacting, formatting logic will be handled differently.                                                                                                                                                                                                                                                                                                                                         | LionField            |
 | `_isPasting`                 | protected | `boolean`                                 | `false`                 | Whether the user is pasting content. Allows Subclassers to do this in their subclass:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | LionField            |
 | `_isRepropagationEndpoint`   | public    | `boolean`                                 | `false`                 | By default, a field with \_repropagationRole 'choice-group' will act as an
'endpoint'. This means it will be considered as an individual field: for
a select, individual options will not be part of the formPath. They
will.
Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
(from Application Developer perspective) need to be more like fields
(think of an amount-input with a currency select box next to it), can set this
to true to hide private internals in the formPath.                                                      | LionField            |
@@ -95,7 +96,7 @@ eleventyNavigation:
 | `focus`                                  | public    | Calls \`focus()\` on focusable element within                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                |                                                               | LionField            |
 | `initInteractionState`                   | public    | Evaluations performed on connectedCallback.
This method is public, so it can be called at a later moment (when we need to wait for
registering children for instance) as well.
Since this method will be called twice in last mentioned scenario, it must stay idempotent.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |
 | `makeRequestToBeDisabled`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessro that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
+| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessor that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
 | `removeFromAriaDescribedBy`              | public    | Allows to remove element references from aria-describedby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `removeFromAriaLabelledBy`               | public    | Allows to remove element references from aria-labelledby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `reset`                                  | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |

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

@@ -36,13 +36,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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

@@ -41,7 +41,7 @@ eleventyNavigation:
 | `label`                      | public    | `string`                                  |                                                                                      | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | LionField            |
 | `labelSrOnly`                | public    | `boolean`                                 | `false`                                                                              | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionField            |
 | `locale`                     | public    | `string \| undefined`                     | `undefined`                                                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionInputAmount      |
-| `modelValue`                 | public    |                                           |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField            |
+| `modelValue`                 | public    | `object`                                  |                                                                                      | For a FormControl to function properly, its modelValue, serializedValue and  viewValue/formattedValue
should always translate in two directions. This is expected by \`\_callParser\` method. It guards for empty
viewValues. As the viewValue (\`.value\`) only concerns the amount part and not the currency part in
InputAmountDropdown, this contract is broken.
Below, we compensate for this.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | LionField            |
 | `name`                       | public    | `string`                                  | `''`                                                                                 | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
 | `operationMode`              | public    | `OperationMode`                           |                                                                                      | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | LionField            |
 | `parser`                     | public    |                                           | `parseAmount`                                                                        | Converts viewValue to modelValue
For instance, a localized date to a Date Object                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | LionField            |
@@ -76,6 +76,7 @@ eleventyNavigation:
 | `_helpTextNode`              | protected |                                           |                                                                                      | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionField            |
 | `_inputId`                   | protected | `string`                                  |                                                                                      | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | LionField            |
 | `_inputNode`                 | protected | `HTMLInputElement \| HTMLTextAreaElement` |                                                                                      | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | LionField            |
+| `_isEditingTextField`        | protected |                                           |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField            |
 | `_isHandlingUserInput`       | protected | `boolean`                                 | `false`                                                                              | Flag that will be set when user interaction takes place (for instance after an 'input'
event). Will be added as meta info to the \`model-value-changed\` event. Depending on
whether a user is interacting, formatting logic will be handled differently.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | LionField            |
 | `_isPasting`                 | protected | `boolean`                                 | `false`                                                                              | Whether the user is pasting content. Allows Subclassers to do this in their subclass:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField            |
 | `_isRepropagationEndpoint`   | public    | `boolean`                                 | `false`                                                                              | By default, a field with \_repropagationRole 'choice-group' will act as an
'endpoint'. This means it will be considered as an individual field: for
a select, individual options will not be part of the formPath. They
will.
Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
(from Application Developer perspective) need to be more like fields
(think of an amount-input with a currency select box next to it), can set this
to true to hide private internals in the formPath.                                                                                                                                                                                                                                                                                                                                    | LionField            |
@@ -105,7 +106,7 @@ eleventyNavigation:
 | `focus`                                  | public    | Calls \`focus()\` on focusable element within                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                |                                                               | LionField            |
 | `initInteractionState`                   | public    | Evaluations performed on connectedCallback.
This method is public, so it can be called at a later moment (when we need to wait for
registering children for instance) as well.
Since this method will be called twice in last mentioned scenario, it must stay idempotent.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |
 | `makeRequestToBeDisabled`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessro that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
+| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessor that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
 | `removeFromAriaDescribedBy`              | public    | Allows to remove element references from aria-describedby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `removeFromAriaLabelledBy`               | public    | Allows to remove element references from aria-labelledby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `reset`                                  | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |

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

@@ -64,6 +64,7 @@ eleventyNavigation:
 | `_helpTextNode`              | protected |                                           |                         | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputId`                   | protected | `string`                                  |                         | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `_inputNode`                 | protected | `HTMLInputElement \| HTMLTextAreaElement` |                         | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField            |
+| `_isEditingTextField`        | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `_isHandlingUserInput`       | protected | `boolean`                                 | `false`                 | Flag that will be set when user interaction takes place (for instance after an 'input'
event). Will be added as meta info to the \`model-value-changed\` event. Depending on
whether a user is interacting, formatting logic will be handled differently.                                                                                                                                                                                                                                                                                                                                         | LionField            |
 | `_isPasting`                 | protected | `boolean`                                 | `false`                 | Whether the user is pasting content. Allows Subclassers to do this in their subclass:                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | LionField            |
 | `_isRepropagationEndpoint`   | public    | `boolean`                                 | `false`                 | By default, a field with \_repropagationRole 'choice-group' will act as an
'endpoint'. This means it will be considered as an individual field: for
a select, individual options will not be part of the formPath. They
will.
Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
(from Application Developer perspective) need to be more like fields
(think of an amount-input with a currency select box next to it), can set this
to true to hide private internals in the formPath.                                                      | LionField            |
@@ -92,7 +93,7 @@ eleventyNavigation:
 | `focus`                                  | public    | Calls \`focus()\` on focusable element within                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                |                                                               | LionField            |
 | `initInteractionState`                   | public    | Evaluations performed on connectedCallback.
This method is public, so it can be called at a later moment (when we need to wait for
registering children for instance) as well.
Since this method will be called twice in last mentioned scenario, it must stay idempotent.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |
 | `makeRequestToBeDisabled`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessro that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
+| `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user
on keyup instead of after blurring the field. The biggest difference between preprocessors
and formatters is their moment of execution: preprocessors are run before modelValue is
computed (and work based on view value), whereas formatters are run after the parser (and
are based on modelValue)
Automatically formats code while typing. It depends on a preprocessor that smartly
updates the viewValue and caret position for best UX.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `v: string, opts: FormatOptions & { prevViewValue: string; currentCaretIndex: number }`                        | `{ viewValue:string; caretIndex:number; }\|string\|undefined` | LionField            |
 | `removeFromAriaDescribedBy`              | public    | Allows to remove element references from aria-describedby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `removeFromAriaLabelledBy`               | public    | Allows to remove element references from aria-labelledby attribute.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `element: HTMLElement`                                                                                         |                                                               | LionField            |
 | `reset`                                  | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |

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

@@ -28,11 +28,11 @@ import '@lion/ui/define/lion-input-date.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/5c228561a361a8ed95aabcacf735f87fb2746a5f/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/5c228561a361a8ed95aabcacf735f87fb2746a5f/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate