@lion/ui 0.0.9 → 0.0.11

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

@@ -11,7 +11,7 @@ import {
 import sinon from 'sinon';
 import { OverlayController, overlays } from '@lion/ui/overlays.js';
 import { mimicClick } from '@lion/ui/overlays-test-helpers.js';
-
+import { overlayShadowDomStyle } from '../src/overlayShadowDomStyle.js';
 import { keyCodes } from '../src/utils/key-codes.js';
 import { simulateTab } from '../src/utils/simulate-tab.js';
 
@@ -20,6 +20,33 @@ import { simulateTab } from '../src/utils/simulate-tab.js';
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
  */
 
+const wrappingDialogNodeStyle = 'display: none; z-index: 9999;';
+
+/**
+ * Returns element that adopts stylesheet
+ * @param {Element} shadowOrBodyEl
+ * @returns {ShadowRoot}
+ */
+function getRootNodeOrBodyElThatAdoptsStylesheet(shadowOrBodyEl) {
+  const rootNode = /** @type {* & DocumentOrShadowRoot} */ (shadowOrBodyEl.getRootNode());
+  if (rootNode === document) {
+    // @ts-ignore
+    return document.body;
+  }
+  return rootNode;
+}
+
+/**
+ * Make sure that all browsers serialize html in a similar way
+ * (Firefox tends to output empty style attrs)
+ * @param {HTMLElement} node
+ */
+function normalizeOverlayContentWapper(node) {
+  if (node.hasAttribute('style') && !node.style.cssText) {
+    node.removeAttribute('style');
+  }
+}
+
 /**
  * @param {OverlayController} overlayControllerEl
  */
@@ -66,7 +93,56 @@ describe('OverlayController', () => {
         ...withGlobalTestConfig(),
       });
       expect(ctrl.content).not.to.be.undefined;
-      expect(ctrl.contentNode.parentElement).to.equal(ctrl.content);
+      expect(ctrl.contentNode.parentElement).to.equal(ctrl.contentWrapperNode);
+    });
+
+    describe('Stylesheets', () => {
+      it('adds a stylesheet to the body when contentWrapper is located there', async () => {
+        new OverlayController({
+          ...withLocalTestConfig(),
+        });
+        // @ts-ignore
+        if (document.body.adoptedStyleSheets) {
+          // @ts-ignore
+          expect(document.body.adoptedStyleSheets).to.include(overlayShadowDomStyle.styleSheet);
+        }
+      });
+
+      it('adds a stylesheet to the shadowRoot when contentWrappeNode is located there', async () => {
+        const contentNode = /** @type {HTMLElement} */ (await fixture('<div>contentful</div>'));
+        const shadowHost = document.createElement('div');
+        shadowHost.attachShadow({ mode: 'open' });
+        /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `<slot></slot>`;
+        shadowHost.appendChild(contentNode);
+        document.body.appendChild(shadowHost);
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          contentNode,
+        });
+
+        const rootNodeOrBody = getRootNodeOrBodyElThatAdoptsStylesheet(ctrl.contentWrapperNode);
+        expect(rootNodeOrBody).to.not.equal(document.body);
+
+        if (rootNodeOrBody.adoptedStyleSheets) {
+          expect(rootNodeOrBody.adoptedStyleSheets).to.include(overlayShadowDomStyle.styleSheet);
+        }
+        document.body.removeChild(shadowHost);
+      });
+
+      it('does not add same stylesheet twice', async () => {
+        // @ts-ignore
+        if (!document.body.adoptedStyleSheets) {
+          return;
+        }
+
+        new OverlayController({ ...withLocalTestConfig() });
+        // @ts-ignore
+        const amountOfStylesheetsAfterOneInit = document.body.adoptedStyleSheets.length;
+
+        new OverlayController({ ...withLocalTestConfig() });
+        // @ts-ignore
+        expect(document.body.adoptedStyleSheets.length).to.equal(amountOfStylesheetsAfterOneInit);
+      });
     });
 
     describe('Z-index on local overlays', () => {
@@ -106,17 +182,21 @@ describe('OverlayController', () => {
           contentNode: await createZNode('auto', { mode: 'global' }),
         });
         await ctrl.show();
-        expect(ctrl.content.style.zIndex).to.equal('1');
+        // @ts-expect-error find out why config would/could be undfined
+        expect(ctrl.content.style.zIndex).to.equal(`${ctrl.config.zIndex + 1}`);
         ctrl.updateConfig({ contentNode: await createZNode('auto', { mode: 'inline' }) });
         await ctrl.show();
-        expect(ctrl.content.style.zIndex).to.equal('1');
+        // @ts-expect-error find out why config would/could be undfined
+        expect(ctrl.content.style.zIndex).to.equal(`${ctrl.config.zIndex + 1}`);
 
         ctrl.updateConfig({ contentNode: await createZNode('0', { mode: 'global' }) });
         await ctrl.show();
-        expect(ctrl.content.style.zIndex).to.equal('1');
+        // @ts-expect-error find out why config would/could be undfined
+        expect(ctrl.content.style.zIndex).to.equal(`${ctrl.config.zIndex + 1}`);
         ctrl.updateConfig({ contentNode: await createZNode('0', { mode: 'inline' }) });
         await ctrl.show();
-        expect(ctrl.content.style.zIndex).to.equal('1');
+        // @ts-expect-error find out why config would/could be undfined
+        expect(ctrl.content.style.zIndex).to.equal(`${ctrl.config.zIndex + 1}`);
       });
 
       it.skip("doesn't set a z-index when contentNode already has >= 1", async () => {
@@ -147,42 +227,7 @@ describe('OverlayController', () => {
       });
     });
 
-    describe('Render target', () => {
-      it('creates global target for placement mode "global"', async () => {
-        const ctrl = new OverlayController({
-          ...withGlobalTestConfig(),
-        });
-        const { renderTarget } = getProtectedMembers(ctrl);
-        expect(renderTarget).to.equal(overlays.globalRootNode);
-      });
-
-      it.skip('creates local target next to sibling for placement mode "local"', async () => {
-        const ctrl = new OverlayController({
-          ...withLocalTestConfig(),
-          invokerNode: /** @type {HTMLElement} */ (await fixture(html`<button>Invoker</button>`)),
-        });
-        const { renderTarget } = getProtectedMembers(ctrl);
-        expect(renderTarget).to.be.undefined;
-        expect(ctrl.content).to.equal(ctrl.invokerNode?.nextElementSibling);
-      });
-
-      it('keeps local target for placement mode "local" when already connected', async () => {
-        const parentNode = /** @type {HTMLElement} */ (
-          await fixture(html`
-            <div id="parent">
-              <div id="content">Content</div>
-            </div>
-          `)
-        );
-        const contentNode = /** @type {HTMLElement} */ (parentNode.querySelector('#content'));
-        const ctrl = new OverlayController({
-          ...withLocalTestConfig(),
-          contentNode,
-        });
-        const { renderTarget } = getProtectedMembers(ctrl);
-        expect(renderTarget).to.equal(parentNode);
-      });
-
+    describe('Offline content', () => {
       it('throws when passing a content node that was created "offline"', async () => {
         const contentNode = document.createElement('div');
         const createOverlayController = () => {
@@ -197,113 +242,250 @@ describe('OverlayController', () => {
       });
 
       it('succeeds when passing a content node that was created "online"', async () => {
-        const contentNode = document.createElement('div');
-        document.body.appendChild(contentNode);
+        const contentNode = /** @type {HTMLElement} */ (fixtureSync('<div>'));
         const overlay = new OverlayController({
           ...withLocalTestConfig(),
           contentNode,
         });
-        const { renderTarget } = getProtectedMembers(overlay);
-
         expect(overlay.contentNode.isConnected).to.be.true;
-        expect(renderTarget).to.not.be.undefined;
       });
     });
   });
 
   // TODO: Add teardown feature tests
-  describe('Teardown', () => {
-    it('removes the contentWrapperNode from global rootnode upon teardown', async () => {
-      const ctrl = new OverlayController({
-        ...withGlobalTestConfig(),
-      });
-
-      expect(ctrl.manager.globalRootNode.children.length).to.equal(1);
-      ctrl.teardown();
-      expect(ctrl.manager.globalRootNode.children.length).to.equal(0);
-    });
+  describe('Teardown', () => {});
 
-    it('[global] restores contentNode if it was/is a projected node', async () => {
-      const shadowHost = document.createElement('div');
-      shadowHost.id = 'shadowHost';
-      shadowHost.attachShadow({ mode: 'open' });
-      /** @type {ShadowRoot} */
-      (shadowHost.shadowRoot).innerHTML = `
-        <div id="contentWrapperNode">
-          <slot name="contentNode"></slot>
-          <my-arrow></my-arrow>
-        </div>
-      `;
-      const contentNode = document.createElement('div');
-      contentNode.slot = 'contentNode';
-      shadowHost.appendChild(contentNode);
+  describe('Node Configuration', () => {
+    describe('Content', async () => {
+      it('accepts a .contentNode for displaying content of the overlay', async () => {
+        const myContentNode = /** @type {HTMLElement} */ (fixtureSync('<p>direct node</p>'));
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          contentNode: myContentNode,
+        });
+        expect(ctrl.contentNode).to.have.trimmed.text('direct node');
+        expect(ctrl.contentNode).to.equal(myContentNode);
+      });
+
+      describe('Embedded dom structure', async () => {
+        describe('When projected in shadow dom', async () => {
+          it('wraps a .contentWrapperNode for style application and a <dialog role="none"> for top layer paints', async () => {
+            const tagString = defineCE(
+              class extends HTMLElement {
+                constructor() {
+                  super();
+                  this.attachShadow({ mode: 'open' });
+                }
+
+                connectedCallback() {
+                  /** @type {ShadowRoot} */
+                  (this.shadowRoot).innerHTML = '<slot name="content"></slot>';
+                  this.innerHTML = '<div slot="content">projected</div>';
+                }
+              },
+            );
+
+            const el = /** @type {HTMLElement} */ (fixtureSync(`<${tagString}></${tagString}>`));
+            const myContentNode = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: myContentNode,
+            });
+
+            expect(ctrl.contentNode.assignedSlot?.parentElement).to.equal(ctrl.contentWrapperNode);
+            expect(ctrl.contentWrapperNode.parentElement?.tagName).to.equal('DIALOG');
+
+            normalizeOverlayContentWapper(ctrl.contentWrapperNode);
+
+            // The total dom structure created...
+            expect(el).shadowDom.to.equal(`
+              <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
+                <div data-id="content-wrapper">
+                  <slot name="content">
+                  </slot>
+                </div>
+              </dialog>
+            `);
+
+            expect(el).lightDom.to.equal(`<div slot="content">projected</div>`);
+          });
+        });
 
-      const wrapper = /** @type {HTMLElement} */ (await fixture('<div id="wrapper"></div>'));
-      // Ensure the contentNode is connected to DOM
-      wrapper.appendChild(shadowHost);
+        describe('When in light dom', async () => {
+          it('wraps a .contentWrapperNode for style application and a <dialog role="none"> for top layer paints', async () => {
+            const el = fixtureSync('<section><div id="content">non projected</div></section>');
+            const myContentNode = /** @type {HTMLElement} */ (el.querySelector('#content'));
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: myContentNode,
+            });
+            expect(ctrl.contentNode.parentElement).to.equal(ctrl.contentWrapperNode);
+            expect(ctrl.contentWrapperNode.parentElement?.tagName).to.equal('DIALOG');
+
+            normalizeOverlayContentWapper(ctrl.contentWrapperNode);
+
+            // The total dom structure created...
+            expect(el).lightDom.to.equal(`
+              <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
+                <div data-id="content-wrapper">
+                  <div id="content">non projected</div>
+                </div>
+              </dialog>
+          `);
+          });
+        });
 
-      // has one child = <div slot="contentNode"></div>
-      expect(shadowHost.children.length).to.equal(1);
+        describe('When .contenWrapperNode provided', async () => {
+          it('keeps the .contentWrapperNode for style application and wraps a <dialog role="none"> for top layer paints', async () => {
+            const tagString = defineCE(
+              class extends HTMLElement {
+                constructor() {
+                  super();
+                  this.attachShadow({ mode: 'open' });
+                }
+
+                connectedCallback() {
+                  /** @type {ShadowRoot} */
+                  (this.shadowRoot).innerHTML = '<div><slot name="content"></slot></div>';
+                  this.innerHTML = '<div slot="content">projected</div>';
+                }
+              },
+            );
+
+            const el = /** @type {HTMLElement} */ (fixtureSync(`<${tagString}></${tagString}>`));
+            const myContentNode = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
+            const myContentWrapper = /** @type {HTMLElement} */ (
+              el.shadowRoot?.querySelector('div')
+            );
+            const ctrl = new OverlayController({
+              ...withGlobalTestConfig(),
+              contentNode: myContentNode,
+              contentWrapperNode: myContentWrapper,
+            });
+
+            normalizeOverlayContentWapper(ctrl.contentWrapperNode);
+
+            // The total dom structure created...
+            expect(el).shadowDom.to.equal(`
+              <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
+                <div data-id="content-wrapper">
+                  <slot name="content"></slot>
+                </div>
+              </dialog>
+            `);
+          });
 
-      const ctrl = new OverlayController({
-        ...withLocalTestConfig(),
-        placementMode: 'global',
-        contentNode,
-        contentWrapperNode: shadowHost,
+          it("uses the .contentWrapperNode as container for Popper's arrow", async () => {
+            const tagString = defineCE(
+              class extends HTMLElement {
+                constructor() {
+                  super();
+                  this.attachShadow({ mode: 'open' });
+                }
+
+                connectedCallback() {
+                  /** @type {ShadowRoot} */
+                  (this.shadowRoot).innerHTML = `
+                    <div>
+                      <div id="arrow"></div>
+                      <slot name="content"></slot>
+                    </div>`;
+                  this.innerHTML = '<div slot="content">projected</div>';
+                }
+              },
+            );
+
+            const el = /** @type {HTMLElement} */ (fixtureSync(`<${tagString}></${tagString}>`));
+            const myContentNode = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
+            const myContentWrapper = /** @type {HTMLElement} */ (
+              el.shadowRoot?.querySelector('div')
+            );
+            const ctrl = new OverlayController({
+              ...withLocalTestConfig(),
+              contentNode: myContentNode,
+              contentWrapperNode: myContentWrapper,
+            });
+
+            normalizeOverlayContentWapper(ctrl.contentWrapperNode);
+
+            // The total dom structure created...
+            expect(el).shadowDom.to.equal(`
+              <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
+                <div data-id="content-wrapper">
+                  <div id="arrow"></div>
+                  <slot name="content"></slot>
+                </div>
+              </dialog>
+            `);
+          });
+        });
       });
-
-      // has no children as content gets moved to the body
-      expect(shadowHost.children.length).to.equal(0);
-      ctrl.teardown();
-
-      // restores original light dom in teardown
-      expect(shadowHost.children.length).to.equal(1);
     });
-  });
 
-  describe('Node Configuration', () => {
-    it('accepts an .contentNode<Node> to directly set content', async () => {
-      const ctrl = new OverlayController({
-        ...withGlobalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (await fixture('<p>direct node</p>')),
+    describe('Invoker / Reference', async () => {
+      it('accepts a .invokerNode to directly set invoker', async () => {
+        const myInvokerNode = /** @type {HTMLElement} */ (fixtureSync('<button>invoke</button>'));
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          invokerNode: myInvokerNode,
+        });
+        expect(ctrl.invokerNode).to.equal(myInvokerNode);
+        expect(ctrl.referenceNode).to.equal(undefined);
       });
-      expect(ctrl.contentNode).to.have.trimmed.text('direct node');
-    });
 
-    it('accepts an .invokerNode<Node> to directly set invoker', async () => {
-      const ctrl = new OverlayController({
-        ...withGlobalTestConfig(),
-        invokerNode: /** @type {HTMLElement} */ (await fixture('<button>invoke</button>')),
+      it('accepts a .referenceNode as positioning anchor different from .invokerNode', async () => {
+        const myInvokerNode = /** @type {HTMLElement} */ (fixtureSync('<button>invoke</button>'));
+        const myReferenceNode = /** @type {HTMLElement} */ (fixtureSync('<div>anchor</div>'));
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          invokerNode: myInvokerNode,
+          referenceNode: myReferenceNode,
+        });
+        expect(ctrl.referenceNode).to.equal(myReferenceNode);
+        expect(ctrl.invokerNode).to.not.equal(ctrl.referenceNode);
       });
-      expect(ctrl.invokerNode).to.have.trimmed.text('invoke');
     });
 
-    describe('When contentWrapperNode projects contentNode', () => {
-      it('recognizes projected contentNode', async () => {
-        const shadowHost = document.createElement('div');
-        shadowHost.attachShadow({ mode: 'open' });
-        /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `
-          <div id="contentWrapperNode">
-            <slot name="contentNode"></slot>
-            <my-arrow></my-arrow>
-          </div>
-        `;
-        const contentNode = document.createElement('div');
-        contentNode.slot = 'contentNode';
-        shadowHost.appendChild(contentNode);
+    describe('Backdrop', () => {
+      it('creates a .backdropNode inside <dialog> for guaranteed top layer paints and positioning opportunities', async () => {
+        const tagString = defineCE(
+          class extends HTMLElement {
+            constructor() {
+              super();
+              this.attachShadow({ mode: 'open' });
+            }
 
-        // Ensure the contentNode is connected to DOM
-        document.body.appendChild(shadowHost);
+            connectedCallback() {
+              /** @type {ShadowRoot} */
+              (this.shadowRoot).innerHTML = '<slot name="content"></slot>';
+              this.innerHTML = '<div slot="content">projected</div>';
+            }
+          },
+        );
+
+        const el = /** @type {HTMLElement} */ (fixtureSync(`<${tagString}></${tagString}>`));
+        const myContentNode = /** @type {HTMLElement} */ (el.querySelector('[slot=content]'));
 
         const ctrl = new OverlayController({
-          ...withLocalTestConfig(),
-          contentNode,
-          contentWrapperNode: /** @type {HTMLElement} */ (
-            /** @type {ShadowRoot} */ (shadowHost.shadowRoot).getElementById('contentWrapperNode')
-          ),
+          ...withGlobalTestConfig(),
+          contentNode: myContentNode,
+          hasBackdrop: true,
         });
 
-        expect(ctrl.__isContentNodeProjected).to.be.true;
+        normalizeOverlayContentWapper(ctrl.contentWrapperNode);
+
+        // The total dom structure created...
+        expect(el).shadowDom.to.equal(
+          `
+          <dialog data-overlay-outer-wrapper="" open="" role="none" style="${wrappingDialogNodeStyle}">
+            <div class="overlays__backdrop"></div>
+            <div data-id="content-wrapper">
+              <slot name="content">
+              </slot>
+            </div>
+          </dialog>
+        `,
+        );
       });
     });
 
@@ -446,6 +628,18 @@ describe('OverlayController', () => {
         document.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
         expect(ctrl.isShown).to.be.true;
       });
+
+      it('does not hide when [escape] is pressed with modal <dialog> and "hidesOnEsc" is false', async () => {
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          trapsKeyboardFocus: true,
+          hidesOnEsc: false,
+        });
+        await ctrl.show();
+        ctrl.contentNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+        await aTimeout(0);
+        expect(ctrl.isShown).to.be.true;
+      });
     });
 
     describe('hidesOnOutsideEsc', () => {
@@ -760,6 +954,35 @@ describe('OverlayController', () => {
         expect(document.activeElement).to.equal(input);
       });
 
+      it('supports elementToFocusAfterHide option when shadowRoot involved involved', async () => {
+        const input = /** @type {HTMLElement} */ (await fixture('<input />'));
+        const contentNode = /** @type {HTMLElement} */ (
+          await fixture('<div><textarea></textarea></div>')
+        );
+
+        const shadowHost = document.createElement('div');
+        shadowHost.attachShadow({ mode: 'open' });
+        /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `<slot></slot>`;
+        shadowHost.appendChild(contentNode);
+        document.body.appendChild(shadowHost);
+
+        const ctrl = new OverlayController({
+          ...withGlobalTestConfig(),
+          elementToFocusAfterHide: input,
+          contentNode,
+        });
+
+        await ctrl.show();
+        const textarea = /** @type {HTMLTextAreaElement} */ (contentNode.querySelector('textarea'));
+        textarea.focus();
+        expect(document.activeElement).to.equal(textarea);
+
+        await ctrl.hide();
+        expect(document.activeElement).to.equal(input);
+
+        document.body.removeChild(shadowHost);
+      });
+
       it(`only sets focus when outside world didn't take over already`, async () => {
         const input = /** @type {HTMLElement} */ (await fixture('<input />'));
         const outsideButton = /** @type {HTMLButtonElement} */ (await fixture('<button></button>'));
@@ -810,10 +1033,10 @@ describe('OverlayController', () => {
         });
 
         await ctrl.show();
-        expect(getComputedStyle(document.body).overflow).to.equal('hidden');
+        expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock');
 
         await ctrl.hide();
-        expect(getComputedStyle(document.body).overflow).to.equal('visible');
+        expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock');
       });
 
       it('keeps preventing of scrolling when multiple overlays are opened and closed', async () => {
@@ -829,7 +1052,7 @@ describe('OverlayController', () => {
         await ctrl0.show();
         await ctrl1.show();
         await ctrl1.hide();
-        expect(getComputedStyle(document.body).overflow).to.equal('hidden');
+        expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock');
       });
     });
 
@@ -856,7 +1079,7 @@ describe('OverlayController', () => {
           hasBackdrop: true,
         });
         await controllerWithBackdrop.show();
-        expect(controllerWithBackdrop.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(controllerWithBackdrop.backdropNode).to.have.class('overlays__backdrop');
       });
 
       it('reenables the backdrop when shown/hidden/shown', async () => {
@@ -865,10 +1088,10 @@ describe('OverlayController', () => {
           hasBackdrop: true,
         });
         await ctrl.show();
-        expect(ctrl.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl.backdropNode).to.have.class('overlays__backdrop');
         await ctrl.hide();
         await ctrl.show();
-        expect(ctrl.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl.backdropNode).to.have.class('overlays__backdrop');
       });
 
       it('adds and stacks backdrops if .hasBackdrop is enabled', async () => {
@@ -877,14 +1100,14 @@ describe('OverlayController', () => {
           hasBackdrop: true,
         });
         await ctrl0.show();
-        expect(ctrl0.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl0.backdropNode).to.have.class('overlays__backdrop');
 
         const ctrl1 = new OverlayController({
           ...withGlobalTestConfig(),
           hasBackdrop: false,
         });
         await ctrl1.show();
-        expect(ctrl0.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl0.backdropNode).to.have.class('overlays__backdrop');
         expect(ctrl1.backdropNode).to.be.undefined;
 
         const ctrl2 = new OverlayController({
@@ -893,9 +1116,9 @@ describe('OverlayController', () => {
         });
         await ctrl2.show();
 
-        expect(ctrl0.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl0.backdropNode).to.have.class('overlays__backdrop');
         expect(ctrl1.backdropNode).to.be.undefined;
-        expect(ctrl2.backdropNode).to.have.class('global-overlays__backdrop');
+        expect(ctrl2.backdropNode).to.have.class('overlays__backdrop');
       });
     });
 
@@ -1003,24 +1226,24 @@ describe('OverlayController', () => {
         await ctrl0.show();
         await ctrl1.show();
         await ctrl2.show(); // blocking
-        expect(ctrl0.content).to.not.be.displayed;
-        expect(ctrl1.content).to.not.be.displayed;
-        expect(ctrl2.content).to.be.displayed;
+        expect(ctrl0.__wrappingDialogNode).to.not.be.displayed;
+        expect(ctrl1.__wrappingDialogNode).to.not.be.displayed;
+        expect(ctrl2.__wrappingDialogNode).to.be.displayed;
 
         await ctrl3.show();
         await ctrl3._showComplete;
-        expect(ctrl3.content).to.be.displayed;
+        expect(ctrl3.__wrappingDialogNode).to.be.displayed;
 
         await ctrl2.hide();
         await ctrl2._hideComplete;
-        expect(ctrl0.content).to.be.displayed;
-        expect(ctrl1.content).to.be.displayed;
+        expect(ctrl0.__wrappingDialogNode).to.be.displayed;
+        expect(ctrl1.__wrappingDialogNode).to.be.displayed;
 
         await ctrl2.show(); // blocking
-        expect(ctrl0.content).to.not.be.displayed;
-        expect(ctrl1.content).to.not.be.displayed;
-        expect(ctrl2.content).to.be.displayed;
-        expect(ctrl3.content).to.not.be.displayed;
+        expect(ctrl0.__wrappingDialogNode).to.not.be.displayed;
+        expect(ctrl1.__wrappingDialogNode).to.not.be.displayed;
+        expect(ctrl2.__wrappingDialogNode).to.be.displayed;
+        expect(ctrl3.__wrappingDialogNode).to.not.be.displayed;
       });
 
       it('keeps backdrop status when used in combination with blocking', async () => {
@@ -1197,11 +1420,11 @@ describe('OverlayController', () => {
 
       ctrl.hide();
 
-      expect(getComputedStyle(ctrl.contentWrapperNode).display).to.equal('block');
+      expect(getComputedStyle(ctrl.content).display).to.equal('block');
       setTimeout(() => {
         hideTransitionFinished();
         setTimeout(() => {
-          expect(getComputedStyle(ctrl.contentWrapperNode).display).to.equal('none');
+          expect(getComputedStyle(ctrl.content).display).to.equal('none');
           done();
         }, 0);
       }, 0);
@@ -1285,15 +1508,11 @@ describe('OverlayController', () => {
       });
 
       ctrl.show();
-      expect(
-        ctrl.contentWrapperNode.classList.contains('global-overlays__overlay-container--center'),
-      );
+      expect(ctrl.contentWrapperNode.classList.contains('overlays__overlay-container--center'));
       expect(ctrl.isShown).to.be.true;
 
       ctrl.updateConfig({ viewportConfig: { placement: 'top-right' } });
-      expect(
-        ctrl.contentWrapperNode.classList.contains('global-overlays__overlay-container--top-right'),
-      );
+      expect(ctrl.contentWrapperNode.classList.contains('overlays__overlay-container--top-right'));
       expect(ctrl.isShown).to.be.true;
     });
   });
@@ -1379,89 +1598,9 @@ describe('OverlayController', () => {
       expect(properlyInstantiated).to.be.true;
     });
 
-    it('adds attributes inert and aria-hidden="true" on all siblings of rootNode if an overlay is shown', async () => {
-      const ctrl = new OverlayController({
-        ...withGlobalTestConfig(),
-        trapsKeyboardFocus: true,
-      });
-
-      const sibling1 = document.createElement('div');
-      const sibling2 = document.createElement('div');
-      document.body.insertBefore(sibling1, ctrl.manager.globalRootNode);
-      document.body.appendChild(sibling2);
-
-      await ctrl.show();
-
-      [sibling1, sibling2].forEach(sibling => {
-        expect(sibling).to.have.attribute('aria-hidden', 'true');
-        expect(sibling).to.have.attribute('inert');
-      });
-      expect(ctrl.content.hasAttribute('aria-hidden')).to.be.false;
-      expect(ctrl.content.hasAttribute('inert')).to.be.false;
-
-      await ctrl.hide();
-
-      [sibling1, sibling2].forEach(sibling => {
-        expect(sibling).to.not.have.attribute('aria-hidden');
-        expect(sibling).to.not.have.attribute('inert');
-      });
-
-      // cleanup
-      document.body.removeChild(sibling1);
-      document.body.removeChild(sibling2);
-    });
-
-    /**
-     * style.userSelect:
-     *   - chrome: 'none'
-     *   - rest: undefined
-     *
-     * style.pointerEvents:
-     *   - chrome: auto
-     *   - IE11: visiblePainted
-     */
-    it('disables pointer events and selection on inert elements', async () => {
-      const ctrl = new OverlayController({
-        ...withGlobalTestConfig(),
-        trapsKeyboardFocus: true,
-      });
-
-      // show+hide are needed to create a root node
-      await ctrl.show();
-      await ctrl.hide();
-
-      const sibling1 = document.createElement('div');
-      const sibling2 = document.createElement('div');
-      document.body.insertBefore(sibling1, ctrl.manager.globalRootNode);
-      document.body.appendChild(sibling2);
-
-      await ctrl.show();
-
-      [sibling1, sibling2].forEach(sibling => {
-        expect(window.getComputedStyle(sibling).userSelect).to.be.oneOf(['none', undefined]);
-        expect(window.getComputedStyle(sibling).pointerEvents).to.equal('none');
-      });
-
-      expect(window.getComputedStyle(ctrl.contentNode).userSelect).to.be.oneOf(['auto', undefined]);
-      expect(window.getComputedStyle(ctrl.contentNode).pointerEvents).to.be.oneOf([
-        'auto',
-        'visiblePainted',
-      ]);
-
-      await ctrl.hide();
-
-      [sibling1, sibling2].forEach(sibling => {
-        expect(window.getComputedStyle(sibling).userSelect).to.be.oneOf(['auto', undefined]);
-        expect(window.getComputedStyle(sibling).pointerEvents).to.be.oneOf([
-          'auto',
-          'visiblePainted',
-        ]);
-      });
-
-      // cleanup
-      document.body.removeChild(sibling1);
-      document.body.removeChild(sibling2);
-    });
+    // TODO: check if we covered all functionality. "Inertness" should be handled by the platform with a modal overlay...
+    it.skip('adds attributes inert and aria-hidden="true" on all siblings of rootNode if an overlay is shown', async () => {});
+    it.skip('disables pointer events and selection on inert elements', async () => {});
 
     describe('Tooltip', () => {
       it('adds [aria-describedby] on invoker', async () => {
@@ -1616,47 +1755,6 @@ describe('OverlayController', () => {
       }).to.throw('[OverlayController] You need to provide a .contentNode');
     });
 
-    it('throws if contentNodeWrapper is not provided for projected contentNode', async () => {
-      const shadowHost = document.createElement('div');
-      shadowHost.attachShadow({ mode: 'open' });
-      /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `
-        <div id="contentWrapperNode">
-          <slot name="contentNode"></slot>
-          <my-arrow></my-arrow>
-        </div>
-      `;
-      const contentNode = document.createElement('div');
-      contentNode.slot = 'contentNode';
-      shadowHost.appendChild(contentNode);
-
-      // Ensure the contentNode is connected to DOM
-      document.body.appendChild(shadowHost);
-
-      expect(() => {
-        new OverlayController({
-          ...withLocalTestConfig(),
-          contentNode,
-        });
-      }).to.throw(
-        '[OverlayController] You need to provide a .contentWrapperNode when .contentNode is projected',
-      );
-    });
-
-    it('throws if placementMode is global for a tooltip', async () => {
-      const contentNode = document.createElement('div');
-      document.body.appendChild(contentNode);
-      expect(() => {
-        new OverlayController({
-          placementMode: 'global',
-          contentNode,
-          isTooltip: true,
-          handlesAccessibility: true,
-        });
-      }).to.throw(
-        '[OverlayController] .isTooltip should be configured with .placementMode "local"',
-      );
-    });
-
     it('throws if handlesAccessibility is false for a tooltip', async () => {
       const contentNode = document.createElement('div');
       document.body.appendChild(contentNode);