() => {
  let OpenClosedWrite = defineComponent({
    props: { open: { type: Boolean } },
    setup(props, { slots }) {
      useOpenClosedProvider(ref(props.open ? State.Open : State.Closed))
      return () => slots.default?.()
    },
  })

  let OpenClosedRead = defineComponent({
    emits: ['read'],
    setup(_, { slots, emit }) {
      let state = useOpenClosed()
      watch([state], ([value]) => emit('read', value))
      return () => slots.default?.()
    },
  })

  it(
    'should always open the ListboxOptions because of a wrapping OpenClosed component',
    suppressConsoleLogs(async () => {
      renderTemplate({
        components: { OpenClosedWrite },
        template: html`
          <Listbox>
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedWrite :open="true">
              <ListboxOptions v-slot="data">
                {{JSON.stringify(data)}}
              </ListboxOptions>
            </OpenClosedWrite>
          </Listbox>
        `,
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is visible
      assertListbox({ state: ListboxState.Visible })

      // Let's try and open the Listbox
      await click(getListboxButton())

      // Verify the Listbox is still visible
      assertListbox({ state: ListboxState.Visible })
    })
  )

  it(
    'should always close the ListboxOptions because of a wrapping OpenClosed component',
    suppressConsoleLogs(async () => {
      renderTemplate({
        components: { OpenClosedWrite },
        template: html`
          <Listbox>
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedWrite :open="false">
              <ListboxOptions v-slot="data">
                {{JSON.stringify(data)}}
              </ListboxOptions>
            </OpenClosedWrite>
          </Listbox>
        `,
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })

      // Let's try and open the Listbox
      await click(getListboxButton())

      // Verify the Listbox is still hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })
    })
  )

  it(
    'should be possible to read the OpenClosed state',
    suppressConsoleLogs(async () => {
      let readFn = jest.fn()
      renderTemplate({
        components: { OpenClosedRead },
        template: html`
          <Listbox v-model="value">
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedRead @read="readFn">
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
              </ListboxOptions>
            </OpenClosedRead>
          </Listbox>
        `,
        setup() {
          return { value: ref(null), readFn }
        },
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })

      // Let's toggle the Listbox 3 times
      await click(getListboxButton())
      await click(getListboxButton())
      await click(getListboxButton())

      // Verify the Listbox is visible
      assertListbox({ state: ListboxState.Visible })

      expect(readFn).toHaveBeenCalledTimes(3)
      expect(readFn).toHaveBeenNthCalledWith(1, State.Open)
      expect(readFn).toHaveBeenNthCalledWith(2, State.Closed)
      expect(readFn).toHaveBeenNthCalledWith(3, State.Open)
    })
  )
}


() => slots.default?.()


([value]) => emit('read', value)


async () => {
      renderTemplate({
        components: { OpenClosedWrite },
        template: html`
          <Listbox>
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedWrite :open="true">
              <ListboxOptions v-slot="data">
                {{JSON.stringify(data)}}
              </ListboxOptions>
            </OpenClosedWrite>
          </Listbox>
        `,
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is visible
      assertListbox({ state: ListboxState.Visible })

      // Let's try and open the Listbox
      await click(getListboxButton())

      // Verify the Listbox is still visible
      assertListbox({ state: ListboxState.Visible })
    }


async () => {
      renderTemplate({
        components: { OpenClosedWrite },
        template: html`
          <Listbox>
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedWrite :open="false">
              <ListboxOptions v-slot="data">
                {{JSON.stringify(data)}}
              </ListboxOptions>
            </OpenClosedWrite>
          </Listbox>
        `,
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })

      // Let's try and open the Listbox
      await click(getListboxButton())

      // Verify the Listbox is still hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })
    }


async () => {
      let readFn = jest.fn()
      renderTemplate({
        components: { OpenClosedRead },
        template: html`
          <Listbox v-model="value">
            <ListboxButton>Trigger</ListboxButton>
            <OpenClosedRead @read="readFn">
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
              </ListboxOptions>
            </OpenClosedRead>
          </Listbox>
        `,
        setup() {
          return { value: ref(null), readFn }
        },
      })

      await new Promise<void>(nextTick)

      // Verify the Listbox is hidden
      assertListbox({ state: ListboxState.InvisibleUnmounted })

      // Let's toggle the Listbox 3 times
      await click(getListboxButton())
      await click(getListboxButton())
      await click(getListboxButton())

      // Verify the Listbox is visible
      assertListbox({ state: ListboxState.Visible })

      expect(readFn).toHaveBeenCalledTimes(3)
      expect(readFn).toHaveBeenNthCalledWith(1, State.Open)
      expect(readFn).toHaveBeenNthCalledWith(2, State.Closed)
      expect(readFn).toHaveBeenNthCalledWith(3, State.Open)
    }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option, { selected: false }))

        // Verify that the first listbox option is active
        assertActiveListboxOption(options[0])
        assertNoSelectedListboxOption()
      }


option => assertListboxOption(option, { selected: false })


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value" disabled>
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Try to open the listbox
        await press(Keys.Enter)

        // Verify it is still closed
        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref('b') }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


() => ({ value: ref('b') })


(option, i) => assertListboxOption(option, { selected: i === 1 })


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions :unmount="false">
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref('b') }),
        })

        await new Promise<void>(nextTick)

        assertListboxButton({
          state: ListboxState.InvisibleHidden,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleHidden })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is visible
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        let options = getListboxOptions()

        // Hover over Option A
        await mouseMove(options[0])

        // Verify that Option A is active
        assertActiveListboxOption(options[0])

        // Verify that Option B is still selected
        assertListboxOption(options[1], { selected: true })

        // Close/Hide the listbox
        await press(Keys.Escape)

        // Re-open the listbox
        await click(getListboxButton())

        // Verify we have listbox options
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption v-for="option in options" key="option.id" :value="option"
                  >{{ option.name }}</ListboxOption
                >
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => {
            let options = [
              { id: 'a', name: 'Option A' },
              { id: 'b', name: 'Option B' },
              { id: 'c', name: 'Option C' },
            ]
            let value = ref(options[1])

            return { value, options }
          },
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


() => {
            let options = [
              { id: 'a', name: 'Option A' },
              { id: 'b', name: 'Option B' },
              { id: 'c', name: 'Option C' },
            ]
            let value = ref(options[1])

            return { value, options }
          }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions />
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())

        assertNoActiveListboxOption()
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // Verify that the first non-disabled listbox option is active
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // Verify that the first non-disabled listbox option is active
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        assertNoActiveListboxOption()
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Open listbox
        await click(getListboxButton())

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })

        // Close listbox
        await press(Keys.Enter)

        // Verify it is closed
        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Verify the button is focused again
        assertActiveElement(getListboxButton())
      }


async () => {
        let handleChange = jest.fn()
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup() {
            let value = ref(null)
            watch([value], () => handleChange(value.value))
            return { value }
          },
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Open listbox
        await click(getListboxButton())

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })

        // Activate the first listbox option
        let options = getListboxOptions()
        await mouseMove(options[0])

        // Choose option, and close listbox
        await press(Keys.Enter)

        // Verify it is closed
        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Verify we got the change event
        expect(handleChange).toHaveBeenCalledTimes(1)
        expect(handleChange).toHaveBeenCalledWith('a')

        // Verify the button is focused again
        assertActiveElement(getListboxButton())

        // Open listbox again
        await click(getListboxButton())

        // Verify the active option is the previously selected one
        assertActiveListboxOption(getListboxOptions()[0])
      }


() => handleChange(value.value)


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])
      }


option => assertListboxOption(option)


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value" disabled>
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Try to open the listbox
        await press(Keys.Space)

        // Verify it is still closed
        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref('b') }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions />
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())

        assertNoActiveListboxOption()
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        let options = getListboxOptions()

        // Verify that the first non-disabled listbox option is active
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        let options = getListboxOptions()

        // Verify that the first non-disabled listbox option is active
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        assertNoActiveListboxOption()
      }


async () => {
        let handleChange = jest.fn()
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup() {
            let value = ref(null)
            watch([value], () => handleChange(value.value))
            return { value }
          },
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Open listbox
        await click(getListboxButton())

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })

        // Activate the first listbox option
        let options = getListboxOptions()
        await mouseMove(options[0])

        // Choose option, and close listbox
        await press(Keys.Space)

        // Verify it is closed
        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Verify we got the change event
        expect(handleChange).toHaveBeenCalledTimes(1)
        expect(handleChange).toHaveBeenCalledWith('a')

        // Verify the button is focused again
        assertActiveElement(getListboxButton())

        // Open listbox again
        await click(getListboxButton())

        // Verify the active option is the previously selected one
        assertActiveListboxOption(getListboxOptions()[0])
      }


() => {
    it(
      'should be possible to close an open listbox with Escape',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Close listbox
        await press(Keys.Escape)

        // Verify it is closed
        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Verify the button is focused again
        assertActiveElement(getListboxButton())
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Space)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Close listbox
        await press(Keys.Escape)

        // Verify it is closed
        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Verify the button is focused again
        assertActiveElement(getListboxButton())
      }


() => {
    it(
      'should focus trap when we use Tab',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])

        // Try to tab
        await press(Keys.Tab)

        // Verify it is still open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())
      })
    )

    it(
      'should focus trap when we use Shift+Tab',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])

        // Try to Shift+Tab
        await press(shift(Keys.Tab))

        // Verify it is still open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])

        // Try to tab
        await press(Keys.Tab)

        // Verify it is still open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])

        // Try to Shift+Tab
        await press(shift(Keys.Tab))

        // Verify it is still open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowDown)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))

        // Verify that the first listbox option is active
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value" disabled>
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Try to open the listbox
        await press(Keys.ArrowDown)

        // Verify it is still closed
        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref('b') }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowDown)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions />
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowDown)
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())

        assertNoActiveListboxOption()
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])

        // We should be able to go down once
        await press(Keys.ArrowDown)
        assertActiveListboxOption(options[1])

        // We should be able to go down again
        await press(Keys.ArrowDown)
        assertActiveListboxOption(options[2])

        // We should NOT be able to go down again (because last option). Current implementation won't go around.
        await press(Keys.ArrowDown)
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[1])

        // We should be able to go down once
        await press(Keys.ArrowDown)
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))

        // ! ALERT: The LAST option should now be active
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value" disabled>
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Try to open the listbox
        await press(Keys.ArrowUp)

        // Verify it is still closed
        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref('b') }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach((option, i) => assertListboxOption(option, { selected: i === 1 }))

        // Verify that the second listbox option is active (because it is already selected)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions />
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)
        assertListbox({ state: ListboxState.Visible })
        assertActiveElement(getListbox())

        assertNoActiveListboxOption()
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[2])

        // We should not be able to go up (because those are disabled)
        await press(Keys.ArrowUp)
        assertActiveListboxOption(options[2])

        // We should not be able to go down (because this is the last option)
        await press(Keys.ArrowDown)
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        assertListboxButton({
          state: ListboxState.InvisibleUnmounted,
          attributes: { id: 'headlessui-listbox-button-1' },
        })
        assertListbox({ state: ListboxState.InvisibleUnmounted })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        // Verify it is open
        assertListboxButton({ state: ListboxState.Visible })
        assertListbox({
          state: ListboxState.Visible,
          attributes: { id: 'headlessui-listbox-options-2' },
        })
        assertActiveElement(getListbox())
        assertListboxButtonLinkedWithListbox()

        // Verify we have listbox options
        let options = getListboxOptions()
        expect(options).toHaveLength(3)
        options.forEach(option => assertListboxOption(option))
        assertActiveListboxOption(options[2])

        // We should be able to go down once
        await press(Keys.ArrowUp)
        assertActiveListboxOption(options[1])

        // We should be able to go down again
        await press(Keys.ArrowUp)
        assertActiveListboxOption(options[0])

        // We should NOT be able to go up again (because first option). Current implementation won't go around.
        await press(Keys.ArrowUp)
        assertActiveListboxOption(options[0])
      }


() => {
    it(
      'should be possible to use the End key to go to the last listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last option
        await press(Keys.End)
        assertActiveListboxOption(options[2])
      })
    )

    it(
      'should be possible to use the End key to go to the last non disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last non-disabled option
        await press(Keys.End)
        assertActiveListboxOption(options[1])
      })
    )

    it(
      'should be possible to use the End key to go to the first listbox option if that is the only non-disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.End)

        let options = getListboxOptions()
        assertActiveListboxOption(options[0])
      })
    )

    it(
      'should have no active listbox option upon End key press, when there are no non-disabled listbox options',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.End)

        assertNoActiveListboxOption()
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last option
        await press(Keys.End)
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last non-disabled option
        await press(Keys.End)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.End)

        let options = getListboxOptions()
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.End)

        assertNoActiveListboxOption()
      }


() => {
    it(
      'should be possible to use the PageDown key to go to the last listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last option
        await press(Keys.PageDown)
        assertActiveListboxOption(options[2])
      })
    )

    it(
      'should be possible to use the PageDown key to go to the last non disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last non-disabled option
        await press(Keys.PageDown)
        assertActiveListboxOption(options[1])
      })
    )

    it(
      'should be possible to use the PageDown key to go to the first listbox option if that is the only non-disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageDown)

        let options = getListboxOptions()
        assertActiveListboxOption(options[0])
      })
    )

    it(
      'should have no active listbox option upon PageDown key press, when there are no non-disabled listbox options',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageDown)

        assertNoActiveListboxOption()
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last option
        await press(Keys.PageDown)
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.Enter)

        let options = getListboxOptions()

        // We should be on the first option
        assertActiveListboxOption(options[0])

        // We should be able to go to the last non-disabled option
        await press(Keys.PageDown)
        assertActiveListboxOption(options[1])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageDown)

        let options = getListboxOptions()
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageDown)

        assertNoActiveListboxOption()
      }


() => {
    it(
      'should be possible to use the Home key to go to the first listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        let options = getListboxOptions()

        // We should be on the last option
        assertActiveListboxOption(options[2])

        // We should be able to go to the first option
        await press(Keys.Home)
        assertActiveListboxOption(options[0])
      })
    )

    it(
      'should be possible to use the Home key to go to the first non disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        let options = getListboxOptions()

        // We should be on the first non-disabled option
        assertActiveListboxOption(options[2])
      })
    )

    it(
      'should be possible to use the Home key to go to the last listbox option if that is the only non-disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        let options = getListboxOptions()
        assertActiveListboxOption(options[3])
      })
    )

    it(
      'should have no active listbox option upon Home key press, when there are no non-disabled listbox options',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        assertNoActiveListboxOption()
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        let options = getListboxOptions()

        // We should be on the last option
        assertActiveListboxOption(options[2])

        // We should be able to go to the first option
        await press(Keys.Home)
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        let options = getListboxOptions()

        // We should be on the first non-disabled option
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        let options = getListboxOptions()
        assertActiveListboxOption(options[3])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.Home)

        assertNoActiveListboxOption()
      }


() => {
    it(
      'should be possible to use the PageUp key to go to the first listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        let options = getListboxOptions()

        // We should be on the last option
        assertActiveListboxOption(options[2])

        // We should be able to go to the first option
        await press(Keys.PageUp)
        assertActiveListboxOption(options[0])
      })
    )

    it(
      'should be possible to use the PageUp key to go to the first non disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        let options = getListboxOptions()

        // We should be on the first non-disabled option
        assertActiveListboxOption(options[2])
      })
    )

    it(
      'should be possible to use the PageUp key to go to the last listbox option if that is the only non-disabled listbox option',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        let options = getListboxOptions()
        assertActiveListboxOption(options[3])
      })
    )

    it(
      'should have no active listbox option upon PageUp key press, when there are no non-disabled listbox options',
      suppressConsoleLogs(async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        assertNoActiveListboxOption()
      })
    )
  }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption value="a">Option A</ListboxOption>
                <ListboxOption value="b">Option B</ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Focus the button
        getListboxButton()?.focus()

        // Open listbox
        await press(Keys.ArrowUp)

        let options = getListboxOptions()

        // We should be on the last option
        assertActiveListboxOption(options[2])

        // We should be able to go to the first option
        await press(Keys.PageUp)
        assertActiveListboxOption(options[0])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption value="c">Option C</ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        let options = getListboxOptions()

        // We should be on the first non-disabled option
        assertActiveListboxOption(options[2])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption value="d">Option D</ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        let options = getListboxOptions()
        assertActiveListboxOption(options[3])
      }


async () => {
        renderTemplate({
          template: html`
            <Listbox v-model="value">
              <ListboxButton>Trigger</ListboxButton>
              <ListboxOptions>
                <ListboxOption disabled value="a">
                  Option A
                </ListboxOption>
                <ListboxOption disabled value="b">
                  Option B
                </ListboxOption>
                <ListboxOption disabled value="c">
                  Option C
                </ListboxOption>
                <ListboxOption disabled value="d">
                  Option D
                </ListboxOption>
              </ListboxOptions>
            </Listbox>
          `,
          setup: () => ({ value: ref(null) }),
        })

        // Open listbox
        await click(getListboxButton())

        // We opened via click, we don't have an active option
        assertNoActiveListboxOption()

        // We should not be able to go to the end
        await press(Keys.PageUp)

        assertNoActiveListboxOption()
      }