@lion/ui 0.22.0 → 0.24.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: '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/pagination/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Pagination: Overview'
+title: 'Overview'
 parts:
   - Pagination
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Pagination: Overview
+# Overview
 
 A web component that handles pagination.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Pagination: Use Cases'
+title: 'Use Cases'
 parts:
   - Pagination
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Pagination: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/progress-indicator/examples.md

@@ -1,5 +1,5 @@
 ---
-title: 'Progress Indicator: Examples'
+title: 'Examples'
 parts:
   - Progress Indicator
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
 
-# Progress Indicator: Examples
+# Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/progress-indicator/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Progress Indicator: Overview'
+title: 'Overview'
 parts:
   - Progress Indicator
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Progress Indicator: Overview
+# Overview
 
 A web component that implements accessibility requirements for progress indicators.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Radio Group: Overview'
+title: 'Overview'
 parts:
   - Radio Group
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Radio Group: Overview
+# Overview
 
 A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
 
@@ -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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/radio-group/use-cases.md

@@ -1,5 +1,5 @@
 ---
-title: 'Radio Group: Use Cases'
+title: 'Use Cases'
 parts:
   - Radio Group
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Radio Group: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/select/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Select: Overview'
+title: 'Overview'
 parts:
   - Select
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Select: Overview
+# Overview
 
 A web component that works as a wrapper around the native `select`.
 

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

@@ -1,5 +1,5 @@
 ---
-title: 'Select: Use Cases'
+title: 'Use Cases'
 parts:
   - Select
   - Use Cases
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Use Cases
 ---
 
-# Select: Use Cases
+# Use Cases
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -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/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/examples.md

@@ -1,5 +1,5 @@
 ---
-title: 'Select Rich: Examples'
+title: 'Examples'
 parts:
   - Select Rich
   - Examples
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Examples
 ---
 
-# Select Rich: Examples
+# Examples
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

package/docs/components/select-rich/overview.md

@@ -1,5 +1,5 @@
 ---
-title: 'Select Rich: Overview'
+title: 'Overview'
 parts:
   - Select Rich
   - Overview
@@ -10,7 +10,7 @@ eleventyNavigation:
   title: Overview
 ---
 
-# Select Rich: Overview
+# Overview
 
 This web component is a 'rich' version of the native `<select>` element.
 It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `<select>` doesn't provide enough styling, theming or user interaction opportunities.