@lion/ui 0.7.6 → 0.7.8

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

@@ -4,57 +4,51 @@
 
 ### Fields
 
-| Name                                 | Privacy   | Type                                                                      | Default                                                                                                                                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From     |
-| ------------------------------------ | --------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `_isFormOrFieldset`                  | protected | `boolean`                                                                 | `true`                                                                                                                                                  | Flag that determines how ".formElements" should behave.
For a regular fieldset (see LionFieldset) we expect ".formElements"
to be accessible as an object.
In case of a radio-group, a checkbox-group or a select/listbox,
it should act like an array (see ChoiceGroupMixin).
Usually, when false, we deal with a choice-group (radio-group, checkbox-group,
(multi)select)                                                                                                                                                 | FormRegistrarMixin |
-| `_repropagationRole`                 | public    | `'child'\|'choice-group'\|'fieldset'`                                     | `'fieldset'`                                                                                                                                            | Based on the role, details of handling model-value-changed repropagation differ.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin   |
-| `_inputNode`                         | protected |                                                                           |                                                                                                                                                         | The host element with role group (or radio-group or form) containing necessary aria attributes                                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin   |
-| `modelValue`                         | public    |                                                                           |                                                                                                                                                         | Object keyed by formElements names, containing formElements' modelValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | FormControlMixin   |
-| `serializedValue`                    | public    |                                                                           |                                                                                                                                                         | Object keyed by formElements names, containing formElements' serializedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | FormGroupMixin     |
-| `formattedValue`                     | public    |                                                                           |                                                                                                                                                         | Object keyed by formElements names, containing formElements' formattedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormGroupMixin     |
-| `prefilled`                          | public    | `boolean`                                                                 |                                                                                                                                                         | True when all of the children are prefilled (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin     |
-| `_initialModelValue`                 | protected |                                                                           |                                                                                                                                                         | Gathers initial model values of all children. Used when resetGroup() is called.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
-| `value`                              | public    | `string`                                                                  | `''`                                                                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
-| `disabled`                           | public    | `boolean`                                                                 | `false`                                                                                                                                                 | Disables all formElements in group                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | DisabledMixin      |
-| `submitted`                          | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when parent form is submitted                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin     |
-| `dirty`                              | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when any of the children is dirty (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | FormGroupMixin     |
-| `touched`                            | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when the group as a whole is blurred (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormGroupMixin     |
-| `focused`                            | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when any of the children is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin     |
-| `defaultValidators`                  | public    | `Validator[]`                                                             | `[new FormElementsHaveNoError()]`                                                                                                                       | Used by Subclassers to add default Validators to a particular FormControl.
A date input for instance, always needs the isDate validator.                                                                                                                                                                                                                                                                                                                                                                                                         | ValidateMixin      |
-| `__descriptionElementsInParentChain` | protected |                                                                           | `new Set()`                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
-| `__pendingValues`                    | protected | `{modelValue?:{[key:string]: any}, serializedValue?:{[key:string]: any}}` | `{ modelValue: {}, serializedValue: {} }`                                                                                                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
-| `formElements`                       | public    | `FormControlsCollection`                                                  | `new FormControlsCollection()`                                                                                                                          | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
both like an array and an object (based on control/element names).                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin |
-| `initComplete`                       | public    | `Promise<any>`                                                            | `new Promise((resolve, reject) => {
-        this.__resolveInitComplete = resolve;
-        this.__rejectInitComplete = reject;
-      })`                 | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed                                                                                                                                                                                                                                                                                                                                                                                   | FormRegistrarMixin |
-| `registrationComplete`               | public    | `Promise<any> & {done?:boolean}`                                          | `new Promise((resolve, reject) => {
-        this.__resolveRegistrationComplete = resolve;
-        this.__rejectRegistrationComplete = reject;
-      })` | registrationComplete waits for all children formElements to have registered                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin |
-| `done`                               | public    | `boolean`                                                                 | `false`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormRegistrarMixin |
-| `label`                              | public    | `string`                                                                  | `''`                                                                                                                                                    | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin   |
-| `helpText`                           | public    | `string`                                                                  | `''`                                                                                                                                                    | The helpt text for the input node.&#xA;When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin   |
-| `fieldName`                          | public    | `string`                                                                  |                                                                                                                                                         | Will be used in validation messages to refer to the current field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | FormControlMixin   |
-| `_labelNode`                         | protected |                                                                           |                                                                                                                                                         | Element where label will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormControlMixin   |
-| `_helpTextNode`                      | protected |                                                                           |                                                                                                                                                         | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
-| `_feedbackNode`                      | protected |                                                                           |                                                                                                                                                         | Element where validation feedback will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | FormControlMixin   |
-| `readOnly`                           | public    | `boolean`                                                                 | `false`                                                                                                                                                 | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)                                                                                                                                         | FormControlMixin   |
-| `labelSrOnly`                        | public    | `boolean`                                                                 | `false`                                                                                                                                                 | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
-| `_inputId`                           | protected | `string`                                                                  |                                                                                                                                                         | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
-| `_ariaLabelledNodes`                 | public    | `HTMLElement[]`                                                           | `[]`                                                                                                                                                    | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin   |
-| `_ariaDescribedNodes`                | public    | `HTMLElement[]`                                                           | `[]`                                                                                                                                                    | Contains all elements that should end up in aria-describedby of \`.\_inputNode\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin   |
-| `_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. | FormControlMixin   |
-| `operationMode`                      | public    | `OperationMode`                                                           |                                                                                                                                                         | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ValidateMixin      |
-| `_allValidators`                     | protected | `Validator[]`                                                             |                                                                                                                                                         | Combination of validators provided by Application Developer and the default validators                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ValidateMixin      |
-| `_feedbackConditionMeta`             | protected |                                                                           |                                                                                                                                                         | Allows Subclassers to add meta info for feedbackCondition                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ValidateMixin      |
-| `hasFeedbackFor`                     | public    | `ValidationType[]`                                                        | `[]`                                                                                                                                                    | As soon as validation happens (after modelValue/validators/validator param change), this&#xA;array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).&#xA;Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on&#xA;\`.feedbackCondition()\`.&#xA;&#xA;For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can&#xA;be useful for subtle visual feedback on keyup, like a red/green border around an input.                             | ValidateMixin      |
-| `showsFeedbackFor`                   | public    | `ValidationType[]`                                                        | `[]`                                                                                                                                                    | Based on outcome of feedbackCondition, this array decides what ValidationTypes should be&#xA;shown in validationFeedback, based on meta data like interaction states.&#xA;&#xA;For styling purposes, it reflects it \`\[shows-feedback-for="error warning"]\`                                                                                                                                                                                                                                                                                        | ValidateMixin      |
-| `validationStates`                   | public    | `ValidationStates`                                                        | `{}`                                                                                                                                                    | The outcome of a validation 'round'. Keyed by ValidationType and Validator name                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | ValidateMixin      |
-| `isPending`                          | public    | `boolean`                                                                 | `false`                                                                                                                                                 | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                           | ValidateMixin      |
-| `validators`                         | public    | `Validator[]`                                                             | `[]`                                                                                                                                                    | Used by Application Developers to add Validators to a FormControl.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ValidateMixin      |
-| `_visibleMessagesAmount`             | protected | `number`                                                                  | `1`                                                                                                                                                     | The amount of feedback messages that will visible in LionValidationFeedback                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ValidateMixin      |
-| `_requestedToBeDisabled`             | protected | `boolean`                                                                 | `false`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | DisabledMixin      |
+| Name                                 | Privacy   | Type                                                                      | Default                                                                                                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From     |
+| ------------------------------------ | --------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `_isFormOrFieldset`                  | protected | `boolean`                                                                 | `true`                                                                                                                            | Flag that determines how ".formElements" should behave.&#xA;For a regular fieldset (see LionFieldset) we expect ".formElements"&#xA;to be accessible as an object.&#xA;In case of a radio-group, a checkbox-group or a select/listbox,&#xA;it should act like an array (see ChoiceGroupMixin).&#xA;Usually, when false, we deal with a choice-group (radio-group, checkbox-group,&#xA;(multi)select)                                                                                                                                                 | FormRegistrarMixin |
+| `_repropagationRole`                 | public    | `'child'\|'choice-group'\|'fieldset'`                                     | `'fieldset'`                                                                                                                      | Based on the role, details of handling model-value-changed repropagation differ.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin   |
+| `_inputNode`                         | protected |                                                                           |                                                                                                                                   | The host element with role group (or radio-group or form) containing necessary aria attributes                                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin   |
+| `modelValue`                         | public    |                                                                           |                                                                                                                                   | Object keyed by formElements names, containing formElements' modelValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | FormControlMixin   |
+| `serializedValue`                    | public    |                                                                           |                                                                                                                                   | Object keyed by formElements names, containing formElements' serializedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | FormGroupMixin     |
+| `formattedValue`                     | public    |                                                                           |                                                                                                                                   | Object keyed by formElements names, containing formElements' formattedValues                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | FormGroupMixin     |
+| `prefilled`                          | public    | `boolean`                                                                 |                                                                                                                                   | True when all of the children are prefilled (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin     |
+| `_initialModelValue`                 | protected |                                                                           |                                                                                                                                   | Gathers initial model values of all children. Used when resetGroup() is called.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
+| `value`                              | public    | `string`                                                                  | `''`                                                                                                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
+| `disabled`                           | public    | `boolean`                                                                 | `false`                                                                                                                           | Disables all formElements in group                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | DisabledMixin      |
+| `submitted`                          | public    | `boolean`                                                                 | `false`                                                                                                                           | True when parent form is submitted                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin     |
+| `dirty`                              | public    | `boolean`                                                                 | `false`                                                                                                                           | True when any of the children is dirty (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | FormGroupMixin     |
+| `touched`                            | public    | `boolean`                                                                 | `false`                                                                                                                           | True when the group as a whole is blurred (see InteractionStateMixin for more details.)                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormGroupMixin     |
+| `focused`                            | public    | `boolean`                                                                 | `false`                                                                                                                           | True when any of the children is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin     |
+| `defaultValidators`                  | public    | `Validator[]`                                                             | `[new FormElementsHaveNoError()]`                                                                                                 | Used by Subclassers to add default Validators to a particular FormControl.&#xA;A date input for instance, always needs the isDate validator.                                                                                                                                                                                                                                                                                                                                                                                                         | ValidateMixin      |
+| `__descriptionElementsInParentChain` | protected |                                                                           | `new Set()`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
+| `__pendingValues`                    | protected | `{modelValue?:{[key:string]: any}, serializedValue?:{[key:string]: any}}` | `{ modelValue: {}, serializedValue: {} }`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin     |
+| `formElements`                       | public    | `FormControlsCollection`                                                  | `new FormControlsCollection()`                                                                                                    | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed&#xA;both like an array and an object (based on control/element names).                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin |
+| `initComplete`                       | public    | `Promise<any>`                                                            | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })`                 | initComplete resolves after all pending initialization logic&#xA;(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)&#xA;is executed                                                                                                                                                                                                                                                                                                                                                                                   | FormRegistrarMixin |
+| `registrationComplete`               | public    | `Promise<any> & {done?:boolean}`                                          | `new Promise((resolve, reject) => { this.__resolveRegistrationComplete = resolve; this.__rejectRegistrationComplete = reject; })` | registrationComplete waits for all children formElements to have registered                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormRegistrarMixin |
+| `done`                               | public    | `boolean`                                                                 | `false`                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormRegistrarMixin |
+| `label`                              | public    | `string`                                                                  | `''`                                                                                                                              | The label text for the input node.&#xA;When no value is defined, textContent of \[slot=label] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                           | FormControlMixin   |
+| `helpText`                           | public    | `string`                                                                  | `''`                                                                                                                              | The helpt text for the input node.&#xA;When no value is defined, textContent of \[slot=help-text] will be used                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin   |
+| `fieldName`                          | public    | `string`                                                                  |                                                                                                                                   | Will be used in validation messages to refer to the current field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | FormControlMixin   |
+| `_labelNode`                         | protected |                                                                           |                                                                                                                                   | Element where label will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormControlMixin   |
+| `_helpTextNode`                      | protected |                                                                           |                                                                                                                                   | Element where help text will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
+| `_feedbackNode`                      | protected |                                                                           |                                                                                                                                   | Element where validation feedback will be rendered to                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | FormControlMixin   |
+| `readOnly`                           | public    | `boolean`                                                                 | `false`                                                                                                                           | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)                                                                                                                                         | FormControlMixin   |
+| `labelSrOnly`                        | public    | `boolean`                                                                 | `false`                                                                                                                           | The label will only be visible for srceen readers when true                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
+| `_inputId`                           | protected | `string`                                                                  |                                                                                                                                   | Unique id that can be used in all light dom                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | FormControlMixin   |
+| `_ariaLabelledNodes`                 | public    | `HTMLElement[]`                                                           | `[]`                                                                                                                              | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormControlMixin   |
+| `_ariaDescribedNodes`                | public    | `HTMLElement[]`                                                           | `[]`                                                                                                                              | Contains all elements that should end up in aria-describedby of \`.\_inputNode\`                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin   |
+| `_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. | FormControlMixin   |
+| `operationMode`                      | public    | `OperationMode`                                                           |                                                                                                                                   | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ValidateMixin      |
+| `_allValidators`                     | protected | `Validator[]`                                                             |                                                                                                                                   | Combination of validators provided by Application Developer and the default validators                                                                                                                                                                                                                                                                                                                                                                                                                                                               | ValidateMixin      |
+| `_feedbackConditionMeta`             | protected |                                                                           |                                                                                                                                   | Allows Subclassers to add meta info for feedbackCondition                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | ValidateMixin      |
+| `hasFeedbackFor`                     | public    | `ValidationType[]`                                                        | `[]`                                                                                                                              | As soon as validation happens (after modelValue/validators/validator param change), this&#xA;array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).&#xA;Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on&#xA;\`.feedbackCondition()\`.&#xA;&#xA;For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can&#xA;be useful for subtle visual feedback on keyup, like a red/green border around an input.                             | ValidateMixin      |
+| `showsFeedbackFor`                   | public    | `ValidationType[]`                                                        | `[]`                                                                                                                              | Based on outcome of feedbackCondition, this array decides what ValidationTypes should be&#xA;shown in validationFeedback, based on meta data like interaction states.&#xA;&#xA;For styling purposes, it reflects it \`\[shows-feedback-for="error warning"]\`                                                                                                                                                                                                                                                                                        | ValidateMixin      |
+| `validationStates`                   | public    | `ValidationStates`                                                        | `{}`                                                                                                                              | The outcome of a validation 'round'. Keyed by ValidationType and Validator name                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | ValidateMixin      |
+| `isPending`                          | public    | `boolean`                                                                 | `false`                                                                                                                           | Flag indicating whether async validation is pending.&#xA;Creates attribute \[is-pending] as a styling hook                                                                                                                                                                                                                                                                                                                                                                                                                                           | ValidateMixin      |
+| `validators`                         | public    | `Validator[]`                                                             | `[]`                                                                                                                              | Used by Application Developers to add Validators to a FormControl.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | ValidateMixin      |
+| `_visibleMessagesAmount`             | protected | `number`                                                                  | `1`                                                                                                                               | The amount of feedback messages that will visible in LionValidationFeedback                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ValidateMixin      |
+| `_requestedToBeDisabled`             | protected | `boolean`                                                                 | `false`                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | DisabledMixin      |
 
 ### Methods
 

package/docs/components/fieldset/overview.md

@@ -12,17 +12,17 @@ A web component that can be used to group multiple input fields or other fieldse
 ```js preview-story
 export const main = () => html`
   <lion-fieldset name="nameGroup" label="Name">
-    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
+    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
   </lion-fieldset>
 `;
 ```
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

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

@@ -16,9 +16,9 @@ The fieldset's modelValue is an `Object` containing properties where the key is
 ```js preview-story
 export const data = () => html`
   <lion-fieldset name="nameGroup" label="Name">
-    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-    <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
+    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
+    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
+    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
       Log to Action Logger
     </button>
   </lion-fieldset>
@@ -38,14 +38,14 @@ export const disabled = () => {
   }
   return html`
     <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-      <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-      <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
+      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
       <lion-fieldset name="nameGroup2" label="Name">
-        <lion-input name="FirstName2" label="First Name" .modelValue=${'Foo'} disabled></lion-input>
-        <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
+        <lion-input name="FirstName2" label="First Name" .modelValue="${'Foo'}" disabled></lion-input>
+        <lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
       </lion-fieldset>
     </lion-fieldset>
-    <button @click=${toggleDisabled}>Toggle disabled</button>
+    <button @click="${toggleDisabled}">Toggle disabled</button>
   `;
 };
 ```
@@ -59,18 +59,18 @@ export const nestingFieldsets = () => html`
   <lion-fieldset>
     <div slot="label">Personal data</div>
     <lion-fieldset name="nameGroup" label="Name">
-      <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-      <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
+      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
     </lion-fieldset>
     <lion-fieldset name="location" label="Location">
-      <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
+      <lion-input name="country" label="Country" .modelValue="${'Netherlands'}"></lion-input>
     </lion-fieldset>
-    <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
-    <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
+    <lion-input name="age" label="Age" .modelValue="${21}"></lion-input>
+    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
       Log everything to Action Logger
     </button>
     <br />
-    <button @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}>
+    <button @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}">
       Log only Name fieldset to Action Logger
     </button>
   </lion-fieldset>
@@ -168,7 +168,7 @@ export const validatingMultipleFieldsets = () => {
     }
   };
   return html`
-    <lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
+    <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
       <lion-fieldset name="inner1">
         <label slot="label">Fieldset no. 1</label>
         <lion-input label="Write 'cats' here" name="input1"> </lion-input>

package/docs/components/form/overview.md

@@ -8,7 +8,7 @@ import '@lion/ui/define/lion-form.js';
 ```
 
 A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/overview.md).
+It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/overview.md).
 
 ```js preview-story
 export const main = () => {
@@ -21,10 +21,10 @@ export const main = () => {
     });
   };
   return html`
-    <lion-form @submit=${submitHandler}>
-      <form @submit=${ev => ev.preventDefault()}>
-        <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-        <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+    <lion-form @submit="${submitHandler}">
+      <form @submit="${ev => ev.preventDefault()}">
+        <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
+        <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
         <button>Submit</button>
       </form>
     </lion-form>
@@ -37,11 +37,11 @@ export const main = () => {
 - Data synchronization with models
 - Easy retrieval of form data based on field names
 - Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/interaction-states.md)
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/interaction-states.md)
 - Registration mechanism for form controls
 - Accessible out of the box
 
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/overview.md).
+For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/overview.md).
 
 ## Installation
 

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

@@ -39,8 +39,8 @@ export const formSubmit = () => {
     ev.target.previousElementSibling.submit();
   };
   return html`
-    <lion-form @submit=${submitHandler}>
-      <form @submit=${ev => ev.preventDefault()}>
+    <lion-form @submit="${submitHandler}">
+      <form @submit="${ev => ev.preventDefault()}">
         <lion-input
           name="firstName"
           label="First Name"
@@ -55,14 +55,14 @@ export const formSubmit = () => {
           <button>Submit</button>
           <button
             type="button"
-            @click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
+            @click="${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}"
           >
             Reset
           </button>
         </div>
       </form>
     </lion-form>
-    <button @click=${submitViaJS}>Explicit submit via JavaScript</button>
+    <button @click="${submitViaJS}">Explicit submit via JavaScript</button>
   `;
 };
 ```

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

@@ -26,7 +26,7 @@ icons.addIconResolver('lion', (iconset, name) => {
 ## Icon sets
 
 Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
+See the [system documentation](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
 
 ```js preview-story
 export const iconSets = () => html`

package/docs/components/input/overview.md

@@ -23,7 +23,7 @@ export const main = () => html`<lion-input label="First Name"></lion-input>`;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md).
+- Can make use of [validation](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md).
 
 ## Installation
 

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

@@ -49,7 +49,7 @@ export const helpText = () => html`
 
 ```js preview-story
 export const prefilled = () => html`
-  <lion-input .modelValue=${'Prefilled value'} label="Prefilled"></lion-input>
+  <lion-input .modelValue="${'Prefilled value'}" label="Prefilled"></lion-input>
 `;
 ```
 
@@ -61,7 +61,7 @@ This field **will still be included** in the parent fieldset or form's `serializ
 
 ```js preview-story
 export const readOnly = () => html`
-  <lion-input readonly .modelValue=${'This is read only'} label="Read only"></lion-input>
+  <lion-input readonly .modelValue="${'This is read only'}" label="Read only"></lion-input>
 `;
 ```
 
@@ -73,6 +73,6 @@ This field **will not be included** in the parent fieldset or form's `serialized
 
 ```js preview-story
 export const disabled = () => html`
-  <lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input>
+  <lion-input disabled .modelValue="${'This is disabled'}" label="Disabled"></lion-input>
 `;
 ```

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

@@ -24,13 +24,13 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 - Option to show currency as a suffix
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

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

@@ -16,7 +16,7 @@ It will accept negative numbers with a minus symbol.
 
 ```js preview-story
 export const negativeNumber = () => html`
-  <lion-input-amount label="Amount" .modelValue=${-123456.78}></lion-input-amount>
+  <lion-input-amount label="Amount" .modelValue="${-123456.78}"></lion-input-amount>
 `;
 ```
 
@@ -26,7 +26,7 @@ You can optionally set a currency label with the `currency` attribute, which is
 
 ```js preview-story
 export const currencySuffix = () => html`
-  <lion-input-amount label="Price" currency="USD" .modelValue=${123456.78}></lion-input-amount>
+  <lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
 `;
 ```
 
@@ -43,7 +43,7 @@ export const forceLocale = () => {
       label="Price"
       currency="JOD"
       .locale="nl-NL"
-      .modelValue=${123456.78}
+      .modelValue="${123456.78}"
     ></lion-input-amount>
   `;
 };
@@ -66,7 +66,7 @@ Separator characters include:
 import { preprocessAmount } from '@lion/ui/input-amount.js';
 
 export const forceDigits = () => html`
-  <lion-input-amount label="Amount" .preprocessor=${preprocessAmount}></lion-input-amount>
+  <lion-input-amount label="Amount" .preprocessor="${preprocessAmount}"></lion-input-amount>
 `;
 ```
 
@@ -81,7 +81,7 @@ export const faultyPrefilled = () => html`
   <lion-input-amount
     label="Amount"
     help-text="Faulty prefilled input will cause error feedback"
-    .modelValue=${'foo'}
+    .modelValue="${'foo'}"
   ></lion-input-amount>
 `;
 ```
@@ -96,11 +96,11 @@ export const noDecimals = () => html`
   <lion-input-amount
     label="Amount"
     help-text="Prefilled and formatted"
-    .formatOptions=${{
+    .formatOptions="${({
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
-    }}
-    .modelValue=${20}
+    })}"
+    .modelValue="${20}"
   >
   </lion-input-amount>
 `;

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

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