@lion/ui 0.0.9 → 0.0.11

package/components/overlays/test/OverlaysManager.test.js

@@ -27,24 +27,25 @@ describe('OverlaysManager', () => {
     mngr.teardown();
   });
 
-  it('provides .globalRootNode as a render target on first access', () => {
-    expect(document.body.querySelectorAll('.global-overlays').length).to.equal(0);
-    const rootNode = mngr.globalRootNode;
-    expect(document.body.querySelector('.global-overlays')).to.equal(rootNode);
+  it('provides global stylesheet for arrangement of body scroll', () => {
+    expect(document.head.querySelectorAll('[data-overlays]').length).to.equal(1);
   });
 
   it('provides .teardown() for cleanup', () => {
-    const rootNode = mngr.globalRootNode;
-    expect(document.body.querySelector('.global-overlays')).to.equal(rootNode);
-    expect(document.head.querySelector('[data-global-overlays=""]')).not.be.undefined;
+    expect(document.head.querySelector('[data-overlays=""]')).not.be.undefined;
 
     mngr.teardown();
-    expect(document.body.querySelectorAll('.global-overlays').length).to.equal(0);
-    expect(document.head.querySelector('[data-global-overlays=""]')).be.null;
+    expect(document.head.querySelector('[data-overlays=""]')).be.null;
 
     // safety check via private access (do not use this)
-    expect(OverlaysManager.__globalRootNode).to.be.undefined;
     expect(OverlaysManager.__globalStyleNode).to.be.undefined;
+
+    // @ts-ignore [allow-private-in-test]
+    expect(mngr.__list).to.be.empty;
+    // @ts-ignore [allow-private-in-test]
+    expect(mngr.__shownList).to.be.empty;
+    // @ts-ignore [allow-private-in-test]
+    expect(mngr.__siblingsInert).to.be.false;
   });
 
   it('can add/remove controllers', () => {
@@ -121,22 +122,18 @@ describe('OverlaysManager', () => {
     });
 
     describe('When initialized with "preventsScroll: true"', () => {
-      it('adds class "global-overlays-scroll-lock-ios-fix" to body and html on iOS', async () => {
+      it('adds class "overlays-scroll-lock-ios-fix" to body and html on iOS', async () => {
         mockIOS();
         const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
         await dialog.show();
-        expect(Array.from(document.body.classList)).to.contain(
-          'global-overlays-scroll-lock-ios-fix',
-        );
+        expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.contain(
-          'global-overlays-scroll-lock-ios-fix',
+          'overlays-scroll-lock-ios-fix',
         );
         await dialog.hide();
-        expect(Array.from(document.body.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
-        );
+        expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
+          'overlays-scroll-lock-ios-fix',
         );
 
         // When we are not iOS nor MacSafari
@@ -145,30 +142,24 @@ describe('OverlaysManager', () => {
 
         const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
         await dialog2.show();
-        expect(Array.from(document.body.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
-        );
+        expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
+          'overlays-scroll-lock-ios-fix',
         );
       });
 
-      it('adds class "global-overlays-scroll-lock-ios-fix" to body on MacSafari', async () => {
+      it('adds class "overlays-scroll-lock-ios-fix" to body on MacSafari', async () => {
         mockMacSafari();
         const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
         await dialog.show();
-        expect(Array.from(document.body.classList)).to.contain(
-          'global-overlays-scroll-lock-ios-fix',
-        );
+        expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
+          'overlays-scroll-lock-ios-fix',
         );
         await dialog.hide();
-        expect(Array.from(document.body.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
-        );
+        expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
-          'global-overlays-scroll-lock-ios-fix',
+          'overlays-scroll-lock-ios-fix',
         );
       });
     });

package/components/overlays/test/global-positioning.test.js

@@ -18,25 +18,14 @@ describe('Global Positioning', () => {
     overlays.teardown();
   });
 
-  describe('Basics', () => {
-    it('puts ".contentNode" in the body of the page', async () => {
-      const ctrl = new OverlayController({
-        ...withDefaultGlobalConfig(),
-      });
-      await ctrl.show();
-      expect(overlays.globalRootNode.children.length).to.equal(1);
-      expect(overlays.globalRootNode.children[0]).to.have.trimmed.text('my content');
-    });
-  });
-
   describe('viewportConfig', () => {
     it('positions the overlay in center by default', async () => {
       const ctrl = new OverlayController({
         ...withDefaultGlobalConfig(),
       });
       await ctrl.show();
-      expect(ctrl.content.classList.contains('global-overlays__overlay-container--center')).to.be
-        .true;
+      expect(ctrl.contentWrapperNode.classList.contains('overlays__overlay-container--center')).to
+        .be.true;
     });
 
     it('positions relative to the viewport ', async () => {
@@ -60,8 +49,8 @@ describe('Global Positioning', () => {
         });
         await ctrl.show();
         expect(
-          ctrl.content.classList.contains(
-            `global-overlays__overlay-container--${viewportPlacement}`,
+          ctrl.contentWrapperNode.classList.contains(
+            `overlays__overlay-container--${viewportPlacement}`,
           ),
         ).to.be.true;
       });

package/components/overlays/test/local-positioning.test.js

@@ -9,6 +9,39 @@ import { normalizeTransformStyle } from './utils-tests/local-positioning-helpers
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
  */
 
+/**
+ * Make sure we never use a native button element, since its dimensions
+ * are not cross browser consistent
+ * For debugging purposes, add colors...
+ * @param {{clickHandler?: function; width?: number; height?: number}} opts
+ */
+function createInvokerSync({ clickHandler = () => {}, width = 100, height = 20 }) {
+  return /** @type {HTMLDivElement} */ (
+    fixtureSync(html`
+      <div
+        role="button"
+        style="width: ${width}px; height: ${height}px; background: red; color: white;"
+        @click=${clickHandler}
+      >
+        Invoker
+      </div>
+    `)
+  );
+}
+
+/**
+ * @param {{ width?: number; height?: number }} opts
+ */
+function createContentSync({ width = 80, height = 20 }) {
+  return /** @type {HTMLDivElement} */ (
+    fixtureSync(html`
+      <div style="width: ${width}px; height: ${height}px; background: green; color: white;">
+        Content
+      </div>
+    `)
+  );
+}
+
 const withLocalTestConfig = () =>
   /** @type {OverlayConfig} */ ({
     placementMode: 'local',
@@ -47,14 +80,13 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: fixed; left: 100px; top: 100px;">
-          ${ctrl.invokerNode}${ctrl.content}
+          ${ctrl.invokerNode}${ctrl.__wrappingDialogNode}
         </div>
       `);
       await ctrl.show();
 
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate(-30px, -18px)',
-        'translate should be -30px [to center = (80 - 20)/2*-1], -18px [to place above = 10 invoker height + 8 default padding]',
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
+        'translate(70px, -508px)',
       );
     });
 
@@ -76,11 +108,11 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: fixed; left: 100px; top: 100px;">
-          ${ctrl.invokerNode}${ctrl.content}
+          ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
       await ctrl.show();
-      expect(ctrl.content.getAttribute('data-popper-placement')).to.equal('top');
+      expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('top');
     });
 
     it('positions to preferred place if placement is set and space is available', async () => {
@@ -104,12 +136,12 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: absolute; left: 120px; top: 50px;">
-          ${ctrl.invokerNode}${ctrl.content}
+          ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
 
       await ctrl.show();
-      expect(ctrl.content.getAttribute('data-popper-placement')).to.equal('left-start');
+      expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('left-start');
     });
 
     it('positions to different place if placement is set and no space is available', async () => {
@@ -130,11 +162,13 @@ describe('Local Positioning', () => {
         },
       });
       await fixture(html`
-        <div style="position: absolute; top: 50px;">${ctrl.invokerNode}${ctrl.content}</div>
+        <div style="position: absolute; top: 50px;">
+          ${ctrl.invokerNode}${ctrl.contentWrapperNode}
+        </div>
       `);
 
       await ctrl.show();
-      expect(ctrl.content.getAttribute('data-popper-placement')).to.equal('right');
+      expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('right');
     });
 
     it('allows the user to override default Popper modifiers', async () => {
@@ -164,7 +198,7 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: absolute; left: 100px; top: 50px;">
-          ${ctrl.invokerNode}${ctrl.content}
+          ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
 
@@ -175,37 +209,30 @@ describe('Local Positioning', () => {
     it('positions the Popper element correctly on show', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
-          fixtureSync(html`
-            <div
-              role="button"
-              style="width: 100px; height: 20px;"
-              @click=${() => ctrl.show()}
-            ></div>
-          `)
-        ),
+        contentNode: createContentSync({ width: 80, height: 20 }),
+        invokerNode: createInvokerSync({ clickHandler: () => ctrl.show(), width: 100, height: 20 }),
         popperConfig: {
           placement: 'top',
         },
       });
       await fixture(html`
         <div style="position: absolute; top: 300px; left: 100px;">
-          ${ctrl.invokerNode}${ctrl.content}
+          ${ctrl.invokerNode}${ctrl.__wrappingDialogNode}
         </div>
       `);
+
       await ctrl.show();
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate(10px, -28px)',
-        'Popper positioning values',
+
+      // N.B. margin between invoker and content = 8px
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
+        'translate(110px, -308px)',
+        '110 = (100 + (100-80)/2); -308= 300 + 8',
       );
 
       await ctrl.hide();
       await ctrl.show();
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
-        'translate(10px, -28px)',
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
+        'translate(110px, -308px)',
         'Popper positioning values should be identical after hiding and showing',
       );
     });
@@ -241,12 +268,12 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: absolute; top: 300px; left: 100px;">
-          ${ctrl.invokerNode} ${ctrl.content}
+          ${ctrl.invokerNode} ${ctrl.contentWrapperNode}
         </div>
       `);
 
       await ctrl.show();
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
@@ -267,7 +294,7 @@ describe('Local Positioning', () => {
       });
       await ctrl.show();
       expect(ctrl._popper.options.modifiers.offset.offset).to.equal('0, 20px');
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -40px, 0px)',
         'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
@@ -302,12 +329,12 @@ describe('Local Positioning', () => {
       });
       await fixture(html`
         <div style="position: absolute; top: 300px; left: 100px;">
-          ${ctrl.invokerNode} ${ctrl.content}
+          ${ctrl.invokerNode} ${ctrl.contentWrapperNode}
         </div>
       `);
 
       await ctrl.show();
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
@@ -317,7 +344,7 @@ describe('Local Positioning', () => {
           modifiers: [{ name: 'offset', enabled: true, options: { offset: [0, 20] } }],
         },
       });
-      expect(normalizeTransformStyle(ctrl.content.style.transform)).to.equal(
+      expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -40px, 0px)',
         'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
@@ -333,7 +360,7 @@ describe('Local Positioning', () => {
         invokerNode,
       });
       await ctrl.show();
-      expect(ctrl.content.style.minWidth).to.equal('60px');
+      expect(ctrl.contentWrapperNode.style.minWidth).to.equal('60px');
     });
 
     it('can set the contentNode maxWidth as the invokerNode width', async () => {
@@ -346,7 +373,7 @@ describe('Local Positioning', () => {
         invokerNode,
       });
       await ctrl.show();
-      expect(ctrl.content.style.maxWidth).to.equal('60px');
+      expect(ctrl.contentWrapperNode.style.maxWidth).to.equal('60px');
     });
 
     it('can set the contentNode width as the invokerNode width', async () => {
@@ -359,7 +386,7 @@ describe('Local Positioning', () => {
         invokerNode,
       });
       await ctrl.show();
-      expect(ctrl.content.style.width).to.equal('60px');
+      expect(ctrl.contentWrapperNode.style.width).to.equal('60px');
     });
   });
 });

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

@@ -1,7 +1,7 @@
 import { expect, fixture, html, nextFrame, aTimeout } from '@open-wc/testing';
 
 import sinon from 'sinon';
-import { overlays, OverlayController } from '@lion/ui/overlays.js';
+import { overlays as overlaysManager, OverlayController } from '@lion/ui/overlays.js';
 
 import '@lion/ui/define/lion-dialog.js';
 import { _browserDetection } from '../src/OverlaysManager.js';
@@ -15,10 +15,12 @@ import { _browserDetection } from '../src/OverlaysManager.js';
  * @typedef {LitElement & OverlayHost & {_overlayCtrl:OverlayController}} OverlayEl
  */
 
-function getGlobalOverlayNodes() {
-  return Array.from(overlays.globalRootNode.children).filter(
-    child => !child.classList.contains('global-overlays__backdrop'),
-  );
+function getGlobalOverlayCtrls() {
+  return overlaysManager.list;
+}
+
+function resetOverlaysManager() {
+  overlaysManager.list.forEach(overlayCtrl => overlaysManager.remove(overlayCtrl));
 }
 
 /**
@@ -94,7 +96,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
         )
       );
 
-      // For now, we skip this test for MacSafari, since the body.global-overlays-scroll-lock-ios-fix
+      // For now, we skip this test for MacSafari, since the body.overlays-scroll-lock-ios-fix
       // class results in a scrollbar when preventsScroll is true.
       // However, fully functioning interacive elements (input fields) in the dialog are more important
       if (_browserDetection.isMacSafari && elWithBigParent._overlayCtrl.preventsScroll) {
@@ -220,23 +222,21 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       function sendCloseEvent(/** @type {Event} */ e) {
         e.target?.dispatchEvent(new Event('close-overlay', { bubbles: true }));
       }
-      const closeBtn = /** @type {OverlayEl} */ (
-        await fixture(html` <button @click=${sendCloseEvent}>close</button> `)
-      );
 
       const el = /** @type {OverlayEl} */ (
         await fixture(html`
         <${tag} opened>
           <div slot="content">
             content of the overlay
-            ${closeBtn}
+            <button @click=${sendCloseEvent}>close</button>
           </div>
           <button slot="invoker">invoker button</button>
         </${tag}>
       `)
       );
-      closeBtn.click();
-      await nextFrame(); // hide takes at least a frame
+      // @ts-ignore
+      el.querySelector('[slot=content] button').click();
+      await el._overlayCtrl._hideComplete;
       expect(el.opened).to.be.false;
     });
 
@@ -337,10 +337,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
     // For some reason, globalRootNode is not cleared properly on disconnectedCallback from previous overlay test fixtures...
     // Not sure why this "bug" happens...
     beforeEach(() => {
-      const globalRootNode = document.querySelector('.global-overlays');
-      if (globalRootNode) {
-        globalRootNode.innerHTML = '';
-      }
+      resetOverlaysManager();
     });
 
     it('supports nested overlays', async () => {
@@ -362,7 +359,7 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       );
 
       if (el._overlayCtrl.placementMode === 'global') {
-        expect(getGlobalOverlayNodes().length).to.equal(2);
+        expect(getGlobalOverlayCtrls().length).to.equal(2);
       }
 
       el.opened = true;
@@ -386,12 +383,12 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
       `)
       );
       if (el._overlayCtrl.placementMode === 'global') {
-        expect(getGlobalOverlayNodes().length).to.equal(1);
+        expect(getGlobalOverlayCtrls().length).to.equal(1);
 
         const moveTarget = /** @type {OverlayEl} */ (await fixture('<div id="target"></div>'));
         moveTarget.appendChild(el);
         await el.updateComplete;
-        expect(getGlobalOverlayNodes().length).to.equal(1);
+        expect(getGlobalOverlayCtrls().length).to.equal(1);
       }
     });
 
@@ -419,14 +416,9 @@ export function runOverlayMixinSuite({ tagString, tag, suffix = '' }) {
 
       if (el._overlayCtrl.placementMode === 'global') {
         // Find the outlets that are not backdrop outlets
-        const overlayContainerNodes = getGlobalOverlayNodes();
-        expect(overlayContainerNodes.length).to.equal(2);
-        const lastContentNodeInContainer = overlayContainerNodes[1];
+        expect(getGlobalOverlayCtrls().length).to.equal(2);
         // Check that the last container is the nested one with the intended content
-        expect(lastContentNodeInContainer.firstElementChild.firstChild.textContent).to.equal(
-          'content of the nested overlay',
-        );
-        expect(lastContentNodeInContainer.firstElementChild.slot).to.equal('content');
+        expect(el.contains(nestedEl)).to.be.true;
       } else {
         const contentNode = /** @type {HTMLElement} */ (
           // @ts-ignore [allow-protected] in tests

package/components/overlays/types/OverlayConfig.ts

@@ -1,8 +1,23 @@
 import { Options } from '@popperjs/core';
 
 export interface OverlayConfig {
-  /** Determines the connection point in DOM (body vs next to invoker). */
+  // Positioning
+
+  /** Determines the positioning anchore (viewport vs invokerNode/referenceNode). */
   placementMode?: 'global' | 'local' | undefined;
+  /** Popper configuration. Will be used when placementMode is 'local' */
+  popperConfig?: Partial<Options>;
+  /** Viewport positioning configuration. Will be used when placementMode is 'global' */
+  viewportConfig?: ViewportConfig;
+  /** Hides other overlays when multiple are opened (currently exclusive to globalOverlayController) */
+  isBlocking?: boolean;
+  /** Will align contentNode with referenceNode (invokerNode by default) for local overlays. Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode. 'full' will make sure that the invoker width always is the same. */
+  inheritsReferenceWidth?: 'max' | 'full' | 'min' | 'none';
+  /** Change the default of 9999 */
+  zIndex?: number;
+
+  // Elements
+
   /** The interactive element (usually a button) invoking the dialog or tooltip */
   invokerNode?: HTMLElement;
   /** The element that is used to position the overlay content relative to. Usually, this is the same element as invokerNode. Should only be provided when invokerNode should not be positioned against */
@@ -15,10 +30,14 @@ export interface OverlayConfig {
   backdropNode?: HTMLElement;
   /** The element that should be called `.focus()` on after dialog closes */
   elementToFocusAfterHide?: HTMLElement;
+
+  // Backdrop
+
   /** Whether it should have a backdrop (currently exclusive to globalOverlayController) */
   hasBackdrop?: boolean;
-  /** Hides other overlays when mutiple are opened (currently exclusive to globalOverlayController) */
-  isBlocking?: boolean;
+
+  // User interaction
+
   /** Prevents scrolling body content when overlay opened (currently exclusive to globalOverlayController) */
   preventsScroll?: boolean;
   /** Rotates tab, implicitly set when 'isModal' */
@@ -29,8 +48,9 @@ export interface OverlayConfig {
   hidesOnOutsideClick?: boolean;
   /** Hides the overlay when pressing esc, even when contentNode has no focus */
   hidesOnOutsideEsc?: boolean;
-  /** Will align contentNode with referenceNode (invokerNode by default) for local overlays. Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode. 'full' will make sure that the invoker width always is the same. */
-  inheritsReferenceWidth?: 'max' | 'full' | 'min' | 'none';
+
+  // Accessibility
+
   /**
    *  For non `isTooltip`:
    *  - sets aria-expanded="true/false" and aria-haspopup="true" on invokerNode
@@ -42,14 +62,22 @@ export interface OverlayConfig {
    *  - sets role="tooltip" and aria-labelledby/aria-describedby on the content
    */
   handlesAccessibility?: boolean;
+
+  // Tooltip
+
   /** Has a totally different interaction- and accessibility pattern from all other overlays. Will behave as role="tooltip" element instead of a role="dialog" element */
   isTooltip?: boolean;
   /** 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';
-  /** Popper configuration. Will be used when placementMode is 'local' */
-  popperConfig?: Partial<Options>;
-  /** Viewport configuration. Will be used when placementMode is 'global' */
-  viewportConfig?: ViewportConfig;
+
+  /** 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;
 }
 
 export type ViewportPlacement =
@@ -61,8 +89,7 @@ export type ViewportPlacement =
   | 'bottom-right'
   | 'bottom'
   | 'bottom-left'
-  | 'left'
-  | 'center';
+  | 'left';
 
 export interface ViewportConfig {
   placement: ViewportPlacement;

package/components/overlays/types/OverlayMixinTypes.ts

@@ -18,8 +18,8 @@ export interface DefineOverlayConfig {
 
 export declare class OverlayHost {
   opened: Boolean;
-  get config(): OverlayConfig;
-  set config(value: OverlayConfig);
+  get config(): Partial<OverlayConfig>;
+  set config(value: Partial<OverlayConfig>);
 
   open(): Promise<void>;
   close(): Promise<void>;

package/components/select-rich/src/LionSelectInvoker.js

@@ -15,8 +15,7 @@ import { SlotMixin } from '@lion/ui/core.js';
 export class LionSelectInvoker extends SlotMixin(LionButton) {
   static get styles() {
     return [
-      // TODO switch back to ...super.styles once fixed https://github.com/lit/lit.dev/pull/535
-      ...LionButton.styles,
+      ...super.styles,
       css`
         :host {
           justify-content: space-between;
@@ -31,9 +30,9 @@ export class LionSelectInvoker extends SlotMixin(LionButton) {
     ];
   }
 
+  /** @type {any} */
   static get properties() {
     return {
-      ...super.properties,
       selectedElement: { type: Object },
       hostElement: { type: Object },
       readOnly: { type: Boolean, reflect: true, attribute: 'readonly' },

package/components/select-rich/src/LionSelectRich.js

@@ -408,27 +408,29 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @protected
    */
   async _alignInvokerWidth() {
-    if (this._overlayCtrl && this._overlayCtrl.content) {
-      await this.updateComplete;
-      const initContentDisplay = this._overlayCtrl.content.style.display;
-      const initContentMinWidth = this._overlayCtrl.content.style.minWidth;
-      const initContentWidth = this._overlayCtrl.content.style.width;
-      this._overlayCtrl.content.style.display = '';
-      this._overlayCtrl.content.style.minWidth = 'auto';
-      this._overlayCtrl.content.style.width = 'auto';
-      const contentWidth = this._overlayCtrl.content.getBoundingClientRect().width;
-      /**
-       * TODO when inside an overlay the current solution doesn't work.
-       * Since that dialog is still hidden, open and close the select-rich
-       * doesn't have any effect so the contentWidth returns 0
-       */
-      if (contentWidth > 0) {
-        this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
-      }
-      this._overlayCtrl.content.style.display = initContentDisplay;
-      this._overlayCtrl.content.style.minWidth = initContentMinWidth;
-      this._overlayCtrl.content.style.width = initContentWidth;
+    if (!this._overlayCtrl?.content) {
+      return;
+    }
+
+    await this.updateComplete;
+    const initContentDisplay = this._overlayCtrl.content.style.display;
+    const initContentMinWidth = this._overlayCtrl.contentWrapperNode.style.minWidth;
+    const initContentWidth = this._overlayCtrl.contentWrapperNode.style.width;
+    this._overlayCtrl.content.style.display = '';
+    this._overlayCtrl.contentWrapperNode.style.minWidth = 'auto';
+    this._overlayCtrl.contentWrapperNode.style.width = 'auto';
+    const contentWidth = this._overlayCtrl.contentWrapperNode.getBoundingClientRect().width;
+    /**
+     * TODO when inside an overlay the current solution doesn't work.
+     * Since that dialog is still hidden, open and close the select-rich
+     * doesn't have any effect so the contentWidth returns 0
+     */
+    if (contentWidth > 0) {
+      this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
     }
+    this._overlayCtrl.content.style.display = initContentDisplay;
+    this._overlayCtrl.contentWrapperNode.style.minWidth = initContentMinWidth;
+    this._overlayCtrl.contentWrapperNode.style.width = initContentWidth;
   }
 
   /**