@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/atoms/FloatingPanel/FloatingPanel.test.ts

@@ -0,0 +1,864 @@
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { ref, nextTick, type Ref } from 'vue'
+import FloatingPanel from './FloatingPanel.vue'
+
+// The options of the last useFloating() call, so the middleware can be inspected.
+const floating = vi.hoisted(() => ({ lastOptions: undefined as unknown }))
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: (_reference: unknown, _floating: unknown, options: unknown) => {
+      floating.lastOptions = options
+      return {
+        floatingStyles: ref({}),
+        placement: ref('bottom-start'),
+        isPositioned: ref(true),
+      }
+    },
+    autoUpdate: () => () => {},
+  }
+})
+
+const mountPanel = (props = {}, slots = {}) =>
+  mount(FloatingPanel, {
+    props,
+    slots: {
+      trigger: `<template #trigger="{ toggle, isOpen }">
+        <button class="trigger" :aria-expanded="isOpen" @click="toggle">Toggle</button>
+      </template>`,
+      content: `<template #content="{ close }">
+        <div class="panel">
+          <span>Panel content</span>
+          <button class="close-btn" @click="close">Close</button>
+        </div>
+      </template>`,
+      ...slots,
+    },
+    attachTo: document.body,
+  })
+
+let wrapper: VueWrapper
+
+afterEach(() => {
+  wrapper?.unmount()
+})
+
+const open = async (w = wrapper) => {
+  await w.find('.trigger').trigger('click')
+  // flushPromises lets computePosition resolve so isPositioned becomes true,
+  // which gates the content rendering in the two-level template.
+  await flushPromises()
+  await nextTick()
+}
+
+describe('FloatingPanel', () => {
+  describe('rendering', () => {
+    it('renders the trigger slot', () => {
+      wrapper = mountPanel()
+      expect(wrapper.find('.trigger').exists()).toBe(true)
+    })
+
+    it('does not render content by default', () => {
+      wrapper = mountPanel()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('renders content after trigger click', async () => {
+      wrapper = mountPanel()
+      await open()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+    })
+  })
+
+  describe('open / close', () => {
+    it('opens on trigger click', async () => {
+      wrapper = mountPanel()
+      await open()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+    })
+
+    it('closes on second trigger click', async () => {
+      wrapper = mountPanel()
+      await open()
+      await wrapper.find('.trigger').trigger('click')
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('closes when clicking outside', async () => {
+      wrapper = mountPanel()
+      await open()
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('does not close when clicking the trigger', async () => {
+      wrapper = mountPanel()
+      await open()
+      wrapper.find('.trigger').element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+    })
+
+    it('does not close when clicking inside the content', async () => {
+      wrapper = mountPanel()
+      await open()
+      wrapper.find('.panel').element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+    })
+
+    it('closes on Escape key', async () => {
+      wrapper = mountPanel()
+      await open()
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('does not close on Escape when already closed', async () => {
+      wrapper = mountPanel()
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('closes via close slot prop from content', async () => {
+      wrapper = mountPanel()
+      await open()
+      await wrapper.find('.close-btn').trigger('click')
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+  })
+
+  describe('trigger slot props', () => {
+    it('passes isOpen=false to trigger when closed', () => {
+      wrapper = mountPanel()
+      expect(wrapper.find('.trigger').attributes('aria-expanded')).toBe('false')
+    })
+
+    it('passes isOpen=true to trigger when open', async () => {
+      wrapper = mountPanel()
+      await open()
+      expect(wrapper.find('.trigger').attributes('aria-expanded')).toBe('true')
+    })
+  })
+
+  describe('emits', () => {
+    it('emits open when panel opens', async () => {
+      wrapper = mountPanel()
+      await open()
+      expect(wrapper.emitted('open')).toHaveLength(1)
+    })
+
+    it('emits close when panel closes via trigger', async () => {
+      wrapper = mountPanel()
+      await open()
+      await wrapper.find('.trigger').trigger('click')
+      await nextTick()
+      expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when panel closes via Escape', async () => {
+      wrapper = mountPanel()
+      await open()
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('emits close when panel closes via click outside', async () => {
+      wrapper = mountPanel()
+      await open()
+      document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+      await nextTick()
+      expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+
+    it('does not emit close more than once per close action', async () => {
+      wrapper = mountPanel()
+      await open()
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      await nextTick()
+      expect(wrapper.emitted('close')).toHaveLength(1)
+    })
+  })
+
+  describe('expose', () => {
+    it('exposes isOpen ref', () => {
+      wrapper = mountPanel()
+      expect((wrapper.vm as typeof wrapper.vm & { isOpen: boolean }).isOpen).toBe(false)
+    })
+
+    it('exposes open() method', async () => {
+      wrapper = mountPanel()
+      ;(wrapper.vm as typeof wrapper.vm & { open: () => void }).open()
+      await flushPromises()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+    })
+
+    it('exposes close() method', async () => {
+      wrapper = mountPanel()
+      await open()
+      ;(wrapper.vm as typeof wrapper.vm & { close: () => void }).close()
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+
+    it('exposes toggle() method', async () => {
+      wrapper = mountPanel()
+      ;(wrapper.vm as typeof wrapper.vm & { toggle: () => void }).toggle()
+      await flushPromises()
+      expect(wrapper.find('.panel').exists()).toBe(true)
+      ;(wrapper.vm as typeof wrapper.vm & { toggle: () => void }).toggle()
+      await nextTick()
+      expect(wrapper.find('.panel').exists()).toBe(false)
+    })
+  })
+
+  describe('placement prop', () => {
+    it('defaults to bottom-start', () => {
+      wrapper = mountPanel()
+      expect((wrapper.props() as { placement: string }).placement).toBe('bottom-start')
+    })
+
+    it('accepts any valid Floating UI placement', () => {
+      wrapper = mountPanel({ placement: 'top-end' })
+      expect((wrapper.props() as { placement: string }).placement).toBe('top-end')
+    })
+  })
+})
+
+// Utility classes are assembled from fragments at runtime: a complete class written
+// as a literal in a file under src/components/ is generated by Tailwind's @source
+// scan, so a missing class would still resolve. See CONTRIBUTING.md.
+const tw = (...parts: string[]) => parts.join('-')
+
+// The element the content slot's own root sits inside. Works whether `surface`
+// decorates the existing inner div or introduces a new wrapper around it.
+const contentBox = (w: VueWrapper) => w.find('.panel').element.parentElement as HTMLElement
+
+describe('FloatingPanel surface prop', () => {
+  it('leaves the content undecorated by default', async () => {
+    wrapper = mountPanel()
+    await open()
+
+    expect(contentBox(wrapper).getAttribute('class')).toBeNull()
+  })
+
+  it('adds no extra element around the content by default', async () => {
+    wrapper = mountPanel()
+    await open()
+
+    // .panel -> the existing v-if div -> the Transition. Nothing in between.
+    expect(contentBox(wrapper).parentElement?.tagName).toBe('TRANSITION-STUB')
+  })
+
+  it('renders identical markup for the default and an explicit surface=false', async () => {
+    wrapper = mountPanel()
+    await open()
+    const byDefault = contentBox(wrapper).outerHTML
+    wrapper.unmount()
+
+    wrapper = mountPanel({ surface: false })
+    await open()
+
+    expect(contentBox(wrapper).outerHTML).toBe(byDefault)
+  })
+
+  it('wraps the content in a bordered white card when surface is true', async () => {
+    wrapper = mountPanel({ surface: true })
+    await open()
+
+    const box = contentBox(wrapper)
+    expect(box.classList.contains(tw('rounded', 'xl'))).toBe(true)
+    expect(box.classList.contains('border')).toBe(true)
+    expect(box.classList.contains(tw('border', 'gray', '200'))).toBe(true)
+    expect(box.classList.contains(tw('bg', 'white'))).toBe(true)
+    expect(box.classList.contains(tw('shadow', 'sm'))).toBe(true)
+    // Clipping belongs with the radius. Four of the app's panels scroll or clip
+    // their own content; once the radius moves to this wrapper, clipping on an
+    // inner element has nothing left to clip against, so content would paint
+    // over the rounded corners.
+    expect(box.classList.contains(tw('overflow', 'hidden'))).toBe(true)
+  })
+
+  it('puts the surface inside the transition, not around it', async () => {
+    wrapper = mountPanel({ surface: true })
+    await open()
+
+    // one extra element compared to the default: .panel -> surface -> v-if div
+    expect(contentBox(wrapper).parentElement?.tagName).toBe('DIV')
+    expect(contentBox(wrapper).parentElement?.parentElement?.tagName).toBe('TRANSITION-STUB')
+  })
+
+  it('still renders the content and its close binding when surface is true', async () => {
+    wrapper = mountPanel({ surface: true })
+    await open()
+    expect(wrapper.text()).toContain('Panel content')
+
+    await wrapper.find('.close-btn').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.panel').exists()).toBe(false)
+  })
+
+  it('does not decorate the trigger when surface is true', async () => {
+    wrapper = mountPanel({ surface: true })
+    await open()
+
+    const trigger = wrapper.find('.trigger').element.parentElement as HTMLElement
+    expect(trigger.classList.contains(tw('bg', 'white'))).toBe(false)
+  })
+})
+
+type MiddlewareEntry = { name: string; options?: { apply?: (state: unknown) => void } }
+
+const middlewareNames = () =>
+  (floating.lastOptions as { middleware: Ref<MiddlewareEntry[]> }).middleware.value.map(
+    (m) => m.name,
+  )
+
+const fitHeightApply = () => {
+  const { middleware } = floating.lastOptions as { middleware: Ref<MiddlewareEntry[]> }
+  return middleware.value.at(-1)!.options!.apply!
+}
+
+const panelContainer = () => document.querySelector('.panel')?.closest('.z-50') ?? null
+
+describe('FloatingPanel default render', () => {
+  it('uses the same middleware as before when no new prop is set', () => {
+    wrapper = mountPanel()
+    expect(middlewareNames()).toEqual(['offset', 'flip', 'shift'])
+  })
+
+  it('adds one size() for matchWidth, one for fitHeight, and two for both', () => {
+    wrapper = mountPanel({ matchWidth: true })
+    expect(middlewareNames()).toEqual(['offset', 'flip', 'shift', 'size'])
+    wrapper.unmount()
+
+    wrapper = mountPanel({ fitHeight: true })
+    expect(middlewareNames()).toEqual(['offset', 'flip', 'shift', 'size'])
+    wrapper.unmount()
+
+    wrapper = mountPanel({ matchWidth: true, fitHeight: true })
+    expect(middlewareNames()).toEqual(['offset', 'flip', 'shift', 'size', 'size'])
+  })
+
+  it('renders identical markup with the new props explicitly off, open and closed', async () => {
+    const render = async (props: object) => {
+      wrapper = mountPanel(props)
+      const closed = wrapper.html()
+      await open()
+      const opened = wrapper.html()
+      wrapper.unmount()
+      return { closed, opened }
+    }
+
+    const byDefault = await render({})
+    for (const props of [{ teleport: false }, { fitHeight: false }, { surface: false }]) {
+      expect(await render(props)).toEqual(byDefault)
+    }
+    expect(byDefault.opened).not.toContain('teleport start')
+    expect(byDefault.opened).not.toContain('data-focus-guard')
+  })
+
+  // html() drops empty comments, so check the raw nodes: an inactive guard must not leave a
+  // `<!---->` placeholder in the trigger or the panel.
+  it('leaves no placeholder comment next to the trigger or in the panel', async () => {
+    const emptyComments = () =>
+      [...document.body.querySelectorAll('*')].flatMap((el) =>
+        [...el.childNodes].filter((n) => n.nodeType === Node.COMMENT_NODE && !n.nodeValue),
+      )
+
+    wrapper = mountPanel()
+    const trigger = wrapper.find('.trigger').element
+    expect(trigger.parentElement!.innerHTML).toBe(trigger.outerHTML)
+    expect(emptyComments()).toHaveLength(0)
+
+    await open()
+    expect(trigger.parentElement!.innerHTML).toBe(trigger.outerHTML)
+    expect(emptyComments()).toHaveLength(0)
+  })
+})
+
+describe('FloatingPanel fitHeight prop', () => {
+  const VIEWPORT = 800
+  const reference = { getBoundingClientRect: () => ({ top: 100, bottom: 140 }) }
+
+  const mountFit = (props = {}) =>
+    mountPanel(
+      { fitHeight: true, ...props },
+      {
+        content: `<template #content="{ availableHeight }">
+          <div class="panel"><span class="height">{{ String(availableHeight) }}</span></div>
+        </template>`,
+      },
+    )
+
+  const run = async (placement: string, rect = reference) => {
+    const element = document.createElement('div')
+    fitHeightApply()({ elements: { reference: rect, floating: element }, placement })
+    await nextTick()
+    return {
+      variable: element.style.getPropertyValue('--floating-panel-available-height'),
+      slot: wrapper.find('.height').text(),
+    }
+  }
+
+  beforeEach(() => {
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      configurable: true,
+      value: VIEWPORT,
+    })
+  })
+
+  afterEach(() => {
+    delete (document.documentElement as { clientHeight?: number }).clientHeight
+  })
+
+  it('measures the roomiest vertical side, minus offset and viewport margin', async () => {
+    wrapper = mountFit()
+    await open()
+
+    // below: 800 - 140 = 660 is roomier than 100 above; minus offset 8 and margin 8
+    expect(await run('bottom-start')).toEqual({ variable: '644px', slot: '644' })
+    // independent of the side flip() picked
+    expect(await run('top')).toEqual({ variable: '644px', slot: '644' })
+    // a trigger low on the page: above (600) is the roomiest side, even for a bottom placement
+    expect(
+      await run('bottom', { getBoundingClientRect: () => ({ top: 600, bottom: 640 }) }),
+    ).toEqual({ variable: '584px', slot: '584' })
+  })
+
+  it('uses the full viewport minus both margins for side placements', async () => {
+    wrapper = mountFit()
+    await open()
+    expect(await run('right-start')).toEqual({ variable: '784px', slot: '784' })
+  })
+
+  it('subtracts the surface border, for both surfaces', async () => {
+    wrapper = mountFit({ surface: true })
+    await open()
+    expect(await run('bottom')).toEqual({ variable: '642px', slot: '642' })
+    wrapper.unmount()
+
+    wrapper = mountFit({ surface: 'raised' })
+    await open()
+    expect(await run('right')).toEqual({ variable: '782px', slot: '782' })
+  })
+
+  it('floors fractions and never goes below 0', async () => {
+    wrapper = mountFit()
+    await open()
+    // 800 - 139.6 - 16 = 644.4
+    expect(
+      await run('bottom', { getBoundingClientRect: () => ({ top: 100, bottom: 139.6 }) }),
+    ).toEqual({ variable: '644px', slot: '644' })
+    expect(
+      await run('bottom', { getBoundingClientRect: () => ({ top: 4, bottom: VIEWPORT - 4 }) }),
+    ).toEqual({ variable: '0px', slot: '0' })
+  })
+
+  it('passes null and sets no variable without fitHeight', async () => {
+    wrapper = mountFit({ fitHeight: false })
+    await open()
+    expect(wrapper.find('.height').text()).toBe('null')
+    expect(panelContainer()?.getAttribute('style') ?? '').not.toContain('available-height')
+  })
+})
+
+describe('FloatingPanel raised surface', () => {
+  it('uses the heavier border and shadow for surface="raised"', async () => {
+    wrapper = mountPanel({ surface: 'raised' })
+    await open()
+
+    const box = contentBox(wrapper)
+    expect(box.classList.contains(tw('border', 'gray', '300'))).toBe(true)
+    expect(box.classList.contains(tw('shadow', 'lg'))).toBe(true)
+    expect(box.classList.contains(tw('border', 'gray', '200'))).toBe(false)
+    expect(box.classList.contains(tw('shadow', 'sm'))).toBe(false)
+    expect(box.classList.contains(tw('overflow', 'hidden'))).toBe(true)
+  })
+
+  it('casts the bare attribute `surface` to the default surface', async () => {
+    wrapper = mount(
+      {
+        components: { FloatingPanel },
+        template: `<FloatingPanel surface>
+          <template #trigger="{ toggle }"><button class="trigger" @click="toggle">Toggle</button></template>
+          <template #content><div class="panel">Panel content</div></template>
+        </FloatingPanel>`,
+      },
+      { attachTo: document.body },
+    )
+    await open()
+
+    const box = contentBox(wrapper)
+    expect(box.classList.contains(tw('border', 'gray', '200'))).toBe(true)
+    expect(box.classList.contains(tw('shadow', 'sm'))).toBe(true)
+  })
+})
+
+describe('FloatingPanel reduced motion', () => {
+  const stubReducedMotion = (reduce: boolean) =>
+    vi.stubGlobal('matchMedia', (query: string) => ({
+      matches: reduce && query.includes('reduce'),
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }))
+
+  const mountWithTransition = () =>
+    mount(FloatingPanel, {
+      slots: {
+        trigger: `<template #trigger="{ toggle }"><button class="trigger" @click="toggle">Toggle</button></template>`,
+        content: `<template #content><div class="panel">Panel content</div></template>`,
+      },
+      global: { stubs: { transition: false } },
+      attachTo: document.body,
+    })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('removes the panel in the same patch when motion is reduced', async () => {
+    stubReducedMotion(true)
+    wrapper = mountWithTransition()
+    await open()
+    expect(panelContainer()).not.toBeNull()
+
+    await wrapper.find('.trigger').trigger('click')
+    await nextTick()
+    expect(document.querySelector('.z-50')).toBeNull()
+  })
+
+  it('keeps the panel for the leave transition otherwise', async () => {
+    stubReducedMotion(false)
+    wrapper = mountWithTransition()
+    await open()
+
+    await wrapper.find('.trigger').trigger('click')
+    await nextTick()
+    expect(document.querySelector('.z-50')).not.toBeNull()
+  })
+
+  it('switches transitions off under motion-reduce as a CSS fallback', async () => {
+    wrapper = mountPanel()
+    await open()
+    const stub = wrapper.find('transition-stub')
+    expect(stub.attributes('enteractiveclass')).toContain('motion-reduce:transition-none')
+    expect(stub.attributes('leaveactiveclass')).toContain('motion-reduce:transition-none')
+  })
+})
+
+describe('FloatingPanel teleport prop', () => {
+  const Host = (hostAttrs = '', onClose: () => void = () => {}) => ({
+    components: { FloatingPanel },
+    setup: () => ({ panelRef: ref<InstanceType<typeof FloatingPanel> | null>(null), onClose }),
+    template: `<div class="host" ${hostAttrs}>
+      <button class="before">Voor</button>
+      <FloatingPanel ref="panelRef" teleport @close="onClose">
+        <template #trigger="{ toggle }"><button class="trigger" @click="toggle">Toggle</button></template>
+        <template #content="{ teleported }">
+          <div class="panel" :data-teleported="teleported">
+            <button class="first">Eerste</button>
+            <button class="last">Laatste</button>
+            <div class="stops-escape" tabindex="-1" @keydown.esc.stop></div>
+          </div>
+        </template>
+      </FloatingPanel>
+      <button class="after">Na</button>
+      <button class="tail" @keydown.stop>Staart</button>
+    </div>`,
+  })
+
+  const guard = (edge: string) =>
+    document.querySelector<HTMLElement>(`[data-focus-guard="${edge}"]`)!
+  const focus = (selector: string) => document.querySelector<HTMLElement>(selector)!.focus()
+  const focused = () => document.activeElement?.className
+  const pressTab = () =>
+    document.activeElement!.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true, cancelable: true }),
+    )
+  const exposed = () =>
+    (wrapper.vm as unknown as { panelRef: { teleported: boolean } }).panelRef.teleported
+
+  it('renders the panel in <body>, not next to the trigger', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+
+    const container = panelContainer()!
+    expect(container.parentElement).toBe(document.body)
+    expect(wrapper.find('.host').element.contains(container)).toBe(false)
+  })
+
+  it('stays in place inside a role="dialog"', async () => {
+    wrapper = mount(Host('role="dialog"'), { attachTo: document.body })
+    await open()
+
+    expect(wrapper.find('.host').element.contains(panelContainer())).toBe(true)
+    expect(document.querySelector('[data-focus-guard]')).toBeNull()
+  })
+
+  it('reports whether it teleported, as a slot prop and on the instance', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    expect(exposed()).toBe(false)
+    await open()
+    expect(document.querySelector('.panel')!.getAttribute('data-teleported')).toBe('true')
+    expect(exposed()).toBe(true)
+    wrapper.unmount()
+
+    wrapper = mount(Host('role="dialog"'), { attachTo: document.body })
+    await open()
+    expect(document.querySelector('.panel')!.getAttribute('data-teleported')).toBe('false')
+    expect(exposed()).toBe(false)
+  })
+
+  it('does not close on a mousedown inside the teleported panel', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+
+    document.querySelector('.first')!.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await nextTick()
+    expect(document.querySelector('.panel')).not.toBeNull()
+  })
+
+  it('places the bridge inside the trigger and the other guards around the content', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+
+    const trigger = wrapper.find('.trigger').element.parentElement!
+    expect(trigger.lastElementChild).toBe(guard('bridge'))
+    expect(panelContainer()!.firstElementChild).toBe(guard('start'))
+    expect(panelContainer()!.lastElementChild).toBe(guard('end'))
+    for (const edge of ['bridge', 'start', 'end']) {
+      expect(guard(edge).getAttribute('tabindex')).toBe('0')
+      expect(guard(edge).hasAttribute('aria-hidden')).toBe(false)
+    }
+  })
+
+  it('leads Tab from the trigger into the panel', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.trigger')
+
+    guard('bridge').focus()
+    expect(focused()).toBe('first')
+  })
+
+  it('leads Shift+Tab from the element after the trigger back into the panel', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.after')
+
+    guard('bridge').focus()
+    expect(focused()).toBe('last')
+  })
+
+  it('leads Shift+Tab out of the panel back to the trigger', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.first')
+
+    guard('start').focus()
+    expect(focused()).toBe('trigger')
+  })
+
+  it('leads Tab out of the panel to the element after the trigger, and stays open', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.last')
+
+    guard('end').focus()
+    expect(focused()).toBe('after')
+    expect(document.querySelector('.panel')).not.toBeNull()
+  })
+
+  it('leads Shift+Tab from outside the page to the last tab stop before the panel', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    ;(document.activeElement as HTMLElement | null)?.blur()
+
+    // relatedTarget null: focus comes from the browser UI
+    guard('end').focus()
+    expect(focused()).toBe('tail')
+  })
+
+  it('skips the panel on Tab from the last tab stop before it, instead of looping', async () => {
+    vi.useFakeTimers()
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    const container = panelContainer() as HTMLElement
+
+    focus('.tail')
+    pressTab()
+    expect(container.inert).toBe(true)
+    vi.runAllTimers()
+    expect(container.inert).toBe(false)
+    vi.useRealTimers()
+  })
+
+  it('still skips the panel when the focused element stops Tab from propagating', async () => {
+    vi.useFakeTimers()
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    const container = panelContainer() as HTMLElement
+    // `.tail` has @keydown.stop: a bubble-phase listener on document would never see this Tab
+    let reachedDocument = false
+    const spy = () => (reachedDocument = true)
+    document.addEventListener('keydown', spy)
+
+    focus('.tail')
+    pressTab()
+    document.removeEventListener('keydown', spy)
+    expect(reachedDocument).toBe(false)
+    expect(container.inert).toBe(true)
+    vi.runAllTimers()
+    vi.useRealTimers()
+  })
+
+  it('stays open on an Escape that content stops from propagating', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+
+    focus('.stops-escape')
+    document.activeElement!.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }),
+    )
+    await flushPromises()
+    expect(document.querySelector('.panel')).not.toBeNull()
+  })
+
+  it('leaves the panel reachable on Tab from anywhere else', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    const container = panelContainer() as HTMLElement
+
+    for (const selector of ['.before', '.trigger', '.after', '.first']) {
+      focus(selector)
+      pressTab()
+      expect(container.inert).toBeFalsy()
+    }
+  })
+
+  it('puts focus back on the trigger when it closes with focus inside', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.first')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+    expect(focused()).toBe('trigger')
+  })
+
+  it('leaves focus alone when it closes with focus outside the panel', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    focus('.before')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+    expect(focused()).toBe('before')
+  })
+
+  it('lets a consumer that moves focus in @close have the last word', async () => {
+    wrapper = mount(
+      Host('', () => focus('.tail')),
+      { attachTo: document.body },
+    )
+    await open()
+    focus('.first')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+    expect(focused()).toBe('tail')
+  })
+
+  it('does not move focus on close when not teleported', async () => {
+    wrapper = mount(Host('role="dialog"'), { attachTo: document.body })
+    await open()
+    focus('.first')
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+    expect(focused()).not.toBe('trigger')
+  })
+
+  it('removes the bridge when the panel closes', async () => {
+    wrapper = mount(Host(), { attachTo: document.body })
+    await open()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await flushPromises()
+
+    expect(document.querySelector('[data-focus-guard="bridge"]')).toBeNull()
+  })
+})
+
+describe('FloatingPanel unmount while open', () => {
+  const Teleported = {
+    components: { FloatingPanel },
+    template: `<FloatingPanel teleport surface>
+      <template #trigger="{ toggle }"><button class="trigger" @click="toggle">Toggle</button></template>
+      <template #content><div class="panel"><button>In het paneel</button></div></template>
+    </FloatingPanel>`,
+  }
+
+  const leftovers = () => document.body.querySelectorAll('.panel, .z-50, [data-focus-guard]').length
+
+  const trackListeners = () => {
+    const live = new Map<string, number>()
+    const add = vi.spyOn(document, 'addEventListener')
+    const remove = vi.spyOn(document, 'removeEventListener')
+    return () => {
+      for (const [type] of add.mock.calls) live.set(type, (live.get(type) ?? 0) + 1)
+      for (const [type] of remove.mock.calls) live.set(type, (live.get(type) ?? 0) - 1)
+      add.mockRestore()
+      remove.mockRestore()
+      return [...live].filter(([, count]) => count !== 0)
+    }
+  }
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('leaves nothing in <body> and no document listeners when unmounted open', async () => {
+    const listeners = trackListeners()
+    wrapper = mount(Teleported, { attachTo: document.body })
+    await open()
+    expect(leftovers()).toBeGreaterThan(0)
+
+    wrapper.unmount()
+    expect(leftovers()).toBe(0)
+    expect(listeners()).toEqual([])
+  })
+
+  it('leaves nothing behind when unmounted during the leave transition', async () => {
+    const listeners = trackListeners()
+    let mediaListeners = 0
+    vi.stubGlobal('matchMedia', () => ({
+      matches: false,
+      addEventListener: () => mediaListeners++,
+      removeEventListener: () => mediaListeners--,
+    }))
+    wrapper = mount(Teleported, {
+      attachTo: document.body,
+      global: { stubs: { transition: false } },
+    })
+    await open()
+    await wrapper.find('.trigger').trigger('click')
+    await nextTick()
+    expect(leftovers()).toBeGreaterThan(0) // still leaving
+
+    wrapper.unmount()
+    await flushPromises()
+    expect(leftovers()).toBe(0)
+    expect(listeners()).toEqual([])
+    expect(mediaListeners).toBe(0)
+  })
+})