@lion/ui 0.19.1 → 0.20.0-menu-system.0

package/components/overlays/src/OverlayMixin.js

@@ -33,10 +33,7 @@ export const OverlayMixinImplementation = superclass => {
   class OverlayMixin extends superclass {
     static get properties() {
       return {
-        opened: {
-          type: Boolean,
-          reflect: true,
-        },
+        opened: { type: Boolean, reflect: true },
       };
     }
 
@@ -62,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() {
@@ -70,6 +78,7 @@ export const OverlayMixinImplementation = superclass => {
 
     /** @param {OverlayConfig} value */
     set config(value) {
+      // TODO: built-in in overlayCtrl now... delete here
       const shouldUpdate = !isEqualConfig(this.config, value);
 
       if (this._overlayCtrl && shouldUpdate) {
@@ -161,6 +170,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
        */
@@ -218,11 +229,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
@@ -256,13 +267,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,
       };
@@ -282,6 +326,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();
@@ -434,6 +480,7 @@ export const OverlayMixinImplementation = superclass => {
   for (const postProcessor of overlayMixinPostProcessors) {
     postProcessor(OverlayMixin);
   }
-  return /** @type {* & OverlayMixin} */ (OverlayMixin);
+  // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051
+  return OverlayMixin;
 };
 export const OverlayMixin = dedupeMixin(OverlayMixinImplementation);

package/components/overlays/src/OverlaysManager.js

@@ -209,9 +209,9 @@ export class OverlaysManager {
           const newMarginBottom = this.__bodySizeVars.marginBottom + scrollbarHeight;
           // @ts-expect-error [external]: CSS not yet typed
           if (window.CSS?.number && document.body.attributeStyleMap?.set) {
-            // @ts-ignore
+            // @ts-ignore - CSS Typed OM not fully typed
             document.body.attributeStyleMap.set('margin-right', CSS.px(newMarginRight));
-            // @ts-ignore
+            // @ts-ignore - CSS Typed OM not fully typed
             document.body.attributeStyleMap.set('margin-bottom', CSS.px(newMarginBottom));
           } else {
             document.body.style.marginRight = `${newMarginRight}px`;

package/components/overlays/src/configurations/visibility-trigger-partials/withHoverInteraction.js

@@ -37,29 +37,11 @@ export function withHoverInteraction({
       /** @type {NodeJS.Timeout} */
       let pendingLongpressTimeout;
       let longpressCompleted = false;
-      // A tap fires pointerdown → pointerup → focusin because the browser moves keyboard focus to
-      // the tapped element. We only want focusin to open the tooltip when triggered by keyboard (Tab),
-      // not by tap. isLastPointerTouch marks that the preceding pointer event was a touch so the
-      // focusin handler can skip it.
-      let isLastPointerTouch = false;
-      // A tap fires the full mouse compatibility sequence: pointerdown → pointerup → mousedown → mouseup → click.
-      // Browsers generate these compatibility events automatically so touch works with mouse-only code.
-      // After a longpress the same click fires, which would trigger any click handler on the invoker
-      // e.g. opening a dialog alongside the tooltip. We register a capture-phase listener at longpress
-      // completion to intercept it, as capture runs before bubble so we stop it regardless of registration order.
-      /** @type {((e: Event) => void) | null} */
-      let pendingClickSuppressor = null;
 
       function resetActive() {
         isFocused = false;
         isHovered = false;
         longpressCompleted = false;
-        if (pendingClickSuppressor) {
-          controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
-            capture: true,
-          });
-          pendingClickSuppressor = null;
-        }
       }
 
       /**
@@ -77,17 +59,17 @@ export function withHoverInteraction({
       /**
        * @param {Event|PointerEvent} event
        */
-      function handleHoverAndFocus(event) {
+      async function handleHoverAndFocus(event) {
         const { type } = event;
         isFocused = type === 'focusout' ? false : isFocused || type === 'focusin';
         isHovered = type === 'mouseleave' ? false : isHovered || type === 'mouseenter';
-        if (!isHoverSupported && type === 'focusin') {
-          if (isLastPointerTouch) {
-            isLastPointerTouch = false;
-            return;
-          }
-          if (!controller.invokerNode?.matches(':focus-visible')) return;
-        }
+        // On touch devices, only open on keyboard-triggered focus, not tap-triggered focus
+        if (
+          !isHoverSupported &&
+          type === 'focusin' &&
+          !controller.invokerNode?.matches(':focus-visible')
+        )
+          return;
         const shouldOpen = isFocused || isHovered;
         openClose({ shouldOpen, openTimeout: delayIn, closeTimeout: delayOut });
       }
@@ -98,23 +80,15 @@ export function withHoverInteraction({
       }
 
       /** @param {PointerEvent} event */
-      function handleLongpress(event) {
+      async function handleLongpress(event) {
         clearTimeout(pendingLongpressTimeout);
         if (event.pointerType !== 'touch') return;
         const { type } = event;
 
         if (type === 'pointerdown') {
           longpressCompleted = false;
-          isLastPointerTouch = true;
           pendingLongpressTimeout = setTimeout(() => {
             longpressCompleted = true;
-            // Intercept the compatibility click the browser generates at the end of the touch sequence.
-            // Capture phase ensures we run before any bubble-phase handler (e.g. a dialog opener).
-            pendingClickSuppressor = e => e.stopImmediatePropagation();
-            controller.invokerNode?.addEventListener('click', pendingClickSuppressor, {
-              once: true, // auto-removes after first click
-              capture: true,
-            });
             openClose({ shouldOpen: true });
           }, longpressDuration);
         } else {
@@ -166,12 +140,6 @@ export function withHoverInteraction({
             controller.invokerNode?.removeEventListener('pointerdown', handleLongpress);
             controller.invokerNode?.removeEventListener('pointerup', handleLongpress);
             controller.invokerNode?.removeEventListener('pointerleave', handleLongpress);
-            if (pendingClickSuppressor) {
-              controller.invokerNode?.removeEventListener('click', pendingClickSuppressor, {
-                capture: true,
-              });
-              pendingClickSuppressor = null;
-            }
           }
         },
       };

package/components/overlays/src/utils/adopt-styles.js

@@ -56,7 +56,8 @@ function adoptStyleWhenAdoptedStylesheetsNotSupported(
     const styleEl = document.createElement('style');
     // keep notation, so it's not renamed in minification/build
     // eslint-disable-next-line dot-notation
-    const nonce = window['litNonce'];
+    // @ts-ignore - litNonce is a custom property
+    const nonce = window.litNonce;
     if (nonce !== undefined) {
       styleEl.setAttribute('nonce', nonce);
     }
@@ -124,7 +125,7 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets = [...renderRoot.adoptedStyleSheets, sheet];
+    renderRoot.adoptedStyleSheets = [...(renderRoot.adoptedStyleSheets || []), sheet];
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign

package/components/overlays/src/utils/get-focusable-elements.js

@@ -8,6 +8,7 @@ import { isVisible } from './is-visible.js';
 import { sortByTabIndex } from './sort-by-tabindex.js';
 
 // IE11 supports matches as 'msMatchesSelector'
+/** @type {'matches' | 'msMatchesSelector'} */
 const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
 
 /**
@@ -16,11 +17,14 @@ const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelec
  */
 function isFocusable(element) {
   // Elements that cannot be focused if they have [disabled] attribute.
+  // @ts-ignore - msMatchesSelector is legacy
   if (element[matchesFunc]('input, select, textarea, button, object')) {
+    // @ts-ignore
     return element[matchesFunc](':not([disabled])');
   }
 
   // Elements that can be focused even if they have [disabled] attribute.
+  // @ts-ignore
   return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
 }
 

package/components/overlays/src/utils/is-equal-config.js

@@ -12,13 +12,17 @@
  */
 export function isEqualConfig(a, b) {
   if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    if (typeof a === 'function' && typeof b === 'function') {
+      return /** @type {Function} */ (a).toString() === /** @type {Function} */ (b).toString();
+    }
     return a === b;
   }
-  const aProps = Object.keys(a);
-  const bProps = Object.keys(b);
-  if (aProps.length !== bProps.length) {
-    return false;
+  if (a instanceof Node && b instanceof Node) {
+    return a === b;
   }
-  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
-  return aProps.every(isEqual);
+
+  return Array.from(new Set([...Object.keys(a), ...Object.keys(b)])).every(prop =>
+    // @ts-ignore - dynamic property access
+    isEqualConfig(a[prop], b[prop], prop),
+  );
 }

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(),
@@ -283,8 +292,9 @@ describe('OverlayController', () => {
             contentNode,
           });
         };
+
         expect(createOverlayController).to.throw(
-          '[OverlayController] Could not find a render target, since the provided contentNode is not connected to the DOM. Make sure that it is connected, e.g. by doing "document.body.appendChild(contentNode)", before passing it on.',
+          '[OverlayController] Could not find a render target, makes sure contentNode has a parent element (or contentWrapperNode is connected)',
         );
       });
 
@@ -346,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', () => {
@@ -403,7 +428,7 @@ describe('OverlayController', () => {
               { ignoreAttributes: ['closedby'] },
             );
 
-            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
+            expect(el).lightDom.to.equal(`<div data-content="" slot="content">projected</div>`);
           });
         });
 
@@ -425,7 +450,7 @@ describe('OverlayController', () => {
               `
               <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
                 <div data-id="content-wrapper">
-                  <div id="content">non projected</div>
+                  <div data-content="" id="content">non projected</div>
                 </div>
               </dialog>
           `,
@@ -620,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 () => {
@@ -988,6 +1014,7 @@ describe('OverlayController', () => {
         });
       });
     });
+
     describe('hidesOnOutsideClick', () => {
       it('hides on outside click', async () => {
         const contentNode = /** @type {HTMLElement} */ (await fixture('<div>Content</div>'));
@@ -1708,6 +1735,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', () => {
@@ -2298,6 +2410,7 @@ describe('OverlayController', () => {
     });
 
     it('should run with scroll prevention', async () => {
+      await overlayControllerPreventsScroll.hide();
       await overlayControllerPreventsScroll.show();
 
       expect(

package/components/overlays/test/utils-tests/is-equal-config.test.js

@@ -48,7 +48,7 @@ describe('isEqualConfig()', () => {
     expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
   });
 
-  it('regards missing props different from ones with undefined value', () => {
+  it.skip('regards missing props different from ones with undefined value', () => {
     const config = TestConfig();
     expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
   });

package/components/overlays/test/withHoverInteraction.test.js

@@ -87,32 +87,4 @@ describe('withHoverInteraction (isHoverSupported: false)', () => {
     clock.tick(300);
     expect(ctrl.isShown).to.equal(false);
   });
-
-  it('suppresses focusin that immediately follows a touch pointerdown', () => {
-    ctrl.invokerNode?.dispatchEvent(
-      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
-    );
-    ctrl.invokerNode?.dispatchEvent(
-      new PointerEvent('pointerup', { pointerType: 'touch', bubbles: true }),
-    );
-    ctrl.invokerNode?.dispatchEvent(new Event('focusin', { bubbles: true }));
-    clock.tick(1); // fires any 0ms open timer if focusin was not suppressed
-    expect(ctrl.isShown).to.equal(false);
-  });
-
-  it('suppresses the click event that fires after a completed longpress', async () => {
-    ctrl.invokerNode?.dispatchEvent(
-      new PointerEvent('pointerdown', { pointerType: 'touch', bubbles: true }),
-    );
-    clock.runAll();
-    await Promise.resolve();
-    expect(ctrl.isShown).to.equal(true);
-
-    let clickFired = false;
-    ctrl.invokerNode?.addEventListener('click', () => {
-      clickFired = true;
-    });
-    ctrl.invokerNode?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    expect(clickFired).to.equal(false);
-  });
 });

package/components/overlays/test-suites/OverlayMixin.suite.js

@@ -537,13 +537,13 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       it('works with cache directive when reconnected', async () => {
         class CachingContext extends LitElement {
           static properties = {
-            switched: { type: Boolean },
+            showOverlay: { type: Boolean },
           };
 
           constructor() {
             super();
 
-            this.switched = false;
+            this.showOverlay = true;
           }
 
           get overlayEl() {
@@ -552,12 +552,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
           render() {
             return html`${cache(
-              this.switched
-                ? html`something else`
-                : html`<${tag} id="myOverlay">
+              this.showOverlay
+                ? html`<${tag} id="myOverlay">
               <div slot="content">content b</div>
               <button slot="invoker">invoker button b</button>
-            </${tag}>`,
+            </${tag}>`
+                : html`something else`,
             )}`;
           }
         }
@@ -578,7 +578,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         // @ts-expect-error [allow-protected] in tests
         const setupSpy = sinon.spy(el.overlayEl, '_setupOverlayCtrl');
 
-        el.switched = true;
+        el.showOverlay = false;
         // render the new content
         await el.updateComplete;
         // wait for the teardown to complete
@@ -588,7 +588,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         expect(teardownSpy.callCount).to.equal(1);
         expect(setupSpy.callCount).to.equal(0);
 
-        el.switched = false;
+        el.showOverlay = true;
         await el.updateComplete;
         expect(setupSpy.callCount).to.equal(1);
 

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

@@ -21,7 +21,6 @@ export type OverlayPhase =
   | 'add'
   | 'remove';
 
-
 export interface ViewportConfig {
   placement: ViewportPlacement;
 }
@@ -97,14 +96,30 @@ export interface OverlayConfig {
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';
 
-  /** render a div instead of dialog */
-  _noDialogEl?: Boolean;
-
   /**
    * Determines the conditions hiding/showing should be based on. It gets the OverlayController as input and returns an object with
    * functions with Overlay phases as keys
    */
   visibilityTriggerFunction?: Function;
-}
 
+  /**
+   * Whether the overlay content should receive focus when shown.
+   */
+  focusContentOnOpen?: boolean;
+
+  /*
+   * 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).
+   */
+  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/components/overlays/types/OverlayMixinTypes.ts

@@ -17,6 +17,8 @@ export interface DefineOverlayConfig {
 }
 
 export declare class OverlayHost {
+  static _getFocusableInvokerEl(focusableElOrWrapper: Element): Element | null;
+
   opened: Boolean;
   get config(): Partial<OverlayConfig>;
   set config(value: Partial<OverlayConfig>);