@lion/ui 0.16.1 → 0.17.0-menu-system.0

package/components/navigation-bar/src/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/components/overlays/NEXT.md

@@ -0,0 +1,49 @@
+- Redesign goals OverlayController
+  - Simplicity
+    - One primitive to (controller to) rule them all
+      - Aligned api with all disclosure mechanisms (openables: <https://open-ui.org/components/openable.explainer/>)
+      - Aligned with platform overlay primitives (popover, dialog and tooltip)
+    - Controller will be elegantly aligned with host
+      - Controller props will be mapped to a host via a mixin, w/o requiring lots of boilerplate
+      - No race conditions due to unaligned heart beats: both hook in to the same "tick": the reactive update cycle of lit (which can theoretically be swapped by other cycles, see <https://lit.dev/docs/frameworks/react/#usecontroller>)
+        - In general, all property effects / events / reactivity should be aligned as much as possible with the update cycle (for predictability and perf. We only need
+    - All components will just be configuration (no need to redefine a lot of logic)
+    - OverlayController (or OpenableController, or DisclosureController, or VisitibilityToggleController) will be the biggest common denominator. Having all logic in one place, makes it a lot easier to erase about then having it scattered across many mixin and/or controller levels
+    - Even though the amount of logic is large (and might feel a bit monolithic), this is just needed when we want to have a stable, battle tested abstraction around all edge cases that building accessible disclosures should handle
+      - However, this does not come at an extra performance cost (see performance, you will only load what you need)
+    - The current OverlayController is a long file that can benefit from some modularity and cleanup
+      - Every overlay feature can be provided in a separate file with knowledge about the overlay lifecycle
+      - We can provide/reuse some utils like Resettable from VisibilityToggleCtrl ()
+  - Flexibility
+    - Re-use your markup for different screen sizes and/or devices (that may have different appearances, but the same functionality/semantics)
+      - Think of:
+        - a datepicker that opens as dropdown on desktop and as centered modal dialog on mobile
+        - a menubutton that opens as dropdown on desktop and as bottomsheet
+        - A menu that opens as dropdown on desktop and a collapsible (or even a plain list) on mobile
+    - As explained above, controllers are the most re-usable primitives, as a web component/mixin does not always provide the flexibility we need
+      - Controllers can be easliy mapped to directives (giving the same flexibility as "platform attributes" like popover). Forward compatible with <https://github.com/WICG/webcomponents/issues/1029>
+      - Controllers can be easily mapped to web components or mixins
+      - Contrary to mixins, it’s easy to conditionally load a controller
+      - Contrary to mixins, it’s easy to “undo” a controller (which is helpful in edge cases)
+  - Performance
+    - Will leverage the platform where possible:
+      - Use popover
+  - Forward compatibility
+    - Aligns as much as possible with (future) platform apis
+      - This leverages existing dev knowledge (api familiarity)
+      - This allows to build drop in replacements
+      - This allows to rely on the platform (reducing maintenance costs, increasing performance)
+  - Completeness
+    - Supports all use cases to build every UI thinkable:
+      - Will have optional dependency to menu controllers and interactive list controllers
+      - Supports visually hidden scenarios, hides
+  - Backward compatibility
+    - Since the amount of consumers of our overlay system (directly or indirectly) is large, we should provide a compatibility mechanism where possible. At the same time, we want to create an api as clean/aligned/forward compatible as possible. We could consider an optional compat-layer (a global import at the top of an app extending OverlayController prototype). Think of:
+      - Mapping popper api to popover concepts
+      -
+
+# Why start with OverlayController?
+
+- there is a lot of value in cleaning it up as there are many platform improvements
+- it's used by many
+- It is already a controller (we created it before Lit controllers existed) and therefore impact is minimal

package/components/overlays/src/OverlayController.js

@@ -5,7 +5,7 @@ import { _adoptStyleUtils } from './utils/adopt-styles.js';
 import { getFocusableElements } from './utils/get-focusable-elements.js';
 
 /**
- * @typedef {'setup'|'init'|'teardown'|'before-show'|'show'|'hide'|'add'|'remove'} OverlayPhase
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayPhase} OverlayPhase
  * @typedef {import('@lion/ui/types/overlays.js').ViewportConfig} ViewportConfig
  * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
  * @typedef {import('@popperjs/core').Options} PopperOptions
@@ -106,6 +106,21 @@ async function preloadPopper() {
 
 const childDialogsClosedInEventLoopWeakmap = new WeakMap();
 
+/**
+ * @param {HTMLElement | null} el
+ * @param {string} selector
+ * @returns {HTMLElement | null}
+ */
+function deepClosest(el, selector) {
+  // @ts-ignore - comparing HTMLElement to document/window for safety
+  return (
+    // @ts-ignore - type comparison check
+    (el && el !== document && el !== window && el.closest(selector)) ||
+    // @ts-ignore - host property on ShadowRoot
+    deepClosest(el.getRootNode().host, selector)
+  );
+}
+
 /**
  * OverlayController is the fundament for every single type of overlay. With the right
  * configuration, it can be used to build (modal) dialogs, tooltips, dropdowns, popovers,
@@ -196,10 +211,19 @@ export class OverlayController extends EventTarget {
         placement: 'center',
       },
       zIndex: 9999,
+      isOpenable: true,
+      focusContentOnOpen: false,
+      // This means that content will have visually-hidden / sr-only styles. This is handy for:
+      // - hidden menus that should be "indexable" by screen readers (like the Links list in VO: https://support.apple.com/en-gb/guide/voiceover/mchlp2719/mac)
+      // - "more" menus that put content in a dropdown that do not fit in the current row
+      // - menus that should generally open on tab.
+      // @ts-ignore - hideVisually is an extension property
+      hideVisually: false,
     };
 
     /** @protected */
     this._contentId = `overlay-content--${Math.random().toString(36).slice(2, 10)}`;
+
     /** @private */
     this.__originalAttrs = new Map();
     /** @private */
@@ -220,6 +244,8 @@ export class OverlayController extends EventTarget {
     this.__escKeyHandlerCalled = false;
   }
 
+  #hasSetup = false;
+
   /**
    * The invokerNode
    * @type {HTMLElement | undefined}
@@ -238,7 +264,7 @@ export class OverlayController extends EventTarget {
 
   /**
    * Determines the connection point in DOM (body vs next to invoker).
-   * @type {'global' | 'local' | undefined}
+   * @type {'global' | 'local' | 'custom' | undefined}
    */
   get placementMode() {
     return this.config?.placementMode;
@@ -493,8 +519,6 @@ export class OverlayController extends EventTarget {
     this.__validateConfiguration(this.config);
     /** @protected */
     this._init();
-    /** @private */
-    this.__elementToFocusAfterHide = undefined;
 
     if (!this.#isRegisteredOnManager()) {
       this.manager.add(this);
@@ -516,7 +540,7 @@ export class OverlayController extends EventTarget {
         '[OverlayController] You need to provide a .placementMode ("global"|"local")',
       );
     }
-    if (!['global', 'local'].includes(newConfig.placementMode)) {
+    if (!['global', 'local', 'custom'].includes(newConfig.placementMode)) {
       throw new Error(
         `[OverlayController] "${newConfig.placementMode}" is not a valid .placementMode, use ("global"|"local")`,
       );
@@ -535,6 +559,8 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _init() {
+    if (!this.config.isOpenable) return;
+
     if (!this.__contentHasBeenInitialized) {
       this.__initContentDomStructure();
       this.__contentHasBeenInitialized = true;
@@ -552,8 +578,27 @@ export class OverlayController extends EventTarget {
     }
     this.__handleOverlayStyles({ phase: 'init' });
     this._handleFeatures({ phase: 'init' });
+
+    /** @private */
+    this.__elementToFocusAfterHide = undefined;
+
+    this.contentNode.dataset.content = '';
+
+    // Use event delegation to listen for clicks on close buttons...
+    this.contentNode.addEventListener('click', this.#hideOnCloseButtonClick);
+
+    this.#hasSetup = true;
   }
 
+  #hideOnCloseButtonClick = (/** @type {{ target: any; }} */ ev) => {
+    const isOurCloseButton =
+      ev.target.hasAttribute('data-close') &&
+      deepClosest(ev.target, '[data-content]') === this.contentNode;
+    if (!isOurCloseButton) return;
+
+    this.hide();
+  };
+
   /**
    * @param {{ phase: OverlayPhase }} config
    * @private
@@ -594,82 +639,97 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __initContentDomStructure() {
-    const wrappingDialogElement = document.createElement('dialog');
-    // We use a dialog for its visual capabilities: it renders to the top layer.
-    // A11y will depend on the type of overlay and is arranged on contentNode level.
-    // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
-    //
-    // The role="dialog" is set on the contentNode (or another role), so role="none"
-    // is valid here, although AXE complains about this setup.
-    // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
-    // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
-    wrappingDialogElement.setAttribute('role', 'none');
-    wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
-    // N.B. position: fixed is needed to escape out of 'overflow: hidden'
-    // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
-    // parent stacking context
-    // padding reset so we don't get a weird dialog visual square showing up
-    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
-    this.__wrappingDialogNode = wrappingDialogElement;
+    if (this.placementMode !== 'custom') {
+      const wrappingDialogElement = document.createElement('dialog');
+      // We use a dialog for its visual capabilities: it renders to the top layer.
+      // A11y will depend on the type of overlay and is arranged on contentNode level.
+      // Also see: https://www.scottohara.me/blog/2019/03/05/open-dialog.html
+      //
+      // The role="dialog" is set on the contentNode (or another role), so role="none"
+      // is valid here, although AXE complains about this setup.
+      // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
+      // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
+      wrappingDialogElement.setAttribute('role', 'none');
+      wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
+      // N.B. position: fixed is needed to escape out of 'overflow: hidden'
+      // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
+      // parent stacking context
+      // padding reset so we don't get a weird dialog visual square showing up
+      wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
+      // @ts-ignore - 'custom' is a valid extension of placementMode
+      if (this.config.placementMode === 'custom') {
+        // The user should have full freedom to control the content node, so its wrapper nodes should remain neutral.
+        wrappingDialogElement.style.cssText += `position: static;`;
+      }
+      this.__wrappingDialogNode = wrappingDialogElement;
 
-    /**
-     * Based on the configuration of the developer, multiple scenarios are accounted for
-     * A. We already have a contentWrapperNode ()
-     */
-    if (!this.config?.contentWrapperNode) {
-      this.__contentWrapperNode = document.createElement('div');
-    }
-    this.contentWrapperNode.setAttribute('data-id', 'content-wrapper');
+      /**
+       * Based on the configuration of the developer, multiple scenarios are accounted for
+       * A. We already have a contentWrapperNode ()
+       */
+      if (!this.config?.contentWrapperNode) {
+        this.__contentWrapperNode = document.createElement('div');
+      }
+      this.contentWrapperNode.setAttribute('data-id', 'content-wrapper');
+      // 'hack' that makes sure popperjs (that is applied one level lower) works correctly in deeply nested shadow roots
+      this.contentWrapperNode.style.transform = 'translateZ(0px)';
+
+      rearrangeNodes({
+        wrappingDialogNodeL1: wrappingDialogElement,
+        contentWrapperNodeL2: this.contentWrapperNode,
+        contentNodeL3: this.contentNode,
+      });
+      wrappingDialogElement.open = true;
 
-    rearrangeNodes({
-      wrappingDialogNodeL1: wrappingDialogElement,
-      contentWrapperNodeL2: this.contentWrapperNode,
-      contentNodeL3: this.contentNode,
-    });
-    wrappingDialogElement.open = true;
+      if (this.isTooltip) {
+        // needed to prevent tooltip getting focus in Safari and Firefox
+        wrappingDialogElement.setAttribute('tabindex', '-1');
+      }
+      this.contentWrapperNode.style.zIndex = '1';
+      if (getComputedStyle(this.contentNode).position === 'absolute') {
+        // Having a _contWrapperNode and a contentNode with 'position:absolute' results in
+        // computed height of 0...
+        this.contentNode.style.position = 'static';
+      }
 
-    if (this.isTooltip) {
-      // needed to prevent tooltip getting focus in Safari and Firefox
-      wrappingDialogElement.setAttribute('tabindex', '-1');
+      // Here we prevent any interference of the native <dialog> element with the keyboard behavior
+      // as defined by the OverlayController. This is needed until we can configure `closedby="none"`
+      // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
+      const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
+      if (hasClosedBySupport) {
+        // @ts-ignore - closedBy is a newer property not in all TypeScript versions
+        wrappingDialogElement.closedBy = 'none';
+      } else {
+        wrappingDialogElement.addEventListener(
+          'keydown',
+          (/** @type {* & KeyboardEvent} */ event) => {
+            if (event.key === 'Escape') {
+              event.preventDefault();
+            }
+          },
+        );
+        wrappingDialogElement.addEventListener(
+          'keyup',
+          (/** @type {* & KeyboardEvent} */ event) => {
+            if (event.key === 'Escape') {
+              event.preventDefault();
+            }
+          },
+        );
+        wrappingDialogElement.addEventListener('cancel', event => {
+          event.stopPropagation();
+        });
+        wrappingDialogElement.addEventListener('close', event => {
+          event.stopPropagation();
+        });
+      }
+    } else {
+      // quick hack to make none-overlay flows work...
+      this.__contentWrapperNode = this.contentNode;
+      this.__wrappingDialogNode = this.contentNode;
     }
 
     this.__wrappingDialogNode.style.display = 'none';
-    this.contentWrapperNode.style.zIndex = '1';
-
-    if (getComputedStyle(this.contentNode).position === 'absolute') {
-      // Having a _contWrapperNode and a contentNode with 'position:absolute' results in
-      // computed height of 0...
-      this.contentNode.style.position = 'static';
-    }
-
-    // Here we prevent any interference of the native <dialog> element with the keyboard behavior
-    // as defined by the OverlayController. This is needed until we can configure `closedby="none"`
-    // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
-    const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
-    if (hasClosedBySupport) {
-      // @ts-expect-error
-      wrappingDialogElement.closedBy = 'none';
-    } else {
-      wrappingDialogElement.addEventListener(
-        'keydown',
-        (/** @type {* & KeyboardEvent} */ event) => {
-          if (event.key === 'Escape') {
-            event.preventDefault();
-          }
-        },
-      );
-      wrappingDialogElement.addEventListener('keyup', (/** @type {* & KeyboardEvent} */ event) => {
-        if (event.key === 'Escape') {
-          event.preventDefault();
-        }
-      });
-      wrappingDialogElement.addEventListener('cancel', event => {
-        event.stopPropagation();
-      });
-      wrappingDialogElement.addEventListener('close', event => {
-        event.stopPropagation();
-      });
-    }
   }
 
   /**
@@ -740,6 +800,7 @@ export class OverlayController extends EventTarget {
    * @private
    */
   __storeOriginalAttrs(node, attrs) {
+    /** @type {Record<string, string | null>} */
     const attrMap = {};
     attrs.forEach(attrName => {
       attrMap[attrName] = node.getAttribute(attrName);
@@ -809,6 +870,11 @@ export class OverlayController extends EventTarget {
         contentNode: this.contentNode,
       });
     }
+
+    if (this.config.focusContentOnOpen) {
+      this.contentNode.focus();
+    }
+
     /** @type {function} */
     (this._showResolve)();
   }
@@ -841,6 +907,7 @@ export class OverlayController extends EventTarget {
       await this.__createPopperInstance();
       this._popper.forceUpdate();
     }
+    // N.B. leave it up to the user if placementMode === 'custom'
   }
 
   /**
@@ -852,46 +919,7 @@ export class OverlayController extends EventTarget {
       return;
     }
 
-    switch (phase) {
-      case 'before-show':
-        this.__bodyClientWidth = document.body.clientWidth;
-        this.__bodyClientHeight = document.body.clientHeight;
-        this.__bodyMarginRightInline = document.body.style.marginRight;
-        this.__bodyMarginBottomInline = document.body.style.marginBottom;
-        break;
-      case 'show': {
-        if (window.getComputedStyle) {
-          const bodyStyle = window.getComputedStyle(document.body);
-          this.__bodyMarginRight = parseInt(bodyStyle.getPropertyValue('margin-right'), 10);
-          this.__bodyMarginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
-        } else {
-          this.__bodyMarginRight = 0;
-          this.__bodyMarginBottom = 0;
-        }
-        const scrollbarWidth =
-          document.body.clientWidth - /** @type {number} */ (this.__bodyClientWidth);
-        const scrollbarHeight =
-          document.body.clientHeight - /** @type {number} */ (this.__bodyClientHeight);
-        const newMarginRight = this.__bodyMarginRight + scrollbarWidth;
-        const newMarginBottom = this.__bodyMarginBottom + scrollbarHeight;
-        // @ts-expect-error [external]: CSS not yet typed
-        if (window.CSS?.number && document.body.attributeStyleMap?.set) {
-          // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
-          document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-          // @ts-expect-error [external]: types attributeStyleMap + CSS.px not available yet
-          document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
-        } else {
-          document.body.style.marginRight = `${newMarginRight}px`;
-          document.body.style.marginBottom = `${newMarginBottom}px`;
-        }
-        break;
-      }
-      case 'hide':
-        document.body.style.marginRight = this.__bodyMarginRightInline || '';
-        document.body.style.marginBottom = this.__bodyMarginBottomInline || '';
-        break;
-      /* no default */
-    }
+    this.manager.requestToKeepBodySize({ phase });
   }
 
   /**
@@ -899,6 +927,9 @@ export class OverlayController extends EventTarget {
    * @event hide right after the overlay is hidden
    */
   async hide() {
+    // Function like a no-op for dynamic edge cases...
+    if (!this.config.isOpenable) return;
+
     this._hideComplete = new Promise(resolve => {
       this._hideResolve = resolve;
     });
@@ -1050,6 +1081,15 @@ export class OverlayController extends EventTarget {
     if (this.visibilityTriggerFunction) {
       this._handleVisibilityTriggers({ phase });
     }
+
+    if (phase === 'init' && this.config.focusContentOnOpen) {
+      this.contentNode?.setAttribute('tabindex', '-1');
+    }
+
+    if (phase === 'teardown' && this.config.focusContentOnOpen) {
+      // TODO: capture initial attr, use Resettable mechanism of VisibilityToggleCtrl in whole Controller
+      this.contentNode?.removeAttribute('tabindex');
+    }
   }
 
   /**
@@ -1223,7 +1263,9 @@ export class OverlayController extends EventTarget {
     if (phase === 'show') {
       this.#handleShiftKeyPress();
       this.#handleFocusInsideDialog();
+      // @ts-ignore - HTMLDialogElement methods
       this.__wrappingDialogNode?.close();
+      // @ts-ignore - HTMLDialogElement methods
       this.__wrappingDialogNode?.showModal();
       /**
        * At this moment `#handleFocusInsideDialog` should handle the focus.
@@ -1474,11 +1516,19 @@ export class OverlayController extends EventTarget {
   }
 
   teardown() {
+    if (!this.#hasSetup) return;
     this.__handleOverlayStyles({ phase: 'teardown' });
+    if (this.isShown) {
+      this._keepBodySize({ phase: 'teardown' });
+    }
     this._handleFeatures({ phase: 'teardown' });
     if (this.#isRegisteredOnManager()) {
       this.manager.remove(this);
     }
+
+    this.contentNode?.removeEventListener('click', this.#hideOnCloseButtonClick);
+
+    this.#hasSetup = false;
   }
 
   /** @private */

package/components/overlays/src/OverlayMixin.js

@@ -2,6 +2,18 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { OverlayController } from './OverlayController.js';
 import { isEqualConfig } from './utils/is-equal-config.js';
 
+/**
+ * @typedef {<T>(ingOverlayHost:T) => void} PostProcessor
+ */
+
+/** @type {PostProcessor[]} */
+const overlayMixinPostProcessors = [];
+
+/** @param {PostProcessor} postProcessor */
+export function _addOverlayMixinPostProcessor(postProcessor) {
+  overlayMixinPostProcessors.push(postProcessor);
+}
+
 /**
  * @typedef {import('../types/OverlayConfig.js').OverlayConfig} OverlayConfig
  * @typedef {import('../types/OverlayMixinTypes.js').DefineOverlayConfig} DefineOverlayConfig
@@ -16,15 +28,12 @@ import { isEqualConfig } from './utils/is-equal-config.js';
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
-export const OverlayMixinImplementation = superclass =>
+export const OverlayMixinImplementation = superclass => {
   // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: {
-          type: Boolean,
-          reflect: true,
-        },
+        opened: { type: Boolean, reflect: true },
       };
     }
 
@@ -50,6 +59,17 @@ export const OverlayMixinImplementation = superclass =>
       this.open = this.open.bind(this);
       /** @type {EventListener} */
       this.close = this.close.bind(this);
+
+      // // By default, we go for disclosure behavior
+      // // TODO: in the future, bring disclosure behavior to a controller (and therefore directive).
+      // // Take inspiration from VisibilityToggleCtrl of portal elements
+      // /**
+      //  * Terminology aligned with https://open-ui.org/components/openable.explainer/
+      //  * @type {'disclosure'|'overlay'}
+      //  */
+      // this.openableMode = 'disclosure';
+
+      // allow hybrid disclosure/overlay components
     }
 
     get config() {
@@ -149,6 +169,8 @@ export const OverlayMixinImplementation = superclass =>
      */
     // eslint-disable-next-line class-methods-use-this
     _setupOpenCloseListeners() {
+      // Keeps the close-overlay event private for the controller.
+      // (we already have )
       /**
        * @param {{ stopPropagation: () => void; }} ev
        */
@@ -206,11 +228,11 @@ export const OverlayMixinImplementation = superclass =>
     // @ts-expect-error
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
-    get _overlayInvokerNode() {
-      return /** @type {HTMLElement | undefined} */ (
-        Array.from(this.children).find(child => child.slot === 'invoker')
-      );
-    }
+    // get _overlayInvokerNode() {
+    //   return /** @type {HTMLElement | undefined} */ (
+    //     Array.from(this.children).find(child => child.slot === 'invoker')
+    //   );
+    // }
 
     /**
      * @overridable
@@ -244,13 +266,46 @@ export const OverlayMixinImplementation = superclass =>
       );
     }
 
+    /**
+     * @param {Element} focusableElOrWrapper
+     * @returns {Element|null}
+     */
+    static _getFocusableInvokerEl(focusableElOrWrapper) {
+      // return focusableElOrWrapper;
+      return (
+        focusableElOrWrapper &&
+        (focusableElOrWrapper.hasAttribute('tabindex') || focusableElOrWrapper.tagName === 'BUTTON'
+          ? focusableElOrWrapper
+          : focusableElOrWrapper.querySelector('[role=button], button'))
+      );
+    }
+
+    get _overlayInvokerNode() {
+      const ctor = /** @type {typeof OverlayMixin} */ (this.constructor);
+      if (!this.__invokerNode) {
+        const slottedNode = Array.from(this.children).find(child => child.slot === 'invoker');
+        if (slottedNode) {
+          this.__invokerNode = ctor._getFocusableInvokerEl(slottedNode);
+        } else {
+          // Look for preceeding sibling with [data-invoker] attribute, and try to find a focusable element in it (either itself or a child)
+          this.__invokerNode =
+            this.previousElementSibling?.hasAttribute('data-invoker') &&
+            ctor._getFocusableInvokerEl(this.previousElementSibling);
+        }
+      }
+      return this.__invokerNode;
+    }
+
     /** @protected */
     _setupOverlayCtrl() {
       if (this.#hasSetup) return;
+
+      const invokerNode = this._overlayInvokerNode;
+
       const config = {
         contentNode: this._overlayContentNode,
         contentWrapperNode: this._overlayContentWrapperNode,
-        invokerNode: this._overlayInvokerNode,
+        invokerNode: invokerNode && invokerNode instanceof HTMLElement ? invokerNode : undefined,
         referenceNode: this._overlayReferenceNode,
         backdropNode: this._overlayBackdropNode,
       };
@@ -270,6 +325,8 @@ export const OverlayMixinImplementation = superclass =>
 
     /** @protected */
     _teardownOverlayCtrl() {
+      // Make sure that dynamic behavior (e.g. responsive) is possible by allowing multiple setups and teardowns of the overlay controller.
+      this.#hasSetup = false;
       if (!this._overlayCtrl) return;
 
       this._teardownOpenCloseListeners();
@@ -418,5 +475,11 @@ export const OverlayMixinImplementation = superclass =>
       await this.updateComplete;
       return !this.isConnected;
     }
-  };
+  }
+  for (const postProcessor of overlayMixinPostProcessors) {
+    postProcessor(OverlayMixin);
+  }
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  return OverlayMixin;
+};
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);