q2-tecton-elements 1.53.1 → 1.53.3

package/dist/collection/components/q2-popover/test/q2-popover-test.spec.js

@@ -1,12 +1,18 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Q2Popover } from "../q2-popover";
+import * as utils from "../../../utils/index";
 describe('popover', () => {
     let specPopover;
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
     const samplePlatformDimensions = {
         scrollY: 0,
         innerHeight: 800,
         innerWidth: 600,
         outletOffset: 20,
+        top: 0,
+        bottom: 0,
     };
     const sampleTectonWindow = {
         inMobileApp: false,
@@ -14,15 +20,78 @@ describe('popover', () => {
         platformUrl: '',
         platformDimensions: samplePlatformDimensions,
     };
+    const enablePopoverAPI = () => {
+        Object.defineProperty(HTMLElement.prototype, 'popover', { value: true, configurable: true });
+    };
     describe('Props', () => {
-        describe('mode', () => {
-            it('does not add the legacy class on the container (default)', async () => {
+        describe('align', () => {
+            it('adds the left class on the container by default', async () => {
                 const page = await newSpecPage({
                     components: [Q2Popover],
                     html: `<q2-popover></q2-popover>`,
                 });
-                expect(page.root.shadowRoot.firstElementChild.classList.contains('legacy')).toBeFalsy();
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('left')).toBeTruthy();
+            });
+            it('adds the left class on the container when align is "left"', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover align="left"></q2-popover>`,
+                });
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('left')).toBeTruthy();
+            });
+            it('adds the right class on the container when align is "right"', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover align="right"></q2-popover>`,
+                });
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('right')).toBeTruthy();
+            });
+        });
+        describe('block', () => {
+            it('adds the block class on the container when block is true', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover block="true"></q2-popover>`,
+                });
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('block')).toBeTruthy();
+            });
+            it('does not add the block class when block is false', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover block="false"></q2-popover>`,
+                });
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('block')).toBeFalsy();
+            });
+        });
+        describe('direction', () => {
+            const setupPopoverWithDirection = async (direction) => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover direction="${direction}"></q2-popover>`,
+                });
+                // Mock essential dependencies
+                window.visualViewport = { width: 800, height: 600 };
+                page.rootInstance.addViewportListeners = jest.fn();
+                page.rootInstance.controlElement = document.createElement('div');
+                // Simulate opening the popover and setting the direction
+                page.rootInstance.open = true;
+                page.rootInstance.currentDirection = direction;
+                page.rootInstance.show = true;
+                await page.waitForChanges();
+                return page;
+            };
+            it('adds the up class on the container when direction is "up" and popover is open', async () => {
+                const page = await setupPopoverWithDirection('up');
+                expect(page.rootInstance.currentDirection).toBe('up');
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('up')).toBeTruthy();
+            });
+            it('adds the down class on the container when direction is "down" and popover is open', async () => {
+                const page = await setupPopoverWithDirection('down');
+                expect(page.rootInstance.currentDirection).toBe('down');
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('down')).toBeTruthy();
             });
+        });
+        describe('mode', () => {
             it('adds the legacy class on the container when mode is "legacy"', async () => {
                 const page = await newSpecPage({
                     components: [Q2Popover],
@@ -30,9 +99,175 @@ describe('popover', () => {
                 });
                 expect(page.root.shadowRoot.firstElementChild.classList.contains('legacy')).toBeTruthy();
             });
+            it('sets mode to legacy and adds the legacy class when Popover API is NOT supported at runtime', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover></q2-popover>`,
+                });
+                expect(page.rootInstance.mode).toBe('legacy');
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('legacy')).toBeTruthy();
+            });
+            it('does not add the legacy class when Popover API is supported at runtime', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover></q2-popover>`,
+                });
+                enablePopoverAPI();
+                page.rootInstance.mode = null;
+                page.rootInstance.componentWillLoad();
+                await page.waitForChanges();
+                expect(page.rootInstance.mode).not.toBe('legacy');
+                expect(page.root.shadowRoot.firstElementChild.classList.contains('legacy')).toBeFalsy();
+            });
+        });
+        describe('open', () => {
+            it('sets the open attribute on the hostElement when open is true', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover></q2-popover>`,
+                });
+                page.rootInstance.addViewportListeners = jest.fn();
+                page.rootInstance.removeViewportListeners = jest.fn();
+                page.rootInstance.open = true;
+                await page.waitForChanges();
+                expect(page.rootInstance.hostElement.hasAttribute('open')).toBe(true);
+            });
+            it('removes the open attribute on the hostElement when open is false', async () => {
+                const page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover></q2-popover>`,
+                });
+                page.rootInstance.addViewportListeners = jest.fn();
+                page.rootInstance.removeViewportListeners = jest.fn();
+                page.rootInstance.open = false;
+                await page.waitForChanges();
+                expect(page.rootInstance.hostElement.hasAttribute('open')).toBe(false);
+            });
+        });
+    });
+    describe('Events', () => {
+        describe('popoverStateChanged', () => {
+            let specPopover;
+            let page;
+            beforeEach(async () => {
+                page = await newSpecPage({
+                    components: [Q2Popover],
+                    html: `<q2-popover></q2-popover>`,
+                });
+                specPopover = page.rootInstance;
+                specPopover.addViewportListeners = jest.fn();
+                specPopover.removeViewportListeners = jest.fn();
+            });
+            it('emits popoverStateChanged when open changes to true', async () => {
+                const popoverStateChangedSpy = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                specPopover.open = true;
+                await page.waitForChanges();
+                expect(popoverStateChangedSpy).toHaveBeenCalledWith({ open: true });
+            });
+            it('emits popoverStateChanged when open changes to false', async () => {
+                const popoverStateChangedSpy = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                specPopover.open = false;
+                await page.waitForChanges();
+                expect(popoverStateChangedSpy).toHaveBeenCalledWith({ open: false });
+            });
         });
     });
-    describe('Methods', () => {
+    describe('Lifecycle Events', () => {
+        describe('disconnectedCallback', () => {
+            beforeEach(async () => {
+                specPopover = new Q2Popover();
+                specPopover.addViewportListeners = jest.fn();
+                specPopover.removeViewportListeners = jest.fn();
+                specPopover.containerElement = document.createElement('div');
+                specPopover.contentElement = document.createElement('div');
+                specPopover.controlElement = document.createElement('div');
+            });
+            it('calls removeViewportListeners', async () => {
+                specPopover.disconnectedCallback();
+                expect(specPopover.removeViewportListeners).toHaveBeenCalled();
+            });
+            it('removes the toggle event listener from containerElement', async () => {
+                const removeEventListenerSpy = jest.spyOn(specPopover.containerElement, 'removeEventListener');
+                specPopover.disconnectedCallback();
+                expect(removeEventListenerSpy).toHaveBeenCalledWith('toggle', specPopover.handlePopoverToggleEvent);
+            });
+            it('sets containerElement to null', async () => {
+                expect(specPopover.containerElement).not.toBeNull();
+                specPopover.disconnectedCallback();
+                expect(specPopover.containerElement).toBeNull();
+            });
+            it('sets contentElement to null', async () => {
+                expect(specPopover.contentElement).not.toBeNull();
+                specPopover.disconnectedCallback();
+                expect(specPopover.contentElement).toBeNull();
+            });
+            it('sets controlElement to null', async () => {
+                expect(specPopover.controlElement).not.toBeNull();
+                specPopover.disconnectedCallback();
+                expect(specPopover.controlElement).toBeNull();
+            });
+        });
+        describe('componentDidLoad', () => {
+            it('calls handleMinHeight', async () => {
+                specPopover = new Q2Popover();
+                specPopover.handleMinHeight = jest.fn();
+                specPopover.componentDidLoad();
+                expect(specPopover.handleMinHeight).toHaveBeenCalled();
+            });
+            it('when Popover API is supported, it sets up the "toggle" Popover API event listener on container element', async () => {
+                specPopover = new Q2Popover();
+                enablePopoverAPI();
+                specPopover.containerElement = document.createElement('div');
+                specPopover.containerElement.addEventListener = jest.fn();
+                specPopover.componentDidLoad();
+                expect(specPopover.containerElement.addEventListener).toHaveBeenCalledWith('toggle', specPopover.handlePopoverToggleEvent);
+            });
+            it('when open is true it calls determinePopDirection', async () => {
+                specPopover = new Q2Popover();
+                specPopover.open = true;
+                specPopover.determinePopDirection = jest.fn();
+                specPopover.componentDidLoad();
+                expect(specPopover.determinePopDirection).toHaveBeenCalled();
+            });
+        });
+        describe('componentWillLoad', () => {
+            it('if supportsPopoverAPI is false it sets mode to "legacy"', async () => {
+                specPopover = new Q2Popover();
+                specPopover.componentWillLoad();
+                expect(specPopover.mode).toBe('legacy');
+            });
+            it('if supportsPopoverAPI is true it does NOT set mode to "legacy"', async () => {
+                specPopover = new Q2Popover();
+                enablePopoverAPI();
+                specPopover.componentWillLoad();
+                expect(specPopover.mode).toBeNull();
+            });
+        });
+    });
+    describe('Listeners', () => {
+        describe('popoverState', () => {
+            it('updates open property when event detail and attribute do not match', async () => {
+                specPopover = new Q2Popover();
+                specPopover.open = false;
+                specPopover.popoverStateHandler(new CustomEvent('popoverState', { detail: { open: true } }));
+                expect(specPopover.open).toBe(true);
+            });
+            it('does not update the open property if detail and attribute match', async () => {
+                specPopover = new Q2Popover();
+                specPopover.open = true;
+                specPopover.popoverStateHandler(new CustomEvent('popoverState', { detail: { open: true } }));
+                expect(specPopover.open).toBe(true);
+            });
+            it('calls stopPropogation on the event', async () => {
+                specPopover = new Q2Popover();
+                const event = new CustomEvent('popoverState', { detail: { open: true } });
+                const stopSpy = jest.spyOn(event, 'stopPropagation');
+                specPopover.popoverStateHandler(event);
+                expect(stopSpy).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Public Methods API', () => {
         beforeEach(() => {
             specPopover = new Q2Popover();
         });
@@ -58,538 +293,694 @@ describe('popover', () => {
             });
         });
     });
-    describe('Getters', () => {
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-        });
-        describe('actualDirection', () => {
-            it('returns direction when "up"', async () => {
-                specPopover.direction = 'up';
-                expect(specPopover.providedDirection).toBe('up');
-            });
-            it('returns direction when "down"', async () => {
-                specPopover.direction = 'down';
-                expect(specPopover.providedDirection).toBe('down');
-            });
-            it('returns undefined when not "up" or "down"', async () => {
-                specPopover.direction = 'bottom';
-                expect(specPopover.providedDirection).toBeUndefined();
+    describe('Watchers', () => {
+        describe('minHeightProvided', () => {
+            it('calls handleMinHeight', async () => {
+                specPopover = new Q2Popover();
+                specPopover.handleMinHeight = jest.fn();
+                specPopover.minHeight = 100;
+                specPopover.minHeightProvided();
+                expect(specPopover.handleMinHeight).toHaveBeenCalled();
+            });
+        });
+        describe('openChanged', () => {
+            beforeEach(async () => {
+                specPopover = new Q2Popover();
+                specPopover.addViewportListeners = jest.fn();
+                specPopover.removeViewportListeners = jest.fn();
+                specPopover.determinePopDirection = jest.fn();
+                specPopover.clearCSSProperties = jest.fn();
+            });
+            it('calls popoverStateChanged with the new open value', async () => {
+                specPopover.popoverStateChanged = { emit: jest.fn() };
+                await specPopover.openChanged(true);
+                expect(specPopover.popoverStateChanged.emit).toHaveBeenCalledWith({ open: true });
+            });
+            describe('when open is true', () => {
+                it('calls addViewportListeners', async () => {
+                    await specPopover.openChanged(true);
+                    expect(specPopover.addViewportListeners).toHaveBeenCalled();
+                });
+                it('calls determinePopDirection', async () => {
+                    await specPopover.openChanged(true);
+                    expect(specPopover.determinePopDirection).toHaveBeenCalled();
+                });
             });
-        });
-        describe('isModule', () => {
-            it('returns false when window top matches window and platformDimensions is not defined', async () => {
-                expect(window.top).toBe(window);
-                expect(window.Tecton).toBeUndefined();
-                expect(specPopover.isModule).toBe(false);
-            });
-            it('returns false when window top does not match window and platformDimensions is not defined', async () => {
-                const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
-                expect(window.top).not.toEqual(window);
-                expect(window.Tecton).toBeUndefined();
-                expect(specPopover.isModule).toBe(false);
-                windowSpy.mockRestore();
-            });
-            it('returns false when window top matches window and platformDimensions is defined', async () => {
-                window.Tecton = sampleTectonWindow;
-                expect(window.top).toBe(window);
-                expect(window.Tecton.platformDimensions).toBeTruthy();
-                expect(specPopover.isModule).toBe(false);
-            });
-            it('returns true when window top does not match window and platformDimensions is defined', async () => {
-                const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
-                window.Tecton = sampleTectonWindow;
-                expect(specPopover.isModule).toBe(true);
-                windowSpy.mockRestore();
+            describe('when open is false', () => {
+                it('calls removeViewportListeners', async () => {
+                    await specPopover.openChanged(false);
+                    expect(specPopover.removeViewportListeners).toHaveBeenCalled();
+                });
+                it('sets currentDirection to undefined', async () => {
+                    specPopover.currentDirection = 'up';
+                    expect(specPopover.currentDirection).toBe('up');
+                    await specPopover.openChanged(false);
+                    expect(specPopover.currentDirection).toBeUndefined();
+                });
+                it('sets show to false if mode is legacy', async () => {
+                    specPopover.mode = 'legacy';
+                    specPopover.show = true;
+                    expect(specPopover.show).toBe(true);
+                    await specPopover.openChanged(false);
+                    expect(specPopover.show).toBe(false);
+                });
+                it('sets show to false if Popover API is not supported', async () => {
+                    specPopover.show = true;
+                    expect(specPopover.show).toBe(true);
+                    await specPopover.openChanged(false);
+                    expect(specPopover.show).toBe(false);
+                });
+                it('calls hidePopover if Popover API is supported', async () => {
+                    enablePopoverAPI();
+                    specPopover.containerElement = document.createElement('div');
+                    specPopover.containerElement.hidePopover = jest.fn();
+                    await specPopover.openChanged(false);
+                    expect(specPopover.containerElement.hidePopover).toHaveBeenCalled();
+                });
+                it('calls clearCSSProperties', async () => {
+                    await specPopover.openChanged(false);
+                    expect(specPopover.clearCSSProperties).toHaveBeenCalled();
+                });
             });
         });
     });
-    describe('when in a module', () => {
-        let specPopover;
-        let windowSpy;
-        let controlElement;
-        let containerElement;
-        beforeEach(async () => {
-            specPopover = new Q2Popover();
-            windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
-            window.Tecton = sampleTectonWindow;
-            expect(specPopover.isModule).toBe(true);
-            controlElement = document.createElement('div');
-            specPopover.controlElement = controlElement;
-            containerElement = document.createElement('div');
-            specPopover.containerElement = containerElement;
-        });
-        afterEach(() => {
-            windowSpy.mockRestore();
-        });
-        describe("when the module is taller than the window's viewport", () => {
+    describe('Local Methods', () => {
+        describe('Getters', () => {
             beforeEach(() => {
-                specPopover.open = true;
-                window.visualViewport = { height: 1200 };
+                specPopover = new Q2Popover();
+            });
+            describe('isModule', () => {
+                it('returns false when window top matches window and platformDimensions is not defined', async () => {
+                    expect(window.top).toBe(window);
+                    expect(window.Tecton).toBeUndefined();
+                    expect(specPopover.isModule).toBe(false);
+                });
+                it('returns false when window top does not match window and platformDimensions is not defined', async () => {
+                    const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                    expect(window.top).not.toEqual(window);
+                    expect(window.Tecton).toBeUndefined();
+                    expect(specPopover.isModule).toBe(false);
+                    windowSpy.mockRestore();
+                });
+                it('returns false when window top matches window and platformDimensions is defined', async () => {
+                    window.Tecton = sampleTectonWindow;
+                    expect(window.top).toBe(window);
+                    expect(window.Tecton.platformDimensions).toBeTruthy();
+                    expect(specPopover.isModule).toBe(false);
+                });
+                it('returns true when window top does not match window and platformDimensions is defined', async () => {
+                    const windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                    window.Tecton = sampleTectonWindow;
+                    expect(specPopover.isModule).toBe(true);
+                    windowSpy.mockRestore();
+                });
             });
-            it('sets the direction to down when control element has more space below it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 20,
-                    bottom: 70,
+            describe('providedDirection', () => {
+                it('returns direction when "up"', async () => {
+                    specPopover.direction = 'up';
+                    expect(specPopover.providedDirection).toBe('up');
+                });
+                it('returns direction when "down"', async () => {
+                    specPopover.direction = 'down';
+                    expect(specPopover.providedDirection).toBe('down');
+                });
+                it('returns undefined when not "up" or "down"', async () => {
+                    specPopover.direction = 'bottom';
+                    expect(specPopover.providedDirection).toBeUndefined();
                 });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('700px');
-                expect(specPopover.currentDirection).toBe('down');
-                controlSpy.mockRestore();
             });
-            it('sets the direction to up when control element has more space above it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 600,
-                    bottom: 650,
+            describe('supportsPopoverAPI', () => {
+                it('returns false when Popover API is not supported', async () => {
+                    specPopover = new Q2Popover();
+                    expect(specPopover.supportsPopoverAPI).toBe(false);
+                });
+                it('returns true when Popover API is supported', async () => {
+                    enablePopoverAPI();
+                    specPopover = new Q2Popover();
+                    expect(specPopover.supportsPopoverAPI).toBe(true);
                 });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
-                expect(specPopover.currentDirection).toBe('up');
-                controlSpy.mockRestore();
             });
-            describe('when the outletOffset is less than 0', () => {
+        });
+        describe('Methods', () => {
+            describe('addViewPortListeners', () => {
+                let specPopover;
+                let windowAddEventListenerSpy;
+                let visualViewportAddEventListenerSpy;
+                let screenOrientationAddEventListenerSpy;
                 beforeEach(() => {
-                    window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: -50 }) });
+                    windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
+                    // Mock visualViewport
+                    const mockVisualViewport = {
+                        addEventListener: jest.fn(),
+                        removeEventListener: jest.fn(),
+                        width: 800,
+                        height: 600,
+                    };
+                    Object.defineProperty(window, 'visualViewport', {
+                        value: mockVisualViewport,
+                        configurable: true,
+                    });
+                    global.visualViewport = mockVisualViewport;
+                    visualViewportAddEventListenerSpy = jest.spyOn(mockVisualViewport, 'addEventListener');
+                    // Mock screen.orientation
+                    const mockScreenOrientation = {
+                        addEventListener: jest.fn(),
+                        removeEventListener: jest.fn(),
+                    };
+                    const mockScreen = { orientation: mockScreenOrientation };
+                    Object.defineProperty(window, 'screen', {
+                        value: mockScreen,
+                        configurable: true,
+                    });
+                    global.screen = mockScreen;
+                    screenOrientationAddEventListenerSpy = jest.spyOn(mockScreenOrientation, 'addEventListener');
+                    specPopover = new Q2Popover();
                 });
-                it('sets the direction to down when control element has more space below it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 20,
-                        bottom: 70,
+                afterEach(() => {
+                    windowAddEventListenerSpy.mockRestore();
+                    visualViewportAddEventListenerSpy.mockRestore();
+                    screenOrientationAddEventListenerSpy.mockRestore();
+                    delete global.visualViewport;
+                    delete global.screen;
+                    delete window.visualViewport;
+                    delete window.screen;
+                });
+                describe('resize', () => {
+                    it('adds resize listener to window with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortOrientationChanged);
                     });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('770px');
-                    expect(specPopover.currentDirection).toBe('down');
-                    controlSpy.mockRestore();
-                });
-                it('sets the direction to up when control element has more space above it', async () => {
-                    const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                        top: 600,
-                        bottom: 650,
+                    it('adds resize listener to visualViewport with viewPortChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(visualViewportAddEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortChanged);
+                    });
+                });
+                describe('scroll', () => {
+                    it('adds scroll listener to window when in scrollable container on desktop only', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(true);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(false);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
+                    });
+                    it('does not add scroll listener on mobile', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(true);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(true);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).not.toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
+                    });
+                    it('does not add scroll listener in non-scrollable container', async () => {
+                        jest.spyOn(utils, 'isInScrollableContainer').mockReturnValue(false);
+                        jest.spyOn(utils, 'isMobile').mockReturnValue(false);
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).not.toHaveBeenCalledWith('scroll', specPopover.viewPortChanged, {
+                            passive: true,
+                            capture: true,
+                        });
                     });
-                    await specPopover.determinePopDirection();
-                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
-                    expect(specPopover.currentDirection).toBe('up');
-                    controlSpy.mockRestore();
+                });
+                describe('orientationchange', () => {
+                    it('adds orientationchange listener to screen.orientation with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(screenOrientationAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                    });
+                    it('adds orientationchange listener to window with viewPortOrientationChanged handler', async () => {
+                        specPopover.addViewportListeners();
+                        expect(windowAddEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                    });
+                });
+                it('adds all expected listeners when called', async () => {
+                    specPopover.addViewportListeners();
+                    expect(windowAddEventListenerSpy).toHaveBeenCalled();
+                    expect(visualViewportAddEventListenerSpy).toHaveBeenCalled();
+                    expect(screenOrientationAddEventListenerSpy).toHaveBeenCalled();
                 });
             });
-        });
-        describe("when the module is shorter than the window's viewport", () => {
-            beforeEach(() => {
-                specPopover.open = true;
-                window.visualViewport = { height: 600 };
+            describe('clearCSSProperties', () => {
+                let specPopover;
+                let containerElement;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    containerElement = document.createElement('div');
+                    containerElement.style.setProperty('--comp-pop-max-height', '100px');
+                    containerElement.style.setProperty('--comp-pop-top', '20px');
+                    containerElement.style.setProperty('--comp-pop-bottom', '25px');
+                    containerElement.style.setProperty('--comp-pop-left', '30px');
+                    containerElement.style.setProperty('--comp-pop-right', '35px');
+                    containerElement.style.setProperty('--comp-pop-width', '200px');
+                    containerElement.style.setProperty('--comp-pop-opacity', '1');
+                    specPopover.containerElement = containerElement;
+                });
+                it('clears the necessary CSS properties', async () => {
+                    await specPopover.clearCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBeFalsy();
+                });
             });
-            it('sets the direction to down when control element has more space below it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 20,
-                    bottom: 70,
+            describe('determinePopDirection', () => {
+                let specPopover;
+                let controlElement;
+                let containerElement;
+                beforeEach(async () => {
+                    specPopover = new Q2Popover();
+                    specPopover.setDirectionAndShow = jest.fn();
+                    controlElement = document.createElement('div');
+                    specPopover.controlElement = controlElement;
+                    containerElement = document.createElement('div');
+                    specPopover.containerElement = containerElement;
+                });
+                afterEach(() => {
+                    delete window.visualViewport;
+                    delete window.Tecton;
+                    delete window.innerHeight;
+                });
+                describe('when in a module', () => {
+                    beforeEach(async () => {
+                        window.Tecton = sampleTectonWindow;
+                        jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                        specPopover.open = true;
+                        expect(specPopover.isModule).toBe(true);
+                    });
+                    describe("when the module is taller than the window's viewport", () => {
+                        beforeEach(() => {
+                            window.innerHeight = 1200;
+                        });
+                        it('sets the direction to down when control element has more space below it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 20,
+                                bottom: 70,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('700px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        });
+                        it('sets the direction to up when control element has more space above it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 600,
+                                bottom: 650,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        });
+                        describe('when the outletOffset is 0 or less', () => {
+                            beforeEach(() => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: -50 }) });
+                            });
+                            it('sets the direction to down when control element has more space below it', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 20,
+                                    bottom: 70,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('770px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                            });
+                            it('sets the direction to up when control element has more space above it', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                        });
+                        describe('when the "top" platformDimension has a value', () => {
+                            beforeEach(() => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: 0, top: 50 }) });
+                            });
+                            it('takes the "top" into account when opening up', async () => {
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('540px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                            it('ignores "top" when outletOffset is positive', async () => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { outletOffset: 20 }) });
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 600,
+                                    bottom: 650,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('590px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                            });
+                        });
+                        describe('when the "bottom" platformDimension has a value', () => {
+                            it('takes "bottom" into account when calculating space below', async () => {
+                                window.Tecton = Object.assign(Object.assign({}, sampleTectonWindow), { platformDimensions: Object.assign(Object.assign({}, samplePlatformDimensions), { bottom: 50 }) });
+                                jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                    top: 20,
+                                    bottom: 70,
+                                });
+                                await specPopover.determinePopDirection();
+                                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('650px');
+                                expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                            });
+                        });
+                    });
+                    describe("when the module is shorter than the window's viewport", () => {
+                        beforeEach(() => {
+                            window.innerHeight = 600;
+                        });
+                        it('sets the direction to down when control element has more space below it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 20,
+                                bottom: 70,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('520px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        });
+                        it('sets the direction to up when control element has more space above it', async () => {
+                            jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                                top: 500,
+                                bottom: 550,
+                            });
+                            await specPopover.determinePopDirection();
+                            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
+                            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        });
+                    });
+                });
+                describe('when at the platform level', () => {
+                    beforeEach(async () => {
+                        window.innerHeight = 600;
+                        expect(specPopover.isModule).toBe(false);
+                    });
+                    it('sets the direction to up when control element has more space above it', async () => {
+                        const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                            top: 500,
+                            bottom: 550,
+                        });
+                        await specPopover.determinePopDirection();
+                        expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
+                        expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
+                        controlSpy.mockRestore();
+                    });
+                    it('sets the direction to down when control element has more space below it', async () => {
+                        const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
+                            top: 100,
+                            bottom: 150,
+                        });
+                        await specPopover.determinePopDirection();
+                        expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('440px');
+                        expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
+                        controlSpy.mockRestore();
+                    });
                 });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('520px');
-                expect(specPopover.currentDirection).toBe('down');
-                controlSpy.mockRestore();
             });
-            it('sets the direction to up when control element has more space above it', async () => {
-                const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                    top: 500,
-                    bottom: 550,
+            describe('handleMinHeight', () => {
+                it('calls handleDeprecationWarning for minHeight', async () => {
+                    specPopover = new Q2Popover();
+                    const mockHandleDeprecation = jest
+                        .spyOn(utils, 'handleDeprecationWarning')
+                        .mockImplementation(() => { });
+                    specPopover.minHeight = 100;
+                    specPopover.handleMinHeight();
+                    expect(mockHandleDeprecation).toHaveBeenCalled();
                 });
-                await specPopover.determinePopDirection();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
-                expect(specPopover.currentDirection).toBe('up');
-                controlSpy.mockRestore();
             });
-        });
-    });
-    describe('viewPortChanged', () => {
-        let specPopover;
-        let windowSpy;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
-            window.Tecton = sampleTectonWindow;
-            expect(specPopover.isModule).toBe(true);
-            specPopover.determinePopDirection = jest.fn();
-        });
-        afterEach(() => {
-            windowSpy.mockRestore();
-        });
-        it('calls determinePopDirection when open is true', async () => {
-            specPopover.open = true;
-            await specPopover.viewPortChanged();
-            expect(specPopover.determinePopDirection).toHaveBeenCalled();
-        });
-        it('does nothing when open is false', async () => {
-            specPopover.open = false;
-            await specPopover.viewPortChanged();
-            expect(specPopover.determinePopDirection).not.toHaveBeenCalled();
-        });
-    });
-    describe('viewPortOrientationChanged', () => {
-        let specPopover;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            specPopover.viewPortChanged = jest.fn();
-        });
-        it('sets orientationChanged to true and calls viewportChanged', async () => {
-            await specPopover.viewPortOrientationChanged();
-            expect(specPopover.orientationChanged).toBe(true);
-            expect(specPopover.viewPortChanged).toHaveBeenCalled();
-        });
-    });
-    describe('setFixedCSSProperties', () => {
-        let specPopover;
-        let containerElement;
-        beforeEach(() => {
-            window.visualViewport = { width: 800, height: 600 };
-            specPopover = new Q2Popover();
-            containerElement = document.createElement('div');
-            specPopover.containerElement = containerElement;
-            specPopover.rootElementRect = {
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: window.visualViewport.height,
-                width: window.visualViewport.width,
-            };
-            const controlElement = document.createElement('div');
-            controlElement.getBoundingClientRect = jest.fn().mockReturnValue({
-                top: 20,
-                bottom: 70,
-                left: 30,
-                right: 80,
-            });
-            specPopover.controlElement = controlElement;
-        });
-        it('sets the necessary CSS properties', async () => {
-            await specPopover.setFixedCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('30px');
-            expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('720px');
-            expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBe('1');
-        });
-        it('sets --comp-pop-bottom when direction is up', async () => {
-            specPopover.currentDirection = 'up';
-            await specPopover.setFixedCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('580px');
-        });
-        it('sets --comp-pop-top when direction is down', async () => {
-            specPopover.currentDirection = 'down';
-            await specPopover.setFixedCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBe('70px');
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-        });
-        it('sets --comp-pop-width when block is true', async () => {
-            specPopover.block = true;
-            await specPopover.setFixedCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('0px');
-        });
-        describe('when rootElementRect is bonkers', () => {
-            beforeEach(() => {
-                specPopover.rootElementRect = {
-                    top: 50,
-                    bottom: 650,
-                    left: 50,
-                    right: 750,
-                    height: 600,
-                    width: 700,
-                };
-                const controlElement = document.createElement('div');
-                controlElement.getBoundingClientRect = jest.fn().mockReturnValue({
-                    top: 70,
-                    bottom: 120,
-                    left: 80,
-                    right: 130,
-                });
-                specPopover.controlElement = controlElement;
-            });
-            it('sets the necessary CSS properties', async () => {
-                await specPopover.setFixedCSSProperties();
-                expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
-                expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-                expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-                expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('30px');
-                expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('620px');
-                expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBeFalsy();
-                expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBe('1');
-            });
-            it('sets --comp-pop-bottom when direction is up', async () => {
-                specPopover.currentDirection = 'up';
-                await specPopover.setFixedCSSProperties();
-                expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-                expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('580px');
-            });
-            it('sets --comp-pop-top when direction is down', async () => {
-                specPopover.currentDirection = 'down';
-                await specPopover.setFixedCSSProperties();
-                expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBe('70px');
-                expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-            });
-            it('sets --comp-pop-width when block is true', async () => {
-                specPopover.block = true;
-                await specPopover.setFixedCSSProperties();
-                expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('0px');
+            describe('handlePopoverToggleEvent', () => {
+                it('emits the popoverStateChanged event', async () => {
+                    specPopover = new Q2Popover();
+                    const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                    specPopover.handlePopoverToggleEvent({});
+                    expect(mockEmit).toHaveBeenCalled();
+                });
+                describe('when the newState from the ToggleEvent is "open"', () => {
+                    it('emits the popoverStateChanged event open as true', async () => {
+                        specPopover = new Q2Popover();
+                        const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                        specPopover.handlePopoverToggleEvent({ newState: 'open' });
+                        expect(mockEmit).toHaveBeenCalledWith({ open: true });
+                    });
+                });
+                describe('when the newState from the ToggleEvent is "closed"', () => {
+                    it('emits the popoverStateChanged event open as false', async () => {
+                        specPopover = new Q2Popover();
+                        const mockEmit = jest.spyOn(specPopover.popoverStateChanged, 'emit');
+                        specPopover.handlePopoverToggleEvent({ newState: 'closed' });
+                        expect(mockEmit).toHaveBeenCalledWith({ open: false });
+                    });
+                });
             });
-        });
-    });
-    describe('setAbsoluteCSSProperties', () => {
-        let specPopover;
-        let containerElement;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            containerElement = document.createElement('div');
-            specPopover.mode = 'legacy';
-            specPopover.containerElement = containerElement;
-            const controlElement = document.createElement('div');
-            controlElement.getBoundingClientRect = jest.fn().mockReturnValue({
-                top: 20,
-                bottom: 70,
-                left: 30,
-                right: 80,
-            });
-            specPopover.controlElement = controlElement;
-            window.visualViewport = { width: 800, height: 600 };
-        });
-        it('sets the necessary CSS properties', async () => {
-            await specPopover.setAbsoluteCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('0');
-            expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('unset');
-            expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('');
-            expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBe('1');
-        });
-        it('sets the necessary CSS properties when align is right', async () => {
-            specPopover.align = 'right';
-            await specPopover.setAbsoluteCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('unset');
-            expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('0');
-        });
-        it('sets --comp-pop-bottom when direction is up', async () => {
-            specPopover.currentDirection = 'up';
-            await specPopover.setAbsoluteCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('0px');
-        });
-        it('does not set --comp-pop-top when direction is down', async () => {
-            specPopover.currentDirection = 'down';
-            await specPopover.setAbsoluteCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBe('');
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('');
-        });
-        it('sets --comp-pop-width when block is true', async () => {
-            specPopover.block = true;
-            await specPopover.setAbsoluteCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('100%');
-        });
-    });
-    describe('clearCSSProperties', () => {
-        let specPopover;
-        let containerElement;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            containerElement = document.createElement('div');
-            containerElement.style.setProperty('--comp-pop-max-height', '100px');
-            containerElement.style.setProperty('--comp-pop-top', '20px');
-            containerElement.style.setProperty('--comp-pop-bottom', '25px');
-            containerElement.style.setProperty('--comp-pop-left', '30px');
-            containerElement.style.setProperty('--comp-pop-right', '35px');
-            containerElement.style.setProperty('--comp-pop-width', '200px');
-            containerElement.style.setProperty('--comp-pop-opacity', '1');
-            specPopover.containerElement = containerElement;
-        });
-        it('clears the necessary CSS properties', async () => {
-            await specPopover.clearCSSProperties();
-            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBeFalsy();
-            expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBeFalsy();
-        });
-    });
-    describe('setDirectionAndShow', () => {
-        let specPopover;
-        let containerElement;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            containerElement = document.createElement('div');
-            specPopover.containerElement = containerElement;
-            specPopover.setRootElement = jest.fn();
-            specPopover.setFixedCSSProperties = jest.fn();
-            specPopover.setAbsoluteCSSProperties = jest.fn();
-            specPopover.scrollContainerTo = jest.fn();
-        });
-        it('does nothing when open is false', async () => {
-            specPopover.open = false;
-            await specPopover.setDirectionAndShow('up');
-            expect(specPopover.currentDirection).toBeUndefined();
-            expect(specPopover.show).toBe(false);
-            expect(specPopover.setRootElement).toHaveBeenCalled();
-            expect(specPopover.setFixedCSSProperties).not.toHaveBeenCalled();
-            expect(specPopover.setAbsoluteCSSProperties).not.toHaveBeenCalled();
-        });
-        describe('when open is true', () => {
-            beforeEach(() => {
-                specPopover.open = true;
+            describe('removeViewportListeners', () => {
+                let specPopover;
+                let windowRemoveEventListenerSpy;
+                let visualViewportRemoveEventListenerSpy;
+                let screenOrientationRemoveEventListenerSpy;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    windowRemoveEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+                    // Mock visualViewport
+                    const mockVisualViewport = {
+                        removeEventListener: jest.fn(),
+                    };
+                    Object.defineProperty(window, 'visualViewport', {
+                        value: mockVisualViewport,
+                        configurable: true,
+                    });
+                    global.visualViewport = mockVisualViewport;
+                    visualViewportRemoveEventListenerSpy = jest.spyOn(mockVisualViewport, 'removeEventListener');
+                    // Mock screen.orientation
+                    const mockScreenOrientation = {
+                        removeEventListener: jest.fn(),
+                    };
+                    const mockScreen = { orientation: mockScreenOrientation };
+                    Object.defineProperty(window, 'screen', {
+                        value: mockScreen,
+                        configurable: true,
+                    });
+                    global.screen = mockScreen;
+                    screenOrientationRemoveEventListenerSpy = jest.spyOn(mockScreenOrientation, 'removeEventListener');
+                });
+                afterEach(() => {
+                    windowRemoveEventListenerSpy.mockRestore();
+                    visualViewportRemoveEventListenerSpy.mockRestore();
+                    screenOrientationRemoveEventListenerSpy.mockRestore();
+                    delete global.visualViewport;
+                    delete global.screen;
+                    delete window.visualViewport;
+                    delete window.screen;
+                });
+                it('removes resize listener from window with viewPortOrientationChanged handler', async () => {
+                    specPopover.removeViewportListeners();
+                    expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortOrientationChanged);
+                });
+                it('removes resize listener from visualViewport with viewPortChanged handler', async () => {
+                    specPopover.removeViewportListeners();
+                    expect(visualViewportRemoveEventListenerSpy).toHaveBeenCalledWith('resize', specPopover.viewPortChanged);
+                });
+                it('removes scroll listener from window with viewPortChanged handler and proper options', async () => {
+                    specPopover.removeViewportListeners();
+                    expect(windowRemoveEventListenerSpy).toHaveBeenNthCalledWith(2, 'scroll', specPopover.viewPortChanged, { capture: true });
+                });
+                it('removes orientationchange listener from screen.orientation with viewPortOrientationChanged handler', async () => {
+                    specPopover.removeViewportListeners();
+                    expect(screenOrientationRemoveEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                });
+                it('removes orientationchange listener from window with viewPortOrientationChanged handler', async () => {
+                    specPopover.removeViewportListeners();
+                    expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith('orientationchange', specPopover.viewPortOrientationChanged);
+                });
             });
-            it('sets the direction, shows the popover, and sets fixed position properties', async () => {
-                await specPopover.setDirectionAndShow('up');
-                expect(specPopover.currentDirection).toBe('up');
-                expect(specPopover.show).toBe(true);
-                expect(specPopover.setRootElement).toHaveBeenCalled();
-                expect(specPopover.setFixedCSSProperties).toHaveBeenCalled();
-                expect(specPopover.setAbsoluteCSSProperties).not.toHaveBeenCalled();
-            });
-            it('sets the direction, shows the popover, and sets absolute position properties when mode is "legacy"', async () => {
-                specPopover.mode = 'legacy';
-                await specPopover.setDirectionAndShow('up');
-                expect(specPopover.currentDirection).toBe('up');
-                expect(specPopover.show).toBe(true);
-                expect(specPopover.setRootElement).toHaveBeenCalled();
-                expect(specPopover.setFixedCSSProperties).not.toHaveBeenCalled();
-                expect(specPopover.setAbsoluteCSSProperties).toHaveBeenCalled();
+            describe('setAbsoluteCSSProperties', () => {
+                let specPopover;
+                let containerElement;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    containerElement = document.createElement('div');
+                    specPopover.mode = 'legacy';
+                    specPopover.containerElement = containerElement;
+                    const controlElement = document.createElement('div');
+                    controlElement.getBoundingClientRect = jest.fn().mockReturnValue({
+                        top: 20,
+                        bottom: 70,
+                        left: 30,
+                        right: 80,
+                    });
+                    specPopover.controlElement = controlElement;
+                    window.visualViewport = { width: 800, height: 600 };
+                });
+                it('sets the necessary CSS properties', async () => {
+                    await specPopover.setAbsoluteCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('0');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('unset');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBe('1');
+                });
+                it('sets the necessary CSS properties when align is right', async () => {
+                    specPopover.align = 'right';
+                    await specPopover.setAbsoluteCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('unset');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('0');
+                });
+                it('sets --comp-pop-bottom when direction is up', async () => {
+                    specPopover.currentDirection = 'up';
+                    await specPopover.setAbsoluteCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('0px');
+                });
+                it('does not set --comp-pop-top when direction is down', async () => {
+                    specPopover.currentDirection = 'down';
+                    await specPopover.setAbsoluteCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBe('');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('');
+                });
+                it('sets --comp-pop-width when block is true', async () => {
+                    specPopover.block = true;
+                    await specPopover.setAbsoluteCSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('100%');
+                });
             });
-        });
-    });
-    describe('determinePopDirection', () => {
-        let specPopover;
-        let controlElement;
-        let containerElement;
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            controlElement = document.createElement('div');
-            containerElement = document.createElement('div');
-            specPopover.controlElement = controlElement;
-            specPopover.containerElement = containerElement;
-            window.visualViewport = { width: 800, height: 600 };
-            specPopover.setDirectionAndShow = jest.fn();
-        });
-        it('sets the direction to up when control element has more space above it', async () => {
-            const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                top: 500,
-                bottom: 550,
-            });
-            await specPopover.determinePopDirection();
-            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('490px');
-            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('up');
-            controlSpy.mockRestore();
-        });
-        it('sets the direction to down when control element has more space below it', async () => {
-            const controlSpy = jest.spyOn(controlElement, 'getBoundingClientRect').mockReturnValue({
-                top: 100,
-                bottom: 150,
-            });
-            await specPopover.determinePopDirection();
-            expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBe('440px');
-            expect(specPopover.setDirectionAndShow).toHaveBeenCalledWith('down');
-            controlSpy.mockRestore();
-        });
-    });
-    describe('openChanged', () => {
-        beforeEach(() => {
-            specPopover = new Q2Popover();
-            specPopover.setRootElement = jest.fn();
-            specPopover.addViewportListeners = jest.fn();
-            specPopover.determinePopDirection = jest.fn();
-            specPopover.removeViewportListeners = jest.fn();
-            specPopover.clearCSSProperties = jest.fn();
-        });
-        it('sets open to true when open is false', async () => {
-            specPopover.currentDirection = 'down';
-            specPopover.show = true;
-            await specPopover.openChanged(true);
-            expect(specPopover.currentDirection).toBe('down');
-            expect(specPopover.show).toBeTruthy();
-            expect(specPopover.setRootElement).toHaveBeenCalled();
-            expect(specPopover.addViewportListeners).toHaveBeenCalled();
-            expect(specPopover.determinePopDirection).toHaveBeenCalled();
-            expect(specPopover.removeViewportListeners).not.toHaveBeenCalled();
-            expect(specPopover.clearCSSProperties).not.toHaveBeenCalled();
-        });
-        it('sets open to false when open is true', async () => {
-            specPopover.currentDirection = 'down';
-            specPopover.show = true;
-            await specPopover.openChanged(false);
-            expect(specPopover.currentDirection).toBeUndefined();
-            expect(specPopover.show).toBeFalsy();
-            expect(specPopover.setRootElement).toHaveBeenCalled();
-            expect(specPopover.addViewportListeners).not.toHaveBeenCalled();
-            expect(specPopover.determinePopDirection).not.toHaveBeenCalled();
-            expect(specPopover.clearCSSProperties).toHaveBeenCalled();
-            expect(specPopover.clearCSSProperties).toHaveBeenCalled();
-        });
-    });
-    describe('setRootElement', () => {
-        let computedStyleStub = {};
-        const popoverDOMRect = {
-            top: 50,
-            bottom: 125,
-            left: 50,
-            right: 50,
-            height: 75,
-            width: 700,
-        };
-        beforeEach(() => {
-            computedStyleStub = {
-                transform: 'none',
-                filter: 'none',
-                perspective: 'none',
-                contain: 'none',
-                containerType: 'normal',
-                willChange: 'auto',
-            };
-            window.visualViewport = { width: 800, height: 600 };
-            specPopover = new Q2Popover();
-            window.getComputedStyle = jest.fn().mockReturnValue(computedStyleStub);
-            specPopover.hostElement.getBoundingClientRect = jest.fn().mockReturnValue(popoverDOMRect);
-        });
-        it('sets the rootElementRect by default', async () => {
-            await specPopover.setRootElement();
-            expect(specPopover.rootElementRect).toEqual({
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                height: 600,
-                width: 800,
+            describe('setDirectionAndShow', () => {
+                let specPopover;
+                let containerElement;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    containerElement = document.createElement('div');
+                    specPopover.containerElement = containerElement;
+                    specPopover.setPopoverAPICSSProperties = jest.fn();
+                    specPopover.setAbsoluteCSSProperties = jest.fn();
+                    specPopover.scrollContainerTo = jest.fn();
+                });
+                it('does nothing when open is false', async () => {
+                    specPopover.open = false;
+                    specPopover.setDirectionAndShow('up');
+                    expect(specPopover.currentDirection).toBeUndefined();
+                    expect(specPopover.show).toBe(false);
+                    expect(specPopover.setPopoverAPICSSProperties).not.toHaveBeenCalled();
+                    expect(specPopover.setAbsoluteCSSProperties).not.toHaveBeenCalled();
+                });
+                describe('when open is true', () => {
+                    beforeEach(() => {
+                        specPopover.open = true;
+                    });
+                    it('sets the direction, shows the popover, and sets fixed position properties', async () => {
+                        enablePopoverAPI();
+                        containerElement.showPopover = jest.fn();
+                        specPopover.setDirectionAndShow('up');
+                        expect(specPopover.currentDirection).toBe('up');
+                        expect(specPopover.setPopoverAPICSSProperties).toHaveBeenCalled();
+                        expect(specPopover.setAbsoluteCSSProperties).not.toHaveBeenCalled();
+                        expect(containerElement.showPopover).toHaveBeenCalled();
+                    });
+                    it('sets the direction, shows the popover, and sets absolute position properties when mode is "legacy"', async () => {
+                        specPopover.mode = 'legacy';
+                        specPopover.setDirectionAndShow('up');
+                        expect(specPopover.currentDirection).toBe('up');
+                        expect(specPopover.show).toBe(true);
+                        expect(specPopover.setPopoverAPICSSProperties).not.toHaveBeenCalled();
+                        expect(specPopover.setAbsoluteCSSProperties).toHaveBeenCalled();
+                    });
+                });
             });
-        });
-        describe('when a containing block is created by applying CSS properties', () => {
-            it('returns the currentElementRect when transform is applied', async () => {
-                computedStyleStub.transform = 'translate(10px, 20px)';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
-            });
-            it('returns the currentElementRect when filter is applied', async () => {
-                computedStyleStub.filter = 'blur(5px)';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
-            });
-            it('returns the currentElementRect when perspective is applied', async () => {
-                computedStyleStub.perspective = '100px';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
-            });
-            it('returns the currentElementRect when contain is applied', async () => {
-                computedStyleStub.contain = 'layout';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
-            });
-            it('returns the currentElementRect when containerType is applied', async () => {
-                computedStyleStub.containerType = 'none';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
-            });
-            it('returns the currentElementRect when willChange is applied', async () => {
-                computedStyleStub.willChange = 'transform';
-                await specPopover.setRootElement();
-                expect(specPopover.rootElementRect).toEqual(popoverDOMRect);
+            describe('setPopoverAPICSSProperties', () => {
+                let specPopover;
+                let containerElement;
+                beforeEach(() => {
+                    window.visualViewport = { width: 800, height: 600, offsetTop: 0 };
+                    window.innerHeight = 600;
+                    window.scrollY = 0;
+                    specPopover = new Q2Popover();
+                    containerElement = document.createElement('div');
+                    specPopover.containerElement = containerElement;
+                    const controlElement = document.createElement('div');
+                    controlElement.getBoundingClientRect = jest.fn().mockReturnValue({
+                        top: 20,
+                        bottom: 70,
+                        left: 30,
+                        right: 80,
+                    });
+                    specPopover.controlElement = controlElement;
+                });
+                it('sets the necessary CSS properties', async () => {
+                    await specPopover.setPopoverAPICSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-max-height')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('30px');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('unset');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-opacity')).toBe('1');
+                });
+                it('sets --comp-pop-right when align is right', async () => {
+                    specPopover.align = 'right';
+                    await specPopover.setPopoverAPICSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-left')).toBe('unset');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-right')).toBe('720px');
+                });
+                it('sets --comp-pop-bottom when direction is up', async () => {
+                    specPopover.currentDirection = 'up';
+                    await specPopover.setPopoverAPICSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBeFalsy();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBe('580px');
+                });
+                it('sets --comp-pop-top when direction is down', async () => {
+                    specPopover.currentDirection = 'down';
+                    await specPopover.setPopoverAPICSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-top')).toBe('70px');
+                    expect(containerElement.style.getPropertyValue('--comp-pop-bottom')).toBeFalsy();
+                });
+                it('sets --comp-pop-width when block is true', async () => {
+                    specPopover.block = true;
+                    await specPopover.setPopoverAPICSSProperties();
+                    expect(containerElement.style.getPropertyValue('--comp-pop-width')).toBe('0px');
+                });
+            });
+            describe('viewPortChanged', () => {
+                let specPopover;
+                let windowSpy;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    windowSpy = jest.spyOn(window, 'top', 'get').mockReturnValue({});
+                    window.Tecton = sampleTectonWindow;
+                    expect(specPopover.isModule).toBe(true);
+                    specPopover.determinePopDirection = jest.fn();
+                });
+                afterEach(() => {
+                    windowSpy.mockRestore();
+                });
+                it('calls determinePopDirection when open is true', async () => {
+                    specPopover.open = true;
+                    specPopover.viewPortChanged();
+                    expect(specPopover.determinePopDirection).toHaveBeenCalled();
+                });
+                it('does nothing when open is false', async () => {
+                    specPopover.open = false;
+                    specPopover.viewPortChanged();
+                    expect(specPopover.determinePopDirection).not.toHaveBeenCalled();
+                });
+            });
+            describe('viewPortOrientationChanged', () => {
+                let specPopover;
+                beforeEach(() => {
+                    specPopover = new Q2Popover();
+                    specPopover.viewPortChanged = jest.fn();
+                });
+                it('sets orientationChanged to true and calls viewportChanged', async () => {
+                    specPopover.viewPortOrientationChanged();
+                    expect(specPopover.orientationChanged).toBe(true);
+                    expect(specPopover.viewPortChanged).toHaveBeenCalled();
+                });
             });
         });
     });