@lion/ui 0.22.0 → 0.23.0

package/docs/components/menu/src/DemoToolbar.js

@@ -0,0 +1,101 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-relative-packages */
+import { LionMenu } from '@lion/ui/menu.js';
+import {
+  setChecked,
+  toggleChecked,
+} from '../../../../packages/ui/components/menu/src/utils/listItemInteractions.js';
+
+/**
+ * @typedef {import('../../../../packages/ui/components/menu/types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
+ */
+
+// @ts-ignore - class extension properties mismatch at the OverlayWithListInvokerMixin boundary
+export class DemoToolbar extends LionMenu {
+  constructor() {
+    super();
+
+    this._listRole = 'toolbar';
+    this.bar = true;
+  }
+
+  /**
+   * Allows groups ([role=radiogroup|checkboxgroup]) within one level.
+   * In case we deal with [role=checkbox], we treat it as multiple choice group
+   * @override InteractiveListMixin
+   * @param {number} index
+   */
+  setCheckedIndex(index) {
+    const item = this.listItems[index];
+    if (item) {
+      // @ts-ignore - InteractiveListItemRole type
+      const role = /** @type {InteractiveListItemRole} */ (item.getAttribute('role'));
+      let listItemsWithinGroup = this.listItems;
+      let { multiple } = this;
+      if (role === 'radio' || role === 'checkbox') {
+        /**
+         * If index = 1 (radio 'Red'), closest group will be div[role=radiogroup]
+         * @example
+         * <demo-toolbar>
+         *   <div role="radiogroup" aria-label="Text Color">
+         *     <button role="radio" aria-checked="false">Blue</button>
+         *     <button role="radio" aria-checked="true">Red</button>
+         *     <button role="radio" aria-checked="false">Green</button>
+         *   </div>
+         *   <div role="separator"></div>
+         *   <div role="checkboxgroup" aria-label="Text Color">
+         *     <button role="checkbox" aria-checked="false">Blue</button>
+         *     <button role="checkbox" aria-checked="true">Red</button>
+         *     <button role="checkbox" aria-checked="false">Green</button>
+         *   </div>
+         * </demo-toolbar>
+         */
+        let closestGroup;
+        if (role === 'radio') {
+          closestGroup = item.closest('[role="radiogroup"]');
+        } else if (role === 'checkbox') {
+          closestGroup = item.closest('[role="checkboxgroup"]');
+        }
+
+        const group = closestGroup && this.contains(closestGroup) ? closestGroup : this;
+        listItemsWithinGroup = this.listItems.filter(listItem => group.contains(listItem));
+        multiple = role === 'checkbox';
+      }
+
+      if (!multiple) {
+        // Uncheck all
+        listItemsWithinGroup.forEach(listItem => {
+          setChecked(listItem, true);
+        });
+        setChecked(this.listItems[index]);
+      } else {
+        toggleChecked(this.listItems[index]);
+      }
+    }
+  }
+
+  /**
+   * @param {*} newItems
+   */
+  _initListItems(newItems) {
+    super._initListItems(newItems);
+
+    // @ts-ignore - forEach parameter
+    newItems.forEach(item => {
+      if (
+        item.getAttribute('role') === 'button' ||
+        (item.tagName === 'BUTTON' && !item.hasAttribute('role'))
+      ) {
+        const initialAriaPressed = item.getAttribute('aria-pressed');
+        item.setAttribute('aria-pressed', initialAriaPressed || 'false');
+
+        item.addEventListener('click', () => {
+          const ariaPressed = item.getAttribute('aria-pressed') === 'true';
+          item.setAttribute('aria-pressed', `${!ariaPressed}`);
+        });
+      }
+    });
+  }
+}
+
+customElements.define('demo-toolbar', DemoToolbar);

package/docs/components/menu/src/DemoTree.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-relative-packages */
+import { LitElement } from 'lit';
+import { MultiLevelListMixin } from '../../../../packages/ui/components/menu/src/MultiLevelListMixin.js';
+
+// @ts-ignore - class extension with mixin
+export class DemoTree extends MultiLevelListMixin(LitElement) {
+  constructor() {
+    super();
+
+    /** @configure InteractiveListMixin */
+    this._listRole = 'tree';
+    /** @configure InteractiveListMixin */
+    this._activateOnTypedChars = true;
+    /** @configure DisclosureMixin */
+    this.invokerInteraction = 'click';
+  }
+
+  /**
+   * @param {*} changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('level')) {
+      if (this.level > 1) {
+        this._listNode.setAttribute('role', 'group');
+      }
+      this.__setAriaLevelForListItems();
+    }
+  }
+
+  /**
+   * @param {*} newItems
+   */
+  _initListItems(newItems) {
+    // @ts-ignore - parameter types
+    super._initListItems(newItems);
+
+    this.__setAriaLevelForListItems();
+    // @ts-ignore - forEach parameters
+    newItems.forEach((item, index) => {
+      item.setAttribute('aria-posinset', `${index + 1}`);
+      item.setAttribute('aria-setsize', `${this.listItems.length}`);
+    });
+  }
+
+  __setAriaLevelForListItems() {
+    this.listItems.forEach(item => {
+      item.setAttribute?.('aria-level', `${this.level + 1}`);
+    });
+  }
+}
+
+customElements.define('demo-tree', DemoTree);

package/docs/components/menu/src/navigation-bar-types.js

@@ -0,0 +1,41 @@
+/**
+ * @typedef {'mobile' | 'desktop'} NavBarResponsiveMode
+ * Responsive mode for the navigation bar
+ */
+
+/**
+ * @typedef {Object} MenuItem
+ * Navigation menu item
+ * @property {string} [id] - Optional unique identifier
+ * @property {string} title - Display title of the menu item
+ * @property {string} [link] - URL for the menu item (for leaf items)
+ * @property {MenuItem[]} [sub] - Submenu items (for parent items)
+ */
+
+/**
+ * @typedef {Object} CtaLink
+ * Call-to-action link
+ * @property {string} [id] - Optional unique identifier
+ * @property {string} [href] - URL for the CTA
+ * @property {string} [text] - Display text for the CTA
+ * @property {string} [label] - Accessible label for the CTA
+ */
+
+/**
+ * @typedef {Object} Logo
+ * Logo configuration for the navigation bar
+ * @property {string} type - Logo type (e.g., 'ing')
+ * @property {string} alt - Alternative text for the logo
+ * @property {string} href - URL the logo links to
+ * @property {string} [src] - Optional custom logo source URL
+ */
+
+/**
+ * @typedef {Object} LevelConfig
+ * Configuration for a menu level
+ * @property {boolean} [isBar] - Whether this level is displayed as a bar
+ * @property {boolean} [hasFullWidthFlyout] - Whether this level has a full-width flyout
+ * @property {object} [openableConfig] - Configuration for the openable overlay
+ */
+
+export {};

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

@@ -0,0 +1,74 @@
+---
+title: 'Menu: Overview'
+parts:
+  - Menu
+  - Use Cases
+eleventyNavigation:
+  key: 'Menu: Use Cases'
+  order: 20
+  parent: Menu
+  title: Use Cases
+---
+
+# Use Cases
+
+```js script
+import { html } from 'lit';
+import '@lion/ui/define/lion-item.js';
+import '@lion/ui/define/lion-menu.js';
+import { applyMenuDemoStyles } from './applyMenuDemoStyles.js';
+
+applyMenuDemoStyles();
+```
+
+## Default
+
+```html preview-story
+<nav>
+  <button data-invoker>Open menu</button>
+  <lion-menu>
+    <div role="menuitem">Go to Definition</div>
+    <div role="menuitem">Go to Type Definition</div>
+    <div>
+      <button role="menuitem" data-invoker>Peek</button>
+      <lion-menu>
+        <div role="menuitem">Peek Call Hierarchy</div>
+        <div role="separator"></div>
+        <div role="menuitem">Peek Definition</div>
+      </lion-menu>
+    </div>
+    <div role="separator"></div>
+    <div role="menuitem">Find all References</div>
+  </lion-menu>
+</nav>
+```
+
+## Overflow
+
+## Attributes & Properties
+
+### Bar
+
+By adding the `bar` attribute the axis will be set to `inline` and the role will be set to menubar.
+
+```html preview-story
+<nav>
+  <lion-menu bar>
+    <div>
+      <a role="menuitem" data-invoker href="#home">home</a>
+    </div>
+    <div role="menuitem">Go to Definition</div>
+    <div role="menuitem">Go to Type Definition</div>
+    <div>
+      <button role="menuitem" data-invoker>Details</button>
+      <lion-menu>
+        <div role="menuitem">Peek Call Hierarchy</div>
+        <div role="separator"></div>
+        <div role="menuitem">Peek Definition</div>
+      </lion-menu>
+    </div>
+    <div role="separator"></div>
+    <div role="menuitem">Find all References</div>
+  </lion-menu>
+</nav>
+```

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

@@ -32,12 +32,12 @@ export const main = () => html`
 `;
 ```
 
-- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/form/overview.md)'s serialization result.
-- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/select/overview.md) instead.
+- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/form/overview.md)'s serialization result.
+- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select/overview.md) instead.
 
 ## Features
 
-Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/fieldset/overview.md), it has all the features a fieldset has.
+Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/fieldset/overview.md), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`

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

@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
 
 ## Validation
 
-A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/form/validate.md).
+A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/form/validate.md).
 
 ## Rendering and updating select options
 

package/docs/components/select-rich/api-table.md

@@ -54,45 +54,62 @@ eleventyNavigation:
 
 ### Fields
 
-| Name                     | Privacy   | Type                             | Default  | Description                                                                                                                                         | Inherited From |
-| ------------------------ | --------- | -------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `interactionMode`        | public    | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with
platform. When 'auto' (default), platform is automatically detected |                |
-| `navigateWithinInvoker`  | public    | `Boolean`                        | `false`  | When invoker has focus, up and down arrow keys changes active state of listbox,
without opening overlay.                                        |                |
-| `singleOption`           | public    | `boolean`                        | `false`  |                                                                                                                                                     |                |
-| `slots`                  | public    | `SlotsMap`                       |          |                                                                                                                                                     |                |
-| `_arrowWidth`            | protected | `number`                         | `28`     |                                                                                                                                                     |                |
-| `_feedbackConditionMeta` | protected |                                  |          |                                                                                                                                                     | LionListbox    |
-| `_focusableNode`         | protected |                                  |          |                                                                                                                                                     | LionListbox    |
-| `_invokerNode`           | protected | `LionSelectInvoker`              |          |                                                                                                                                                     |                |
-| `_overlayContentNode`    | protected |                                  |          |                                                                                                                                                     |                |
-| `_overlayInvokerNode`    | protected |                                  |          |                                                                                                                                                     |                |
-| `_scrollTargetNode`      | protected |                                  |          |                                                                                                                                                     |                |
+| Name                         | Privacy   | Type                             | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                               | Inherited From |
+| ---------------------------- | --------- | -------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `config`                     | public    | `Partial<OverlayConfig>`         | `{}`     | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
+| `interactionMode`            | public    | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with&#xA;platform. When 'auto' (default), platform is automatically detected                                                                                                                                                                                                                                                       |                |
+| `navigateWithinInvoker`      | public    | `Boolean`                        | `false`  | When invoker has focus, up and down arrow keys changes active state of listbox,&#xA;without opening overlay.                                                                                                                                                                                                                                                                                              |                |
+| `opened`                     | public    | `boolean`                        | `false`  | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                     | OverlayMixin   |
+| `singleOption`               | public    | `boolean`                        | `false`  |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `slots`                      | public    | `SlotsMap`                       |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_arrowWidth`                | protected | `number`                         | `28`     |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_feedbackConditionMeta`     | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | LionListbox    |
+| `_focusableNode`             | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | LionListbox    |
+| `_invokerNode`               | protected | `LionSelectInvoker`              |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
+| `_overlayBackdropNode`       | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentNode`        | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayContentWrapperNode` | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_overlayInvokerNode`        | protected |                                  |          | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\` | OverlayMixin   |
+| `_overlayReferenceNode`      | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
+| `_scrollTargetNode`          | protected |                                  |          |                                                                                                                                                                                                                                                                                                                                                                                                           |                |
 
 ### Methods
 
-| Name                              | Privacy   | Description                                                                                                                                                                                                                                                       | Parameters                                                     | Return | Inherited From |
-| --------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------ | -------------- |
-| `addFormElement`                  | public    |                                                                                                                                                                                                                                                                   | `child: LionOption & FormControlHost, indexToInsertAt: Number` |        |                |
-| `removeFormElement`               | public    |                                                                                                                                                                                                                                                                   | `child: FormRegisteringHost`                                   |        |                |
-| `_alignInvokerWidth`              | protected | Align invoker width with content width&#xA;Make sure display is not set to "none" while calculating the content width                                                                                                                                             |                                                                |        |                |
-| `_defineOverlayConfig`            | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_getCheckedElements`             | protected | In the select disabled options are still going to a possible value for example&#xA;when prefilling or programmatically setting it.                                                                                                                                |                                                                |        |                |
-| `_inputGroupInputTemplate`        | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_listboxOnClick`                 | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_listboxOnKeyDown`               | protected |                                                                                                                                                                                                                                                                   | `ev: KeyboardEvent`                                            |        |                |
-| `_noDefaultSelectedInheritsWidth` | protected | With no selected element, we should override the inheritsReferenceWidth in most cases.&#xA;By default, we will set it to 'min', and then set it back to what it was initially when&#xA;something is selected.&#xA;As a subclasser you can override this behavior. |                                                                |        |                |
-| `_onFormElementsChanged`          | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_onLabelClick`                   | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_setupListboxNode`               | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_setupOverlayCtrl`               | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_teardownListboxNode`            | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
-| `_teardownOverlayCtrl`            | protected |                                                                                                                                                                                                                                                                   |                                                                |        |                |
+| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
+| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
+| `addFormElement`                   | public    |                                                                                                                                                                                                                                                                                                                            | `child: LionOption & FormControlHost, indexToInsertAt: Number`                                               |                     |                |
+| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
+| `removeFormElement`                | public    |                                                                                                                                                                                                                                                                                                                            | `child: FormRegisteringHost`                                                                                 |                     |                |
+| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
+| `_alignInvokerWidth`               | protected | Align invoker width with content width&#xA;Make sure display is not set to "none" while calculating the content width                                                                                                                                                                                                      |                                                                                                              |                     |                |
+| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
+| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `OverlayConfig`     | OverlayMixin   |
+| `_getCheckedElements`              | protected | In the select disabled options are still going to a possible value for example&#xA;when prefilling or programmatically setting it.                                                                                                                                                                                         |                                                                                                              |                     |                |
+| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
+| `_inputGroupInputTemplate`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
+| `_listboxOnClick`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_listboxOnKeyDown`                | protected |                                                                                                                                                                                                                                                                                                                            | `ev: KeyboardEvent`                                                                                          |                     |                |
+| `_noDefaultSelectedInheritsWidth`  | protected | With no selected element, we should override the inheritsReferenceWidth in most cases.&#xA;By default, we will set it to 'min', and then set it back to what it was initially when&#xA;something is selected.&#xA;As a subclasser you can override this behavior.                                                          |                                                                                                              |                     |                |
+| `_onFormElementsChanged`           | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_onLabelClick`                    | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_scrollIntoView`                  | protected |                                                                                                                                                                                                                                                                                                                            | `el: HTMLElement, scrollTargetEl: HTMLElement`                                                               |                     |                |
+| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
+| `_setupListboxNode`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownListboxNode`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
+| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
+| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
 
 ### Events
 
-| Name   | Type    | Description | Inherited From |
-| ------ | ------- | ----------- | -------------- |
-| `blur` | `Event` |             |                |
+| Name             | Type          | Description | Inherited From |
+| ---------------- | ------------- | ----------- | -------------- |
+| `blur`           | `Event`       |             |                |
+| `opened-changed` | `CustomEvent` |             | OverlayMixin   |
 
 ### Attributes
 
@@ -101,5 +118,6 @@ eleventyNavigation:
 | `navigate-within-invoker` | navigateWithinInvoker |                |
 | `interaction-mode`        | interactionMode       |                |
 | `single-option`           | singleOption          |                |
+| `opened`                  | opened                | OverlayMixin   |
 
 <hr/>

package/docs/components/select-rich/use-cases.md

@@ -29,7 +29,7 @@ You can set the full `modelValue` for each option, which includes the checked pr
 ```
 
 Note, when rendering with the help of the `cache` function imported from `lit/directives/cache.js`, setting model by
-the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
+the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
 
 ### Setting model by the `choiceValue` property
 
@@ -328,7 +328,7 @@ LionSelectRich will give it acces to:
 - LionSelectRich itself, via `.hostElement`
 
 Code of an advanced custom invoker is shown below (this is the code for the
-invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/components/select-rich/examples.md)).
+invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/components/select-rich/examples.md)).
 The invoker is usually added in the invoker slot of the LionSelectRich subclass.
 However, it would also be possible for an application developer to provide the invoker
 by putting it in light dom:

package/docs/components/tabs/examples.md

@@ -21,7 +21,7 @@ import './src/lea-tab-panel.js';
 
 ## Lea Tabs
 
-Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/blog/ing-open-sources-lion.md).
+Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/blog/ing-open-sources-lion.md).
 
 ```js preview-story
 export const main = () => html`

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

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

package/docs/fundamentals/index.md

@@ -9,11 +9,11 @@ Here you find more details about what we offer.
 
 Let's see what each section describes.
 
-1. [Systems](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/systems/core/overview.md) <br>
+1. [Systems](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/systems/core/overview.md) <br>
    These are the fundamental systems that power all of our components.
-2. [Tools](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/tools/helpers/overview.md) <br>
+2. [Tools](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/tools/helpers/overview.md) <br>
    Frontend Tools useful for web development but are not visual and therefore are not components.
-3. [Node Tools](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
+3. [Node Tools](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
    Node tools to analyse the code and for extending the documentation.
-4. [Rationales](https://github.com/ing-bank/lion/blob/1e44a873eb492168e7e3d2f5c120371d950b9e03/docs/fundamentals/rationales/side-effects.md) <br>
+4. [Rationales](https://github.com/ing-bank/lion/blob/4649554021224763994601dd8d202c511d35013e/docs/fundamentals/rationales/side-effects.md) <br>
    The reasoning behind some of our decisions.

package/docs/fundamentals/node-tools/providence-analytics/overview.md

@@ -94,7 +94,7 @@ npx providence-analytics analyze match-imports -t /importing/project -r /exporti
 ## Utils
 
 Providence comes with many tools for deep traversal of identifiers,
-the (babel like) traversal of ast trees in oxc and swc and more.
+the (babel like) traversal of ast trees in oxc and more.
 Also more generic utils for caching and performant globbing come delivered with Providence.
 
 For a better understanding, check out the utils folders (tests and code).