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

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`                                  |                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | 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            |
@@ -183,11 +183,11 @@ eleventyNavigation:
 
 | Name                            | Field                      | Inherited From       |
 | ------------------------------- | -------------------------- | -------------------- |
+| `modelValue`                    | modelValue                 | LionInputAmount      |
 | `preferredCurrencies`           | preferredCurrencies        |                      |
 | `allowedCurrencies`             | allowedCurrencies          |                      |
 | `__dropdownSlot`                | \_\_dropdownSlot           |                      |
 | `currency`                      | currency                   | LionInputAmount      |
-| `modelValue`                    | modelValue                 | LionInputAmount      |
 | `autocomplete`                  | autocomplete               | NativeTextFieldMixin |
 | `focused`                       | focused                    | LionField            |
 | `focused-visible`               | focusedVisible             | 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/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input/overview.md)
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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/f772d573181b73001438c110f2efa18bd3281d1c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -22,7 +22,6 @@ eleventyNavigation:
 | `autocomplete`                    | public    | `string \| undefined`                     | `undefined`             | Delegates this property to input/textarea/select.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | NativeTextFieldMixin |
 | `autofocus`                       | public    | `boolean`                                 | `false`                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `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         |
 | `defaultValidators`               | public    | `Validator[]`                             | `[]`                    | Used by Subclassers to add default Validators to a particular FormControl.&#xA;A date input for instance, always needs the isDate validator.                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `dirty`                           | public    | `boolean`                                 | `false`                 | True when user has changed the value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | LionField            |
 | `disabled`                        | public    | `boolean`                                 | `false`                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
@@ -42,7 +41,6 @@ eleventyNavigation:
 | `labelSrOnly`                     | public    | `boolean`                                 | `false`                 | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | LionField            |
 | `modelValue`                      | public    |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `name`                            | public    | `string`                                  | `''`                    | The name the element will be registered with to the .formElements collection&#xA;of the parent. Also, it serves as the key of key/value pairs in&#xA; modelValue/serializedValue objects                                                                                                                                                                                                                                                                                                                                                                                                                  | LionField            |
-| `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         |
 | `operationMode`                   | public    | `OperationMode`                           |                         | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | LionField            |
 | `parser`                          | public    |                                           |                         | Converts viewValue to modelValue&#xA;For instance, a localized date to a Date Object                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | LionField            |
 | `placeholder`                     | public    | `string`                                  | `''`                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionInput            |
@@ -80,11 +78,8 @@ eleventyNavigation:
 | `_isRepropagationEndpoint`        | public    | `boolean`                                 | `false`                 | By default, a field with \_repropagationRole 'choice-group' will act as an&#xA;'endpoint'. This means it will be considered as an individual field: for&#xA;a select, individual options will not be part of the formPath. They&#xA;will.&#xA;Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'&#xA;(from Application Developer perspective) need to be more like fields&#xA;(think of an amount-input with a currency select box next to it), can set this&#xA;to true to hide private internals in the formPath.                                                      | LionField            |
 | `_labelNode`                      | protected |                                           |                         | Element where label will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField            |
 | `_leaveEvent`                     | protected | `string`                                  | `'blur'`                | The event that triggers the touched state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | LionField            |
-| `_overlayBackdropNode`            | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin         |
-| `_overlayContentNode`             | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin         |
-| `_overlayContentWrapperNode`      | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin         |
-| `_overlayInvokerNode`             | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin         |
-| `_overlayReferenceNode`           | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin         |
+| `_overlayContentNode`             | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                      |
+| `_overlayInvokerNode`             | protected |                                           |                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                      |
 | `_parentFormGroup`                | protected | `FormRegistrarHost \| undefined`          | `undefined`             | The registrar this FormControl registers to, Usually a descendant of FormGroup or&#xA;ChoiceGroup                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | LionField            |
 | `_repropagationRole`              | public    | `'child'\|'choice-group'\|'fieldset'`     | `'child'`               | Based on the role, details of handling model-value-changed repropagation differ.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | LionField            |
 | `_requestedToBeDisabled`          | protected | `boolean`                                 | `false`                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
@@ -102,7 +97,6 @@ eleventyNavigation:
 | `blur`                                   | public    | Calls \`blur()\` on focusable element within                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                |                                                               | LionField            |
 | `clear`                                  | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                |                                                               | LionField            |
 | `click`                                  | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `close`                                  | public    | Hides the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                                                                                                |                                                               | OverlayMixin         |
 | `createScopedElement`                    | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `tagName`                                                                                                      |                                                               | LionField            |
 | `defineScopedElement`                    | public    | Defines a scoped element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `tagName: string, classToBeRegistered: typeof HTMLElement`                                                     |                                                               | LionField            |
 | `deserializer`                           | public    | Converts \`.serializedValue\` to \`.modelValue\`&#xA;For instance, an iso formatted date string to a Date object                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `serializedValue: string`                                                                                      | `?`                                                           | LionField            |
@@ -110,16 +104,13 @@ eleventyNavigation:
 | `focus`                                  | public    | Calls \`focus()\` on focusable element within                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                |                                                               | LionField            |
 | `initInteractionState`                   | public    | Evaluations performed on connectedCallback.&#xA;This method is public, so it can be called at a later moment (when we need to wait for&#xA;registering children for instance) as well.&#xA;Since this method will be called twice in last mentioned scenario, it must stay idempotent.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                |                                                               | LionField            |
 | `makeRequestToBeDisabled`                | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `open`                                   | public    | Shows the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                                                                                                |                                                               | OverlayMixin         |
 | `preprocessor`                           | public    | Preprocessors could be considered 'live formatters'. Their result is shown to the user&#xA;on keyup instead of after blurring the field. The biggest difference between preprocessors&#xA;and formatters is their moment of execution: preprocessors are run before modelValue is&#xA;computed (and work based on view value), whereas formatters are run after the parser (and&#xA;are based on modelValue)&#xA;Automatically formats code while typing. It depends on a preprocessro that smartly&#xA;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            |
-| `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    | Resets touched and dirty, and recomputes prefilled                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                                |                                                               | LionField            |
 | `retractRequestToBeDisabled`             | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
 | `serializer`                             | public    | Converts \`.modelValue\` to \`.serializedValue\`&#xA;For instance, a Date object to an iso formatted date string                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `modelValue: Date`                                                                                             | `string`                                                      | LionField            |
-| `toggle`                                 | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                |                                                               | OverlayMixin         |
 | `updateSync`                             | public    | An abstraction that has the exact same api as \`requestUpdate\`, but taking&#xA;into account:&#xA;- \[member order independence]\(https\://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence)&#xA;- property effects start when all (light) dom has initialized (on firstUpdated)&#xA;- property effects don't interrupt the first meaningful paint&#xA;- compatible with propertyAccessor.\`hasChanged\`: no manual checks needed or accidentally&#xA;run property effects / events when no change happened&#xA;effects when values didn't change&#xA;All code previously present in requestUpdate can be placed in this method.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `name: string, oldValue: ?`                                                                                    |                                                               | LionField            |
 | `validate`                               | public    | Triggered by:&#xA; \- modelValue change&#xA; \- change in the 'validators' array&#xA; \- change in the config of an individual Validator&#xA;&#xA;Three situations are handled:&#xA;- a1) the FormControl is empty: further execution is halted. When the Required Validator&#xA;(being mutually exclusive to the other Validators) is applied, it will end up in the&#xA;validation result (as the only Validator, since further execution was halted).&#xA;- a2) there are synchronous Validators: this is the most common flow. When modelValue hasn't&#xA;changed since last async results were generated, 'sync results' are merged with the&#xA;'async results'.&#xA;- a3) there are asynchronous Validators: for instance when server side evaluation is needed.&#xA;Executions are scheduled and awaited and the 'async results' are merged with the&#xA;'sync results'.&#xA;&#xA;- b) there are MetaValidators. After steps a1, a2, or a3 are finished, the holistic&#xA;MetaValidators (evaluating the total result of the 'regular' (a1, a2 and a3) validators)&#xA;will be run...&#xA;&#xA;Situations a2 and a3 are not mutually exclusive and can be triggered within one \`validate()\`&#xA;call. Situation b will occur after every call. | `{ clearCurrentResult = false }, opts: { clearCurrentResult?: boolean }`                                       |                                                               | LionField            |
 | `_arrowNodeTemplate`                     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | ArrowMixin           |
@@ -127,8 +118,7 @@ eleventyNavigation:
 | `_calculateValues`                       | protected | Responsible for storing all representations(modelValue, serializedValue, formattedValue&#xA;and value) of the input value. Prevents infinite loops, so all value observers can be&#xA;treated like they will only be called once, without indirectly calling other observers.&#xA;(in fact, some are called twice, but the \_\_preventRecursiveTrigger lock prevents the&#xA;second call from having effect).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `{ source }, config: {source:'model'\|'serialized'\|'formatted'\|null}`                                        |                                                               | LionField            |
 | `_calendarTemplate`                      | protected | Subclassers can replace this with their custom extension of&#xA;LionCalendar, like \`\<my-calendar id="calendar">\</my-calendar>\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                                |                                                               |                      |
 | `_connectSlotMixin`                      | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `_defineOverlay`                         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig`   | `OverlayController`                                           | OverlayMixin         |
-| `_defineOverlayConfig`                   | protected | Overrides arrow and keepTogether modifier to be enabled,&#xA;and adds onCreate and onUpdate hooks to sync from popper state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                | `Object`                                                      | OverlayMixin         |
+| `_defineOverlayConfig`                   | protected | Overrides arrow and keepTogether modifier to be enabled,&#xA;and adds onCreate and onUpdate hooks to sync from popper state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                                                                                                                | `Object`                                                      | ArrowMixin           |
 | `_dispatchInitialModelValueChangedEvent` | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
 | `_dispatchModelValueChangedEvent`        | protected | This is wrapped in a distinct method, so that parents can control when the changed event&#xA;is fired. For objects, a deep comparison might be needed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `args: { modelValue: unknown; }[]`                                                                             |                                                               | LionField            |
 | `_enhanceLightDomA11y`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
@@ -150,7 +140,6 @@ eleventyNavigation:
 | `_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>\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |                                                                                                                |                                                               |                      |
 | `_isEmpty`                               | protected | Used for Required validation and computation of interaction states                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: any`                                                                                              | `boolean`                                                     | LionField            |
-| `_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         |
 | `_isPrivateSlot`                         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `slotName: string`                                                                                             | `boolean`                                                     | LionField            |
 | `_iStateOnLeave`                         | protected | Sets touched value to true and reevaluates prefilled state.&#xA;When false, on next interaction, user will start with a clean state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                                |                                                               | LionField            |
 | `_iStateOnValueChange`                   | protected | Sets dirty value and validates when already touched or invalid                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                |                                                               | LionField            |
@@ -172,14 +161,10 @@ eleventyNavigation:
 | `_reflectBackFormattedValueToUser`       | protected | Note: Overrides the implementation from FormatMixin                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                |                                                               | LionField            |
 | `_reflectBackOn`                         | protected | Every time .formattedValue is attempted to sync to the view value (on change/blur and on&#xA;modelValue change), this condition is checked. When enhancing it, it's recommended to&#xA;call via \`return this.\_myExtraCondition && super.\_reflectBackOn()\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                                                                                                                | `boolean`                                                     | LionField            |
 | `_repropagationCondition`                | protected | Based on provided target, this condition determines whether received model-value-changed&#xA;event should be repropagated                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `target: FormControlHost`                                                                                      |                                                               | LionField            |
-| `_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         |
+| `_setupOverlayCtrl`                      | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               |                      |
 | `_setValueAndPreserveCaret`              | protected | Restores the cursor to its original position after updating the value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `newValue: string`                                                                                             |                                                               | NativeTextFieldMixin |
 | `_showFeedbackConditionFor`              | protected | Default feedbackCondition condition, used by Subclassers, that will be used when&#xA;\`feedbackCondition()\` is not overridden by Application Developer.&#xA;Show the validity feedback when returning true, don't show when false                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `type: string, meta: InteractionStates`                                                                        |                                                               | LionField            |
 | `_syncValueUpwards`                      | protected | Synchronization from \`.\_inputNode.value\` to \`LionField\` (flow \[2])&#xA;Downwards syncing should only happen for \`LionField\`.value changes from 'above'.&#xA;This triggers \_onModelValueChanged and connects user input&#xA;to the parsing/formatting/serializing loop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
-| `_teardownOpenCloseListeners`            | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | OverlayMixin         |
-| `_teardownOverlayCtrl`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | OverlayMixin         |
 | `_triggerInitialModelValueChangedEvent`  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
 | `_updateFeedbackComponent`               | protected | Responsible for retrieving messages from Validators and&#xA;(delegation of) rendering them.&#xA;&#xA;For \`.\_feedbackNode\` (extension of LionValidationFeedback):&#xA;- retrieve messages from highest prio Validators&#xA;- provide the result to custom feedback node and let the&#xA;custom node decide on their renderings&#xA;&#xA;In both cases:&#xA;- we compute the 'show' flag (like 'hasErrorVisible') for all types&#xA;- we set the customValidity message of the highest prio Validator&#xA;- we set aria-invalid="true" in case hasErrorVisible is true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |                                                                                                                |                                                               | LionField            |
 | `_updateShouldShowFeedbackFor`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                                                                                                |                                                               | LionField            |
@@ -188,7 +173,6 @@ eleventyNavigation:
 
 | Name                           | Type          | Description                                              | Inherited From |
 | ------------------------------ | ------------- | -------------------------------------------------------- | -------------- |
-| `opened-changed`               | `CustomEvent` |                                                          | OverlayMixin   |
 | `model-value-changed`          | `CustomEvent` |                                                          | LionField      |
 | `user-input-changed`           | `Event`       |                                                          | LionField      |
 | `focus`                        | `Event`       |                                                          | LionField      |
@@ -210,7 +194,6 @@ eleventyNavigation:
 | ------------------------------- | -------------------------- | -------------------- |
 | `calendar-heading`              | calendarHeading            |                      |
 | `has-arrow`                     | hasArrow                   | ArrowMixin           |
-| `opened`                        | opened                     | OverlayMixin         |
 | `modelValue`                    | modelValue                 | LionInputDate        |
 | `autocomplete`                  | autocomplete               | NativeTextFieldMixin |
 | `focused`                       | focused                    | LionField            |

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

@@ -14,7 +14,7 @@ eleventyNavigation:
 
 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
 For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/calendar/overview.md) inside the datepicker
-- 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-date](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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/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/f772d573181b73001438c110f2efa18bd3281d1c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

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

@@ -19,7 +19,7 @@ eleventyNavigation:
 | Name                         | Privacy   | Type                                      | Default                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From       |
 | ---------------------------- | --------- | ----------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
 | `allowCrossRootRegistration` | public    | `boolean`                                 | `false`                 | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility                                                                                                          | LionField            |
-| `autocomplete`               | public    | `string \| undefined`                     | `undefined`             | Delegates this property to input/textarea/select.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | NativeTextFieldMixin |
+| `autocomplete`               | public    | `string \| undefined`                     | `'email'`               | Delegates this property to input/textarea/select.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | NativeTextFieldMixin |
 | `autofocus`                  | public    | `boolean`                                 | `false`                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `defaultValidators`          | public    | `Validator[]`                             | `[]`                    | Used by Subclassers to add default Validators to a particular FormControl.
A date input for instance, always needs the isDate validator.                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `dirty`                      | public    | `boolean`                                 | `false`                 | True when user has changed the value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | LionField            |

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

@@ -27,8 +27,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

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

@@ -27,7 +27,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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

@@ -173,6 +173,24 @@ export const sizeValidator = () => {
 };
 ```
 
+### Maximum File Count
+
+```js preview-story
+export const fileCountValidator = () => {
+  return html`
+    <lion-input-file
+      label="Passport"
+      max-file-size="1024000"
+      accept=".jpg,.svg,.xml,image/svg+xml"
+      .validators=${[
+        new MaxFileCount(2, { getMessage: () => 'You must not select more than 2 files' }),
+      ]}
+    >
+    </lion-input-file>
+  `;
+};
+```
+
 ### Multiple file upload
 
 When file has to be uploaded as soon as it is selected by the user. Use `file-list-changed` event to get the newly added files, upload it to your server and set the response back to component via `uploadResponse` property for each file.

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

@@ -28,9 +28,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/f772d573181b73001438c110f2efa18bd3281d1c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

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

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

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

@@ -30,7 +30,7 @@ loadDefaultFeedbackMessages();
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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-tel/api-table.md

@@ -22,7 +22,7 @@ eleventyNavigation:
 | `activeRegion`               | public    | `string`                                  |                         | Currently active region based on:
1\. allowed regions: get the region from configured allowed regions (if one entry)
2\. user input: try to derive active region from user input
3\. locale: try to get the region from locale (\`html\[lang]\` attribute)                                                                                                                                                                                                                                                                                                                                    |                      |
 | `allowCrossRootRegistration` | public    | `boolean`                                 | `false`                 | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility                                                                                                          | LionField            |
 | `allowedRegions`             | public    | `RegionCode[]`                            | `[]`                    | The regions that should be considered when international phone numbers are detected.
(when not configured, all regions worldwide will be considered)                                                                                                                                                                                                                                                                                                                                                                                                                                                  |                      |
-| `autocomplete`               | public    | `string \| undefined`                     | `undefined`             | Delegates this property to input/textarea/select.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | NativeTextFieldMixin |
+| `autocomplete`               | public    | `string \| undefined`                     | `'tel'`                 | Delegates this property to input/textarea/select.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | NativeTextFieldMixin |
 | `autofocus`                  | public    | `boolean`                                 | `false`                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | LionField            |
 | `defaultValidators`          | public    | `Validator[]`                             | `[]`                    | Used by Subclassers to add default Validators to a particular FormControl.
A date input for instance, always needs the isDate validator.                                                                                                                                                                                                                                                                                                                                                                                                                                                              | LionField            |
 | `dirty`                      | public    | `boolean`                                 | `false`                 | True when user has changed the value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | LionField            |

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

@@ -51,7 +51,7 @@ export const main = () => {
 
 ## Features
 
-- Extends our [input](https://github.com/ing-bank/lion/blob/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input/overview.md)
+- Extends our [input](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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

@@ -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/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/f772d573181b73001438c110f2efa18bd3281d1c/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
+- [allowed regions](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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/f772d573181b73001438c110f2efa18bd3281d1c/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input-tel/#allowed-regions) if configured)
+  the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/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/f772d573181b73001438c110f2efa18bd3281d1c/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/1241fa4b6c829b69fe5a03627fc26455f87663bb/docs/components/input-tel-dropdown/index.md), only allowed regions will
+> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/f772d573181b73001438c110f2efa18bd3281d1c/docs/components/input-tel-dropdown/index.md), only allowed regions will
 > be shown in the dropdown list.
 
 ```js preview-story