@lion/ui 0.22.0 → 0.23.0

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

@@ -31,11 +31,11 @@ import '@lion/ui/define/lion-checkbox.js';
 </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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)'s serialization result.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/fieldset/overview.md),
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/fieldset/overview.md),
 it has all the features a fieldset has.
 
 ## Installation

package/docs/components/collapsible/overview.md

@@ -34,7 +34,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/1e44a873eb492168e7e3d2f5c120371d950b9e03/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/4649554021224763994601dd8d202c511d35013e/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/combobox/api-table.md

@@ -20,8 +20,10 @@ eleventyNavigation:
 | ---------------------------- | --------- | ---------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `allowCustomChoice`          | public    | `boolean`                          |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
 | `autocomplete`               | public    | `'none'\|'list'\|'inline'\|'both'` | `'both'` | When "list", will filter listbox suggestions based on textbox value.
When "both", an inline completion string will be added to the textbox as well.                                                                                                                                                                                                                                                              |                |
+| `config`                     | public    | `Partial<OverlayConfig>`           | `{}`     | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                              | OverlayMixin   |
 | `matchMode`                  | public    | `'begin'\|'all'`                   | `'all'`  | When typing in the textbox, will by default be set on 'begin',&#xA;only matching the beginning part in suggestion list.&#xA;=> 'a' will match 'apple' from \['apple', 'pear', 'citrus'].&#xA;When set to 'all', will match middle of the word as well&#xA;=> 'a' will match 'apple' and 'pear'                                                                                                                       |                |
 | `modelValue`                 | public    |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
+| `opened`                     | public    | `boolean`                          | `false`  | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                                | OverlayMixin   |
 | `requireOptionMatch`         | public    | `boolean`                          | `true`   | If set to false, the value is allowed to not match any of the options.&#xA;We set the default to true for backwards compatibility                                                                                                                                                                                                                                                                                    |                |
 | `rotateKeyboardNavigation`   | public    | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
 | `selectionFollowsFocus`      | public    | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
@@ -37,55 +39,66 @@ eleventyNavigation:
 | `_listboxNode`               | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
 | `_listboxReceivesNoFocus`    | protected | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
 | `_noTypeAhead`               | protected | `boolean`                          | `true`   |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_overlayContentNode`        | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_overlayInvokerNode`        | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `_overlayReferenceNode`      | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
+| `_overlayBackdropNode`       | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | OverlayMixin   |
+| `_overlayContentNode`        | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | OverlayMixin   |
+| `_overlayContentWrapperNode` | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | OverlayMixin   |
+| `_overlayInvokerNode`        | protected |                                    |          | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\`            | OverlayMixin   |
+| `_overlayReferenceNode`      | protected |                                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                      | OverlayMixin   |
 | `_selectionDisplayNode`      | protected | `SelectionDisplay \| null`         |          |                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
 
 ### Methods
 
-| Name                          | Privacy   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Parameters                                                                                          | Return    | Inherited From |
-| ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------- | -------------- |
-| `clear`                       | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `matchCondition`              | public    | When the preconfigurable \`match-mode\` conditions are not sufficient,&#xA;one can define a custom matching function.                                                                                                                                                                                                                                                                                                                                                                                                                 | `option: LionOption, textboxValue: string`                                                          |           |                |
-| `parser`                      | public    | Converts viewValue to modelValue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `value: string\|string[]`                                                                           | `*`       |                |
-| `reset`                       | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_autoSelectCondition`        | protected | When this condition is false, an end user will have to manually select a suggested&#xA;option from the list (by default when autocomplete is 'none' or 'list').&#xA;For autocomplete 'both' or 'inline', it will automatically select on a match.                                                                                                                                                                                                                                                                                     |                                                                                                     |           |                |
-| `_defineOverlayConfig`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_enhanceLightDomClasses`     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_getTextboxValueFromOption`  | protected | Return the value to be used for the input value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption`                                                                                | `string`  |                |
-| `_groupTwoTemplate`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_handleAutocompletion`       | protected | Handles autocompletion. This entails:&#xA;- list: shows a list on keydown character press&#xA;- filter: filters list of potential matches according to matchmode or provided matchCondition&#xA;- focus: automatically focuses closest match (makes it the activedescendant)&#xA;- check: automatically checks/selects closest match when selection-follows-focus is enabled&#xA;(this is the default configuration)&#xA;- complete: completes the textbox value inline (the 'missing characters' will be added as&#xA;selected text) |                                                                                                     |           |                |
-| `_highlightMatchedOption`     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element, matchingString: string`                                                           |           |                |
-| `_inputGroupInputTemplate`    | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_listboxOnClick`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: MouseEvent`                                                                                    |           |                |
-| `_listboxOnKeyDown`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                 |           |                |
-| `_onFilterMatch`              | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, matchingString: string`                        |           |                |
-| `_onFilterUnmatch`            | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, curValue: string, prevValue: string`           |           |                |
-| `_onKeyUp`                    | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                 |           |                |
-| `_onListboxContentChanged`    | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_overlayListboxTemplate`     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_repropagationCondition`     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `target: FormControlHost`                                                                           |           |                |
-| `_resetListboxOptions`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_setTextboxValue`            | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `v: string`                                                                                         |           |                |
-| `_setupListboxNode`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_setupOpenCloseListeners`    | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_setupOverlayCtrl`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_showOverlayCondition`       | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{ lastKey }, options: { currentValue?: string, lastKey?: string }`                                 | `boolean` |                |
-| `_syncToTextboxCondition`     | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string\|string[], oldModelValue: string\|string[], { phase }, config: {phase?:string}` |           |                |
-| `_syncToTextboxMultiple`      | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string[], oldModelValue: string[]`                                                     |           |                |
-| `_teardownOpenCloseListeners` | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_teardownOverlayCtrl`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                     |           |                |
-| `_textboxOnClick`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: FocusEvent`                                                                                    |           |                |
-| `_textboxOnInput`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: Event`                                                                                         |           |                |
-| `_textboxOnKeydown`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                 |           |                |
-| `_unhighlightMatchedOption`   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element`                                                                                   |           |                |
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `clear`                            | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                              |                     | OverlayMixin   |
+| `matchCondition`                   | public    | When the preconfigurable \`match-mode\` conditions are not sufficient,&#xA;one can define a custom matching function.                                                                                                                                                                                                                                                                                                                                                                                                                 | `option: LionOption, textboxValue: string`                                                                   |                     |                |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                                              |                     | OverlayMixin   |
+| `parser`                           | public    | Converts viewValue to modelValue                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `value: string\|string[]`                                                                                    | `*`                 |                |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                                                                                                                                                                                                                                   |                                                                                                              |                     | OverlayMixin   |
+| `reset`                            | public    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                              |                     | OverlayMixin   |
+| `_autoSelectCondition`             | protected | When this condition is false, an end user will have to manually select a suggested&#xA;option from the list (by default when autocomplete is 'none' or 'list').&#xA;For autocomplete 'both' or 'inline', it will automatically select on a match.                                                                                                                                                                                                                                                                                     |                                                                                                              |                     |                |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_enhanceLightDomClasses`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_getTextboxValueFromOption`       | protected | Return the value to be used for the input value                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption`                                                                                         | `string`            |                |
+| `_groupTwoTemplate`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_handleAutocompletion`            | protected | Handles autocompletion. This entails:&#xA;- list: shows a list on keydown character press&#xA;- filter: filters list of potential matches according to matchmode or provided matchCondition&#xA;- focus: automatically focuses closest match (makes it the activedescendant)&#xA;- check: automatically checks/selects closest match when selection-follows-focus is enabled&#xA;(this is the default configuration)&#xA;- complete: completes the textbox value inline (the 'missing characters' will be added as&#xA;selected text) |                                                                                                              |                     |                |
+| `_highlightMatchedOption`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element, matchingString: string`                                                                    |                     |                |
+| `_inputGroupInputTemplate`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
+| `_listboxOnClick`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: MouseEvent`                                                                                             |                     |                |
+| `_listboxOnKeyDown`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
+| `_onFilterMatch`                   | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, matchingString: string`                                 |                     |                |
+| `_onFilterUnmatch`                 | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: LionOption & {__originalInnerHTML?:string}, curValue: string, prevValue: string`                    |                     |                |
+| `_onKeyUp`                         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
+| `_onListboxContentChanged`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_overlayListboxTemplate`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_repropagationCondition`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `target: FormControlHost`                                                                                    |                     |                |
+| `_resetListboxOptions`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops.                                                                                                                                                                                                            | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `_setTextboxValue`                 | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `v: string`                                                                                                  |                     |                |
+| `_setupListboxNode`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     |                |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
+| `_showOverlayCondition`            | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `{ lastKey }, options: { currentValue?: string, lastKey?: string }`                                          | `boolean`           |                |
+| `_syncToTextboxCondition`          | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string\|string[], oldModelValue: string\|string[], { phase }, config: {phase?:string}`          |                     |                |
+| `_syncToTextboxMultiple`           | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `modelValue: string[], oldModelValue: string[]`                                                              |                     |                |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                              |                     | OverlayMixin   |
+| `_textboxOnClick`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: FocusEvent`                                                                                             |                     |                |
+| `_textboxOnInput`                  | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: Event`                                                                                                  |                     |                |
+| `_textboxOnKeydown`                | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `ev: KeyboardEvent`                                                                                          |                     |                |
+| `_unhighlightMatchedOption`        | protected |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `option: Element`                                                                                            |                     |                |
 
 ### Events
 
 | Name                  | Type          | Description | Inherited From |
 | --------------------- | ------------- | ----------- | -------------- |
 | `model-value-changed` | `CustomEvent` |             |                |
+| `opened-changed`      | `CustomEvent` |             | OverlayMixin   |
 
 ### Attributes
 
@@ -97,6 +110,7 @@ eleventyNavigation:
 | `requireOptionMatch`             | requireOptionMatch               |                |
 | `allow-custom-choice`            | allowCustomChoice                |                |
 | `__shouldAutocompleteNextUpdate` | \_\_shouldAutocompleteNextUpdate |                |
+| `opened`                         | opened                           | OverlayMixin   |
 
 ### Slots
 

package/docs/components/combobox/overview.md

@@ -46,7 +46,7 @@ export const main = () => html`
 `;
 ```
 
-[...show more](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/combobox/extensions.md)
+[...show more](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/combobox/extensions.md)
 
 ## Features
 

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

@@ -558,4 +558,4 @@ export const complexObjectChoiceValue = () =>
 ## Listbox compatibility
 
 All configurations that can be applied to `lion-listbox`, can be applied to `lion-combobox` as well.
-See the [listbox documentation](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/listbox/overview.md) for more information.
+See the [listbox documentation](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/listbox/overview.md) for more information.

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

@@ -16,20 +16,46 @@ eleventyNavigation:
 
 ### Fields
 
-| Name            | Privacy | Type      | Default | Description | Inherited From |
-| --------------- | ------- | --------- | ------- | ----------- | -------------- |
-| `isAlertDialog` | public  | `boolean` | `false` |             |                |
+| Name                         | Privacy   | Type                     | Default | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
+| ---------------------------- | --------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `config`                     | public    | `Partial<OverlayConfig>` | `{}`    | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `isAlertDialog`              | public    | `boolean`                | `false` |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `opened`                     | public    | `boolean`                | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                     | OverlayMixin   |
+| `_overlayBackdropNode`       | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentNode`        | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentWrapperNode` | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayInvokerNode`        | protected |                          |         | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\` | OverlayMixin   |
+| `_overlayReferenceNode`      | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
 
 ### Methods
 
-| Name                   | Privacy   | Description | Parameters | Return | Inherited From |
-| ---------------------- | --------- | ----------- | ---------- | ------ | -------------- |
-| `_defineOverlayConfig` | protected |             |            |        |                |
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+
+### Events
+
+| Name             | Type          | Description | Inherited From |
+| ---------------- | ------------- | ----------- | -------------- |
+| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
 
 ### Attributes
 
 | Name              | Field         | Inherited From |
 | ----------------- | ------------- | -------------- |
 | `is-alert-dialog` | isAlertDialog |                |
+| `opened`          | opened        | OverlayMixin   |
 
 <hr/>

package/docs/components/dialog/overview.md

@@ -66,6 +66,6 @@ import '@lion/ui/define/lion-dialog.js';
 ## Changing the configuration
 
 You can use the `.config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/overlays/configuration.md).
+The documentation of the full config object can be found in the `overlays` folder or here in [Overlay System - Configuration](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/overlays/configuration.md).
 
 The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.

package/docs/components/fieldset/overview.md

@@ -32,9 +32,9 @@ export const main = () => html`
 
 We have three specific fieldset implementations:
 
-- [form](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/radio-group/overview.md)
+- [form](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/radio-group/overview.md)
 
 A native fieldset element should always have a legend-element for a11y purposes.
 However, our fieldset element is not native and should not have a legend-element.
@@ -43,8 +43,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 ## Features
 
 - Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 

package/docs/components/form/overview.md

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

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

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

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

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

package/docs/components/input/overview.md

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

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

@@ -19,6 +19,7 @@ eleventyNavigation:
 | Name                       | Privacy   | Type                  | Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
 | -------------------------- | --------- | --------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
 | `currency`                 | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
+| `currencyLabel`            | public    | `string`              | `''`           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `formatter`                | public    |                       | `formatAmount` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `locale`                   | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
 | `modelValue`               | public    |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
@@ -53,12 +54,13 @@ eleventyNavigation:
 
 ### Attributes
 
-| Name          | Field       | Inherited From |
-| ------------- | ----------- | -------------- |
-| `currency`    | currency    |                |
-| `modelValue`  | modelValue  |                |
-| `readonly`    | readOnly    | LionInput      |
-| `type`        | type        | LionInput      |
-| `placeholder` | placeholder | LionInput      |
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `currency`       | currency      |                |
+| `currency-label` | currencyLabel |                |
+| `modelValue`     | modelValue    |                |
+| `readonly`       | readOnly      | LionInput      |
+| `type`           | type          | LionInput      |
+| `placeholder`    | placeholder   | LionInput      |
 
 <hr/>

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

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

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

@@ -32,13 +32,24 @@ export const negativeNumber = () => html`
 `;
 ```
 
-## Set currency label
+## Set currency
 
-You can optionally set a currency label with the `currency` attribute, which is visible in the after slot by default.
+You can optionally set a currency with the `currency` attribute, which is visible in the after slot by default.
+
+```html preview-story
+<lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
+```
+
+### Set currency label
 
 ```js preview-story
-export const currencySuffix = () => html`
-  <lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
+export const currencySymbol = () => html`
+  <lion-input-amount
+    label="Price"
+    currency="USD"
+    currency-label="$"
+    .modelValue="${123456.78}"
+  ></lion-input-amount>
 `;
 ```