@lion/ui 0.11.0 → 0.11.2

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Format Numbers
+  - Localize
+  - Systems
+title: 'Localize: Format Numbers'
+eleventyNavigation:
+  key: Systems >> Localize >> Format Numbers
+  title: Format Numbers
+  order: 30
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Format Numbers ||30
 
 ## Features

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Overview
+  - Localize
+  - Systems
+title: 'Localize: Overview'
+eleventyNavigation:
+  key: Systems >> Localize >> Overview
+  title: Overview
+  order: 10
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Overview ||10
 
 Is meant to translate text into multiple languages.
@@ -9,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/eea6726289ec879c9d99d3ada1043cbd42704557/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/87a1cb4d5bec301af6688be2c7bf778344d2ae42/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/eea6726289ec879c9d99d3ada1043cbd42704557/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/eea6726289ec879c9d99d3ada1043cbd42704557/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/eea6726289ec879c9d99d3ada1043cbd42704557/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/87a1cb4d5bec301af6688be2c7bf778344d2ae42/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/87a1cb4d5bec301af6688be2c7bf778344d2ae42/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/87a1cb4d5bec301af6688be2c7bf778344d2ae42/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Rationale
+  - Localize
+  - Systems
+title: 'Localize: Rationale'
+eleventyNavigation:
+  key: Systems >> Localize >> Rationale
+  title: Rationale
+  order: 60
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Rationale ||60
 
 ## Requirements

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Translate Text
+  - Localize
+  - Systems
+title: 'Localize: Translate Text'
+eleventyNavigation:
+  key: Systems >> Localize >> Translate Text
+  title: Translate Text
+  order: 20
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Translate Text ||20
 
 ## As a function

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Use Cases
+  - Localize
+  - Systems
+title: 'Localize: Use Cases'
+eleventyNavigation:
+  key: Systems >> Localize >> Use Cases
+  title: Use Cases
+  order: 50
+  parent: Systems >> Localize
+---
+
 # Systems >> Localize >> Use Cases ||50
 
 The localization system helps to manage localization data split into locales and automate its loading.

package/docs/fundamentals/systems/overlays/_configuration-positioning.md

@@ -1,5 +1,16 @@
 ---
 eleventyExcludeFromCollections: true
+parts:
+  - Positioning
+  - Configuration
+  - Overlays
+  - Systems
+title: 'Configuration: Positioning'
+eleventyNavigation:
+  key: Systems >> Overlays >> Configuration >> Positioning
+  title: Positioning
+  order: 40
+  parent: Systems >> Overlays >> Configuration
 ---
 
 # Systems >> Overlays >> Configuration >> Positioning ||40

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

@@ -1,5 +1,15 @@
 ---
 eleventyExcludeFromCollections: true
+parts:
+  - Edge cases
+  - Overlays
+  - Systems
+title: 'Overlays: Edge cases'
+eleventyNavigation:
+  key: Systems >> Overlays >> Edge cases
+  title: Edge cases
+  order: 10
+  parent: Systems >> Overlays
 ---
 
 # Systems >> Overlays >> Edge cases ||10

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

@@ -1,4 +1,17 @@
-# Systems >> Overlays >> API Table ||90 
+---
+parts:
+  - API Table
+  - Overlays
+  - Systems
+title: 'Overlays: API Table'
+eleventyNavigation:
+  key: API Table >> Overlays >> Systems
+  title: API Table
+  order: 90
+  parent: Systems >> Overlays
+---
+# Overlays: API Table
+ 
 
 ## class: `OverlayController`
 
@@ -6,73 +19,72 @@
 
 | Name                          | Privacy   | Type                                              | Default                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
 | ----------------------------- | --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `invoker`                     | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The invokerNode                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `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                                                                                                                                                                                                                                                                                                                                                                    |                |
-| `placementMode`               | public    | `'global' \| 'local' \| undefined`                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Determines the connection point in DOM (body vs next to invoker).                                                                                                                                                                                                                                                                                                                         |                |
-| `invokerNode`                 | public    | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The interactive element (usually a button) invoking the dialog or tooltip                                                                                                                                                                                                                                                                                                                 |                |
-| `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.                                                                                                                                                                                |                |
 | `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 |                |
-| `backdropNode`                | public    | `HTMLElement`                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | The element that is placed behind the contentNode. When not provided and \`hasBackdrop\` is true,
a backdropNode will be automatically created                                                                                                                                                                                                                                        |                |
 | `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    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `hasActiveTrapsKeyboardFocus` | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
 | `hasBackdrop`                 | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Whether it should have a backdrop (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                                        |                |
-| `isBlocking`                  | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
-| `preventsScroll`              | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController)                                                                                                                                                                                                                                                                                             |                |
-| `trapsKeyboardFocus`          | public    | `boolean`                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Rotates tab, implicitly set when 'isModal'                                                                                                                                                                                                                                                                                                                                                |                |
 | `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.                                      |                |
-| `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                                        |                |
-| `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                                                                                                                                                                                                                      |                |
-| `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.                                                                                                                                                                                                                                |                |
+| `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    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_referenceNode`              | protected | `HTMLElement \| undefined`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `elevation`                   | public    | `number`                                          |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `isShown`                     | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `hasActiveBackdrop`           | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `hasActiveTrapsKeyboardFocus` | public    |                                                   |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `manager`                     | public    |                                                   | `manager`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `config`                      | public    | `OverlayConfig`                                   | `{}`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                           |                |
-| `_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, }` |                                                                                                                                                                                                                                                                                                                                                                                           |                |
 | `_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`                        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                           |                |
 
 ### Methods
 
 | Name                            | Privacy   | Description                                                                                                                                                                                                                                                    | Parameters                                                                                       | Return | Inherited From |
 | ------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------ | -------------- |
-| `updateConfig`                  | public    | Allows to dynamically change the overlay configuration. Needed in case the
presentation of the overlay changes depending on screen size.
Note that this method is the only allowed way to update a configuration of an
OverlayController instance. | `cfgToAdd: OverlayConfig`                                                                        |        |                |
-| `_init`                         | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
-| `_handleZIndex`                 | protected | Display local overlays on top of elements with no z-index that appear later in the DOM                                                                                                                                                                         | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `show`                          | public    |                                                                                                                                                                                                                                                                | `elementToFocusAfterHide: HTMLElement`                                                           |        |                |
-| `_handlePosition`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `_keepBodySize`                 | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `disableTrapsKeyboardFocus`     | public    |                                                                                                                                                                                                                                                                | `{ findNewTrap = true }`                                                                         |        |                |
+| `enableTrapsKeyboardFocus`      | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
 | `hide`                          | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `show`                          | public    |                                                                                                                                                                                                                                                                | `elementToFocusAfterHide: HTMLElement`                                                           |        |                |
+| `teardown`                      | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `toggle`                        | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
 | `transitionHide`                | public    | Method to be overriden by subclassers                                                                                                                                                                                                                          | `hideConfig: {backdropNode:HTMLElement, contentNode:HTMLElement}`                                |        |                |
-| `_transitionHide`               | protected |                                                                                                                                                                                                                                                                | `{ backdropNode, contentNode }, hideConfig: {backdropNode:HTMLElement, contentNode:HTMLElement}` |        |                |
 | `transitionShow`                | public    | To be overridden by subclassers                                                                                                                                                                                                                                | `showConfig: {backdropNode:HTMLElement; contentNode:HTMLElement}`                                |        |                |
-| `_transitionShow`               | protected |                                                                                                                                                                                                                                                                | `showConfig: {backdropNode:HTMLElement; contentNode:HTMLElement}`                                |        |                |
-| `_restoreFocus`                 | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
-| `toggle`                        | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
-| `_handleFeatures`               | protected | All features are handled here.                                                                                                                                                                                                                                 | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `_handleVisibilityTriggers`     | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `_handlePreventsScroll`         | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `_handleBlocking`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `updateConfig`                  | public    | Allows to dynamically change the overlay configuration. Needed in case the
presentation of the overlay changes depending on screen size.
Note that this method is the only allowed way to update a configuration of an
OverlayController instance. | `cfgToAdd: OverlayConfig`                                                                        |        |                |
+| `_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 }`                                |        |                |
-| `_handleTrapsKeyboardFocus`     | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `enableTrapsKeyboardFocus`      | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
-| `disableTrapsKeyboardFocus`     | public    |                                                                                                                                                                                                                                                                | `{ findNewTrap = true }`                                                                         |        |                |
-| `__escKeyHandler`               | protected |                                                                                                                                                                                                                                                                | `event: KeyboardEvent`                                                                           | `void` |                |
+| `_handleBlocking`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_handleFeatures`               | protected | All features are handled here.                                                                                                                                                                                                                                 | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleHidesOnEsc`             | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_handleHidesOnOutsideClick`    | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleHidesOnOutsideEsc`      | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
 | `_handleInheritsReferenceWidth` | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
-| `_handleHidesOnOutsideClick`    | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `_handleAccessibility`          | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
-| `teardown`                      | public    |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `_handlePosition`               | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_handlePreventsScroll`         | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_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 }`                                                     |        |                |
 | `_hasDisabledInvoker`           | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `_init`                         | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `_keepBodySize`                 | protected |                                                                                                                                                                                                                                                                | `{ phase }, config: { phase: OverlayPhase }`                                                     |        |                |
+| `_restoreFocus`                 | protected |                                                                                                                                                                                                                                                                |                                                                                                  |        |                |
+| `_transitionHide`               | protected |                                                                                                                                                                                                                                                                | `{ backdropNode, contentNode }, hideConfig: {backdropNode:HTMLElement, contentNode:HTMLElement}` |        |                |
+| `_transitionShow`               | protected |                                                                                                                                                                                                                                                                | `showConfig: {backdropNode:HTMLElement; contentNode:HTMLElement}`                                |        |                |
 
 ### Events
 
@@ -99,16 +111,16 @@
 | Name                                  | Privacy | Description                      | Parameters                                                                                                 | Return              | Inherited From |
 | ------------------------------------- | ------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------- | -------------- |
 | `add`                                 | public  | Registers an overlay controller. | `ctrlToAdd: OverlayController`                                                                             | `OverlayController` |                |
-| `remove`                              | public  |                                  | `ctrlToRemove: OverlayController`                                                                          |                     |                |
-| `show`                                | public  |                                  | `ctrlToShow: OverlayController`                                                                            |                     |                |
-| `hide`                                | public  |                                  | `ctrlToHide: any`                                                                                          |                     |                |
-| `teardown`                            | public  |                                  |                                                                                                            |                     |                |
 | `disableTrapsKeyboardFocusForAll`     | public  |                                  |                                                                                                            |                     |                |
-| `informTrapsKeyboardFocusGotEnabled`  | public  |                                  | `placementMode: 'local' \| 'global' \| undefined`                                                          |                     |                |
+| `hide`                                | public  |                                  | `ctrlToHide: any`                                                                                          |                     |                |
 | `informTrapsKeyboardFocusGotDisabled` | public  |                                  | `{ disabledCtrl, findNewTrap = true }, options: { disabledCtrl?:OverlayController, findNewTrap?:boolean }` |                     |                |
-| `requestToPreventScroll`              | public  | PreventsScroll                   |                                                                                                            |                     |                |
+| `informTrapsKeyboardFocusGotEnabled`  | public  |                                  | `placementMode: 'local' \| 'global' \| undefined`                                                          |                     |                |
+| `remove`                              | public  |                                  | `ctrlToRemove: OverlayController`                                                                          |                     |                |
 | `requestToEnableScroll`               | public  |                                  |                                                                                                            |                     |                |
+| `requestToPreventScroll`              | public  | PreventsScroll                   |                                                                                                            |                     |                |
 | `requestToShowOnly`                   | public  | Blocking                         | `blockingCtrl: OverlayController`                                                                          |                     |                |
 | `retractRequestToShowOnly`            | public  |                                  | `blockingCtrl: OverlayController`                                                                          |                     |                |
+| `show`                                | public  |                                  | `ctrlToShow: OverlayController`                                                                            |                     |                |
+| `teardown`                            | public  |                                  |                                                                                                            |                     |                |
 
 <hr/>

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

@@ -1,3 +1,16 @@
+---
+parts:
+  - Configuration
+  - Overlays
+  - Systems
+title: 'Overlays: Configuration'
+eleventyNavigation:
+  key: Systems >> Overlays >> Configuration
+  title: Configuration
+  order: 40
+  parent: Systems >> Overlays
+---
+
 # Systems >> Overlays >> Configuration ||40
 
 ```js script
@@ -99,7 +112,7 @@ export const alertDialog = () => {
 
 ## isTooltip (placementMode: 'local')
 
-As specified in the [overlay rationale](https://github.com/ing-bank/lion/blob/eea6726289ec879c9d99d3ada1043cbd42704557/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/87a1cb4d5bec301af6688be2c7bf778344d2ae42/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
@@ -430,7 +443,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/eea6726289ec879c9d99d3ada1043cbd42704557/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/87a1cb4d5bec301af6688be2c7bf778344d2ae42/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:

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

@@ -1,3 +1,15 @@
+---
+parts:
+  - Overlays
+  - Systems
+title: 'Systems: Overlays'
+eleventyNavigation:
+  key: Systems >> Overlays
+  title: Overlays
+  order: 40
+  parent: Systems
+---
+
 # Systems >> Overlays ||40
 
 -> go to Overview