@pyreon/elements 0.11.4 → 0.11.6

package/src/__tests__/useOverlay.test.ts

@@ -1,10 +1,10 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 // ---------------------------------------------------------------------------
 // Mocks
 // ---------------------------------------------------------------------------
 
-vi.mock("@pyreon/reactivity", () => {
+vi.mock('@pyreon/reactivity', () => {
   const signal = <T>(initial: T) => {
     let value = initial
     const s = (() => value) as (() => T) & {
@@ -37,7 +37,7 @@ vi.mock("@pyreon/reactivity", () => {
   return { signal }
 })
 
-vi.mock("@pyreon/core", async (importOriginal) => {
+vi.mock('@pyreon/core', async (importOriginal) => {
   const actual = (await importOriginal()) as Record<string, unknown>
   return {
     ...actual,
@@ -47,7 +47,7 @@ vi.mock("@pyreon/core", async (importOriginal) => {
   }
 })
 
-vi.mock("@pyreon/ui-core", async () => {
+vi.mock('@pyreon/ui-core', async () => {
   const throttle = <F extends (...args: any[]) => any>(fn: F, _delay: number) => {
     const wrapped = (...args: any[]) => fn(...args)
     wrapped.cancel = () => {
@@ -59,14 +59,14 @@ vi.mock("@pyreon/ui-core", async () => {
   return { render: vi.fn(), throttle }
 })
 
-vi.mock("@pyreon/unistyle", () => ({
-  value: (v: unknown, _base?: number) => (typeof v === "number" ? `${v}px` : v),
+vi.mock('@pyreon/unistyle', () => ({
+  value: (v: unknown, _base?: number) => (typeof v === 'number' ? `${v}px` : v),
 }))
 
 const mockSetBlocked = vi.fn()
 const mockSetUnblocked = vi.fn()
 
-vi.mock("../Overlay/context", async (importOriginal) => {
+vi.mock('../Overlay/context', async (importOriginal) => {
   const actual = (await importOriginal()) as Record<string, unknown>
   return {
     ...actual,
@@ -77,18 +77,18 @@ vi.mock("../Overlay/context", async (importOriginal) => {
   }
 })
 
-vi.mock("~/utils", () => ({
+vi.mock('~/utils', () => ({
   IS_DEVELOPMENT: false,
 }))
 
-import { useOverlay } from "../Overlay"
+import { useOverlay } from '../Overlay'
 
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
 const mockElement = (rect: Partial<DOMRect> = {}): HTMLElement => {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   el.getBoundingClientRect = () => ({
     top: 0,
     bottom: 0,
@@ -106,8 +106,8 @@ const mockElement = (rect: Partial<DOMRect> = {}): HTMLElement => {
 
 // Set viewport dimensions for position tests
 const setViewport = (width: number, height: number) => {
-  Object.defineProperty(window, "innerWidth", { value: width, configurable: true })
-  Object.defineProperty(window, "innerHeight", { value: height, configurable: true })
+  Object.defineProperty(window, 'innerWidth', { value: width, configurable: true })
+  Object.defineProperty(window, 'innerHeight', { value: height, configurable: true })
 }
 
 beforeEach(() => {
@@ -124,32 +124,32 @@ afterEach(() => {
 // Tests
 // ---------------------------------------------------------------------------
 
-describe("useOverlay", () => {
+describe('useOverlay', () => {
   // =========================================================================
   // 1. Default state
   // =========================================================================
-  describe("default state", () => {
-    it("active is false by default", () => {
+  describe('default state', () => {
+    it('active is false by default', () => {
       const o = useOverlay()
       expect(o.active()).toBe(false)
     })
 
-    it("align defaults to bottom", () => {
+    it('align defaults to bottom', () => {
       const o = useOverlay()
-      expect(o.align).toBe("bottom")
+      expect(o.align).toBe('bottom')
     })
 
-    it("alignX defaults to left", () => {
+    it('alignX defaults to left', () => {
       const o = useOverlay()
-      expect(o.alignX()).toBe("left")
+      expect(o.alignX()).toBe('left')
     })
 
-    it("alignY defaults to bottom", () => {
+    it('alignY defaults to bottom', () => {
       const o = useOverlay()
-      expect(o.alignY()).toBe("bottom")
+      expect(o.alignY()).toBe('bottom')
     })
 
-    it("blocked is false by default", () => {
+    it('blocked is false by default', () => {
       const o = useOverlay()
       expect(o.blocked()).toBe(false)
     })
@@ -158,8 +158,8 @@ describe("useOverlay", () => {
   // =========================================================================
   // 2. isOpen=true
   // =========================================================================
-  describe("isOpen=true", () => {
-    it("active starts true when isOpen is true", () => {
+  describe('isOpen=true', () => {
+    it('active starts true when isOpen is true', () => {
       const o = useOverlay({ isOpen: true })
       expect(o.active()).toBe(true)
     })
@@ -168,21 +168,21 @@ describe("useOverlay", () => {
   // =========================================================================
   // 3. Disabled state
   // =========================================================================
-  describe("disabled", () => {
-    it("forces active to false when disabled is true", () => {
+  describe('disabled', () => {
+    it('forces active to false when disabled is true', () => {
       const o = useOverlay({ isOpen: true, disabled: true })
       expect(o.active()).toBe(false)
     })
 
-    it("prevents event handling when disabled", () => {
+    it('prevents event handling when disabled', () => {
       const onOpen = vi.fn()
-      const o = useOverlay({ openOn: "click", disabled: true, onOpen })
+      const o = useOverlay({ openOn: 'click', disabled: true, onOpen })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: triggerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: triggerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
@@ -194,35 +194,35 @@ describe("useOverlay", () => {
   // =========================================================================
   // 4. triggerRef / contentRef
   // =========================================================================
-  describe("triggerRef and contentRef", () => {
-    it("triggerRef is a callable function", () => {
+  describe('triggerRef and contentRef', () => {
+    it('triggerRef is a callable function', () => {
       const o = useOverlay()
-      expect(typeof o.triggerRef).toBe("function")
+      expect(typeof o.triggerRef).toBe('function')
     })
 
-    it("contentRef is a callable function", () => {
+    it('contentRef is a callable function', () => {
       const o = useOverlay()
-      expect(typeof o.contentRef).toBe("function")
+      expect(typeof o.contentRef).toBe('function')
     })
 
-    it("triggerRef accepts an HTMLElement", () => {
+    it('triggerRef accepts an HTMLElement', () => {
       const o = useOverlay()
       const el = mockElement()
       expect(() => o.triggerRef(el)).not.toThrow()
     })
 
-    it("contentRef accepts an HTMLElement", () => {
+    it('contentRef accepts an HTMLElement', () => {
       const o = useOverlay()
       const el = mockElement()
       expect(() => o.contentRef(el)).not.toThrow()
     })
 
-    it("triggerRef accepts null", () => {
+    it('triggerRef accepts null', () => {
       const o = useOverlay()
       expect(() => o.triggerRef(null)).not.toThrow()
     })
 
-    it("contentRef accepts null", () => {
+    it('contentRef accepts null', () => {
       const o = useOverlay()
       expect(() => o.contentRef(null)).not.toThrow()
     })
@@ -231,46 +231,46 @@ describe("useOverlay", () => {
   // =========================================================================
   // 5. showContent / hideContent
   // =========================================================================
-  describe("showContent / hideContent", () => {
-    it("showContent sets active to true", () => {
+  describe('showContent / hideContent', () => {
+    it('showContent sets active to true', () => {
       const o = useOverlay()
       o.showContent()
       expect(o.active()).toBe(true)
     })
 
-    it("hideContent sets active to false", () => {
+    it('hideContent sets active to false', () => {
       const o = useOverlay({ isOpen: true })
       o.hideContent()
       expect(o.active()).toBe(false)
     })
 
-    it("showContent calls onOpen callback", () => {
+    it('showContent calls onOpen callback', () => {
       const onOpen = vi.fn()
       const o = useOverlay({ onOpen })
       o.showContent()
       expect(onOpen).toHaveBeenCalledOnce()
     })
 
-    it("hideContent calls onClose callback", () => {
+    it('hideContent calls onClose callback', () => {
       const onClose = vi.fn()
       const o = useOverlay({ isOpen: true, onClose })
       o.hideContent()
       expect(onClose).toHaveBeenCalledOnce()
     })
 
-    it("showContent calls ctx.setBlocked", () => {
+    it('showContent calls ctx.setBlocked', () => {
       const o = useOverlay()
       o.showContent()
       expect(mockSetBlocked).toHaveBeenCalledOnce()
     })
 
-    it("hideContent calls ctx.setUnblocked", () => {
+    it('hideContent calls ctx.setUnblocked', () => {
       const o = useOverlay({ isOpen: true })
       o.hideContent()
       expect(mockSetUnblocked).toHaveBeenCalledOnce()
     })
 
-    it("toggle between show and hide works", () => {
+    it('toggle between show and hide works', () => {
       const o = useOverlay()
       o.showContent()
       expect(o.active()).toBe(true)
@@ -284,21 +284,21 @@ describe("useOverlay", () => {
   // =========================================================================
   // 6. Blocked state
   // =========================================================================
-  describe("blocked state", () => {
-    it("setBlocked increments blocked count", () => {
+  describe('blocked state', () => {
+    it('setBlocked increments blocked count', () => {
       const o = useOverlay()
       o.setBlocked()
       expect(o.blocked()).toBe(true)
     })
 
-    it("setUnblocked decrements blocked count", () => {
+    it('setUnblocked decrements blocked count', () => {
       const o = useOverlay()
       o.setBlocked()
       o.setUnblocked()
       expect(o.blocked()).toBe(false)
     })
 
-    it("multiple setBlocked calls require matching setUnblocked calls", () => {
+    it('multiple setBlocked calls require matching setUnblocked calls', () => {
       const o = useOverlay()
       o.setBlocked()
       o.setBlocked()
@@ -308,16 +308,16 @@ describe("useOverlay", () => {
       expect(o.blocked()).toBe(false)
     })
 
-    it("setUnblocked does not go below zero", () => {
+    it('setUnblocked does not go below zero', () => {
       const o = useOverlay()
       o.setUnblocked()
       o.setUnblocked()
       expect(o.blocked()).toBe(false)
     })
 
-    it("blocked overlay ignores click events", () => {
+    it('blocked overlay ignores click events', () => {
       const onOpen = vi.fn()
-      const o = useOverlay({ openOn: "click", onOpen })
+      const o = useOverlay({ openOn: 'click', onOpen })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
@@ -325,8 +325,8 @@ describe("useOverlay", () => {
       // Block the overlay
       o.setBlocked()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: triggerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: triggerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
@@ -338,21 +338,21 @@ describe("useOverlay", () => {
   // =========================================================================
   // 7. setupListeners
   // =========================================================================
-  describe("setupListeners", () => {
-    it("returns a cleanup function", () => {
+  describe('setupListeners', () => {
+    it('returns a cleanup function', () => {
       const o = useOverlay()
       const cleanup = o.setupListeners()
-      expect(typeof cleanup).toBe("function")
+      expect(typeof cleanup).toBe('function')
       cleanup()
     })
 
-    it("cleanup removes event listeners without error", () => {
+    it('cleanup removes event listeners without error', () => {
       const o = useOverlay()
       const cleanup = o.setupListeners()
       expect(() => cleanup()).not.toThrow()
     })
 
-    it("cleanup can be called multiple times safely", () => {
+    it('cleanup can be called multiple times safely', () => {
       const o = useOverlay()
       const cleanup = o.setupListeners()
       cleanup()
@@ -363,125 +363,125 @@ describe("useOverlay", () => {
   // =========================================================================
   // 8. Click handling
   // =========================================================================
-  describe("click handling", () => {
-    it("openOn=click: clicking trigger when inactive opens overlay", () => {
-      const o = useOverlay({ openOn: "click" })
+  describe('click handling', () => {
+    it('openOn=click: clicking trigger when inactive opens overlay', () => {
+      const o = useOverlay({ openOn: 'click' })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: triggerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: triggerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("openOn=click: clicking non-trigger when inactive does not open", () => {
-      const o = useOverlay({ openOn: "click" })
+    it('openOn=click: clicking non-trigger when inactive does not open', () => {
+      const o = useOverlay({ openOn: 'click' })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const outsideEl = document.createElement("div")
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: outsideEl })
+      const outsideEl = document.createElement('div')
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: outsideEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("closeOn=click: any click when active closes overlay", () => {
-      const o = useOverlay({ openOn: "click", closeOn: "click", isOpen: true })
+    it('closeOn=click: any click when active closes overlay', () => {
+      const o = useOverlay({ openOn: 'click', closeOn: 'click', isOpen: true })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const outsideEl = document.createElement("div")
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: outsideEl })
+      const outsideEl = document.createElement('div')
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: outsideEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("closeOn=clickOnTrigger: clicking trigger when active closes overlay", () => {
-      const o = useOverlay({ openOn: "click", closeOn: "clickOnTrigger", isOpen: true })
+    it('closeOn=clickOnTrigger: clicking trigger when active closes overlay', () => {
+      const o = useOverlay({ openOn: 'click', closeOn: 'clickOnTrigger', isOpen: true })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: triggerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: triggerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("closeOn=clickOnTrigger: clicking outside does not close overlay", () => {
-      const o = useOverlay({ openOn: "click", closeOn: "clickOnTrigger", isOpen: true })
+    it('closeOn=clickOnTrigger: clicking outside does not close overlay', () => {
+      const o = useOverlay({ openOn: 'click', closeOn: 'clickOnTrigger', isOpen: true })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const outsideEl = document.createElement("div")
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: outsideEl })
+      const outsideEl = document.createElement('div')
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: outsideEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("closeOn=clickOutsideContent: click outside content closes overlay", () => {
-      const o = useOverlay({ openOn: "click", closeOn: "clickOutsideContent", isOpen: true })
+    it('closeOn=clickOutsideContent: click outside content closes overlay', () => {
+      const o = useOverlay({ openOn: 'click', closeOn: 'clickOutsideContent', isOpen: true })
       const triggerEl = mockElement()
       const contentEl = mockElement()
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
 
-      const outsideEl = document.createElement("div")
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: outsideEl })
+      const outsideEl = document.createElement('div')
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: outsideEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("closeOn=clickOutsideContent: click inside content does not close overlay", () => {
-      const o = useOverlay({ openOn: "click", closeOn: "clickOutsideContent", isOpen: true })
+    it('closeOn=clickOutsideContent: click inside content does not close overlay', () => {
+      const o = useOverlay({ openOn: 'click', closeOn: 'clickOutsideContent', isOpen: true })
       const triggerEl = mockElement()
       const contentEl = mockElement()
-      const childEl = document.createElement("span")
+      const childEl = document.createElement('span')
       contentEl.appendChild(childEl)
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: childEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: childEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("click on trigger child element opens overlay (contains check)", () => {
-      const o = useOverlay({ openOn: "click" })
+    it('click on trigger child element opens overlay (contains check)', () => {
+      const o = useOverlay({ openOn: 'click' })
       const triggerEl = mockElement()
-      const innerEl = document.createElement("span")
+      const innerEl = document.createElement('span')
       triggerEl.appendChild(innerEl)
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: innerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: innerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(true)
@@ -492,24 +492,24 @@ describe("useOverlay", () => {
   // =========================================================================
   // 9. ESC handling
   // =========================================================================
-  describe("ESC handling", () => {
-    it("closeOnEsc=true: Escape key when active closes overlay", () => {
+  describe('ESC handling', () => {
+    it('closeOnEsc=true: Escape key when active closes overlay', () => {
       const o = useOverlay({ closeOnEsc: true, isOpen: true })
       const cleanup = o.setupListeners()
 
-      const esc = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      const esc = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
       window.dispatchEvent(esc)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("closeOnEsc=true: Escape key when inactive does nothing", () => {
+    it('closeOnEsc=true: Escape key when inactive does nothing', () => {
       const onClose = vi.fn()
       const o = useOverlay({ closeOnEsc: true, onClose })
       const cleanup = o.setupListeners()
 
-      const esc = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      const esc = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
       window.dispatchEvent(esc)
 
       expect(o.active()).toBe(false)
@@ -517,34 +517,34 @@ describe("useOverlay", () => {
       cleanup()
     })
 
-    it("closeOnEsc=false: Escape key does not close overlay", () => {
+    it('closeOnEsc=false: Escape key does not close overlay', () => {
       const o = useOverlay({ closeOnEsc: false, isOpen: true })
       const cleanup = o.setupListeners()
 
-      const esc = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      const esc = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
       window.dispatchEvent(esc)
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("closeOnEsc: Escape does not close when blocked", () => {
+    it('closeOnEsc: Escape does not close when blocked', () => {
       const o = useOverlay({ closeOnEsc: true, isOpen: true })
       const cleanup = o.setupListeners()
       o.setBlocked()
 
-      const esc = new KeyboardEvent("keydown", { key: "Escape", bubbles: true })
+      const esc = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
       window.dispatchEvent(esc)
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("non-Escape key does not close overlay", () => {
+    it('non-Escape key does not close overlay', () => {
       const o = useOverlay({ closeOnEsc: true, isOpen: true })
       const cleanup = o.setupListeners()
 
-      const enter = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+      const enter = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
       window.dispatchEvent(enter)
 
       expect(o.active()).toBe(true)
@@ -555,31 +555,31 @@ describe("useOverlay", () => {
   // =========================================================================
   // 10. Hover handling
   // =========================================================================
-  describe("hover handling", () => {
-    it("openOn=hover: mouseenter on trigger opens overlay", () => {
-      const o = useOverlay({ openOn: "hover", closeOn: "hover" })
+  describe('hover handling', () => {
+    it('openOn=hover: mouseenter on trigger opens overlay', () => {
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover' })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
 
       expect(o.active()).toBe(true)
       cleanup()
     })
 
-    it("closeOn=hover: mouseleave from trigger schedules hide with hoverDelay", () => {
-      const o = useOverlay({ openOn: "hover", closeOn: "hover", hoverDelay: 100 })
+    it('closeOn=hover: mouseleave from trigger schedules hide with hoverDelay', () => {
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover', hoverDelay: 100 })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
       // Open first
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
       expect(o.active()).toBe(true)
 
       // Leave trigger
-      triggerEl.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
       // Should still be active (delay not elapsed)
       expect(o.active()).toBe(true)
 
@@ -589,8 +589,8 @@ describe("useOverlay", () => {
       cleanup()
     })
 
-    it("mouseenter on content cancels hide timeout", () => {
-      const o = useOverlay({ openOn: "hover", closeOn: "hover", hoverDelay: 100 })
+    it('mouseenter on content cancels hide timeout', () => {
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover', hoverDelay: 100 })
       const triggerEl = mockElement()
       const contentEl = mockElement()
       o.triggerRef(triggerEl)
@@ -598,14 +598,14 @@ describe("useOverlay", () => {
       const cleanup = o.setupListeners()
 
       // Open
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
       expect(o.active()).toBe(true)
 
       // Leave trigger (starts hide timer)
-      triggerEl.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
 
       // Enter content (cancels hide timer)
-      contentEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      contentEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
 
       // Advance past delay
       vi.advanceTimersByTime(200)
@@ -613,8 +613,8 @@ describe("useOverlay", () => {
       cleanup()
     })
 
-    it("mouseleave from content schedules hide", () => {
-      const o = useOverlay({ openOn: "hover", closeOn: "hover", hoverDelay: 50 })
+    it('mouseleave from content schedules hide', () => {
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover', hoverDelay: 50 })
       const triggerEl = mockElement()
       const contentEl = mockElement()
       o.triggerRef(triggerEl)
@@ -622,41 +622,41 @@ describe("useOverlay", () => {
       const cleanup = o.setupListeners()
 
       // Open
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
       expect(o.active()).toBe(true)
 
       // Leave content
-      contentEl.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }))
+      contentEl.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
       vi.advanceTimersByTime(50)
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("hover: scroll event closes overlay when closeOn=hover and active", () => {
-      const o = useOverlay({ openOn: "hover", closeOn: "hover" })
+    it('hover: scroll event closes overlay when closeOn=hover and active', () => {
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover' })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
       // Open
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
       expect(o.active()).toBe(true)
 
       // Scroll (should trigger processVisibilityEvent with closeOn=hover + scroll)
-      window.dispatchEvent(new Event("scroll"))
+      window.dispatchEvent(new Event('scroll'))
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("openOn=hover: mouseenter when already active does not call onOpen again", () => {
+    it('openOn=hover: mouseenter when already active does not call onOpen again', () => {
       const onOpen = vi.fn()
-      const o = useOverlay({ openOn: "hover", closeOn: "hover", onOpen })
+      const o = useOverlay({ openOn: 'hover', closeOn: 'hover', onOpen })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
-      triggerEl.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+      triggerEl.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
 
       expect(onOpen).toHaveBeenCalledOnce()
       cleanup()
@@ -666,12 +666,12 @@ describe("useOverlay", () => {
   // =========================================================================
   // 11. Position calculation (dropdown)
   // =========================================================================
-  describe("position calculation - dropdown", () => {
+  describe('position calculation - dropdown', () => {
     const setupDropdown = (opts: Parameters<typeof useOverlay>[0] = {}) => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
         isOpen: true,
         ...opts,
       })
@@ -699,8 +699,8 @@ describe("useOverlay", () => {
       return { o, triggerEl, contentEl }
     }
 
-    it("bottom align: positions content below trigger", () => {
-      const { o, contentEl } = setupDropdown({ align: "bottom", alignX: "left" })
+    it('bottom align: positions content below trigger', () => {
+      const { o, contentEl } = setupDropdown({ align: 'bottom', alignX: 'left' })
 
       // Trigger setContentPosition by calling showContent (which sets active)
       // active is already true and contentRef is set, but isContentLoaded is separate
@@ -709,31 +709,31 @@ describe("useOverlay", () => {
       // After contentRef callback, isContentLoaded is true. We need to trigger position calc.
       // The hook doesn't auto-trigger - it exposes setupListeners. Let's simulate resize.
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // Content should be positioned: top = trigger.bottom + offsetY = 130
-      expect(contentEl.style.top).toBe("130px")
+      expect(contentEl.style.top).toBe('130px')
       // left = trigger.left + offsetX = 50
-      expect(contentEl.style.left).toBe("50px")
+      expect(contentEl.style.left).toBe('50px')
       cleanup()
     })
 
-    it("top align: positions content above trigger", () => {
-      const { o, contentEl } = setupDropdown({ align: "top", alignX: "left" })
+    it('top align: positions content above trigger', () => {
+      const { o, contentEl } = setupDropdown({ align: 'top', alignX: 'left' })
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // top = trigger.top - offsetY - content.height = 100 - 0 - 200 = -100
       // Doesn't fit top (-100 < 0), so falls back to bottom: trigger.bottom + offsetY = 130
-      expect(contentEl.style.top).toBe("130px")
+      expect(contentEl.style.top).toBe('130px')
       cleanup()
     })
 
-    it("top align with room above: positions content above trigger", () => {
+    it('top align with room above: positions content above trigger', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "top",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'top',
+        alignX: 'left',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -755,41 +755,41 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // top = trigger.top - offsetY - content.height = 400 - 0 - 100 = 300
-      expect(contentEl.style.top).toBe("300px")
+      expect(contentEl.style.top).toBe('300px')
       cleanup()
     })
 
-    it("alignX=right: positions content aligned to right edge", () => {
-      const { o, contentEl } = setupDropdown({ align: "bottom", alignX: "right" })
+    it('alignX=right: positions content aligned to right edge', () => {
+      const { o, contentEl } = setupDropdown({ align: 'bottom', alignX: 'right' })
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // right pos = trigger.right - offsetX - content.width = 150 - 0 - 200 = -50
       // fitsRight = -50 >= 0 → false, falls back to leftPos = trigger.left + offsetX = 50
-      expect(contentEl.style.left).toBe("50px")
+      expect(contentEl.style.left).toBe('50px')
       cleanup()
     })
 
-    it("alignX=center: centers content horizontally under trigger", () => {
-      const { o, contentEl } = setupDropdown({ align: "bottom", alignX: "center" })
+    it('alignX=center: centers content horizontally under trigger', () => {
+      const { o, contentEl } = setupDropdown({ align: 'bottom', alignX: 'center' })
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // center = trigger.left + (trigger.right - trigger.left) / 2 - content.width / 2
       //        = 50 + (150 - 50) / 2 - 200 / 2 = 50 + 50 - 100 = 0
       // fitsCL = 0 >= 0 → true, fitsCR = 0 + 200 <= 1024 → true
-      expect(contentEl.style.left).toBe("0px")
+      expect(contentEl.style.left).toBe('0px')
       cleanup()
     })
 
-    it("with offsets: applies offsetX and offsetY", () => {
+    it('with offsets: applies offsetX and offsetY', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
         offsetX: 10,
         offsetY: 5,
         isOpen: true,
@@ -813,12 +813,12 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // top = trigger.bottom + offsetY = 130 + 5 = 135
-      expect(contentEl.style.top).toBe("135px")
+      expect(contentEl.style.top).toBe('135px')
       // left = trigger.left + offsetX = 50 + 10 = 60
-      expect(contentEl.style.left).toBe("60px")
+      expect(contentEl.style.left).toBe('60px')
       cleanup()
     })
   })
@@ -826,12 +826,12 @@ describe("useOverlay", () => {
   // =========================================================================
   // 11b. Position calculation - horizontal dropdown
   // =========================================================================
-  describe("position calculation - horizontal dropdown", () => {
-    it("align=right: positions content to the right of trigger", () => {
+  describe('position calculation - horizontal dropdown', () => {
+    it('align=right: positions content to the right of trigger', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "right",
-        alignY: "top",
+        type: 'dropdown',
+        align: 'right',
+        alignY: 'top',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -853,22 +853,22 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // rightPos = trigger.right + offsetX = 150 + 0 = 150
       // fitsRight = 150 + 100 <= 1024 → true
-      expect(contentEl.style.left).toBe("150px")
+      expect(contentEl.style.left).toBe('150px')
       // topPos = trigger.top + offsetY = 100
       // fitsTop = 100 + 100 <= 768 → true
-      expect(contentEl.style.top).toBe("100px")
+      expect(contentEl.style.top).toBe('100px')
       cleanup()
     })
 
-    it("align=left: positions content to the left of trigger", () => {
+    it('align=left: positions content to the left of trigger', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "left",
-        alignY: "top",
+        type: 'dropdown',
+        align: 'left',
+        alignY: 'top',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -890,19 +890,19 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // leftPos = trigger.left - offsetX - content.width = 300 - 0 - 100 = 200
       // fitsLeft = 200 >= 0 → true
-      expect(contentEl.style.left).toBe("200px")
+      expect(contentEl.style.left).toBe('200px')
       cleanup()
     })
 
-    it("align=right, alignY=center: vertically centers content", () => {
+    it('align=right, alignY=center: vertically centers content', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "right",
-        alignY: "center",
+        type: 'dropdown',
+        align: 'right',
+        alignY: 'center',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -924,19 +924,19 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // center = trigger.top + (trigger.bottom - trigger.top) / 2 - content.height / 2
       //        = 300 + (330 - 300) / 2 - 100 / 2 = 300 + 15 - 50 = 265
-      expect(contentEl.style.top).toBe("265px")
+      expect(contentEl.style.top).toBe('265px')
       cleanup()
     })
 
-    it("align=right, alignY=bottom: positions from bottom", () => {
+    it('align=right, alignY=bottom: positions from bottom', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "right",
-        alignY: "bottom",
+        type: 'dropdown',
+        align: 'right',
+        alignY: 'bottom',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -958,11 +958,11 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // bottomPos = trigger.bottom - offsetY - content.height = 330 - 0 - 100 = 230
       // fitsBottom = 230 >= 0 → true
-      expect(contentEl.style.top).toBe("230px")
+      expect(contentEl.style.top).toBe('230px')
       cleanup()
     })
   })
@@ -970,12 +970,12 @@ describe("useOverlay", () => {
   // =========================================================================
   // 12. Modal positioning
   // =========================================================================
-  describe("position calculation - modal", () => {
-    it("modal type: centers content by default", () => {
+  describe('position calculation - modal', () => {
+    it('modal type: centers content by default', () => {
       const o = useOverlay({
-        type: "modal",
-        alignX: "center",
-        alignY: "center",
+        type: 'modal',
+        alignX: 'center',
+        alignY: 'center',
         isOpen: true,
       })
       const contentEl = mockElement({
@@ -988,20 +988,20 @@ describe("useOverlay", () => {
       })
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // left = innerWidth / 2 - width / 2 = 1024 / 2 - 300 / 2 = 362
-      expect(contentEl.style.left).toBe("362px")
+      expect(contentEl.style.left).toBe('362px')
       // top = innerHeight / 2 - height / 2 = 768 / 2 - 200 / 2 = 284
-      expect(contentEl.style.top).toBe("284px")
+      expect(contentEl.style.top).toBe('284px')
       cleanup()
     })
 
-    it("modal type: alignX=left positions left edge", () => {
+    it('modal type: alignX=left positions left edge', () => {
       const o = useOverlay({
-        type: "modal",
-        alignX: "left",
-        alignY: "top",
+        type: 'modal',
+        alignX: 'left',
+        alignY: 'top',
         offsetX: 20,
         offsetY: 10,
         isOpen: true,
@@ -1009,18 +1009,18 @@ describe("useOverlay", () => {
       const contentEl = mockElement({ width: 300, height: 200 })
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
-      expect(contentEl.style.left).toBe("20px")
-      expect(contentEl.style.top).toBe("10px")
+      expect(contentEl.style.left).toBe('20px')
+      expect(contentEl.style.top).toBe('10px')
       cleanup()
     })
 
-    it("modal type: alignX=right positions right edge", () => {
+    it('modal type: alignX=right positions right edge', () => {
       const o = useOverlay({
-        type: "modal",
-        alignX: "right",
-        alignY: "bottom",
+        type: 'modal',
+        alignX: 'right',
+        alignY: 'bottom',
         offsetX: 15,
         offsetY: 25,
         isOpen: true,
@@ -1028,42 +1028,42 @@ describe("useOverlay", () => {
       const contentEl = mockElement({ width: 300, height: 200 })
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
-      expect(contentEl.style.right).toBe("15px")
-      expect(contentEl.style.bottom).toBe("25px")
+      expect(contentEl.style.right).toBe('15px')
+      expect(contentEl.style.bottom).toBe('25px')
       cleanup()
     })
 
-    it("modal type: sets document.body overflow to hidden", () => {
-      const o = useOverlay({ type: "modal", isOpen: true })
+    it('modal type: sets document.body overflow to hidden', () => {
+      const o = useOverlay({ type: 'modal', isOpen: true })
       const contentEl = mockElement({ width: 300, height: 200 })
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
 
-      expect(document.body.style.overflow).toBe("hidden")
+      expect(document.body.style.overflow).toBe('hidden')
       cleanup()
-      expect(document.body.style.overflow).toBe("")
+      expect(document.body.style.overflow).toBe('')
     })
   })
 
   // =========================================================================
   // 13. Position - custom type
   // =========================================================================
-  describe("position calculation - custom type", () => {
-    it("custom type: does not set position styles", () => {
+  describe('position calculation - custom type', () => {
+    it('custom type: does not set position styles', () => {
       const o = useOverlay({
-        type: "custom",
+        type: 'custom',
         isOpen: true,
       })
       const contentEl = mockElement({ width: 100, height: 100 })
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // computePosition returns {} for custom type
-      expect(contentEl.style.top).toBe("")
-      expect(contentEl.style.left).toBe("")
+      expect(contentEl.style.top).toBe('')
+      expect(contentEl.style.left).toBe('')
       cleanup()
     })
   })
@@ -1071,13 +1071,13 @@ describe("useOverlay", () => {
   // =========================================================================
   // 14. Alignment signal updates after positioning
   // =========================================================================
-  describe("alignment signal updates", () => {
-    it("updates alignX signal when position flips horizontally", () => {
+  describe('alignment signal updates', () => {
+    it('updates alignX signal when position flips horizontally', () => {
       setViewport(200, 768)
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -1096,22 +1096,22 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // leftPos = 50 + 0 = 50, fitsLeft = 50 + 200 <= 200 → false
       // rightPos = 150 - 0 - 200 = -50, fitsRight = -50 >= 0 → false
       // Falls back: sel(fitsLeft, leftPos, rightPos) → rightPos = -50
       // resolvedAlignX = sel(fitsLeft, "left", "right") → "right"
-      expect(o.alignX()).toBe("right")
+      expect(o.alignX()).toBe('right')
       cleanup()
     })
 
-    it("updates alignY signal when vertical position flips to top", () => {
+    it('updates alignY signal when vertical position flips to top', () => {
       setViewport(1024, 200)
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -1129,12 +1129,12 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // bottomPos = 130, fitsBottom = 130 + 100 <= 200 → false
       // useTop = sel(align === "top", fitsTop, !fitsBottom) = sel(false, _, !false) = true
       // resolvedAlignY = "top"
-      expect(o.alignY()).toBe("top")
+      expect(o.alignY()).toBe('top')
       cleanup()
     })
   })
@@ -1142,12 +1142,12 @@ describe("useOverlay", () => {
   // =========================================================================
   // 15. Resize reposition
   // =========================================================================
-  describe("resize handling", () => {
-    it("recalculates position on window resize", () => {
+  describe('resize handling', () => {
+    it('recalculates position on window resize', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -1167,8 +1167,8 @@ describe("useOverlay", () => {
       const cleanup = o.setupListeners()
 
       // First resize
-      window.dispatchEvent(new Event("resize"))
-      expect(contentEl.style.top).toBe("130px")
+      window.dispatchEvent(new Event('resize'))
+      expect(contentEl.style.top).toBe('130px')
 
       // Change trigger position and resize again
       triggerEl.getBoundingClientRect = () => ({
@@ -1182,8 +1182,8 @@ describe("useOverlay", () => {
         y: 200,
         toJSON: () => {},
       })
-      window.dispatchEvent(new Event("resize"))
-      expect(contentEl.style.top).toBe("230px")
+      window.dispatchEvent(new Event('resize'))
+      expect(contentEl.style.top).toBe('230px')
       cleanup()
     })
   })
@@ -1191,23 +1191,23 @@ describe("useOverlay", () => {
   // =========================================================================
   // 16. Parent container
   // =========================================================================
-  describe("parentContainer", () => {
-    it("sets overflow hidden on parent when closeOn is not hover", () => {
-      const parent = document.createElement("div")
-      const o = useOverlay({ parentContainer: parent, closeOn: "click" })
+  describe('parentContainer', () => {
+    it('sets overflow hidden on parent when closeOn is not hover', () => {
+      const parent = document.createElement('div')
+      const o = useOverlay({ parentContainer: parent, closeOn: 'click' })
       const cleanup = o.setupListeners()
 
-      expect(parent.style.overflow).toBe("hidden")
+      expect(parent.style.overflow).toBe('hidden')
       cleanup()
-      expect(parent.style.overflow).toBe("")
+      expect(parent.style.overflow).toBe('')
     })
 
-    it("does not set overflow hidden on parent when closeOn is hover", () => {
-      const parent = document.createElement("div")
-      const o = useOverlay({ parentContainer: parent, closeOn: "hover", openOn: "hover" })
+    it('does not set overflow hidden on parent when closeOn is hover', () => {
+      const parent = document.createElement('div')
+      const o = useOverlay({ parentContainer: parent, closeOn: 'hover', openOn: 'hover' })
       const cleanup = o.setupListeners()
 
-      expect(parent.style.overflow).not.toBe("hidden")
+      expect(parent.style.overflow).not.toBe('hidden')
       cleanup()
     })
   })
@@ -1215,18 +1215,18 @@ describe("useOverlay", () => {
   // =========================================================================
   // 17. Provider
   // =========================================================================
-  describe("Provider", () => {
-    it("exposes Provider component", () => {
+  describe('Provider', () => {
+    it('exposes Provider component', () => {
       const o = useOverlay()
-      expect(typeof o.Provider).toBe("function")
+      expect(typeof o.Provider).toBe('function')
     })
   })
 
   // =========================================================================
   // 18. Independent instances
   // =========================================================================
-  describe("independent instances", () => {
-    it("two useOverlay instances do not share state", () => {
+  describe('independent instances', () => {
+    it('two useOverlay instances do not share state', () => {
       const o1 = useOverlay()
       const o2 = useOverlay()
 
@@ -1244,23 +1244,23 @@ describe("useOverlay", () => {
   // =========================================================================
   // 19. Manual open/close mode
   // =========================================================================
-  describe("manual mode", () => {
-    it("openOn=manual: click on trigger does not open", () => {
-      const o = useOverlay({ openOn: "manual", closeOn: "manual" })
+  describe('manual mode', () => {
+    it('openOn=manual: click on trigger does not open', () => {
+      const o = useOverlay({ openOn: 'manual', closeOn: 'manual' })
       const triggerEl = mockElement()
       o.triggerRef(triggerEl)
       const cleanup = o.setupListeners()
 
-      const click = new MouseEvent("click", { bubbles: true })
-      Object.defineProperty(click, "target", { value: triggerEl })
+      const click = new MouseEvent('click', { bubbles: true })
+      Object.defineProperty(click, 'target', { value: triggerEl })
       window.dispatchEvent(click)
 
       expect(o.active()).toBe(false)
       cleanup()
     })
 
-    it("manual mode: only showContent/hideContent toggle state", () => {
-      const o = useOverlay({ openOn: "manual", closeOn: "manual" })
+    it('manual mode: only showContent/hideContent toggle state', () => {
+      const o = useOverlay({ openOn: 'manual', closeOn: 'manual' })
       const cleanup = o.setupListeners()
 
       o.showContent()
@@ -1275,13 +1275,13 @@ describe("useOverlay", () => {
   // =========================================================================
   // 20. Position with absolute + ancestor offset
   // =========================================================================
-  describe("position absolute with ancestor offset", () => {
-    it("adjusts position for offset parent", () => {
+  describe('position absolute with ancestor offset', () => {
+    it('adjusts position for offset parent', () => {
       const o = useOverlay({
-        type: "dropdown",
-        align: "bottom",
-        alignX: "left",
-        position: "absolute",
+        type: 'dropdown',
+        align: 'bottom',
+        alignX: 'left',
+        position: 'absolute',
         isOpen: true,
       })
       const triggerEl = mockElement({
@@ -1298,7 +1298,7 @@ describe("useOverlay", () => {
       })
 
       // Mock offsetParent
-      const offsetParent = document.createElement("div")
+      const offsetParent = document.createElement('div')
       offsetParent.getBoundingClientRect = () => ({
         top: 50,
         bottom: 400,
@@ -1310,7 +1310,7 @@ describe("useOverlay", () => {
         y: 50,
         toJSON: () => {},
       })
-      Object.defineProperty(contentEl, "offsetParent", {
+      Object.defineProperty(contentEl, 'offsetParent', {
         value: offsetParent,
         configurable: true,
       })
@@ -1318,12 +1318,12 @@ describe("useOverlay", () => {
       o.triggerRef(triggerEl)
       o.contentRef(contentEl)
       const cleanup = o.setupListeners()
-      window.dispatchEvent(new Event("resize"))
+      window.dispatchEvent(new Event('resize'))
 
       // Without ancestor: top = 230, left = 100
       // Adjusted: top = 230 - 50 = 180, left = 100 - 30 = 70
-      expect(contentEl.style.top).toBe("180px")
-      expect(contentEl.style.left).toBe("70px")
+      expect(contentEl.style.top).toBe('180px')
+      expect(contentEl.style.left).toBe('70px')
       cleanup()
     })
   })