@lion/ui 0.22.0 → 0.24.0

package/docs/fundamentals/systems/localize/overview.md

@@ -3,7 +3,7 @@ parts:
   - Overview
   - Localize
   - Systems
-title: 'Localize: Overview'
+title: 'Overview'
 eleventyNavigation:
   key: Systems >> Localize >> Overview
   title: Overview
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Overview
+# Overview
 
 Is meant to translate text into multiple languages.
 In it's simplest form it is a function that returns the translated text for a namespace + key.
@@ -22,15 +22,15 @@ In it's simplest form it is a function that returns the translated text for a na
 - Formatting of numbers, amounts
 - Formatting of dates
 
-Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/use-cases.md).
+Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

package/docs/fundamentals/systems/localize/rationale.md

@@ -3,7 +3,7 @@ parts:
   - Rationale
   - Localize
   - Systems
-title: 'Localize: Rationale'
+title: 'Rationale'
 eleventyNavigation:
   key: Systems >> Localize >> Rationale
   title: Rationale
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Rationale
+# Rationale
 
 ## Requirements
 

package/docs/fundamentals/systems/localize/text.md

@@ -3,7 +3,7 @@ parts:
   - Translate Text
   - Localize
   - Systems
-title: 'Localize: Translate Text'
+title: 'Translate Text'
 eleventyNavigation:
   key: Systems >> Localize >> Translate Text
   title: Translate Text
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Translate Text
+# Translate Text
 
 ## As a function
 

package/docs/fundamentals/systems/localize/use-cases.md

@@ -3,7 +3,7 @@ parts:
   - Use Cases
   - Localize
   - Systems
-title: 'Localize: Use Cases'
+title: 'Use Cases'
 eleventyNavigation:
   key: Systems >> Localize >> Use Cases
   title: Use Cases
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Localize
 ---
 
-# Localize: Use Cases
+# Use Cases
 
 The localization system helps to manage localization data split into locales and automate its loading.
 The loading of data tries to be as unobtrusive as possible for a typical workflow while providing a flexible and controllable mechanism for non-trivial use cases.

package/docs/fundamentals/systems/overlays/_edge-cases.md

@@ -4,7 +4,7 @@ parts:
   - Edge cases
   - Overlays
   - Systems
-title: 'Overlays: Edge cases'
+title: 'Edge cases'
 eleventyNavigation:
   key: Systems >> Overlays >> Edge cases
   title: Edge cases
@@ -12,7 +12,7 @@ eleventyNavigation:
   parent: Systems >> Overlays
 ---
 
-# Overlays: Edge cases
+# Edge cases
 
 ```js script
 import { html, render, LitElement } from '@mdjs/mdjs-preview';

package/docs/fundamentals/systems/overlays/api-table.md

@@ -17,40 +17,40 @@ eleventyNavigation:
 
 ### Fields
 
-| Name                        | Privacy   | Type                                              | Default                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
-| --------------------------- | --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `backdropNode`              | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The element that is placed behind the contentNode. When not provided and \`hasBackdrop\` is true,
a backdropNode will be automatically created                                                                                                                                                                                                                                        |                |
-| `config`                    | public    | `OverlayConfig`                                   | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `content`                   | public    | `HTMLDialogElement \| HTMLDivElement`             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The contentWrapperNode                                                                                                                                                                                                                                                                                                                                                                    |                |
-| `contentNode`               | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The most important element: the overlay itself                                                                                                                                                                                                                                                                                                                                            |                |
-| `contentWrapperNode`        | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The wrapper element of contentNode, used to supply inline positioning styles. When a Popper
arrow is needed, it acts as parent of the arrow node. Will be automatically created for global
and non projected contentNodes. Required when used in shadow dom mode or when Popper arrow is
supplied. Essential for allowing webcomponents to style their projected contentNodes |                |
-| `elementToFocusAfterHide`   | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The element that should be called \`.focus()\` on after dialog closes                                                                                                                                                                                                                                                                                                                     |                |
-| `elevation`                 | public    | `number`                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `handlesAccessibility`      | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | For non \`isTooltip\`:
 \- sets aria-expanded="true/false" and aria-haspopup="true" on invokerNode
 \- sets aria-controls on invokerNode
 \- returns focus to invokerNode on hide
 \- sets focus to overlay content(?)

For \`isTooltip\`:
 \- sets role="tooltip" and aria-labelledby/aria-describedby on the content                                        |                |
-| `hasActiveBackdrop`         | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `hasBackdrop`               | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Whether it should have a backdrop (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                                        |                |
-| `hidesOnEsc`                | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides the overlay when pressing \[ esc ]                                                                                                                                                                                                                                                                                                                                                  |                |
-| `hidesOnOutsideClick`       | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides the overlay when clicking next to it, exluding invoker                                                                                                                                                                                                                                                                                                                              |                |
-| `hidesOnOutsideEsc`         | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides the overlay when pressing esc, even when contentNode has no focus                                                                                                                                                                                                                                                                                                                   |                |
-| `inheritsReferenceWidth`    | public    | `'max' \| 'full' \| 'min' \| 'none' \| undefined` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Will align contentNode with referenceNode (invokerNode by default) for local overlays.
Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of
referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode.
'full' will make sure that the invoker width always is the same.                                      |                |
-| `invoker`                   | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The invokerNode                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `invokerNode`               | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The interactive element (usually a button) invoking the dialog or tooltip                                                                                                                                                                                                                                                                                                                 |                |
-| `invokerRelation`           | public    | `'label' \| 'description'\| undefined`            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | By default, the tooltip content is a 'description' for the invoker (uses aria-describedby).
Setting this property to 'label' makes the content function as a label (via aria-labelledby)                                                                                                                                                                                              |                |
-| `isAlertDialog`             | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow
to communicate an important message and require a response.                                                                                                                                                                                                                                |                |
-| `isBlocking`                | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
-| `isShown`                   | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `isTooltip`                 | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Has a totally different interaction- and accessibility pattern from all other overlays.
Will behave as role="tooltip" element instead of a role="dialog" element                                                                                                                                                                                                                      |                |
-| `manager`                   | public    |                                                   | `manager`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `placementMode`             | public    | `'global' \| 'local' \| undefined`                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Determines the connection point in DOM (body vs next to invoker).                                                                                                                                                                                                                                                                                                                         |                |
-| `popperConfig`              | public    | `PopperOptions`                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Popper configuration. Will be used when placementMode is 'local'                                                                                                                                                                                                                                                                                                                          |                |
-| `preventsScroll`            | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
-| `referenceNode`             | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The element that is used to position the overlay content relative to. Usually,
this is the same element as invokerNode. Should only be provided when invokerNode should not
be positioned against.                                                                                                                                                                                |                |
-| `trapsKeyboardFocus`        | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Rotates tab, implicitly set when 'isModal'                                                                                                                                                                                                                                                                                                                                                |                |
-| `viewportConfig`            | public    | `ViewportConfig`                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Viewport configuration. Will be used when placementMode is 'global'                                                                                                                                                                                                                                                                                                                       |                |
-| `visibilityTriggerFunction` | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_contentId`                | protected |                                                   | `` `overlay-content--${Math.random().toString(36).slice(2, 10)}` ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_defaultConfig`            | protected | `OverlayConfig`                                   | `{ placementMode: undefined, contentNode: config.contentNode, contentWrapperNode: config.contentWrapperNode, invokerNode: config.invokerNode, backdropNode: config.backdropNode, referenceNode: undefined, elementToFocusAfterHide: config.invokerNode, inheritsReferenceWidth: 'none', hasBackdrop: false, isBlocking: false, preventsScroll: false, trapsKeyboardFocus: false, hidesOnEsc: false, hidesOnOutsideEsc: false, hidesOnOutsideClick: false, isTooltip: false, isAlertDialog: false, invokerRelation: 'description', visibilityTriggerFunction: undefined, handlesAccessibility: false, popperConfig: { placement: 'top', strategy: 'fixed', modifiers: [ { name: 'preventOverflow', enabled: true, options: { boundariesElement: 'viewport', padding: 8, // viewport-margin for shifting/sliding }, }, { name: 'flip', options: { boundariesElement: 'viewport', padding: 16, // viewport-margin for flipping }, }, { name: 'offset', enabled: true, options: { offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement) }, }, { name: 'arrow', enabled: false, }, ], }, viewportConfig: { placement: 'center', }, zIndex: 9999, }` |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_referenceNode`            | protected | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| Name                        | Privacy   | Type                                              | Default                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Description                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
+| --------------------------- | --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `backdropNode`              | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The element that is placed behind the contentNode. When not provided and \`hasBackdrop\` is true,
a backdropNode will be automatically created                                                                                                                                                                                                                                        |                |
+| `config`                    | public    | `OverlayConfig`                                   | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `content`                   | public    | `HTMLDialogElement \| HTMLDivElement`             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The contentWrapperNode                                                                                                                                                                                                                                                                                                                                                                    |                |
+| `contentNode`               | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The most important element: the overlay itself                                                                                                                                                                                                                                                                                                                                            |                |
+| `contentWrapperNode`        | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The wrapper element of contentNode, used to supply inline positioning styles. When a Popper
arrow is needed, it acts as parent of the arrow node. Will be automatically created for global
and non projected contentNodes. Required when used in shadow dom mode or when Popper arrow is
supplied. Essential for allowing webcomponents to style their projected contentNodes |                |
+| `elementToFocusAfterHide`   | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The element that should be called \`.focus()\` on after dialog closes                                                                                                                                                                                                                                                                                                                     |                |
+| `elevation`                 | public    | `number`                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `handlesAccessibility`      | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | For non \`isTooltip\`:
 \- sets aria-expanded="true/false" and aria-haspopup="true" on invokerNode
 \- sets aria-controls on invokerNode
 \- returns focus to invokerNode on hide
 \- sets focus to overlay content(?)

For \`isTooltip\`:
 \- sets role="tooltip" and aria-labelledby/aria-describedby on the content                                        |                |
+| `hasActiveBackdrop`         | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `hasBackdrop`               | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Whether it should have a backdrop (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                                        |                |
+| `hidesOnEsc`                | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Hides the overlay when pressing \[ esc ]                                                                                                                                                                                                                                                                                                                                                  |                |
+| `hidesOnOutsideClick`       | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Hides the overlay when clicking next to it, exluding invoker                                                                                                                                                                                                                                                                                                                              |                |
+| `hidesOnOutsideEsc`         | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Hides the overlay when pressing esc, even when contentNode has no focus                                                                                                                                                                                                                                                                                                                   |                |
+| `inheritsReferenceWidth`    | public    | `'max' \| 'full' \| 'min' \| 'none' \| undefined` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Will align contentNode with referenceNode (invokerNode by default) for local overlays.
Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of
referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode.
'full' will make sure that the invoker width always is the same.                                      |                |
+| `invoker`                   | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The invokerNode                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `invokerNode`               | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The interactive element (usually a button) invoking the dialog or tooltip                                                                                                                                                                                                                                                                                                                 |                |
+| `invokerRelation`           | public    | `'label' \| 'description'\| undefined`            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | By default, the tooltip content is a 'description' for the invoker (uses aria-describedby).
Setting this property to 'label' makes the content function as a label (via aria-labelledby)                                                                                                                                                                                              |                |
+| `isAlertDialog`             | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow
to communicate an important message and require a response.                                                                                                                                                                                                                                |                |
+| `isBlocking`                | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
+| `isShown`                   | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `isTooltip`                 | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Has a totally different interaction- and accessibility pattern from all other overlays.
Will behave as role="tooltip" element instead of a role="dialog" element                                                                                                                                                                                                                      |                |
+| `manager`                   | public    |                                                   | `manager`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `placementMode`             | public    | `'global' \| 'local' \| 'custom' \| undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Determines the connection point in DOM (body vs next to invoker).                                                                                                                                                                                                                                                                                                                         |                |
+| `popperConfig`              | public    | `PopperOptions`                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Popper configuration. Will be used when placementMode is 'local'                                                                                                                                                                                                                                                                                                                          |                |
+| `preventsScroll`            | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
+| `referenceNode`             | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | The element that is used to position the overlay content relative to. Usually,
this is the same element as invokerNode. Should only be provided when invokerNode should not
be positioned against.                                                                                                                                                                                |                |
+| `trapsKeyboardFocus`        | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Rotates tab, implicitly set when 'isModal'                                                                                                                                                                                                                                                                                                                                                |                |
+| `viewportConfig`            | public    | `ViewportConfig`                                  |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Viewport configuration. Will be used when placementMode is 'global'                                                                                                                                                                                                                                                                                                                       |                |
+| `visibilityTriggerFunction` | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_contentId`                | protected |                                                   | `` `overlay-content--${Math.random().toString(36).slice(2, 10)}` ``                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_defaultConfig`            | protected | `OverlayConfig`                                   | `{ placementMode: undefined, contentNode: config.contentNode, contentWrapperNode: config.contentWrapperNode, invokerNode: config.invokerNode, backdropNode: config.backdropNode, referenceNode: undefined, elementToFocusAfterHide: config.invokerNode, inheritsReferenceWidth: 'none', hasBackdrop: false, isBlocking: false, preventsScroll: false, trapsKeyboardFocus: false, hidesOnEsc: false, hidesOnOutsideEsc: false, hidesOnOutsideClick: false, isTooltip: false, isAlertDialog: false, invokerRelation: 'description', visibilityTriggerFunction: undefined, handlesAccessibility: false, popperConfig: { placement: 'top', strategy: 'fixed', modifiers: [ { name: 'preventOverflow', enabled: true, options: { boundariesElement: 'viewport', padding: 8, // viewport-margin for shifting/sliding }, }, { name: 'flip', options: { boundariesElement: 'viewport', padding: 16, // viewport-margin for flipping }, }, { name: 'offset', enabled: true, options: { offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement) }, }, { name: 'arrow', enabled: false, }, ], }, viewportConfig: { placement: 'center', }, zIndex: 9999, isActivated: true, elementToFocusOnShow: false, // This means that content will have visually-hidden / sr-only styles. This is handy for: // - hidden menus that should be "indexable" by screen readers (like the Links list in VO: https://support.apple.com/en-gb/guide/voiceover/mchlp2719/mac) // - "more" menus that put content in a dropdown that do not fit in the current row // - menus that should generally open on tab. // @ts-ignore - hideVisually is an extension property hideVisually: false, requireConnectedNodes: true, // hides children overlays when parent is closed... syncChildrenCloseState: false, // // In next major, we remove this prop. Now we disable it for backwards compatibility and enable it in the places we need it internally // _shouldTeardownDomStructure: false, }` |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_referenceNode`            | protected | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                                                                                                                                                                                                                                                                                                                                                                           |                |
 
 ### Methods
 
@@ -69,6 +69,7 @@ eleventyNavigation:
 | `_handleAccessibility`          | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleBackdrop`               | protected | Sets up backdrop on the given overlay. If there was a backdrop on another element
it is removed. Otherwise this is the first time displaying a backdrop, so a animation-in
animation is played.                                                        | `{ phase }, config: { animation?: boolean, phase: OverlayPhase }`                                |        |                |
 | `_handleBlocking`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_handleElementToFocusOnShow`   | protected |                                                                                                                                                                                                                                                                | `{ phase }, opts: {phase: OverlayPhase}`                                                         | `void` |                |
 | `_handleFeatures`               | protected | All features are handled here.                                                                                                                                                                                                                                 | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleHidesOnEsc`             | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleHidesOnOutsideClick`    | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
@@ -76,6 +77,7 @@ eleventyNavigation:
 | `_handleInheritsReferenceWidth` | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
 | `_handlePosition`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handlePreventsScroll`         | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_handleSyncChildrenCloseState` | protected |                                                                                                                                                                                                                                                                | `{ phase }, opts: {phase: OverlayPhase}`                                                         | `void` |                |
 | `_handleTrapsKeyboardFocus`     | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleVisibilityTriggers`     | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleZIndex`                 | protected | Display local overlays on top of elements with no z-index that appear later in the DOM                                                                                                                                                                         | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
@@ -100,15 +102,15 @@ eleventyNavigation:
 
 ### Fields
 
-| Name                         | Privacy   | Type                     | Default | Description                                                                                                                                                           | Inherited From |
-| ---------------------------- | --------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `config`                     | public    | `Partial<OverlayConfig>` | `{}`    | Configure the many options of the \`OverlayController\`                                                                                                               |                |
-| `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. |                |
-| `_overlayBackdropNode`       | protected |                          |         |                                                                                                                                                                       |                |
-| `_overlayContentNode`        | protected |                          |         |                                                                                                                                                                       |                |
-| `_overlayContentWrapperNode` | protected |                          |         |                                                                                                                                                                       |                |
-| `_overlayInvokerNode`        | protected |                          |         |                                                                                                                                                                       |                |
-| `_overlayReferenceNode`      | protected |                          |         |                                                                                                                                                                       |                |
+| Name                         | Privacy   | Type                     | Default | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
+| ---------------------------- | --------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `config`                     | public    | `Partial<OverlayConfig>` | `{}`    | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   |                |
+| `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.                                                                                                                                                                                                                                     |                |
+| `_overlayBackdropNode`       | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_overlayContentNode`        | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_overlayContentWrapperNode` | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_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]\` |                |
+| `_overlayReferenceNode`      | protected |                          |         |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
 
 ### Methods
 
@@ -120,6 +122,7 @@ eleventyNavigation:
 | `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     |                |
 | `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` |                |
 | `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     |                |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     |                |
 | `_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>`  |                |
 | `_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`                                                                                         |                     |                |
 | `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |

package/docs/fundamentals/systems/overlays/configuration.md

@@ -3,7 +3,7 @@ parts:
   - Configuration
   - Overlays
   - Systems
-title: 'Overlays: Configuration'
+title: 'Configuration'
 eleventyNavigation:
   key: Systems >> Overlays >> Configuration
   title: Configuration
@@ -11,7 +11,7 @@ eleventyNavigation:
   parent: Systems >> Overlays
 ---
 
-# Overlays: Configuration
+# Configuration
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -112,7 +112,7 @@ export const alertDialog = () => {
 
 ## isTooltip (placementMode: 'local')
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
+As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/overlays/rationale.md) there are only two official types of overlays: dialogs and tooltips. And their main differences are:
 
 - Dialogs have a modal option, tooltips don’t
 - Dialogs have interactive content, tooltips don’t
@@ -446,7 +446,7 @@ Features:
 
 > Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the data-popper-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/tooltip/overview.md), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/tooltip/overview.md), where an arrow is set by default.
 
 To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
 Here's a succinct overview of some often used popper properties: