@lion/ui 0.18.0-menu-system.0 → 0.18.0-menu-system.2

package/components/menu/src/MoreButtonMenuMixin.js

@@ -182,7 +182,13 @@ export const MoreButtonMenuMixin = superclass =>
     }
 
     doItemsFit() {
-      return this._listNode.scrollWidth - this._listNode.clientWidth === 0;
+      this.style.display = 'none';
+      const parentWidth = this.parentElement.clientWidth;
+      this.style.display = '';
+      return (
+        this._listNode.scrollWidth === this._listNode.clientWidth &&
+        this._listNode.scrollWidth <= parentWidth
+      );
     }
 
     getListItems() {
@@ -210,16 +216,11 @@ export const MoreButtonMenuMixin = superclass =>
 
       const nextNodes = [];
       let { nextSibling } = listItem;
-      let includeOneMoreAfterComment = false;
       while (nextSibling) {
         nextNodes.push(nextSibling);
 
-        if (includeOneMoreAfterComment) {
-          break;
-        }
-
         if (isMarkerComment(nextSibling)) {
-          includeOneMoreAfterComment = true;
+          break;
         }
 
         ({ nextSibling } = nextSibling);
@@ -285,12 +286,15 @@ export const MoreButtonMenuMixin = superclass =>
         this.hideMoreButton();
 
         if (this.doItemsFit()) {
+          this.style.visibility = '';
           return;
         }
 
+        this.style.visibility = 'hidden';
         this.displayMoreButton();
         const hiddenItemsCount = this.hideItemsOneByOneInMainMenuUntilTheyFit();
         this.moveHiddenItemsFromMainMenuToMoreButtonMenu(hiddenItemsCount);
+        this.style.visibility = '';
       }, 50);
     }
   };

package/components/overlays/src/OverlayController.js

@@ -237,8 +237,7 @@ export class OverlayController extends EventTarget {
         placement: 'center',
       },
       zIndex: 9999,
-      // TODO: rename to isActivated
-      isOpenable: true,
+      isActivated: 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)
@@ -247,6 +246,11 @@ export class OverlayController extends EventTarget {
       // @ts-ignore - hideVisually is an extension property
       hideVisually: false,
       requireConnectedNodes: true,
+
+      // hides children overlays when parent is closed...
+      syncChildrenCloseState: false,
+      // // In next major, we remove this prop. Now we disable it for backwards compatibility and enable it in the places we need it internally
+      // _shouldTeardownDomStructure: false,
     };
 
     /** @protected */
@@ -272,7 +276,7 @@ export class OverlayController extends EventTarget {
     this.__escKeyHandlerCalled = false;
   }
 
-  #hasSetup = false;
+  __hasSetup = false;
 
   /**
    * The invokerNode
@@ -540,7 +544,7 @@ export class OverlayController extends EventTarget {
       },
     };
 
-    const shouldUpdate = !this.#hasSetup || !isEqualConfig(prevConfig, newConfig);
+    const shouldUpdate = !this.__hasSetup || !isEqualConfig(prevConfig, newConfig);
     if (!shouldUpdate) return;
     // Teardown all previous configs
 
@@ -592,7 +596,7 @@ export class OverlayController extends EventTarget {
    * @protected
    */
   _init() {
-    if (!this.config.isOpenable) return;
+    if (!this.config.isActivated) return;
 
     // TODO: should not be behind a flag when we are fully tearing down...
     // TODO 2: When we move away from dialog (use popover to paint to top layer)
@@ -627,7 +631,7 @@ export class OverlayController extends EventTarget {
     // Use event delegation to listen for clicks on close buttons...
     this.contentNode.addEventListener('click', this.#hideOnCloseButtonClick);
 
-    this.#hasSetup = true;
+    this.__hasSetup = true;
   }
 
   #hideOnCloseButtonClick = (/** @type {{ target: any; }} */ ev) => {
@@ -981,7 +985,7 @@ export class OverlayController extends EventTarget {
    */
   async hide() {
     // Function like a no-op for dynamic edge cases...
-    if (!this.config.isOpenable) return;
+    if (!this.config.isActivated) return;
 
     this._hideComplete = new Promise(resolve => {
       this._hideResolve = resolve;
@@ -1135,24 +1139,53 @@ export class OverlayController extends EventTarget {
     if (this.visibilityTriggerFunction) {
       this._handleVisibilityTriggers({ phase });
     }
-
-    if (phase === 'init' && this.config.focusContentOnOpen) {
-      this.contentNode?.setAttribute('tabindex', '-1');
+    if (this.config.syncChildrenCloseState) {
+      this._handleSyncChildrenCloseState({ phase });
     }
+    if (this.config.focusContentOnOpen) {
+      this._handleFocusContentOnOpen({ phase });
+    }
+  }
 
-    if (phase === 'teardown' && this.config.focusContentOnOpen) {
+  /**
+   * @param {{phase: OverlayPhase}} opts
+   * @returns {void}
+   */
+  _handleFocusContentOnOpen({ phase }) {
+    if (phase === 'init') {
+      this.contentNode?.setAttribute('tabindex', '-1');
+    } else if (phase === 'teardown') {
       // TODO: capture initial attr, use Resettable mechanism of VisibilityToggleCtrl in whole Controller
       this.contentNode?.removeAttribute('tabindex');
     }
   }
 
+  /**
+   * @param {{phase: OverlayPhase}} opts
+   * @returns {void}
+   */
+  _handleSyncChildrenCloseState({ phase }) {
+    if (phase !== 'hide') return;
+
+    const visibleChildren = this.manager.shownList.filter(
+      ctrl => ctrl !== this && deepContains(this.contentNode, ctrl.contentNode),
+    );
+    visibleChildren.forEach(ctrl => ctrl.hide());
+  }
+
   /**
    * @param {{ phase: OverlayPhase }} config
    */
   _handleVisibilityTriggers({ phase }) {
     if (typeof this.visibilityTriggerFunction !== 'function') return;
 
-    this.visibilityTriggerFunction({ controller: this })?.[phase]?.();
+    // Here we initialize the __visibilityTriggerHandler of our invokerNode. It's important that we ONLY do this on init,
+    // otherwise we risk not being able to properly clean up listeners...
+    if (phase === 'init') {
+      this.__visibilityTriggerHandler = this.visibilityTriggerFunction({ controller: this });
+    }
+    // Here we run the appropriate lifecycle, if defined in our handler
+    this.__visibilityTriggerHandler[phase]?.();
   }
 
   /**
@@ -1562,7 +1595,7 @@ export class OverlayController extends EventTarget {
   }
 
   teardown() {
-    if (!this.#hasSetup) return;
+    if (!this.__hasSetup) return;
     this.__handleOverlayStyles({ phase: 'teardown' });
     if (this.isShown) {
       this._keepBodySize({ phase: 'teardown' });
@@ -1574,10 +1607,12 @@ export class OverlayController extends EventTarget {
 
     this.contentNode?.removeEventListener('click', this.#hideOnCloseButtonClick);
 
+    // if (this.config._shouldTeardownDomStructure) {
     this.__rearrangeNodesCleanup?.();
+    // }
     this.__teardownVisibility();
 
-    this.#hasSetup = false;
+    this.__hasSetup = false;
   }
 
   /** @private */

package/components/overlays/test/OverlayController.test.js

@@ -115,26 +115,35 @@ const withLocalTestConfig = () =>
  */
 async function createNestedEscControllers(parentContent) {
   const childContent = /** @type {HTMLDivElement} */ (parentContent.querySelector('div[id]'));
-  // Assert valid fixure
-  const isValidFixture =
-    (parentContent.id.startsWith('parent-overlay--hidesOnEsc') ||
-      parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc')) &&
-    (childContent.id.startsWith('child-overlay--hidesOnEsc') ||
-      childContent.id.startsWith('child-overlay--hidesOnOutsideEsc'));
-  if (!isValidFixture) {
-    throw new Error('Provide a valid fixture');
-  }
 
   if (parentContent.hasAttribute('data-convert-to-shadow-root')) {
     const shadowRootParent = parentContent.attachShadow({ mode: 'open' });
     shadowRootParent.appendChild(childContent);
   }
 
+  const parentConfig = {};
+  const childConfig = {};
+
   const parentHasOutsideOnEsc = parentContent.id.startsWith('parent-overlay--hidesOnOutsideEsc');
   const childHasOutsideOnEsc = childContent.id.startsWith('child-overlay--hidesOnOutsideEsc');
 
-  const parentConfig = parentHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
-  const childConfig = childHasOutsideOnEsc ? { hidesOnOutsideEsc: true } : { hidesOnEsc: true };
+  if (parentHasOutsideOnEsc) {
+    parentConfig.hidesOnOutsideEsc = true;
+  } else {
+    parentConfig.hidesOnEsc = true;
+  }
+  if (childHasOutsideOnEsc) {
+    childConfig.hidesOnOutsideEsc = true;
+  } else {
+    childConfig.hidesOnEsc = true;
+  }
+
+  const parentHasSyncChildrenCloseState =
+    parentContent.dataset.syncChildrenCloseState !== undefined;
+
+  if (parentHasSyncChildrenCloseState) {
+    parentConfig.syncChildrenCloseState = true;
+  }
 
   const parentOverlay = new OverlayController({
     ...withGlobalTestConfig(),
@@ -347,6 +356,21 @@ describe('OverlayController', () => {
       await ctrl.hide();
       expect(ctrl.isShown).to.be.false;
     });
+
+    // it('cleans up the dom structure it created', async () => {
+    //   const contentNode = /** @type {HTMLElement} */ (fixtureSync(html`<div>my content</div>`));
+    //   const ctrl = new OverlayController({
+    //     placementMode: 'global',
+    //     contentNode,
+    //   });
+    //   await ctrl.show();
+    //   expect(ctrl.contentWrapperNode).to.exist;
+    //   expect(ctrl.__wrappingDialogNode).to.exist;
+
+    //   await ctrl.teardown();
+    //   expect(ctrl.contentWrapperNode).to.not.exist;
+    //   expect(ctrl.__wrappingDialogNode).to.not.exist;
+    // });
   });
 
   describe('Node Configuration', () => {
@@ -621,6 +645,7 @@ describe('OverlayController', () => {
     });
   });
 
+  // TODO: make features modular (so they can be treeshaken) and test their lifecycle within this desrcibe
   describe('Feature Configuration', () => {
     describe('trapsKeyboardFocus', () => {
       it('focuses the overlay on show', async () => {
@@ -983,6 +1008,7 @@ describe('OverlayController', () => {
         });
       });
     });
+
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1703,6 +1729,91 @@ describe('OverlayController', () => {
         expect(ctrl1.hasActiveBackdrop).to.be.true;
       });
     });
+
+    describe('focusContentOnOpen', () => {
+      it('adds tabindex="-1" to the content node when focusContentOnOpen is true', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          focusContentOnOpen: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        expect(contentNode.getAttribute('tabindex')).to.equal('-1');
+      });
+
+      it('makes contentNode the root of "next tab flow"', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isBlocking: false,
+          focusContentOnOpen: true,
+        });
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture('<div><button>Button</button></div>')
+        );
+        ctrl.updateConfig({ contentNode });
+        await ctrl.show();
+        const button = /** @type {HTMLButtonElement} */ (contentNode.querySelector('button'));
+        button.focus();
+        expect(isActiveElement(button)).to.be.true;
+      });
+    });
+
+    describe('syncChildrenCloseState', () => {
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div data-sync-children-close-state id="parent-overlay">
+                <div id="child-overlay">we open our child and it will close when parent does</div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        await childOverlay._hideComplete;
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.false;
+      });
+
+      it('does not close all children of nested controllers when syncChildrenCloseState is false', async () => {
+        const parentContent = /** @type {HTMLDivElement} */ (
+          await fixture(
+            html` <!-- -->
+              <div id="parent-overlay">
+                <div id="child-overlay">
+                  we open our child and it will not close when parent does
+                </div>
+              </div>`,
+          )
+        );
+        const { parentOverlay, childOverlay } = await createNestedEscControllers(parentContent);
+        expect(parentOverlay.isShown).to.be.true;
+        expect(childOverlay.isShown).to.be.true;
+
+        await parentOverlay.hide();
+        expect(parentOverlay.isShown).to.be.false;
+        expect(childOverlay.isShown).to.be.true;
+      });
+    });
+
+    describe('isActivated', () => {
+      it('allows to conditionally disable overlay/openable functionality (for responsive context like nav menus, accordions/collapsibles vs plain headings/content etc.)', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          isActivated: false,
+        });
+        expect(ctrl.__hasSetup).to.be.false;
+        ctrl.updateConfig({
+          isActivated: true,
+        });
+        expect(ctrl.__hasSetup).to.be.true;
+      });
+    });
   });
 
   describe('Show / Hide / Toggle', () => {

package/components/overlays/types/ArrowMixinTypes.ts

@@ -26,7 +26,9 @@ export declare class ArrowHost {
 
   protected _defineOverlayConfig(): OverlayConfig;
 
-  protected _getPopperArrowConfig(popperConfigToExtendFrom: Partial<PopperOptions>): Partial<PopperOptions>;
+  protected _getPopperArrowConfig(
+    popperConfigToExtendFrom: Partial<PopperOptions>,
+  ): Partial<PopperOptions>;
 
   private __setupRepositionCompletePromise(): void;
 

package/components/overlays/types/OverlayConfig.ts

@@ -111,11 +111,15 @@ export interface OverlayConfig {
    * By default, we function either as overlay or disclosure. In some cases, this should be dynamically set (think of responsive changes).
    * or it depends on the context (a top level menu is not openable (unless it's a context menu), its children menus are).
    */
-  isOpenable?: boolean;
+  isActivated?: boolean;
 
   /**
    * By default, an error is thrown when contentNode is not connected to the DOM.
    * This allows to prepare nodes and later connect them to dom.
    */
   requireConnectedNodes?: boolean;
+
+  syncChildrenCloseState?: boolean;
+
+  _shouldTeardownDomStructure?: boolean;
 }

package/custom-elements.json

@@ -2252,36 +2252,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-action-logger.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-action-logger",
-          "declaration": {
-            "name": "SbActionLogger",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-locale-switcher.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-locale-switcher",
-          "declaration": {
-            "name": "SbLocaleSwitcher",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "exports/define/lion-accordion.js",
@@ -3077,6 +3047,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-action-logger.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-action-logger",
+          "declaration": {
+            "name": "SbActionLogger",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-locale-switcher.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-locale-switcher",
+          "declaration": {
+            "name": "SbLocaleSwitcher",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordion/src/LionAccordion.js",
@@ -131886,15 +131886,6 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "#hasSetup",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "#hideOnCloseButtonClick",
@@ -132378,7 +132369,7 @@
                 "text": "OverlayConfig"
               },
               "privacy": "protected",
-              "default": "{ placementMode: undefined, contentNode: config.contentNode, contentWrapperNode: config.contentWrapperNode, invokerNode: config.invokerNode, backdropNode: config.backdropNode, referenceNode: undefined, elementToFocusAfterHide: config.invokerNode, inheritsReferenceWidth: 'none', hasBackdrop: false, isBlocking: false, preventsScroll: false, trapsKeyboardFocus: false, hidesOnEsc: false, hidesOnOutsideEsc: false, hidesOnOutsideClick: false, isTooltip: false, isAlertDialog: false, invokerRelation: 'description', visibilityTriggerFunction: undefined, handlesAccessibility: false, popperConfig: { placement: 'top', strategy: 'fixed', modifiers: [ { name: 'preventOverflow', enabled: true, options: { boundariesElement: 'viewport', padding: 8, // viewport-margin for shifting/sliding }, }, { name: 'flip', options: { boundariesElement: 'viewport', padding: 16, // viewport-margin for flipping }, }, { name: 'offset', enabled: true, options: { offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement) }, }, { name: 'arrow', enabled: false, }, ], }, viewportConfig: { placement: 'center', }, zIndex: 9999, // TODO: rename to isActivated 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, requireConnectedNodes: true, }"
+              "default": "{ placementMode: undefined, contentNode: config.contentNode, contentWrapperNode: config.contentWrapperNode, invokerNode: config.invokerNode, backdropNode: config.backdropNode, referenceNode: undefined, elementToFocusAfterHide: config.invokerNode, inheritsReferenceWidth: 'none', hasBackdrop: false, isBlocking: false, preventsScroll: false, trapsKeyboardFocus: false, hidesOnEsc: false, hidesOnOutsideEsc: false, hidesOnOutsideClick: false, isTooltip: false, isAlertDialog: false, invokerRelation: 'description', visibilityTriggerFunction: undefined, handlesAccessibility: false, popperConfig: { placement: 'top', strategy: 'fixed', modifiers: [ { name: 'preventOverflow', enabled: true, options: { boundariesElement: 'viewport', padding: 8, // viewport-margin for shifting/sliding }, }, { name: 'flip', options: { boundariesElement: 'viewport', padding: 16, // viewport-margin for flipping }, }, { name: 'offset', enabled: true, options: { offset: [0, 8], // horizontal and vertical margin (distance between popper and referenceElement) }, }, { name: 'arrow', enabled: false, }, ], }, viewportConfig: { placement: 'center', }, zIndex: 9999, isActivated: true, 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, requireConnectedNodes: true, // hides children overlays when parent is closed... syncChildrenCloseState: false, // // In next major, we remove this prop. Now we disable it for backwards compatibility and enable it in the places we need it internally // _shouldTeardownDomStructure: false, }"
             },
             {
               "kind": "method",
@@ -132446,6 +132437,27 @@
               "description": "All features are handled here.",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "_handleFocusContentOnOpen",
+              "parameters": [
+                {
+                  "name": "{ phase }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{phase: OverlayPhase}"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_handleHidesOnEsc",
@@ -132531,6 +132543,27 @@
               ],
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "_handleSyncChildrenCloseState",
+              "parameters": [
+                {
+                  "name": "{ phase }"
+                },
+                {
+                  "name": "opts",
+                  "type": {
+                    "text": "{phase: OverlayPhase}"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "_handleTrapsKeyboardFocus",
@@ -132747,6 +132780,15 @@
               "privacy": "private",
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "__hasSetup",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "__initContentDomStructure",

package/dist-types/components/dialog/src/LionDialog.d.ts

@@ -34,8 +34,10 @@ export class LionDialog extends LionDialog_base {
         invokerRelation?: "label" | "description" | undefined;
         visibilityTriggerFunction?: Function | undefined;
         focusContentOnOpen?: boolean | undefined;
-        isOpenable?: boolean | undefined;
+        isActivated?: boolean | undefined;
         requireConnectedNodes?: boolean | undefined;
+        syncChildrenCloseState?: boolean | undefined;
+        _shouldTeardownDomStructure?: boolean | undefined;
     };
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist-types/components/dialog/src/LionDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionDialog.d.ts","sourceRoot":"","sources":["../../../../components/dialog/src/LionDialog.js"],"names":[],"mappings":";AAGA;;GAEG;AACH;IACE,kBAAkB;IAClB,6BAIC;IAIC,uBAA0B;IAG5B;;OAEG;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKC;IAED,+CAOC;CACF"}
+{"version":3,"file":"LionDialog.d.ts","sourceRoot":"","sources":["../../../../components/dialog/src/LionDialog.js"],"names":[],"mappings":";AAGA;;GAEG;AACH;IACE,kBAAkB;IAClB,6BAIC;IAIC,uBAA0B;IAG5B;;OAEG;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKC;IAED,+CAOC;CACF"}

package/dist-types/components/menu/src/LionMenuOverlay.d.ts

@@ -992,8 +992,10 @@ export class LionMenuOverlay extends LionMenuOverlay_base {
         invokerRelation?: "label" | "description" | undefined;
         visibilityTriggerFunction?: Function | undefined;
         focusContentOnOpen?: boolean | undefined;
-        isOpenable?: boolean | undefined;
+        isActivated?: boolean | undefined;
         requireConnectedNodes?: boolean | undefined;
+        syncChildrenCloseState?: boolean | undefined;
+        _shouldTeardownDomStructure?: boolean | undefined;
     };
     /**
      * @enhance InteractiveListMixin

package/dist-types/components/menu/src/LionMenuOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionMenuOverlay.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/LionMenuOverlay.js"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,wDAFW,OAAO,uBAAuB,EAAE,WAAW,CAAC,OAAO,KAAK,EAAE,UAAU,CAAC;;;;QA0B5E;;WAEG;;QAWH;;WAEG;;QAWH;;WAEG;;QAMH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKJ;;;;;QAzCC;;WAEG;;QAWH;;WAEG;;QAWH;;WAEG;;QAMH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQP;IAaE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCC;IAED;;OAEG;IACH;;OAEG;IACH,4BAYC;CACF"}
+{"version":3,"file":"LionMenuOverlay.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/LionMenuOverlay.js"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,wDAFW,OAAO,uBAAuB,EAAE,WAAW,CAAC,OAAO,KAAK,EAAE,UAAU,CAAC;;;;QA0B5E;;WAEG;;QAWH;;WAEG;;QAWH;;WAEG;;QAMH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKJ;;;;;QAzCC;;WAEG;;QAWH;;WAEG;;QAWH;;WAEG;;QAMH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQP;IAaE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAkCC;IAED;;OAEG;IACH;;OAEG;IACH,4BAYC;CACF"}

package/dist-types/components/menu/src/MoreButtonMenuMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreButtonMenuMixin.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/MoreButtonMenuMixin.js"],"names":[],"mappings":"AA6DO;;;;;;;;;;;;;;;;;;QAmIH;;WAEG;iDADQ,IAAI;;;;;;;;EAsGhB"}
+{"version":3,"file":"MoreButtonMenuMixin.d.ts","sourceRoot":"","sources":["../../../../components/menu/src/MoreButtonMenuMixin.js"],"names":[],"mappings":"AA6DO;;;;;;;;;;;;;;;;;;QAyIH;;WAEG;iDADQ,IAAI;;;;;;;;EAoGhB"}

package/dist-types/components/overlays/src/OverlayController.d.ts

@@ -50,6 +50,7 @@ export class OverlayController extends EventTarget {
      * @private
      */
     private __escKeyHandlerCalled;
+    __hasSetup: boolean;
     /**
      * The invokerNode
      * @type {HTMLElement | undefined}
@@ -350,12 +351,27 @@ export class OverlayController extends EventTarget {
     protected _handleFeatures({ phase }: {
         phase: OverlayPhase;
     }): void;
+    /**
+     * @param {{phase: OverlayPhase}} opts
+     * @returns {void}
+     */
+    _handleFocusContentOnOpen({ phase }: {
+        phase: OverlayPhase;
+    }): void;
+    /**
+     * @param {{phase: OverlayPhase}} opts
+     * @returns {void}
+     */
+    _handleSyncChildrenCloseState({ phase }: {
+        phase: OverlayPhase;
+    }): void;
     /**
      * @param {{ phase: OverlayPhase }} config
      */
     _handleVisibilityTriggers({ phase }: {
         phase: OverlayPhase;
     }): void;
+    __visibilityTriggerHandler: any;
     /**
      * @param {{ phase: OverlayPhase }} config
      * @protected