@lion/ui 0.7.6 → 0.7.8

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

@@ -62,10 +62,10 @@ export const withinForm = () => html`
     <input id="firstNameId" name="firstName" />
     <label for="lastNameId">Last name</label>
     <input id="lastNameId" name="lastName" />
-    <lion-button-submit @click=${ev => console.log('click submit handler', ev.target)}
+    <lion-button-submit @click="${ev => console.log('click submit handler', ev.target)}"
       >Submit</lion-button-submit
     >
-    <lion-button-reset @click=${ev => console.log('click reset handler', ev.target)}
+    <lion-button-reset @click="${ev => console.log('click reset handler', ev.target)}"
       >Reset</lion-button-reset
     >
   </form>

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

@@ -21,7 +21,7 @@ export const selectedDate = () => html`
       max-width: 500px;
     }
   </style>
-  <lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
+  <lion-calendar class="demo-calendar" .selectedDate="${new Date(1988, 2, 5)}"></lion-calendar>
 `;
 ```
 
@@ -160,7 +160,7 @@ export const disabledDates = () => html`
   </style>
   <lion-calendar
     class="demo-calendar"
-    .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+    .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
   ></lion-calendar>
 `;
 ```
@@ -183,7 +183,7 @@ export const combinedDisabledDates = () => {
     </style>
     <lion-calendar
       class="demo-calendar"
-      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+      .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
       .minDate="${new Date()}"
       .maxDate="${maxDate}"
     ></lion-calendar>
@@ -215,7 +215,7 @@ export const findingEnabledDates = () => {
     </style>
     <lion-calendar
       class="demo-calendar js-calendar"
-      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+      .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
     ></lion-calendar>
     <button @click="${ev => getCalendar(ev).focusDate(getCalendar(ev).findNextEnabledDate())}">
       focus findNextEnabledDate

package/docs/components/checkbox-group/api-table.md

@@ -189,61 +189,55 @@
 
 ### Fields
 
-| Name                                 | Privacy   | Type                                                                      | Default                                                                                                                                                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From        |
-| ------------------------------------ | --------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `multipleChoice`                     | public    | `boolean`                                                                 | `true`                                                                                                                                                  | When false (default), modelValue and serializedValue will reflect the
currently selected choice (usually a string). When true, modelValue will and
serializedValue will be an array of strings.                                                                                                                                                                                                                                                                                                                                              | ChoiceGroupMixin      |
-| `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        |
-| `operationMode`                      | public    | `OperationMode`                                                           |                                                                                                                                                         | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ValidateMixin         |
-| `_repropagationRole`                 | public    | `'child'\|'choice-group'\|'fieldset'`                                     | `'choice-group'`                                                                                                                                        | Based on the role, details of handling model-value-changed repropagation differ.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin      |
-| `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    |
-| `_isFormOrFieldset`                  | protected | `boolean`                                                                 | `false`                                                                                                                                                 | 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    |
-| `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    |
-| `_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         |
-| `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.                                                                                                                                                                                                                                                                                                                                                                                                         | ValidateMixin         |
-| `_visibleMessagesAmount`             | protected | `number`                                                                  | `1`                                                                                                                                                     | The amount of feedback messages that will visible in LionValidationFeedback                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ValidateMixin         |
-| `touched`                            | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when user has focused and left(blurred) the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormGroupMixin        |
-| `dirty`                              | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when user has changed the value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin        |
-| `prefilled`                          | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when user has left non-empty field or input is prefilled.&#xA;The name must be seen from the point of view of the input field:&#xA;once the user enters the input field, the value is non-empty.                                                                                                                                                                                                                                                                                                                                                | FormGroupMixin        |
-| `filled`                             | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin)                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | InteractionStateMixin |
-| `_leaveEvent`                        | protected | `string`                                                                  | `'blur'`                                                                                                                                                | The event that triggers the touched state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | InteractionStateMixin |
-| `_valueChangedEvent`                 | protected | `string`                                                                  | `'model-value-changed'`                                                                                                                                 | The event that triggers the dirty state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | InteractionStateMixin |
-| `submitted`                          | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when parent form is submitted                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin        |
-| `_inputNode`                         | protected |                                                                           |                                                                                                                                                         | The host element with role group (or radio-group or form) containing necessary aria attributes                                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin      |
-| `_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         |
-| `focused`                            | public    | `boolean`                                                                 | `false`                                                                                                                                                 | True when any of the children is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin        |
-| `__descriptionElementsInParentChain` | protected |                                                                           | `new Set()`                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin        |
-| `__pendingValues`                    | protected | `{modelValue?:{[key:string]: any}, serializedValue?:{[key:string]: any}}` | `{ modelValue: {}, serializedValue: {} }`                                                                                                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin        |
-| `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      |
-| `_requestedToBeDisabled`             | protected | `boolean`                                                                 | `false`                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | DisabledMixin         |
+| Name                                 | Privacy   | Type                                                                      | Default                                                                                                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From        |
+| ------------------------------------ | --------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `multipleChoice`                     | public    | `boolean`                                                                 | `true`                                                                                                                            | When false (default), modelValue and serializedValue will reflect the&#xA;currently selected choice (usually a string). When true, modelValue will and&#xA;serializedValue will be an array of strings.                                                                                                                                                                                                                                                                                                                                              | ChoiceGroupMixin      |
+| `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        |
+| `operationMode`                      | public    | `OperationMode`                                                           |                                                                                                                                   | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload')                                                                                                                                                                                                                                                                                                                                                                                                                                                             | ValidateMixin         |
+| `_repropagationRole`                 | public    | `'child'\|'choice-group'\|'fieldset'`                                     | `'choice-group'`                                                                                                                  | Based on the role, details of handling model-value-changed repropagation differ.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | FormControlMixin      |
+| `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    |
+| `_isFormOrFieldset`                  | protected | `boolean`                                                                 | `false`                                                                                                                           | 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    |
+| `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    |
+| `_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         |
+| `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.                                                                                                                                                                                                                                                                                                                                                                                                         | ValidateMixin         |
+| `_visibleMessagesAmount`             | protected | `number`                                                                  | `1`                                                                                                                               | The amount of feedback messages that will visible in LionValidationFeedback                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | ValidateMixin         |
+| `touched`                            | public    | `boolean`                                                                 | `false`                                                                                                                           | True when user has focused and left(blurred) the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | FormGroupMixin        |
+| `dirty`                              | public    | `boolean`                                                                 | `false`                                                                                                                           | True when user has changed the value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin        |
+| `prefilled`                          | public    | `boolean`                                                                 | `false`                                                                                                                           | True when user has left non-empty field or input is prefilled.&#xA;The name must be seen from the point of view of the input field:&#xA;once the user enters the input field, the value is non-empty.                                                                                                                                                                                                                                                                                                                                                | FormGroupMixin        |
+| `filled`                             | public    | `boolean`                                                                 | `false`                                                                                                                           | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin)                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | InteractionStateMixin |
+| `_leaveEvent`                        | protected | `string`                                                                  | `'blur'`                                                                                                                          | The event that triggers the touched state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | InteractionStateMixin |
+| `_valueChangedEvent`                 | protected | `string`                                                                  | `'model-value-changed'`                                                                                                           | The event that triggers the dirty state                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | InteractionStateMixin |
+| `submitted`                          | public    | `boolean`                                                                 | `false`                                                                                                                           | True when parent form is submitted                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | FormGroupMixin        |
+| `_inputNode`                         | protected |                                                                           |                                                                                                                                   | The host element with role group (or radio-group or form) containing necessary aria attributes                                                                                                                                                                                                                                                                                                                                                                                                                                                       | FormControlMixin      |
+| `_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         |
+| `focused`                            | public    | `boolean`                                                                 | `false`                                                                                                                           | True when any of the children is focused.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | FormGroupMixin        |
+| `__descriptionElementsInParentChain` | protected |                                                                           | `new Set()`                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin        |
+| `__pendingValues`                    | protected | `{modelValue?:{[key:string]: any}, serializedValue?:{[key:string]: any}}` | `{ modelValue: {}, serializedValue: {} }`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | FormGroupMixin        |
+| `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      |
+| `_requestedToBeDisabled`             | protected | `boolean`                                                                 | `false`                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | DisabledMixin         |
 
 ### Methods
 

package/docs/components/checkbox-group/overview.md

@@ -13,17 +13,17 @@ import '@lion/ui/define/lion-checkbox.js';
 
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
-> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/form/overview.md)'s serialization result.
+> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/checkbox-group/use-cases.md

@@ -35,9 +35,9 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
   name="scientists[]"
   label="Favorite scientists"
 >
-  <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+  <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
@@ -47,9 +47,9 @@ You can pre-select options by targeting the `modelValue` object of the option an
 
 ```html preview-story
 <lion-checkbox-group name="scientists" label="Favorite scientists">
-  <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}" checked></lion-checkbox>
+    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
@@ -59,9 +59,9 @@ You can disable the entire group by setting the `disabled` attribute on the `<li
 
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
-  <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+  <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
 </lion-checkbox-group>
 ```
 
@@ -71,17 +71,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
 
 ```html preview-story
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox .choiceValue=${'Archimedes'}>
+  <lion-checkbox .choiceValue="${'Archimedes'}">
     <label slot="label"
       ><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
     >
   </lion-checkbox>
-  <lion-checkbox .choiceValue=${'Francis Bacon'}>
+  <lion-checkbox .choiceValue="${'Francis Bacon'}">
     <label slot="label"
       ><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
     >
   </lion-checkbox>
-  <lion-checkbox .choiceValue=${'Marie Curie'}>
+  <lion-checkbox .choiceValue="${'Marie Curie'}">
     <label slot="label"
       ><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
     >
@@ -97,17 +97,17 @@ You can add help text on each checkbox with `help-text` attribute on the `<lion-
 <lion-checkbox-group name="scientists[]" label="Favorite scientists">
   <lion-checkbox
     label="Archimedes"
-    .choiceValue=${'Archimedes'}
+    .choiceValue="${'Archimedes'}"
     help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
   ></lion-checkbox>
   <lion-checkbox
     label="Francis Bacon"
-    .choiceValue=${'Francis Bacon'}
+    .choiceValue="${'Francis Bacon'}"
     help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
   ></lion-checkbox>
   <lion-checkbox
     label="Marie Curie"
-    .choiceValue=${'Marie Curie'}
+    .choiceValue="${'Marie Curie'}"
     help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
   ></lion-checkbox>
 </lion-checkbox-group>
@@ -129,9 +129,9 @@ export const event = ({ shadowRoot }) => html`
         4,
       ))}
   >
-    <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-    <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-    <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+    <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+    <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+    <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
   </lion-checkbox-group>
   <br />
   <span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
@@ -147,22 +147,22 @@ A `checkbox-indeterminate`'s value is neither true nor false, but is instead ind
   <lion-checkbox-indeterminate label="Old Greek scientists">
     <lion-checkbox
       label="Archimedes"
-      .choiceValue=${'Archimedes'}
+      .choiceValue="${'Archimedes'}"
     ></lion-checkbox>
-    <lion-checkbox  label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
+    <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
     <lion-checkbox
       label="Pythagoras"
-      .choiceValue=${'Pythagoras'}
+      .choiceValue="${'Pythagoras'}"
     ></lion-checkbox>
   </lion-checkbox-indeterminate>
   <lion-checkbox-indeterminate label="17th Century scientists">
     <lion-checkbox
       label="Isaac Newton"
-      .choiceValue=${'Isaac Newton'}
+      .choiceValue="${'Isaac Newton'}"
     ></lion-checkbox>
     <lion-checkbox
       label="Galileo Galilei"
-      .choiceValue=${'Galileo Galilei'}
+      .choiceValue="${'Galileo Galilei'}"
     ></lion-checkbox>
   </lion-checkbox-indeterminate>
 </lion-checkbox-group>
@@ -175,21 +175,21 @@ The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a chil
   <lion-checkbox-indeterminate label="Scientists">
     <lion-checkbox
       label="Isaac Newton"
-      .choiceValue=${'Isaac Newton'}
+      .choiceValue="${'Isaac Newton'}"
     ></lion-checkbox>
     <lion-checkbox
       label="Galileo Galilei"
-      .choiceValue=${'Galileo Galilei'}
+      .choiceValue="${'Galileo Galilei'}"
     ></lion-checkbox>
     <lion-checkbox-indeterminate  label="Old Greek scientists">
       <lion-checkbox
         label="Archimedes"
-        .choiceValue=${'Archimedes'}
+        .choiceValue="${'Archimedes'}"
       ></lion-checkbox>
-      <lion-checkbox  label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
+      <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
       <lion-checkbox
         label="Pythagoras"
-        .choiceValue=${'Pythagoras'}
+        .choiceValue="${'Pythagoras'}"
       ></lion-checkbox>
     </lion-checkbox-indeterminate>
   </lion-checkbox-indeterminate>
@@ -203,21 +203,21 @@ You can also use `mixed-state` attribute so your indeterminate checkbox toggles
   <lion-checkbox-indeterminate mixed-state label="Scientists">
     <lion-checkbox
       label="Isaac Newton"
-      .choiceValue=${'Isaac Newton'}
+      .choiceValue="${'Isaac Newton'}"
     ></lion-checkbox>
     <lion-checkbox
       label="Galileo Galilei"
-      .choiceValue=${'Galileo Galilei'}
+      .choiceValue="${'Galileo Galilei'}"
     ></lion-checkbox>
     <lion-checkbox-indeterminate mixed-state  label="Old Greek scientists">
       <lion-checkbox
         label="Archimedes"
-        .choiceValue=${'Archimedes'}
+        .choiceValue="${'Archimedes'}"
       ></lion-checkbox>
-      <lion-checkbox  label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
+      <lion-checkbox  label="Plato" .choiceValue="${'Plato'}"></lion-checkbox>
       <lion-checkbox
         label="Pythagoras"
-        .choiceValue=${'Pythagoras'}
+        .choiceValue="${'Pythagoras'}"
       ></lion-checkbox>
     </lion-checkbox-indeterminate>
   </lion-checkbox-indeterminate>

package/docs/components/collapsible/overview.md

@@ -22,7 +22,7 @@ export const main = () => html`
 ## Features
 
 - Use `opened` attribute or `toggle()` method to render default open.
-- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/button/overview.md) or native `button` with custom styling.
+- `invoker` slot can be custom template e.g. our [button](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/button/overview.md) or native `button` with custom styling.
 - Observe the state with the help of `@opened-changed` event.
 - `show()` and `hide()` are helper methods to hide or show the content from outside.
 

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

@@ -39,13 +39,13 @@ export const methods = ({ shadowRoot }) => html`
     </div>
   </lion-collapsible>
   <section style="margin-top:16px">
-    <button @click=${() => shadowRoot.querySelector('#car-collapsible').toggle()}>
+    <button @click="${() => shadowRoot.querySelector('#car-collapsible').toggle()}">
       Toggle content
     </button>
-    <button @click=${() => shadowRoot.querySelector('#car-collapsible').show()}>
+    <button @click="${() => shadowRoot.querySelector('#car-collapsible').show()}">
       Show content
     </button>
-    <button @click=${() => shadowRoot.querySelector('#car-collapsible').hide()}>
+    <button @click="${() => shadowRoot.querySelector('#car-collapsible').hide()}">
       Hide content
     </button>
   </section>