feat: add Listbox component (#3)

* make jest monorepo aware * add @testing-library/jest-dom for custom matchers This way we can use expect(element).toHaveAttribute(key, value?) * abstract keys enum * change type to unknown, because we don't know the return value * update use-id hook, make it suspense aware Thanks Reach UI! * hoist the disposables collection * add accessbility assertions for listbox Also made it consistent for the Menu component and simplified some of the assertions * add use-computed hook This allows us re-render when hooks change, but also return a value. So this is a combination of useEffect and a useState value. * add Listbox component * bump dependencies * add listbox example * add lint-staged This way we will only lint the files that have been staged and ready to be committed instead of the whole codebase * add missing prevent defaults * improve tests to verify that we can actually update the value of the listbox * scroll the active listbox item into view * small optimization, only focus "Nothing" on pointer leave when we are the active item We used to always go to "Nothing" on pointer leave. And while this code doesn't get called often, it *gets* called if you are using your arrow keys and the mouse pointer is still over the list. * bump dependencies Also moved the tailwind dependencies to the root * fix typo * drop the default Transition inside the Menu and Listbox components * update examples to reflect drop of default Transition wrapper * rename Listbox.{Items,Item} to Listbox.{Options,Option} Also rename all instances of `item` to `option` in tests and comments and what have you... * fix typo * drop disabled prop, use aria-disabled only
2020-10-02 11:05:41 +02:00
parent 412cc950aa
commit 58ff88698b
36 changed files with 9873 additions and 1146 deletions
@@ -1,15 +1,3 @@
-const path = require('path')
-
-function relativeToPackage(configPath) {
-  return path.resolve(process.cwd(), process.env.npm_package_repository_directory, configPath)
-}
-
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/jest/custom-matchers.ts'],
-  globals: {
-    'ts-jest': {
-      isolatedModules: true,
-      tsConfig: relativeToPackage('./tsconfig.tsdx.json'),
-    },
-  },
+  projects: ['<rootDir>/packages/*/jest.config.js'],
 }
@@ -0,0 +1,19 @@
+const { createJestConfig: create } = require('tsdx/dist/createJestConfig')
+
+module.exports = function createJestConfig(root, options) {
+  return Object.assign(
+    {},
+    create(undefined, root),
+    {
+      rootDir: root,
+      setupFilesAfterEnv: ['<rootDir>../../jest/custom-matchers.ts'],
+      globals: {
+        'ts-jest': {
+          isolatedModules: true,
+          tsConfig: '<rootDir>/tsconfig.tsdx.json',
+        },
+      },
+    },
+    options
+  )
+}
@@ -1,31 +1,31 @@
+import '@testing-library/jest-dom/extend-expect'
+
 // Assuming requestAnimationFrame is roughly 60 frames per second
 const frame = 1000 / 60
+const amountOfFrames = 2

 const formatter = new Intl.NumberFormat('en')

 expect.extend({
  toBeWithinRenderFrame(actual, expected) {
-    const min = expected - frame
-    const max = expected + frame
+    const min = expected - frame * amountOfFrames
+    const max = expected + frame * amountOfFrames

    const pass = actual >= min && actual <= max

-    if (pass) {
-      return {
-        message: () =>
-          `expected ${actual} not to be within range of a frame ${formatter.format(
-            min
-          )} - ${formatter.format(max)}`,
-        pass: true,
-      }
-    } else {
-      return {
-        message: () =>
-          `expected ${actual} to be within range of a frame ${formatter.format(
-            min
-          )} - ${formatter.format(max)}`,
-        pass: false,
-      }
+    return {
+      message: pass
+        ? () => {
+            return `expected ${actual} not to be within range of a frame ${formatter.format(
+              min
+            )} - ${formatter.format(max)}`
+          }
+        : () => {
+            return `expected ${actual} not to be within range of a frame ${formatter.format(
+              min
+            )} - ${formatter.format(max)}`
+          },
+      pass,
    }
  },
 })
@@ -14,14 +14,17 @@
    "vue": "yarn workspace @headlessui/vue",
    "shared": "yarn workspace @headlessui/shared",
    "build": "yarn workspaces run build",
-    "test": "yarn workspaces run test",
+    "test": "./scripts/test.sh",
    "lint": "./scripts/lint.sh"
  },
  "husky": {
    "hooks": {
-      "pre-commit": "yarn lint"
+      "pre-commit": "lint-staged"
    }
  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,html,css,vue}": "tsdx lint"
+  },
  "prettier": {
    "printWidth": 100,
    "semi": false,
@@ -29,11 +32,15 @@
    "trailingComma": "es5"
  },
  "devDependencies": {
-    "@types/node": "^14.10.1",
+    "@tailwindcss/ui": "^0.6.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@types/node": "^14.11.2",
    "babel-jest": "^26.3.0",
    "husky": "^4.3.0",
    "jest": "^26.4.2",
+    "lint-staged": "^10.4.0",
    "prismjs": "^1.21.0",
+    "tailwindcss": "^1.8.10",
    "tsdx": "^0.13.3",
    "tslib": "^2.0.1",
    "typescript": "^3.9.7"
@@ -0,0 +1,3 @@
+const create = require('../../jest/create-jest-config.js')
+
+module.exports = create(__dirname, { displayName: 'React' })
@@ -33,9 +33,9 @@
  "devDependencies": {
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
-    "@popperjs/core": "^2.4.4",
-    "@testing-library/react": "^11.0.2",
-    "framer-motion": "^2.6.13",
+    "@popperjs/core": "^2.5.3",
+    "@testing-library/react": "^11.0.4",
+    "framer-motion": "^2.7.6",
    "next": "9.5.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { Listbox } from '@headlessui/react'
+
+import { classNames } from '../../src/utils/class-names'
+
+const people = [
+  'Wade Cooper',
+  'Arlene Mccoy',
+  'Devon Webb',
+  'Tom Cook',
+  'Tanya Fox',
+  'Hellen Schmidt',
+  'Caronline Schultz',
+  'Mason Heaney',
+  'Claudie Smitham',
+  'Emil Schaefer',
+]
+
+export default function Home() {
+  const [active, setActivePerson] = React.useState(people[2])
+
+  // Choose a random person on mount
+  React.useEffect(() => {
+    setActivePerson(people[Math.floor(Math.random() * people.length)])
+  }, [])
+
+  return (
+    <div className="flex justify-center w-screen h-full p-12 bg-gray-50">
+      <div className="w-full max-w-xs mx-auto">
+        <div className="space-y-1">
+          <Listbox
+            value={active}
+            onChange={value => {
+              console.log('value:', value)
+              setActivePerson(value)
+            }}
+          >
+            <Listbox.Label className="block text-sm font-medium leading-5 text-gray-700">
+              Assigned to
+            </Listbox.Label>
+
+            <div className="relative">
+              <span className="inline-block w-full rounded-md shadow-sm">
+                <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                  <span className="block truncate">{active}</span>
+                  <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                    <svg
+                      className="w-5 h-5 text-gray-400"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      stroke="currentColor"
+                    >
+                      <path
+                        d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </span>
+                </Listbox.Button>
+              </span>
+
+              <div className="absolute w-full mt-1 bg-white rounded-md shadow-lg">
+                <Listbox.Options className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
+                  {people.map(name => (
+                    <Listbox.Option
+                      key={name}
+                      value={name}
+                      className={({ active }) => {
+                        return classNames(
+                          'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+                          active ? 'text-white bg-indigo-600' : 'text-gray-900'
+                        )
+                      }}
+                    >
+                      {({ active, selected }) => (
+                        <>
+                          <span
+                            className={classNames(
+                              'block truncate',
+                              selected ? 'font-semibold' : 'font-normal'
+                            )}
+                          >
+                            {name}
+                          </span>
+                          {selected && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4',
+                                active ? 'text-white' : 'text-indigo-600'
+                              )}
+                            >
+                              <svg className="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                  fillRule="evenodd"
+                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                  clipRule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                          )}
+                        </>
+                      )}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </div>
+            </div>
+          </Listbox>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Menu } from '@headlessui/react'
+import { Menu, Transition } from '@headlessui/react'

 import { usePopper } from '../../playground-utils/hooks/use-popper'

@@ -26,64 +26,73 @@ export default function Home() {
    <div className="flex justify-center w-screen h-full p-12 bg-gray-50">
      <div className="inline-block mt-64 text-left">
        <Menu>
-          <span className="rounded-md shadow-sm">
-            <Menu.Button
-              ref={trigger}
-              className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
-            >
-              <span>Options</span>
-              <svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Menu.Button>
-          </span>
+          {({ open }) => (
+            <>
+              <span className="rounded-md shadow-sm">
+                <Menu.Button
+                  ref={trigger}
+                  className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
+                >
+                  <span>Options</span>
+                  <svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </Menu.Button>
+              </span>

-          <div ref={container} className="w-56">
-            <Menu.Items
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-              className="bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
-            >
-              <div className="px-4 py-3">
-                <p className="text-sm leading-5">Signed in as</p>
-                <p className="text-sm font-medium leading-5 text-gray-900 truncate">
-                  tom@example.com
-                </p>
-              </div>
+              <div ref={container} className="w-56">
+                <Transition
+                  show={open}
+                  enter="transition duration-100 ease-out"
+                  enterFrom="transform scale-95 opacity-0"
+                  enterTo="transform scale-100 opacity-100"
+                  leave="transition duration-75 ease-out"
+                  leaveFrom="transform scale-100 opacity-100"
+                  leaveTo="transform scale-95 opacity-0"
+                >
+                  <Menu.Items
+                    static
+                    className="bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+                  >
+                    <div className="px-4 py-3">
+                      <p className="text-sm leading-5">Signed in as</p>
+                      <p className="text-sm font-medium leading-5 text-gray-900 truncate">
+                        tom@example.com
+                      </p>
+                    </div>

-              <div className="py-1">
-                <Menu.Item as="a" href="#account-settings" className={resolveClass}>
-                  Account settings
-                </Menu.Item>
-                <Menu.Item>
-                  {data => (
-                    <a href="#support" className={resolveClass(data)}>
-                      Support
-                    </a>
-                  )}
-                </Menu.Item>
-                <Menu.Item as="a" disabled href="#new-feature" className={resolveClass}>
-                  New feature (soon)
-                </Menu.Item>
-                <Menu.Item as="a" href="#license" className={resolveClass}>
-                  License
-                </Menu.Item>
+                    <div className="py-1">
+                      <Menu.Item as="a" href="#account-settings" className={resolveClass}>
+                        Account settings
+                      </Menu.Item>
+                      <Menu.Item>
+                        {data => (
+                          <a href="#support" className={resolveClass(data)}>
+                            Support
+                          </a>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item as="a" disabled href="#new-feature" className={resolveClass}>
+                        New feature (soon)
+                      </Menu.Item>
+                      <Menu.Item as="a" href="#license" className={resolveClass}>
+                        License
+                      </Menu.Item>
+                    </div>
+                    <div className="py-1">
+                      <Menu.Item as="a" href="#sign-out" className={resolveClass}>
+                        Sign out
+                      </Menu.Item>
+                    </div>
+                  </Menu.Items>
+                </Transition>
              </div>
-              <div className="py-1">
-                <Menu.Item as="a" href="#sign-out" className={resolveClass}>
-                  Sign out
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </div>
+            </>
+          )}
        </Menu>
      </div>
    </div>
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Menu } from '@headlessui/react'
+import { Menu, Transition } from '@headlessui/react'

 function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
@@ -18,56 +18,65 @@ export default function Home() {
    <div className="flex justify-center w-screen h-full p-12 bg-gray-50">
      <div className="relative inline-block text-left">
        <Menu>
-          <span className="rounded-md shadow-sm">
-            <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
-              <span>Options</span>
-              <svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Menu.Button>
-          </span>
+          {({ open }) => (
+            <>
+              <span className="rounded-md shadow-sm">
+                <Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
+                  <span>Options</span>
+                  <svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </Menu.Button>
+              </span>

-          <Menu.Items
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-            className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
-          >
-            <div className="px-4 py-3">
-              <p className="text-sm leading-5">Signed in as</p>
-              <p className="text-sm font-medium leading-5 text-gray-900 truncate">
-                tom@example.com
-              </p>
-            </div>
+              <Transition
+                show={open}
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Menu.Items
+                  static
+                  className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
+                >
+                  <div className="px-4 py-3">
+                    <p className="text-sm leading-5">Signed in as</p>
+                    <p className="text-sm font-medium leading-5 text-gray-900 truncate">
+                      tom@example.com
+                    </p>
+                  </div>

-            <div className="py-1">
-              <Menu.Item as="a" href="#account-settings" className={resolveClass}>
-                Account settings
-              </Menu.Item>
-              <Menu.Item as="a" href="#support" className={resolveClass}>
-                Support
-              </Menu.Item>
-              <Menu.Item as="a" disabled href="#new-feature" className={resolveClass}>
-                New feature (soon)
-              </Menu.Item>
-              <Menu.Item as="a" href="#license" className={resolveClass}>
-                License
-              </Menu.Item>
-            </div>
+                  <div className="py-1">
+                    <Menu.Item as="a" href="#account-settings" className={resolveClass}>
+                      Account settings
+                    </Menu.Item>
+                    <Menu.Item as="a" href="#support" className={resolveClass}>
+                      Support
+                    </Menu.Item>
+                    <Menu.Item as="a" disabled href="#new-feature" className={resolveClass}>
+                      New feature (soon)
+                    </Menu.Item>
+                    <Menu.Item as="a" href="#license" className={resolveClass}>
+                      License
+                    </Menu.Item>
+                  </div>

-            <div className="py-1">
-              <Menu.Item as="a" href="#sign-out" className={resolveClass}>
-                Sign out
-              </Menu.Item>
-            </div>
-          </Menu.Items>
+                  <div className="py-1">
+                    <Menu.Item as="a" href="#sign-out" className={resolveClass}>
+                      Sign out
+                    </Menu.Item>
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </>
+          )}
        </Menu>
      </div>
    </div>
@@ -0,0 +1,19 @@
+// TODO: This must already exist somewhere, right? 🤔
+// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export enum Keys {
+  Space = ' ',
+  Enter = 'Enter',
+  Escape = 'Escape',
+  Backspace = 'Backspace',
+
+  ArrowUp = 'ArrowUp',
+  ArrowDown = 'ArrowDown',
+
+  Home = 'Home',
+  End = 'End',
+
+  PageUp = 'PageUp',
+  PageDown = 'PageDown',
+
+  Tab = 'Tab',
+}
@@ -0,0 +1,642 @@
+import * as React from 'react'
+
+import { useDisposables } from '../../hooks/use-disposables'
+import { useId } from '../../hooks/use-id'
+import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
+import { useComputed } from '../../hooks/use-computed'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { Props } from '../../types'
+import { forwardRefWithAs, render } from '../../utils/render'
+import { match } from '../../utils/match'
+import { disposables } from '../../utils/disposables'
+import { Keys } from '../keyboard'
+
+enum ListboxStates {
+  Open,
+  Closed,
+}
+
+type ListboxOptionDataRef = React.MutableRefObject<{
+  textValue?: string
+  disabled: boolean
+  value: unknown
+}>
+
+type StateDefinition = {
+  listboxState: ListboxStates
+  propsRef: React.MutableRefObject<{ value: unknown; onChange(value: unknown): void }>
+  labelRef: React.MutableRefObject<HTMLLabelElement | null>
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>
+  optionsRef: React.MutableRefObject<HTMLUListElement | null>
+  options: { id: string; dataRef: ListboxOptionDataRef }[]
+  searchQuery: string
+  activeOptionIndex: number | null
+}
+
+enum ActionTypes {
+  OpenListbox,
+  CloseListbox,
+
+  GoToOption,
+  Search,
+  ClearSearch,
+
+  RegisterOption,
+  UnregisterOption,
+}
+
+enum Focus {
+  First,
+  Previous,
+  Next,
+  Last,
+  Specific,
+  Nothing,
+}
+
+function calculateActiveOptionIndex(
+  state: StateDefinition,
+  focus: Focus,
+  id?: string
+): StateDefinition['activeOptionIndex'] {
+  if (state.options.length <= 0) return null
+
+  const options = state.options
+  const activeOptionIndex = state.activeOptionIndex ?? -1
+
+  const nextActiveIndex = match(focus, {
+    [Focus.First]: () => options.findIndex(option => !option.dataRef.current.disabled),
+    [Focus.Previous]: () => {
+      const idx = options
+        .slice()
+        .reverse()
+        .findIndex((option, idx, all) => {
+          if (activeOptionIndex !== -1 && all.length - idx - 1 >= activeOptionIndex) return false
+          return !option.dataRef.current.disabled
+        })
+      if (idx === -1) return idx
+      return options.length - 1 - idx
+    },
+    [Focus.Next]: () => {
+      return options.findIndex((option, idx) => {
+        if (idx <= activeOptionIndex) return false
+        return !option.dataRef.current.disabled
+      })
+    },
+    [Focus.Last]: () => {
+      const idx = options
+        .slice()
+        .reverse()
+        .findIndex(option => !option.dataRef.current.disabled)
+      if (idx === -1) return idx
+      return options.length - 1 - idx
+    },
+    [Focus.Specific]: () => options.findIndex(option => option.id === id),
+    [Focus.Nothing]: () => null,
+  })
+
+  if (nextActiveIndex === -1) return state.activeOptionIndex
+  return nextActiveIndex
+}
+
+type Actions =
+  | { type: ActionTypes.CloseListbox }
+  | { type: ActionTypes.OpenListbox }
+  | { type: ActionTypes.GoToOption; focus: Focus; id?: string }
+  | { type: ActionTypes.Search; value: string }
+  | { type: ActionTypes.ClearSearch }
+  | { type: ActionTypes.RegisterOption; id: string; dataRef: ListboxOptionDataRef }
+  | { type: ActionTypes.UnregisterOption; id: string }
+
+const reducers: {
+  [P in ActionTypes]: (
+    state: StateDefinition,
+    action: Extract<Actions, { type: P }>
+  ) => StateDefinition
+} = {
+  [ActionTypes.CloseListbox]: state => ({ ...state, listboxState: ListboxStates.Closed }),
+  [ActionTypes.OpenListbox]: state => ({ ...state, listboxState: ListboxStates.Open }),
+  [ActionTypes.GoToOption]: (state, action) => {
+    const activeOptionIndex = calculateActiveOptionIndex(state, action.focus, action.id)
+
+    if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) {
+      return state
+    }
+
+    return { ...state, searchQuery: '', activeOptionIndex }
+  },
+  [ActionTypes.Search]: (state, action) => {
+    const searchQuery = state.searchQuery + action.value
+    const match = state.options.findIndex(
+      option =>
+        !option.dataRef.current.disabled &&
+        option.dataRef.current.textValue?.startsWith(searchQuery)
+    )
+
+    if (match === -1 || match === state.activeOptionIndex) {
+      return { ...state, searchQuery }
+    }
+
+    return { ...state, searchQuery, activeOptionIndex: match }
+  },
+  [ActionTypes.ClearSearch]: state => ({ ...state, searchQuery: '' }),
+  [ActionTypes.RegisterOption]: (state, action) => ({
+    ...state,
+    options: [...state.options, { id: action.id, dataRef: action.dataRef }],
+  }),
+  [ActionTypes.UnregisterOption]: (state, action) => {
+    const nextOptions = state.options.slice()
+    const currentActiveOption =
+      state.activeOptionIndex !== null ? nextOptions[state.activeOptionIndex] : null
+
+    const idx = nextOptions.findIndex(a => a.id === action.id)
+
+    if (idx !== -1) nextOptions.splice(idx, 1)
+
+    return {
+      ...state,
+      options: nextOptions,
+      activeOptionIndex: (() => {
+        if (idx === state.activeOptionIndex) return null
+        if (currentActiveOption === null) return null
+
+        // If we removed the option before the actual active index, then it would be out of sync. To
+        // fix this, we will find the correct (new) index position.
+        return nextOptions.indexOf(currentActiveOption)
+      })(),
+    }
+  },
+}
+
+const ListboxContext = React.createContext<[StateDefinition, React.Dispatch<Actions>] | null>(null)
+
+function stateReducer(state: StateDefinition, action: Actions) {
+  return match(action.type, reducers, state, action)
+}
+
+function useListboxContext(component: string) {
+  const context = React.useContext(ListboxContext)
+  if (context === null) {
+    const err = new Error(`<${component} /> is missing a parent <${Listbox.name} /> component.`)
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext)
+    throw err
+  }
+  return context
+}
+
+// ---
+
+const DEFAULT_LISTBOX_TAG = React.Fragment
+
+type ListboxRenderPropArg = { open: boolean }
+
+export function Listbox<
+  TTag extends React.ElementType = typeof DEFAULT_LISTBOX_TAG,
+  TType = string
+>(props: Props<TTag, ListboxRenderPropArg> & { value: TType; onChange(value: TType): void }) {
+  const { value, onChange, ...passThroughProps } = props
+  const d = useDisposables()
+  const reducerBag = React.useReducer(stateReducer, {
+    listboxState: ListboxStates.Closed,
+    propsRef: { current: { value, onChange } },
+    labelRef: React.createRef(),
+    buttonRef: React.createRef(),
+    optionsRef: React.createRef(),
+    options: [],
+    searchQuery: '',
+    activeOptionIndex: null,
+  } as StateDefinition)
+  const [{ listboxState, propsRef, optionsRef, buttonRef }, dispatch] = reducerBag
+
+  useIsoMorphicEffect(() => {
+    propsRef.current.value = value
+  }, [value, propsRef])
+  useIsoMorphicEffect(() => {
+    propsRef.current.onChange = onChange
+  }, [onChange, propsRef])
+
+  React.useEffect(() => {
+    function handler(event: MouseEvent) {
+      if (listboxState !== ListboxStates.Open) return
+      if (buttonRef.current?.contains(event.target as HTMLElement)) return
+
+      if (!optionsRef.current?.contains(event.target as HTMLElement)) {
+        dispatch({ type: ActionTypes.CloseListbox })
+        if (!event.defaultPrevented) buttonRef.current?.focus()
+      }
+    }
+
+    window.addEventListener('click', handler)
+    return () => window.removeEventListener('click', handler)
+  }, [listboxState, optionsRef, buttonRef, d, dispatch])
+
+  const propsBag = React.useMemo<ListboxRenderPropArg>(
+    () => ({ open: listboxState === ListboxStates.Open }),
+    [listboxState]
+  )
+
+  return (
+    <ListboxContext.Provider value={reducerBag}>
+      {render(passThroughProps, propsBag, DEFAULT_LISTBOX_TAG)}
+    </ListboxContext.Provider>
+  )
+}
+
+// ---
+
+type ButtonPropsWeControl =
+  | 'ref'
+  | 'id'
+  | 'type'
+  | 'aria-haspopup'
+  | 'aria-controls'
+  | 'aria-expanded'
+  | 'aria-labelledby'
+  | 'onKeyDown'
+  | 'onFocus'
+  | 'onBlur'
+  | 'onPointerUp'
+
+const DEFAULT_BUTTON_TAG = 'button'
+
+type ButtonRenderPropArg = { open: boolean; focused: boolean }
+
+const Button = forwardRefWithAs(function Button<
+  TTag extends React.ElementType = typeof DEFAULT_BUTTON_TAG
+>(
+  props: Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl>,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  const [state, dispatch] = useListboxContext([Listbox.name, Button.name].join('.'))
+  const buttonRef = useSyncRefs(state.buttonRef, ref)
+  const [focused, setFocused] = React.useState(false)
+
+  const id = `headlessui-listbox-button-${useId()}`
+  const d = useDisposables()
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      switch (event.key) {
+        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
+
+        case Keys.Space:
+        case Keys.Enter:
+        case Keys.ArrowDown:
+          event.preventDefault()
+          dispatch({ type: ActionTypes.OpenListbox })
+          d.nextFrame(() => {
+            state.optionsRef.current?.focus()
+            if (!state.propsRef.current.value)
+              dispatch({ type: ActionTypes.GoToOption, focus: Focus.First })
+          })
+          break
+
+        case Keys.ArrowUp:
+          event.preventDefault()
+          dispatch({ type: ActionTypes.OpenListbox })
+          d.nextFrame(() => {
+            state.optionsRef.current?.focus()
+            if (!state.propsRef.current.value)
+              dispatch({ type: ActionTypes.GoToOption, focus: Focus.Last })
+          })
+          break
+      }
+    },
+    [dispatch, state, d]
+  )
+
+  const handlePointerUp = React.useCallback(
+    (event: MouseEvent) => {
+      if (state.listboxState === ListboxStates.Open) {
+        dispatch({ type: ActionTypes.CloseListbox })
+      } else {
+        event.preventDefault()
+        dispatch({ type: ActionTypes.OpenListbox })
+        d.nextFrame(() => state.optionsRef.current?.focus())
+      }
+    },
+    [dispatch, d, state]
+  )
+
+  const handleFocus = React.useCallback(() => {
+    if (state.listboxState === ListboxStates.Open) return state.optionsRef.current?.focus()
+    setFocused(true)
+  }, [state, setFocused])
+
+  const handleBlur = React.useCallback(() => setFocused(false), [setFocused])
+  const labelledby = useComputed(() => {
+    if (!state.labelRef.current) return undefined
+    return [state.labelRef.current.id, id].join(' ')
+  }, [state.labelRef.current, id])
+
+  const propsBag = React.useMemo<ButtonRenderPropArg>(
+    () => ({ open: state.listboxState === ListboxStates.Open, focused }),
+    [state, focused]
+  )
+  const passthroughProps = props
+  const propsWeControl = {
+    ref: buttonRef,
+    id,
+    type: 'button',
+    'aria-haspopup': true,
+    'aria-controls': state.optionsRef.current?.id,
+    'aria-expanded': state.listboxState === ListboxStates.Open ? true : undefined,
+    'aria-labelledby': labelledby,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPointerUp: handlePointerUp,
+  }
+
+  return render({ ...passthroughProps, ...propsWeControl }, propsBag, DEFAULT_BUTTON_TAG)
+})
+
+// ---
+
+type LabelPropsWeControl = 'id' | 'ref' | 'onPointerUp'
+
+const DEFAULT_LABEL_TAG = 'label'
+
+type LabelRenderPropArg = { open: boolean }
+
+function Label<TTag extends React.ElementType = typeof DEFAULT_LABEL_TAG>(
+  props: Props<TTag, LabelRenderPropArg, LabelPropsWeControl>
+) {
+  const [state] = useListboxContext([Listbox.name, Label.name].join('.'))
+  const id = `headlessui-listbox-label-${useId()}`
+
+  const handlePointerUp = React.useCallback(() => state.buttonRef.current?.focus(), [
+    state.buttonRef,
+  ])
+
+  const propsBag = React.useMemo<OptionsRenderPropArg>(
+    () => ({ open: state.listboxState === ListboxStates.Open }),
+    [state]
+  )
+  const propsWeControl = {
+    ref: state.labelRef,
+    id,
+    onPointerUp: handlePointerUp,
+  }
+  return render({ ...props, ...propsWeControl }, propsBag, DEFAULT_LABEL_TAG)
+}
+
+// ---
+
+type OptionsPropsWeControl =
+  | 'aria-activedescendant'
+  | 'aria-labelledby'
+  | 'id'
+  | 'onKeyDown'
+  | 'ref'
+  | 'role'
+  | 'tabIndex'
+
+const DEFAULT_OPTIONS_TAG = 'ul'
+
+type OptionsRenderPropArg = { open: boolean }
+
+type ListboxOptionsProp<TTag> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl> & {
+  static?: boolean
+}
+
+const Options = forwardRefWithAs(function Options<
+  TTag extends React.ElementType = typeof DEFAULT_OPTIONS_TAG
+>(props: ListboxOptionsProp<TTag>, ref: React.Ref<HTMLUListElement>) {
+  const {
+    enter,
+    enterFrom,
+    enterTo,
+    leave,
+    leaveFrom,
+    leaveTo,
+    static: isStatic = false,
+    ...passthroughProps
+  } = props
+  const [state, dispatch] = useListboxContext([Listbox.name, Options.name].join('.'))
+  const optionsRef = useSyncRefs(state.optionsRef, ref)
+
+  const id = `headlessui-listbox-options-${useId()}`
+  const d = useDisposables()
+  const searchDisposables = useDisposables()
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLUListElement>) => {
+      searchDisposables.dispose()
+
+      switch (event.key) {
+        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
+
+        // @ts-expect-error Fallthrough is expected here
+        case Keys.Space:
+          if (state.searchQuery !== '') {
+            event.preventDefault()
+            return dispatch({ type: ActionTypes.Search, value: event.key })
+          }
+        // When in type ahead mode, fallthrough
+        case Keys.Enter:
+          event.preventDefault()
+          dispatch({ type: ActionTypes.CloseListbox })
+          if (state.activeOptionIndex !== null) {
+            const { dataRef } = state.options[state.activeOptionIndex]
+            state.propsRef.current.onChange(dataRef.current.value)
+          }
+          d.nextFrame(() => state.buttonRef.current?.focus())
+          break
+
+        case Keys.ArrowDown:
+          event.preventDefault()
+          return dispatch({ type: ActionTypes.GoToOption, focus: Focus.Next })
+
+        case Keys.ArrowUp:
+          event.preventDefault()
+          return dispatch({ type: ActionTypes.GoToOption, focus: Focus.Previous })
+
+        case Keys.Home:
+        case Keys.PageUp:
+          event.preventDefault()
+          return dispatch({ type: ActionTypes.GoToOption, focus: Focus.First })
+
+        case Keys.End:
+        case Keys.PageDown:
+          event.preventDefault()
+          return dispatch({ type: ActionTypes.GoToOption, focus: Focus.Last })
+
+        case Keys.Escape:
+          event.preventDefault()
+          dispatch({ type: ActionTypes.CloseListbox })
+          return d.nextFrame(() => state.buttonRef.current?.focus())
+
+        case Keys.Tab:
+          return event.preventDefault()
+
+        default:
+          if (event.key.length === 1) {
+            dispatch({ type: ActionTypes.Search, value: event.key })
+            searchDisposables.setTimeout(() => dispatch({ type: ActionTypes.ClearSearch }), 350)
+          }
+          break
+      }
+    },
+    [d, dispatch, searchDisposables, state]
+  )
+
+  const labelledby = useComputed(() => state.labelRef.current?.id ?? state.buttonRef.current?.id, [
+    state.labelRef.current,
+    state.buttonRef.current,
+  ])
+
+  const propsBag = React.useMemo<OptionsRenderPropArg>(
+    () => ({ open: state.listboxState === ListboxStates.Open }),
+    [state]
+  )
+  const propsWeControl = {
+    'aria-activedescendant':
+      state.activeOptionIndex === null ? undefined : state.options[state.activeOptionIndex]?.id,
+    'aria-labelledby': labelledby,
+    id,
+    onKeyDown: handleKeyDown,
+    role: 'listbox',
+    tabIndex: 0,
+  }
+
+  if (!isStatic && state.listboxState === ListboxStates.Closed) return null
+
+  return render(
+    { ...passthroughProps, ...propsWeControl, ...{ ref: optionsRef } },
+    propsBag,
+    DEFAULT_OPTIONS_TAG
+  )
+})
+
+// ---
+
+type ListboxOptionPropsWeControl =
+  | 'id'
+  | 'role'
+  | 'tabIndex'
+  | 'aria-disabled'
+  | 'aria-selected'
+  | 'onPointerLeave'
+  | 'onFocus'
+
+const DEFAULT_OPTION_TAG = 'li'
+
+type OptionRenderPropArg = { active: boolean; selected: boolean; disabled: boolean }
+
+function Option<TTag extends React.ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(
+  props: Props<TTag, OptionRenderPropArg, ListboxOptionPropsWeControl | 'className'> & {
+    disabled?: boolean
+    value: TType
+
+    // Special treatment, can either be a string or a function that resolves to a string
+    className?: ((bag: OptionRenderPropArg) => string) | string
+  }
+) {
+  const { disabled = false, value, className, ...passthroughProps } = props
+  const [state, dispatch] = useListboxContext([Listbox.name, Option.name].join('.'))
+  const d = useDisposables()
+  const id = `headlessui-listbox-option-${useId()}`
+  const active =
+    state.activeOptionIndex !== null ? state.options[state.activeOptionIndex].id === id : false
+  const selected = state.propsRef.current.value === value
+
+  const bag = React.useRef<ListboxOptionDataRef['current']>({ disabled, value })
+
+  useIsoMorphicEffect(() => {
+    bag.current.disabled = disabled
+  }, [bag, disabled])
+  useIsoMorphicEffect(() => {
+    bag.current.value = value
+  }, [bag, value])
+  useIsoMorphicEffect(() => {
+    bag.current.textValue = document.getElementById(id)?.textContent?.toLowerCase()
+  }, [bag, id])
+
+  const select = React.useCallback(() => state.propsRef.current.onChange(value), [
+    state.propsRef,
+    value,
+  ])
+
+  useIsoMorphicEffect(() => {
+    dispatch({ type: ActionTypes.RegisterOption, id, dataRef: bag })
+    return () => dispatch({ type: ActionTypes.UnregisterOption, id })
+  }, [bag, id])
+
+  useIsoMorphicEffect(() => {
+    if (!selected) return
+    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Specific, id })
+    document.getElementById(id)?.focus?.()
+  }, [])
+
+  useIsoMorphicEffect(() => {
+    if (!active) return
+    const d = disposables()
+    d.nextFrame(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    return d.dispose
+  }, [active])
+
+  const handleClick = React.useCallback(
+    (event: { preventDefault: Function }) => {
+      if (disabled) return event.preventDefault()
+      select()
+      dispatch({ type: ActionTypes.CloseListbox })
+      d.nextFrame(() => state.buttonRef.current?.focus())
+    },
+    [d, dispatch, state.buttonRef, disabled, select]
+  )
+
+  const handleFocus = React.useCallback(() => {
+    if (disabled) return dispatch({ type: ActionTypes.GoToOption, focus: Focus.Nothing })
+    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Specific, id })
+  }, [disabled, id, dispatch])
+
+  const handlePointerMove = React.useCallback(() => {
+    if (disabled) return
+    if (active) return
+    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Specific, id })
+  }, [disabled, active, id, dispatch])
+
+  const handlePointerLeave = React.useCallback(() => {
+    if (disabled) return
+    if (!active) return
+    dispatch({ type: ActionTypes.GoToOption, focus: Focus.Nothing })
+  }, [disabled, active, dispatch])
+
+  const propsBag = React.useMemo(() => ({ active, selected, disabled }), [
+    active,
+    selected,
+    disabled,
+  ])
+  const propsWeControl = {
+    id,
+    role: 'option',
+    tabIndex: -1,
+    className: resolvePropValue(className, propsBag),
+    'aria-disabled': disabled === true ? true : undefined,
+    'aria-selected': selected === true ? true : undefined,
+    onClick: handleClick,
+    onFocus: handleFocus,
+    onPointerMove: handlePointerMove,
+    onPointerLeave: handlePointerLeave,
+  }
+
+  return render<TTag, OptionRenderPropArg>(
+    { ...passthroughProps, ...propsWeControl },
+    propsBag,
+    DEFAULT_OPTION_TAG
+  )
+}
+
+function resolvePropValue<TProperty, TBag>(property: TProperty, bag: TBag) {
+  if (property === undefined) return undefined
+  if (typeof property === 'function') return property(bag)
+  return property
+}
+
+// ---
+
+Listbox.Button = Button
+Listbox.Label = Label
+Listbox.Options = Options
+Listbox.Option = Option
@@ -4,37 +4,17 @@ import * as React from 'react'
 import { Props } from '../../types'
 import { match } from '../../utils/match'
 import { forwardRefWithAs, render } from '../../utils/render'
-import { Transition, TransitionClasses } from '../transitions/transition'
 import { useDisposables } from '../../hooks/use-disposables'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { useId } from '../../hooks/use-id'
+import { Keys } from '../keyboard'

 enum MenuStates {
  Open,
  Closed,
 }

-// TODO: This must already exist somewhere, right? 🤔
-// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-enum Key {
-  Space = ' ',
-  Enter = 'Enter',
-  Escape = 'Escape',
-  Backspace = 'Backspace',
-
-  ArrowUp = 'ArrowUp',
-  ArrowDown = 'ArrowDown',
-
-  Home = 'Home',
-  End = 'End',
-
-  PageUp = 'PageUp',
-  PageDown = 'PageDown',
-
-  Tab = 'Tab',
-}
-
 type MenuItemDataRef = React.MutableRefObject<{ textValue?: string; disabled: boolean }>

 type StateDefinition = {
@@ -286,9 +266,9 @@ const Button = forwardRefWithAs(function Button<
      switch (event.key) {
        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13

-        case Key.Space:
-        case Key.Enter:
-        case Key.ArrowDown:
+        case Keys.Space:
+        case Keys.Enter:
+        case Keys.ArrowDown:
          event.preventDefault()
          dispatch({ type: ActionTypes.OpenMenu })
          d.nextFrame(() => {
@@ -297,7 +277,7 @@ const Button = forwardRefWithAs(function Button<
          })
          break

-        case Key.ArrowUp:
+        case Keys.ArrowUp:
          event.preventDefault()
          dispatch({ type: ActionTypes.OpenMenu })
          d.nextFrame(() => {
@@ -369,20 +349,10 @@ type ItemsRenderPropArg = { open: boolean }
 const Items = forwardRefWithAs(function Items<
  TTag extends React.ElementType = typeof DEFAULT_ITEMS_TAG
 >(
-  props: Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> &
-    TransitionClasses & { static?: boolean },
+  props: Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl> & { static?: boolean },
  ref: React.Ref<HTMLDivElement>
 ) {
-  const {
-    enter,
-    enterFrom,
-    enterTo,
-    leave,
-    leaveFrom,
-    leaveTo,
-    static: isStatic = false,
-    ...passthroughProps
-  } = props
+  const { static: isStatic = false, ...passthroughProps } = props
  const [state, dispatch] = useMenuContext([Menu.name, Items.name].join('.'))
  const itemsRef = useSyncRefs(state.itemsRef, ref)

@@ -397,12 +367,14 @@ const Items = forwardRefWithAs(function Items<
      switch (event.key) {
        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12

-        // @ts-expect-error Falthrough is expected here
-        case Key.Space:
-          if (state.searchQuery !== '')
+        // @ts-expect-error Fallthrough is expected here
+        case Keys.Space:
+          if (state.searchQuery !== '') {
+            event.preventDefault()
            return dispatch({ type: ActionTypes.Search, value: event.key })
+          }
        // When in type ahead mode, fallthrough
-        case Key.Enter:
+        case Keys.Enter:
          event.preventDefault()
          dispatch({ type: ActionTypes.CloseMenu })
          if (state.activeItemIndex !== null) {
@@ -412,31 +384,31 @@ const Items = forwardRefWithAs(function Items<
          }
          break

-        case Key.ArrowDown:
+        case Keys.ArrowDown:
          event.preventDefault()
          return dispatch({ type: ActionTypes.GoToItem, focus: Focus.NextItem })

-        case Key.ArrowUp:
+        case Keys.ArrowUp:
          event.preventDefault()
          return dispatch({ type: ActionTypes.GoToItem, focus: Focus.PreviousItem })

-        case Key.Home:
-        case Key.PageUp:
+        case Keys.Home:
+        case Keys.PageUp:
          event.preventDefault()
          return dispatch({ type: ActionTypes.GoToItem, focus: Focus.FirstItem })

-        case Key.End:
-        case Key.PageDown:
+        case Keys.End:
+        case Keys.PageDown:
          event.preventDefault()
          return dispatch({ type: ActionTypes.GoToItem, focus: Focus.LastItem })

-        case Key.Escape:
+        case Keys.Escape:
          event.preventDefault()
          dispatch({ type: ActionTypes.CloseMenu })
          d.nextFrame(() => state.buttonRef.current?.focus())
          break

-        case Key.Tab:
+        case Keys.Tab:
          return event.preventDefault()

        default:
@@ -461,36 +433,12 @@ const Items = forwardRefWithAs(function Items<
    tabIndex: 0,
  }

-  if (isStatic) {
-    return render(
-      { ...passthroughProps, ...propsWeControl, ...{ ref: itemsRef } },
-      propsBag,
-      DEFAULT_ITEMS_TAG
-    )
-  }
+  if (!isStatic && state.menuState === MenuStates.Closed) return null

-  return (
-    <Transition
-      show={state.menuState === MenuStates.Open}
-      {...{ enter, enterFrom, enterTo, leave, leaveFrom, leaveTo }}
-    >
-      {ref =>
-        render(
-          {
-            ...passthroughProps,
-            ...propsWeControl,
-            ...{
-              ref(elementRef: HTMLDivElement) {
-                ref.current = elementRef
-                itemsRef(elementRef)
-              },
-            },
-          },
-          propsBag,
-          DEFAULT_ITEMS_TAG
-        )
-      }
-    </Transition>
+  return render(
+    { ...passthroughProps, ...propsWeControl, ...{ ref: itemsRef } },
+    propsBag,
+    DEFAULT_ITEMS_TAG
  )
 })

@@ -501,7 +449,6 @@ type MenuItemPropsWeControl =
  | 'role'
  | 'tabIndex'
  | 'aria-disabled'
-  | 'onPointerEnter'
  | 'onPointerLeave'
  | 'onFocus'

@@ -563,8 +510,9 @@ function Item<TTag extends React.ElementType = typeof DEFAULT_ITEM_TAG>(

  const handlePointerLeave = React.useCallback(() => {
    if (disabled) return
+    if (!active) return
    dispatch({ type: ActionTypes.GoToItem, focus: Focus.Nothing })
-  }, [disabled, dispatch])
+  }, [disabled, active, dispatch])

  const propsBag = React.useMemo(() => ({ active, disabled }), [active, disabled])
  const propsWeControl = {
@@ -8,7 +8,7 @@ import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { match } from '../../utils/match'
 import { Reason, transition } from './utils/transition'

-type ID = number
+type ID = ReturnType<typeof useId>

 function useSplitClasses(classes: string = '') {
  return React.useMemo(() => classes.split(' ').filter(className => className.trim().length > 1), [
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+
+export function useComputed<T>(cb: () => T, dependencies: React.DependencyList) {
+  const [value, setValue] = React.useState(cb)
+  const cbRef = React.useRef(cb)
+  useIsoMorphicEffect(() => {
+    cbRef.current = cb
+  }, [cb])
+  useIsoMorphicEffect(() => setValue(cbRef.current), [cbRef, setValue, ...dependencies])
+  return value
+}
@@ -1,11 +1,29 @@
 import * as React from 'react'
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'

+// We used a "simple" approach first which worked for SSR and rehydration on the client. However we
+// didn't take care of the Suspense case. To fix this we used the approach the @reach-ui/auto-id
+// uses.
+//
+// Credits: https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
+
+let state = { serverHandoffComplete: false }
 let id = 0
 function generateId() {
  return ++id
 }

 export function useId() {
-  const [id] = React.useState(generateId)
-  return id
+  const [id, setId] = React.useState(state.serverHandoffComplete ? generateId : null)
+
+  useIsoMorphicEffect(() => {
+    if (id === null) setId(generateId())
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  React.useEffect(() => {
+    if (state.serverHandoffComplete === false) state.serverHandoffComplete = true
+  }, [])
+
+  return id != null ? '' + id : undefined
 }
@@ -5,5 +5,5 @@ import * as TailwindUI from './index'
 * the outside world that we didn't want!
 */
 it('should expose the correct components', () => {
-  expect(Object.keys(TailwindUI)).toEqual(['Transition', 'Menu'])
+  expect(Object.keys(TailwindUI)).toEqual(['Transition', 'Menu', 'Listbox'])
 })
@@ -1,2 +1,3 @@
 export * from './components/transitions/transition'
 export * from './components/menu/menu'
+export * from './components/listbox/listbox'
@@ -1,156 +1,181 @@
-export enum MenuButtonState {
-  Open,
-  Closed,
+function assertNever(x: never): never {
+  throw new Error('Unexpected object: ' + x)
 }

+// ---
+
+export function getMenuButton(): HTMLElement | null {
+  return document.querySelector('button,[role="button"]')
+}
+
+export function getMenuButtons(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('button,[role="button"]'))
+}
+
+export function getMenu(): HTMLElement | null {
+  return document.querySelector('[role="menu"]')
+}
+
+export function getMenus(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="menu"]'))
+}
+
+export function getMenuItems(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="menuitem"]'))
+}
+
+// ---
+
 export enum MenuState {
  Open,
  Closed,
 }

-type MenuButtonOptions = { attributes?: Record<string, string | null>; textContent?: string } & (
-  | { state: MenuButtonState.Closed }
-  | { state: MenuButtonState.Open }
-)
-export function assertMenuButton(button: HTMLElement | null, options: MenuButtonOptions) {
+export function assertMenuButton(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: MenuState
+  },
+  button = getMenuButton()
+) {
  try {
    if (button === null) return expect(button).not.toBe(null)

    // Ensure menu button have these properties
-    expect(button.hasAttribute('id')).toBe(true)
-    expect(button.hasAttribute('aria-haspopup')).toBe(true)
+    expect(button).toHaveAttribute('id')
+    expect(button).toHaveAttribute('aria-haspopup')

-    if (options.state === MenuButtonState.Open) {
-      expect(button.hasAttribute('aria-controls')).toBe(true)
-      expect(button.getAttribute('aria-expanded')).toBe('true')
-    }
+    switch (options.state) {
+      case MenuState.Open:
+        expect(button).toHaveAttribute('aria-controls')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        break

-    if (options.state === MenuButtonState.Closed) {
-      expect(button.getAttribute('aria-controls')).toBeNull()
-      expect(button.getAttribute('aria-expanded')).toBeNull()
+      case MenuState.Closed:
+        expect(button).not.toHaveAttribute('aria-controls')
+        expect(button).not.toHaveAttribute('aria-expanded')
+        break
+
+      default:
+        assertNever(options.state)
    }

    if (options.textContent) {
-      expect(button.textContent?.trim()).toBe(options.textContent.trim())
+      expect(button).toHaveTextContent(options.textContent)
    }

    // Ensure menu button has the following attributes
    for (let attributeName in options.attributes) {
-      expect(button.getAttribute(attributeName)).toEqual(options.attributes[attributeName])
+      expect(button).toHaveAttribute(attributeName, options.attributes[attributeName])
    }
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertMenuButton)
-    }
+    Error.captureStackTrace(err, assertMenuButton)
    throw err
  }
 }

-export function assertMenuButtonLinkedWithMenu(
-  button: HTMLElement | null,
-  menu: HTMLElement | null
-) {
+export function assertMenuButtonLinkedWithMenu(button = getMenuButton(), menu = getMenu()) {
  try {
    if (button === null) return expect(button).not.toBe(null)
    if (menu === null) return expect(menu).not.toBe(null)

    // Ensure link between button & menu is correct
-    expect(button.getAttribute('aria-controls')).toBe(menu.getAttribute('id'))
-    expect(menu.getAttribute('aria-labelledby')).toBe(button.getAttribute('id'))
+    expect(button).toHaveAttribute('aria-controls', menu.getAttribute('id'))
+    expect(menu).toHaveAttribute('aria-labelledby', button.getAttribute('id'))
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertMenuButtonLinkedWithMenu)
-    }
+    Error.captureStackTrace(err, assertMenuButtonLinkedWithMenu)
    throw err
  }
 }

-export function assertMenuLinkedWithMenuItem(menu: HTMLElement | null, item: HTMLElement | null) {
+export function assertMenuLinkedWithMenuItem(item: HTMLElement | null, menu = getMenu()) {
  try {
    if (menu === null) return expect(menu).not.toBe(null)
    if (item === null) return expect(item).not.toBe(null)

    // Ensure link between menu & menu item is correct
-    expect(menu.getAttribute('aria-activedescendant')).toBe(item.getAttribute('id'))
+    expect(menu).toHaveAttribute('aria-activedescendant', item.getAttribute('id'))
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertMenuLinkedWithMenuItem)
-    }
+    Error.captureStackTrace(err, assertMenuLinkedWithMenuItem)
    throw err
  }
 }

-export function assertNoActiveMenuItem(menu: HTMLElement | null) {
+export function assertNoActiveMenuItem(menu = getMenu()) {
  try {
    if (menu === null) return expect(menu).not.toBe(null)

    // Ensure we don't have an active menu
-    expect(menu.hasAttribute('aria-activedescendant')).toBe(false)
+    expect(menu).not.toHaveAttribute('aria-activedescendant')
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertNoActiveMenuItem)
-    }
+    Error.captureStackTrace(err, assertNoActiveMenuItem)
    throw err
  }
 }

-type MenuOptions = { attributes?: Record<string, string | null>; textContent?: string } & (
-  | { state: MenuState.Closed }
-  | { state: MenuState.Open }
-)
-export function assertMenu(menu: HTMLElement | null, options: MenuOptions) {
+export function assertMenu(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: MenuState
+  },
+  menu = getMenu()
+) {
  try {
-    if (options.state === MenuState.Open) {
-      if (menu === null) return expect(menu).not.toBe(null)
+    switch (options.state) {
+      case MenuState.Open:
+        if (menu === null) return expect(menu).not.toBe(null)

-      // Check that some attributes exists, doesn't really matter what the values are at this point in
-      // time, we just require them.
-      expect(menu.hasAttribute('aria-labelledby')).toBe(true)
+        // Check that some attributes exists, doesn't really matter what the values are at this point in
+        // time, we just require them.
+        expect(menu).toHaveAttribute('aria-labelledby')

-      // Check that we have the correct values for certain attributes
-      expect(menu.getAttribute('role')).toBe('menu')
+        // Check that we have the correct values for certain attributes
+        expect(menu).toHaveAttribute('role', 'menu')

-      // Check that the menu is focused
-      expect(document.activeElement).toBe(menu)
+        if (options.textContent) {
+          expect(menu).toHaveTextContent(options.textContent)
+        }

-      if (options.textContent) {
-        expect(menu.textContent?.trim()).toBe(options.textContent.trim())
-      }
+        // Ensure menu button has the following attributes
+        for (let attributeName in options.attributes) {
+          expect(menu).toHaveAttribute(attributeName, options.attributes[attributeName])
+        }
+        break

-      // Ensure menu button has the following attributes
-      for (let attributeName in options.attributes) {
-        expect(menu.getAttribute(attributeName)).toEqual(options.attributes[attributeName])
-      }
-    }
+      case MenuState.Closed:
+        expect(menu).toBe(null)
+        break

-    if (options.state === MenuState.Closed) {
-      expect(menu).toBeNull()
+      default:
+        assertNever(options.state)
    }
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertMenu)
-    }
+    Error.captureStackTrace(err, assertMenu)
    throw err
  }
 }

-type MenuItemOptions = { tag?: string; attributes?: Record<string, string | null> }
-export function assertMenuItem(item: HTMLElement | null, options?: MenuItemOptions) {
+export function assertMenuItem(
+  item: HTMLElement | null,
+  options?: { tag?: string; attributes?: Record<string, string | null> }
+) {
  try {
    if (item === null) return expect(item).not.toBe(null)

    // Check that some attributes exists, doesn't really matter what the values are at this point in
    // time, we just require them.
-    expect(item.hasAttribute('id')).toBe(true)
+    expect(item).toHaveAttribute('id')

    // Check that we have the correct values for certain attributes
-    expect(item.getAttribute('role')).toBe('menuitem')
-    expect(item.getAttribute('tabindex')).toBe('-1')
+    expect(item).toHaveAttribute('role', 'menuitem')
+    expect(item).toHaveAttribute('tabindex', '-1')

    // Ensure menu button has the following attributes
    if (options) {
      for (let attributeName in options.attributes) {
-        expect(item.getAttribute(attributeName)).toEqual(options.attributes[attributeName])
+        expect(item).toHaveAttribute(attributeName, options.attributes[attributeName])
      }

      if (options.tag) {
@@ -158,21 +183,301 @@ export function assertMenuItem(item: HTMLElement | null, options?: MenuItemOptio
      }
    }
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertMenuItem)
-    }
+    Error.captureStackTrace(err, assertMenuItem)
    throw err
  }
 }

+// ---
+
+export function getListboxLabel(): HTMLElement | null {
+  return document.querySelector('label,[id^="headlessui-listbox-label"]')
+}
+
+export function getListboxButton(): HTMLElement | null {
+  return document.querySelector('button,[role="button"]')
+}
+
+export function getListboxButtons(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('button,[role="button"]'))
+}
+
+export function getListbox(): HTMLElement | null {
+  return document.querySelector('[role="listbox"]')
+}
+
+export function getListboxes(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="listbox"]'))
+}
+
+export function getListboxOptions(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="option"]'))
+}
+
+// ---
+
+export enum ListboxState {
+  Open,
+  Closed,
+}
+
+export function assertListbox(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: ListboxState
+  },
+  listbox = getListbox()
+) {
+  try {
+    switch (options.state) {
+      case ListboxState.Open:
+        if (listbox === null) return expect(listbox).not.toBe(null)
+
+        // Check that some attributes exists, doesn't really matter what the values are at this point in
+        // time, we just require them.
+        expect(listbox).toHaveAttribute('aria-labelledby')
+
+        // Check that we have the correct values for certain attributes
+        expect(listbox).toHaveAttribute('role', 'listbox')
+
+        if (options.textContent) {
+          expect(listbox).toHaveTextContent(options.textContent)
+        }
+
+        // Ensure listbox button has the following attributes
+        for (let attributeName in options.attributes) {
+          expect(listbox).toHaveAttribute(attributeName, options.attributes[attributeName])
+        }
+        break
+
+      case ListboxState.Closed:
+        expect(listbox).toBe(null)
+        break
+
+      default:
+        assertNever(options.state)
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListbox)
+    throw err
+  }
+}
+
+export function assertListboxButton(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: ListboxState
+  },
+  button = getListboxButton()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+
+    // Ensure menu button have these properties
+    expect(button).toHaveAttribute('id')
+    expect(button).toHaveAttribute('aria-haspopup')
+
+    switch (options.state) {
+      case ListboxState.Open:
+        expect(button).toHaveAttribute('aria-controls')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        break
+
+      case ListboxState.Closed:
+        expect(button).not.toHaveAttribute('aria-controls')
+        expect(button).not.toHaveAttribute('aria-expanded')
+        break
+
+      default:
+        assertNever(options.state)
+    }
+
+    if (options.textContent) {
+      expect(button).toHaveTextContent(options.textContent)
+    }
+
+    // Ensure menu button has the following attributes
+    for (let attributeName in options.attributes) {
+      expect(button).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButton)
+    throw err
+  }
+}
+
+export function assertListboxLabel(
+  options: {
+    attributes?: Record<string, string | null>
+    tag?: string
+    textContent?: string
+  },
+  label = getListboxLabel()
+) {
+  try {
+    if (label === null) return expect(label).not.toBe(null)
+
+    // Ensure menu button have these properties
+    expect(label).toHaveAttribute('id')
+
+    if (options.textContent) {
+      expect(label).toHaveTextContent(options.textContent)
+    }
+
+    if (options.tag) {
+      expect(label.tagName.toLowerCase()).toBe(options.tag)
+    }
+
+    // Ensure menu button has the following attributes
+    for (let attributeName in options.attributes) {
+      expect(label).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxLabel)
+    throw err
+  }
+}
+
+export function assertListboxButtonLinkedWithListbox(
+  button = getListboxButton(),
+  listbox = getListbox()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    // Ensure link between button & listbox is correct
+    expect(button).toHaveAttribute('aria-controls', listbox.getAttribute('id'))
+    expect(listbox).toHaveAttribute('aria-labelledby', button.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButtonLinkedWithListbox)
+    throw err
+  }
+}
+
+export function assertListboxLabelLinkedWithListbox(
+  label = getListboxLabel(),
+  listbox = getListbox()
+) {
+  try {
+    if (label === null) return expect(label).not.toBe(null)
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    expect(listbox).toHaveAttribute('aria-labelledby', label.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxLabelLinkedWithListbox)
+    throw err
+  }
+}
+
+export function assertListboxButtonLinkedWithListboxLabel(
+  button = getListboxButton(),
+  label = getListboxLabel()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+    if (label === null) return expect(label).not.toBe(null)
+
+    // Ensure link between button & label is correct
+    expect(button).toHaveAttribute('aria-labelledby', `${label.id} ${button.id}`)
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButtonLinkedWithListboxLabel)
+    throw err
+  }
+}
+
+export function assertActiveListboxOption(item: HTMLElement | null, listbox = getListbox()) {
+  try {
+    if (listbox === null) return expect(listbox).not.toBe(null)
+    if (item === null) return expect(item).not.toBe(null)
+
+    // Ensure link between listbox & listbox item is correct
+    expect(listbox).toHaveAttribute('aria-activedescendant', item.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertActiveListboxOption)
+    throw err
+  }
+}
+
+export function assertNoActiveListboxOption(listbox = getListbox()) {
+  try {
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    // Ensure we don't have an active listbox
+    expect(listbox).not.toHaveAttribute('aria-activedescendant')
+  } catch (err) {
+    Error.captureStackTrace(err, assertNoActiveListboxOption)
+    throw err
+  }
+}
+
+export function assertNoSelectedListboxOption(items = getListboxOptions()) {
+  try {
+    for (let item of items) expect(item).not.toHaveAttribute('aria-selected')
+  } catch (err) {
+    Error.captureStackTrace(err, assertNoSelectedListboxOption)
+    throw err
+  }
+}
+
+export function assertListboxOption(
+  item: HTMLElement | null,
+  options?: {
+    tag?: string
+    attributes?: Record<string, string | null>
+    selected?: boolean
+  }
+) {
+  try {
+    if (item === null) return expect(item).not.toBe(null)
+
+    // Check that some attributes exists, doesn't really matter what the values are at this point in
+    // time, we just require them.
+    expect(item).toHaveAttribute('id')
+
+    // Check that we have the correct values for certain attributes
+    expect(item).toHaveAttribute('role', 'option')
+    expect(item).toHaveAttribute('tabindex', '-1')
+
+    // Ensure listbox button has the following attributes
+    if (!options) return
+
+    for (let attributeName in options.attributes) {
+      expect(item).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+
+    if (options.tag) {
+      expect(item.tagName.toLowerCase()).toBe(options.tag)
+    }
+
+    if (options.selected != null) {
+      switch (options.selected) {
+        case true:
+          return expect(item).toHaveAttribute('aria-selected', 'true')
+
+        case false:
+          return expect(item).not.toHaveAttribute('aria-selected')
+
+        default:
+          assertNever(options.selected)
+      }
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxOption)
+    throw err
+  }
+}
+
+// ---
+
 export function assertActiveElement(element: HTMLElement | null) {
  try {
    if (element === null) return expect(element).not.toBe(null)
    expect(document.activeElement).toBe(element)
  } catch (err) {
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(err, assertActiveElement)
-    }
+    Error.captureStackTrace(err, assertActiveElement)
    throw err
  }
 }
@@ -1,6 +1,8 @@
 import { fireEvent } from '@testing-library/react'
 import { disposables } from '../utils/disposables'

+const d = disposables()
+
 export const Keys: Record<string, Partial<KeyboardEvent>> = {
  Space: { key: ' ' },
  Enter: { key: 'Enter' },
@@ -34,7 +36,6 @@ export async function type(events: Partial<KeyboardEvent>[]) {
    if (document.activeElement === null) return expect(document.activeElement).not.toBe(null)

    const element = document.activeElement
-    const d = disposables()

    events.forEach(event => {
      fireEvent.keyDown(element, event)
@@ -60,8 +61,6 @@ export async function click(element: Document | Element | Window | Node | null)
  try {
    if (element === null) return expect(element).not.toBe(null)

-    const d = disposables()
-
    fireEvent.pointerDown(element)
    fireEvent.mouseDown(element)
    fireEvent.pointerUp(element)
@@ -79,8 +78,6 @@ export async function focus(element: Document | Element | Window | Node | null)
  try {
    if (element === null) return expect(element).not.toBe(null)

-    const d = disposables()
-
    fireEvent.focus(element)

    await new Promise(d.nextFrame)
@@ -92,7 +89,6 @@ export async function focus(element: Document | Element | Window | Node | null)
 export async function mouseEnter(element: Document | Element | Window | null) {
  try {
    if (element === null) return expect(element).not.toBe(null)
-    const d = disposables()

    fireEvent.pointerOver(element)
    fireEvent.pointerEnter(element)
@@ -108,7 +104,6 @@ export async function mouseEnter(element: Document | Element | Window | null) {
 export async function mouseMove(element: Document | Element | Window | null) {
  try {
    if (element === null) return expect(element).not.toBe(null)
-    const d = disposables()

    fireEvent.pointerMove(element)
    fireEvent.mouseMove(element)
@@ -123,7 +118,6 @@ export async function mouseMove(element: Document | Element | Window | null) {
 export async function mouseLeave(element: Document | Element | Window | null) {
  try {
    if (element === null) return expect(element).not.toBe(null)
-    const d = disposables()

    fireEvent.pointerOut(element)
    fireEvent.pointerLeave(element)
@@ -4,13 +4,13 @@ type FunctionPropertyNames<T> = {
  string

 export function suppressConsoleLogs<T extends unknown[]>(
-  cb: (...args: T) => void,
+  cb: (...args: T) => unknown,
  type: FunctionPropertyNames<typeof global.console> = 'error'
 ) {
  return (...args: T) => {
    const spy = jest.spyOn(global.console, type).mockImplementation(jest.fn())

-    return new Promise<void>((resolve, reject) => {
+    return new Promise<unknown>((resolve, reject) => {
      Promise.resolve(cb(...args)).then(resolve, reject)
    }).finally(() => spy.mockRestore())
  }
@@ -0,0 +1,124 @@
+<template>
+  <div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+    <div class="w-full max-w-xs mx-auto">
+      <div class="space-y-1">
+        <Listbox v-model="active">
+          <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700"
+            >Assigned to</ListboxLabel
+          >
+
+          <div class="relative">
+            <span class="inline-block w-full rounded-md shadow-sm">
+              <ListboxButton
+                class="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+              >
+                <span class="block truncate">{{ active }}</span>
+                <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                  <svg
+                    class="w-5 h-5 text-gray-400"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M7 7l3-3 3 3m0 6l-3 3-3-3"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </span>
+              </ListboxButton>
+            </span>
+
+            <div class="absolute w-full mt-1 bg-white rounded-md shadow-lg">
+              <ListboxOptions
+                class="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
+              >
+                <ListboxOption
+                  v-for="name in people"
+                  :key="name"
+                  :value="name"
+                  :className="resolveListboxOptionClassName"
+                  v-slot="{ active, selected }"
+                >
+                  <span
+                    :class="
+                      classNames('block truncate', selected ? 'font-semibold' : 'font-normal')
+                    "
+                  >
+                    {{ name }}
+                  </span>
+                  <span
+                    v-if="selected"
+                    :class="
+                      classNames(
+                        'absolute inset-y-0 right-0 flex items-center pr-4',
+                        active ? 'text-white' : 'text-indigo-600'
+                      )
+                    "
+                  >
+                    <svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                </ListboxOption>
+              </ListboxOptions>
+            </div>
+          </div>
+        </Listbox>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, h, ref, onMounted, watchEffect, watch } from 'vue'
+import {
+  Listbox,
+  ListboxLabel,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/vue'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default {
+  components: { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption },
+  setup(props, context) {
+    const people = [
+      'Wade Cooper',
+      'Arlene Mccoy',
+      'Devon Webb',
+      'Tom Cook',
+      'Tanya Fox',
+      'Hellen Schmidt',
+      'Caronline Schultz',
+      'Mason Heaney',
+      'Claudie Smitham',
+      'Emil Schaefer',
+    ]
+
+    const active = ref(people[Math.floor(Math.random() * people.length)])
+
+    return {
+      people,
+      active,
+      classNames,
+      resolveListboxOptionClassName({ active }) {
+        return classNames(
+          'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+          active ? 'text-white bg-indigo-600' : 'text-gray-900'
+        )
+      },
+    }
+  },
+}
+</script>
@@ -28,5 +28,16 @@
        "component": "./components/menu/menu-with-transition-and-popper.vue"
      }
    ]
+  },
+  {
+    "name": "Listbox",
+    "path": "/listbox",
+    "children": [
+      {
+        "name": "Listbox (basic)",
+        "path": "/listbox/listbox",
+        "component": "./components/listbox/listbox.vue"
+      }
+    ]
  }
 ]
@@ -0,0 +1,3 @@
+const create = require('../../jest/create-jest-config.js')
+
+module.exports = create(__dirname, { displayName: ' Vue ' })
@@ -31,18 +31,15 @@
    "vue": "^3.0.0-rc.13"
  },
  "devDependencies": {
-    "@popperjs/core": "^2.4.4",
-    "@tailwindcss/ui": "^0.6.2",
-    "@testing-library/vue": "^5.0.4",
+    "@popperjs/core": "^2.5.3",
+    "@testing-library/vue": "^5.1.0",
    "@types/debounce": "^1.2.0",
-    "@types/node": "^14.11.1",
+    "@types/node": "^14.11.2",
    "@vue/compiler-sfc": "3.0.0-rc.13",
-    "@vue/test-utils": "^2.0.0-beta.5",
+    "@vue/test-utils": "^2.0.0-beta.6",
    "husky": "^4.3.0",
-    "tailwindcss": "^1.8.10",
-    "tsdx": "^0.13.3",
    "vite": "^1.0.0-rc.4",
    "vue": "^3.0.0-rc.13",
-    "vue-router": "^4.0.0-beta.10"
+    "vue-router": "^4.0.0-beta.12"
  }
 }
@@ -0,0 +1,558 @@
+import {
+  defineComponent,
+  ref,
+  provide,
+  inject,
+  onMounted,
+  onUnmounted,
+  computed,
+  nextTick,
+  InjectionKey,
+  Ref,
+  ComputedRef,
+  watchEffect,
+} from 'vue'
+import { match } from '../../utils/match'
+import { render } from '../../utils/render'
+import { useId } from '../../hooks/use-id'
+import { Keys } from '../../keyboard'
+
+enum ListboxStates {
+  Open,
+  Closed,
+}
+
+enum Focus {
+  First,
+  Previous,
+  Next,
+  Last,
+  Specific,
+  Nothing,
+}
+
+type ListboxOptionDataRef = Ref<{ textValue: string; disabled: boolean; value: unknown }>
+type StateDefinition = {
+  // State
+  listboxState: Ref<ListboxStates>
+  value: ComputedRef<unknown>
+  labelRef: Ref<HTMLLabelElement | null>
+  buttonRef: Ref<HTMLButtonElement | null>
+  optionsRef: Ref<HTMLDivElement | null>
+  options: Ref<{ id: string; dataRef: ListboxOptionDataRef }[]>
+  searchQuery: Ref<string>
+  activeOptionIndex: Ref<number | null>
+
+  // State mutators
+  closeListbox(): void
+  openListbox(): void
+  goToOption(focus: Focus, id?: string): void
+  search(value: string): void
+  clearSearch(): void
+  registerOption(id: string, dataRef: ListboxOptionDataRef): void
+  unregisterOption(id: string): void
+  select(value: unknown): void
+}
+
+const ListboxContext = Symbol('ListboxContext') as InjectionKey<StateDefinition>
+
+function useListboxContext(component: string) {
+  const context = inject(ListboxContext)
+
+  if (context === undefined) {
+    const err = new Error(`<${component} /> is missing a parent <Listbox /> component.`)
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useListboxContext)
+    throw err
+  }
+
+  return context
+}
+
+// ---
+
+export const Listbox = defineComponent({
+  name: 'Listbox',
+  props: {
+    as: { type: [Object, String], default: 'template' },
+    modelValue: { type: [Object, String], default: null },
+  },
+  setup(props, { slots, attrs, emit }) {
+    const { modelValue, ...passThroughProps } = props
+    const listboxState = ref<StateDefinition['listboxState']['value']>(ListboxStates.Closed)
+    const labelRef = ref<StateDefinition['labelRef']['value']>(null)
+    const buttonRef = ref<StateDefinition['buttonRef']['value']>(null)
+    const optionsRef = ref<StateDefinition['optionsRef']['value']>(null)
+    const options = ref<StateDefinition['options']['value']>([])
+    const searchQuery = ref<StateDefinition['searchQuery']['value']>('')
+    const activeOptionIndex = ref<StateDefinition['activeOptionIndex']['value']>(null)
+
+    const value = computed(() => props.modelValue)
+
+    function calculateActiveOptionIndex(focus: Focus, id?: string) {
+      if (options.value.length <= 0) return null
+
+      const currentActiveOptionIndex = activeOptionIndex.value ?? -1
+
+      const nextActiveIndex = match(focus, {
+        [Focus.First]: () => options.value.findIndex(option => !option.dataRef.disabled),
+        [Focus.Previous]: () => {
+          const idx = options.value
+            .slice()
+            .reverse()
+            .findIndex((option, idx, all) => {
+              if (
+                currentActiveOptionIndex !== -1 &&
+                all.length - idx - 1 >= currentActiveOptionIndex
+              )
+                return false
+              return !option.dataRef.disabled
+            })
+          if (idx === -1) return idx
+          return options.value.length - 1 - idx
+        },
+        [Focus.Next]: () => {
+          return options.value.findIndex((option, idx) => {
+            if (idx <= currentActiveOptionIndex) return false
+            return !option.dataRef.disabled
+          })
+        },
+        [Focus.Last]: () => {
+          const idx = options.value
+            .slice()
+            .reverse()
+            .findIndex(option => !option.dataRef.disabled)
+          if (idx === -1) return idx
+          return options.value.length - 1 - idx
+        },
+        [Focus.Specific]: () => options.value.findIndex(option => option.id === id),
+        [Focus.Nothing]: () => null,
+      })
+
+      if (nextActiveIndex === -1) return activeOptionIndex.value
+      return nextActiveIndex
+    }
+
+    const api = {
+      listboxState,
+      value,
+      labelRef,
+      buttonRef,
+      optionsRef,
+      options,
+      searchQuery,
+      activeOptionIndex,
+      closeListbox: () => (listboxState.value = ListboxStates.Closed),
+      openListbox: () => (listboxState.value = ListboxStates.Open),
+      goToOption(focus: Focus, id?: string) {
+        const nextActiveOptionIndex = calculateActiveOptionIndex(focus, id)
+        if (searchQuery.value === '' && activeOptionIndex.value === nextActiveOptionIndex) return
+        searchQuery.value = ''
+        activeOptionIndex.value = nextActiveOptionIndex
+      },
+      search(value: string) {
+        searchQuery.value += value
+
+        const match = options.value.findIndex(
+          option =>
+            !option.dataRef.disabled && option.dataRef.textValue.startsWith(searchQuery.value)
+        )
+
+        if (match === -1 || match === activeOptionIndex.value) {
+          return
+        }
+
+        activeOptionIndex.value = match
+      },
+      clearSearch() {
+        searchQuery.value = ''
+      },
+      registerOption(id: string, dataRef: ListboxOptionDataRef) {
+        // @ts-expect-error The expected type comes from property 'dataRef' which is declared here on type '{ id: string; dataRef: { textValue: string; disabled: boolean; }; }'
+        options.value.push({ id, dataRef })
+      },
+      unregisterOption(id: string) {
+        const nextOptions = options.value.slice()
+        const currentActiveOption =
+          activeOptionIndex.value !== null ? nextOptions[activeOptionIndex.value] : null
+        const idx = nextOptions.findIndex(a => a.id === id)
+        if (idx !== -1) nextOptions.splice(idx, 1)
+        options.value = nextOptions
+        activeOptionIndex.value = (() => {
+          if (idx === activeOptionIndex.value) return null
+          if (currentActiveOption === null) return null
+
+          // If we removed the option before the actual active index, then it would be out of sync. To
+          // fix this, we will find the correct (new) index position.
+          return nextOptions.indexOf(currentActiveOption)
+        })()
+      },
+      select(value: unknown) {
+        emit('update:modelValue', value)
+      },
+    }
+
+    onMounted(() => {
+      function handler(event: MouseEvent) {
+        if (listboxState.value !== ListboxStates.Open) return
+        if (buttonRef.value?.contains(event.target as HTMLElement)) return
+
+        if (!optionsRef.value?.contains(event.target as HTMLElement)) {
+          api.closeListbox()
+          if (!event.defaultPrevented) buttonRef.value?.focus()
+        }
+      }
+
+      window.addEventListener('click', handler)
+      onUnmounted(() => window.removeEventListener('click', handler))
+    })
+
+    // @ts-expect-error Types of property 'dataRef' are incompatible.
+    provide(ListboxContext, api)
+
+    return () => {
+      const slot = { open: listboxState.value === ListboxStates.Open }
+      return render({ props: passThroughProps, slot, slots, attrs })
+    }
+  },
+})
+
+// ---
+
+export const ListboxLabel = defineComponent({
+  name: 'ListboxLabel',
+  props: { as: { type: [Object, String], default: 'label' } },
+  render() {
+    const api = useListboxContext('ListboxLabel')
+
+    const slot = { open: api.listboxState.value === ListboxStates.Open }
+    const propsWeControl = {
+      id: this.id,
+      ref: 'el',
+      onPointerUp: this.handlePointerUp,
+    }
+
+    return render({
+      props: { ...this.$props, ...propsWeControl },
+      slot,
+      attrs: this.$attrs,
+      slots: this.$slots,
+    })
+  },
+  setup() {
+    const api = useListboxContext('ListboxLabel')
+    const id = `headlessui-listbox-label-${useId()}`
+
+    return {
+      id,
+      el: api.labelRef,
+      handlePointerUp() {
+        api.buttonRef.value?.focus()
+      },
+    }
+  },
+})
+
+// ---
+
+export const ListboxButton = defineComponent({
+  name: 'ListboxButton',
+  props: { as: { type: [Object, String], default: 'button' } },
+  render() {
+    const api = useListboxContext('ListboxButton')
+
+    const slot = { open: api.listboxState.value === ListboxStates.Open, focused: this.focused }
+    const propsWeControl = {
+      ref: 'el',
+      id: this.id,
+      type: 'button',
+      'aria-haspopup': true,
+      'aria-controls': api.optionsRef.value?.id,
+      'aria-expanded': api.listboxState.value === ListboxStates.Open ? true : undefined,
+      'aria-labelledby': api.labelRef.value
+        ? [api.labelRef.value.id, this.id].join(' ')
+        : undefined,
+      onKeyDown: this.handleKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onPointerUp: this.handlePointerUp,
+    }
+
+    return render({
+      props: { ...this.$props, ...propsWeControl },
+      slot,
+      attrs: this.$attrs,
+      slots: this.$slots,
+    })
+  },
+  setup() {
+    const api = useListboxContext('ListboxButton')
+    const id = `headlessui-listbox-button-${useId()}`
+    const focused = ref(false)
+
+    function handleKeyDown(event: KeyboardEvent) {
+      switch (event.key) {
+        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
+
+        case Keys.Space:
+        case Keys.Enter:
+        case Keys.ArrowDown:
+          event.preventDefault()
+          api.openListbox()
+          nextTick(() => {
+            api.optionsRef.value?.focus()
+            if (!api.value.value) api.goToOption(Focus.First)
+          })
+          break
+
+        case Keys.ArrowUp:
+          event.preventDefault()
+          api.openListbox()
+          nextTick(() => {
+            api.optionsRef.value?.focus()
+            if (!api.value.value) api.goToOption(Focus.Last)
+          })
+          break
+      }
+    }
+
+    function handlePointerUp(event: MouseEvent) {
+      if (api.listboxState.value === ListboxStates.Open) {
+        api.closeListbox()
+      } else {
+        event.preventDefault()
+        api.openListbox()
+        nextTick(() => api.optionsRef.value?.focus())
+      }
+    }
+
+    function handleFocus() {
+      if (api.listboxState.value === ListboxStates.Open) return api.optionsRef.value?.focus()
+      focused.value = true
+    }
+
+    function handleBlur() {
+      focused.value = false
+    }
+
+    return {
+      id,
+      el: api.buttonRef,
+      focused,
+      handleKeyDown,
+      handlePointerUp,
+      handleFocus,
+      handleBlur,
+    }
+  },
+})
+
+// ---
+
+export const ListboxOptions = defineComponent({
+  name: 'ListboxOptions',
+  props: {
+    as: { type: [Object, String], default: 'ul' },
+    static: { type: Boolean, default: false },
+  },
+  render() {
+    const api = useListboxContext('ListboxOptions')
+
+    // `static` is a reserved keyword, therefore aliasing it...
+    const { static: isStatic, ...passThroughProps } = this.$props
+
+    if (!isStatic && api.listboxState.value === ListboxStates.Closed) return null
+
+    const slot = { open: api.listboxState.value === ListboxStates.Open }
+    const propsWeControl = {
+      'aria-activedescendant':
+        api.activeOptionIndex.value === null
+          ? undefined
+          : api.options.value[api.activeOptionIndex.value]?.id,
+      'aria-labelledby': api.labelRef.value?.id ?? api.buttonRef.value?.id,
+      id: this.id,
+      onKeyDown: this.handleKeyDown,
+      role: 'listbox',
+      tabIndex: 0,
+      ref: 'el',
+    }
+
+    return render({
+      props: { ...passThroughProps, ...propsWeControl },
+      slot,
+      attrs: this.$attrs,
+      slots: this.$slots,
+    })
+  },
+  setup() {
+    const api = useListboxContext('ListboxOptions')
+    const id = `headlessui-listbox-options-${useId()}`
+    const searchDebounce = ref<ReturnType<typeof setTimeout> | null>(null)
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (searchDebounce.value) clearTimeout(searchDebounce.value)
+
+      switch (event.key) {
+        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
+
+        // @ts-expect-error Fallthrough is expected here
+        case Keys.Space:
+          if (api.searchQuery.value !== '') {
+            event.preventDefault()
+            return api.search(event.key)
+          }
+        // When in type ahead mode, fallthrough
+        case Keys.Enter:
+          event.preventDefault()
+          api.closeListbox()
+          if (api.activeOptionIndex.value !== null) {
+            const { dataRef } = api.options.value[api.activeOptionIndex.value]
+            api.select(dataRef.value)
+            nextTick(() => api.buttonRef.value?.focus())
+          }
+          break
+
+        case Keys.ArrowDown:
+          event.preventDefault()
+          return api.goToOption(Focus.Next)
+
+        case Keys.ArrowUp:
+          event.preventDefault()
+          return api.goToOption(Focus.Previous)
+
+        case Keys.Home:
+        case Keys.PageUp:
+          event.preventDefault()
+          return api.goToOption(Focus.First)
+
+        case Keys.End:
+        case Keys.PageDown:
+          event.preventDefault()
+          return api.goToOption(Focus.Last)
+
+        case Keys.Escape:
+          event.preventDefault()
+          api.closeListbox()
+          nextTick(() => api.buttonRef.value?.focus())
+          break
+
+        case Keys.Tab:
+          return event.preventDefault()
+
+        default:
+          if (event.key.length === 1) {
+            api.search(event.key)
+            searchDebounce.value = setTimeout(() => api.clearSearch(), 350)
+          }
+          break
+      }
+    }
+
+    return {
+      id,
+      el: api.optionsRef,
+      handleKeyDown,
+    }
+  },
+})
+
+export const ListboxOption = defineComponent({
+  name: 'ListboxOption',
+  props: {
+    as: { type: [Object, String], default: 'li' },
+    value: { type: [Object, String], default: null },
+    disabled: { type: Boolean, default: false },
+    class: { type: [String, Function], required: false },
+    className: { type: [String, Function], required: false },
+  },
+  setup(props, { slots, attrs }) {
+    const api = useListboxContext('ListboxOption')
+    const id = `headlessui-listbox-option-${useId()}`
+    const { disabled, class: defaultClass, className = defaultClass, value } = props
+
+    const active = computed(() => {
+      return api.activeOptionIndex.value !== null
+        ? api.options.value[api.activeOptionIndex.value].id === id
+        : false
+    })
+
+    const selected = computed(() => api.value.value === value)
+
+    const dataRef = ref<ListboxOptionDataRef['value']>({ disabled, value, textValue: '' })
+    onMounted(() => {
+      const textValue = document
+        .getElementById(id)
+        ?.textContent?.toLowerCase()
+        .trim()
+      if (textValue !== undefined) dataRef.value.textValue = textValue
+    })
+
+    onMounted(() => api.registerOption(id, dataRef))
+    onUnmounted(() => api.unregisterOption(id))
+
+    onMounted(() => {
+      if (!selected.value) return
+      api.goToOption(Focus.Specific, id)
+      document.getElementById(id)?.focus?.()
+    })
+
+    watchEffect(() => {
+      if (!active.value) return
+      nextTick(() => document.getElementById(id)?.scrollIntoView?.({ block: 'nearest' }))
+    })
+
+    function handleClick(event: MouseEvent) {
+      if (disabled) return event.preventDefault()
+      api.select(value)
+      api.closeListbox()
+      nextTick(() => api.buttonRef.value?.focus())
+    }
+
+    function handleFocus() {
+      if (disabled) return api.goToOption(Focus.Nothing)
+      api.goToOption(Focus.Specific, id)
+    }
+
+    function handlePointerMove() {
+      if (disabled) return
+      if (active.value) return
+      api.goToOption(Focus.Specific, id)
+    }
+
+    function handlePointerLeave() {
+      if (disabled) return
+      if (!active.value) return
+      api.goToOption(Focus.Nothing)
+    }
+
+    return () => {
+      const slot = { active: active.value, selected: selected.value, disabled }
+      const propsWeControl = {
+        id,
+        role: 'option',
+        tabIndex: -1,
+        class: resolvePropValue(className, slot),
+        'aria-disabled': disabled === true ? true : undefined,
+        'aria-selected': selected.value === true ? selected.value : undefined,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onPointerMove: handlePointerMove,
+        onPointerLeave: handlePointerLeave,
+      }
+
+      return render({
+        props: { ...props, ...propsWeControl },
+        slot,
+        attrs,
+        slots,
+      })
+    }
+  },
+})
+
+// ---
+
+function resolvePropValue<TProperty, TBag>(property: TProperty, bag: TBag) {
+  if (property === undefined) return undefined
+  if (typeof property === 'function') return property(bag)
+  return property
+}
@@ -13,32 +13,13 @@ import {
 import { match } from '../../utils/match'
 import { render } from '../../utils/render'
 import { useId } from '../../hooks/use-id'
+import { Keys } from '../../keyboard'

 enum MenuStates {
  Open,
  Closed,
 }

-// TODO: This must already exist somewhere, right? 🤔
-// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-enum Key {
-  Space = ' ',
-  Enter = 'Enter',
-  Escape = 'Escape',
-  Backspace = 'Backspace',
-
-  ArrowUp = 'ArrowUp',
-  ArrowDown = 'ArrowDown',
-
-  Home = 'Home',
-  End = 'End',
-
-  PageUp = 'PageUp',
-  PageDown = 'PageDown',
-
-  Tab = 'Tab',
-}
-
 enum Focus {
  FirstItem,
  PreviousItem,
@@ -244,9 +225,9 @@ export const MenuButton = defineComponent({
      switch (event.key) {
        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13

-        case Key.Space:
-        case Key.Enter:
-        case Key.ArrowDown:
+        case Keys.Space:
+        case Keys.Enter:
+        case Keys.ArrowDown:
          event.preventDefault()
          api.openMenu()
          nextTick(() => {
@@ -255,7 +236,7 @@ export const MenuButton = defineComponent({
          })
          break

-        case Key.ArrowUp:
+        case Keys.ArrowUp:
          event.preventDefault()
          api.openMenu()
          nextTick(() => {
@@ -335,11 +316,14 @@ export const MenuItems = defineComponent({
      switch (event.key) {
        // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12

-        // @ts-expect-error Falthrough is expected here
-        case Key.Space:
-          if (api.searchQuery.value !== '') return api.search(event.key)
+        // @ts-expect-error Fallthrough is expected here
+        case Keys.Space:
+          if (api.searchQuery.value !== '') {
+            event.preventDefault()
+            return api.search(event.key)
+          }
        // When in type ahead mode, fallthrough
-        case Key.Enter:
+        case Keys.Enter:
          event.preventDefault()
          api.closeMenu()
          if (api.activeItemIndex.value !== null) {
@@ -349,31 +333,31 @@ export const MenuItems = defineComponent({
          }
          break

-        case Key.ArrowDown:
+        case Keys.ArrowDown:
          event.preventDefault()
          return api.goToItem(Focus.NextItem)

-        case Key.ArrowUp:
+        case Keys.ArrowUp:
          event.preventDefault()
          return api.goToItem(Focus.PreviousItem)

-        case Key.Home:
-        case Key.PageUp:
+        case Keys.Home:
+        case Keys.PageUp:
          event.preventDefault()
          return api.goToItem(Focus.FirstItem)

-        case Key.End:
-        case Key.PageDown:
+        case Keys.End:
+        case Keys.PageDown:
          event.preventDefault()
          return api.goToItem(Focus.LastItem)

-        case Key.Escape:
+        case Keys.Escape:
          event.preventDefault()
          api.closeMenu()
          nextTick(() => api.buttonRef.value?.focus())
          break

-        case Key.Tab:
+        case Keys.Tab:
          return event.preventDefault()

        default:
@@ -442,6 +426,7 @@ export const MenuItem = defineComponent({

    function handlePointerLeave() {
      if (disabled) return
+      if (!active.value) return
      api.goToItem(Focus.Nothing)
    }

@@ -11,5 +11,12 @@ it('should expose the correct components', () => {
    'MenuButton',
    'MenuItems',
    'MenuItem',
+
+    // Listbox
+    'Listbox',
+    'ListboxLabel',
+    'ListboxButton',
+    'ListboxOptions',
+    'ListboxOption',
  ])
 })
@@ -1 +1,2 @@
 export * from './components/menu/menu'
+export * from './components/listbox/listbox'
@@ -0,0 +1,19 @@
+// TODO: This must already exist somewhere, right? 🤔
+// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export enum Keys {
+  Space = ' ',
+  Enter = 'Enter',
+  Escape = 'Escape',
+  Backspace = 'Backspace',
+
+  ArrowUp = 'ArrowUp',
+  ArrowDown = 'ArrowDown',
+
+  Home = 'Home',
+  End = 'End',
+
+  PageUp = 'PageUp',
+  PageDown = 'PageDown',
+
+  Tab = 'Tab',
+}
@@ -1,158 +1,483 @@
-export enum MenuButtonState {
-  Open,
-  Closed,
+function assertNever(x: never): never {
+  throw new Error('Unexpected object: ' + x)
 }

+// ---
+
+export function getMenuButton(): HTMLElement | null {
+  return document.querySelector('button,[role="button"]')
+}
+
+export function getMenuButtons(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('button,[role="button"]'))
+}
+
+export function getMenu(): HTMLElement | null {
+  return document.querySelector('[role="menu"]')
+}
+
+export function getMenus(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="menu"]'))
+}
+
+export function getMenuItems(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="menuitem"]'))
+}
+
+// ---
+
 export enum MenuState {
  Open,
  Closed,
 }

-type MenuButtonOptions = { attributes?: Record<string, string | null>; textContent?: string } & (
-  | { state: MenuButtonState.Closed }
-  | { state: MenuButtonState.Open }
-)
-export function assertMenuButton(button: HTMLElement | null, options: MenuButtonOptions) {
+export function assertMenuButton(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: MenuState
+  },
+  button = getMenuButton()
+) {
  try {
    if (button === null) return expect(button).not.toBe(null)

    // Ensure menu button have these properties
-    expect(button.hasAttribute('id')).toBe(true)
-    expect(button.hasAttribute('aria-haspopup')).toBe(true)
+    expect(button).toHaveAttribute('id')
+    expect(button).toHaveAttribute('aria-haspopup')

-    if (options.state === MenuButtonState.Open) {
-      expect(button.hasAttribute('aria-controls')).toBe(true)
-      expect(button.getAttribute('aria-expanded')).toBe('true')
-    }
+    switch (options.state) {
+      case MenuState.Open:
+        expect(button).toHaveAttribute('aria-controls')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        break

-    if (options.state === MenuButtonState.Closed) {
-      expect(button.getAttribute('aria-controls')).toBeNull()
-      expect(button.getAttribute('aria-expanded')).toBeNull()
+      case MenuState.Closed:
+        expect(button).not.toHaveAttribute('aria-controls')
+        expect(button).not.toHaveAttribute('aria-expanded')
+        break
+
+      default:
+        assertNever(options.state)
    }

    if (options.textContent) {
-      expect(button.textContent?.trim()).toBe(options.textContent.trim())
+      expect(button).toHaveTextContent(options.textContent)
    }

    // Ensure menu button has the following attributes
    for (let attributeName in options.attributes) {
-      expect(button.getAttribute(attributeName)).toEqual(options.attributes[attributeName])
+      expect(button).toHaveAttribute(attributeName, options.attributes[attributeName])
    }
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertMenuButton)
+    Error.captureStackTrace(err, assertMenuButton)
    throw err
  }
 }

-export function assertMenuButtonLinkedWithMenu(
-  button: HTMLElement | null,
-  menu: HTMLElement | null
-) {
+export function assertMenuButtonLinkedWithMenu(button = getMenuButton(), menu = getMenu()) {
  try {
    if (button === null) return expect(button).not.toBe(null)
    if (menu === null) return expect(menu).not.toBe(null)

    // Ensure link between button & menu is correct
-    expect(button.getAttribute('aria-controls')).toBe(menu.getAttribute('id'))
-    expect(menu.getAttribute('aria-labelledby')).toBe(button.getAttribute('id'))
+    expect(button).toHaveAttribute('aria-controls', menu.getAttribute('id'))
+    expect(menu).toHaveAttribute('aria-labelledby', button.getAttribute('id'))
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertMenuButtonLinkedWithMenu)
+    Error.captureStackTrace(err, assertMenuButtonLinkedWithMenu)
    throw err
  }
 }

-export function assertMenuLinkedWithMenuItem(menu: HTMLElement | null, item: HTMLElement | null) {
+export function assertMenuLinkedWithMenuItem(item: HTMLElement | null, menu = getMenu()) {
  try {
    if (menu === null) return expect(menu).not.toBe(null)
    if (item === null) return expect(item).not.toBe(null)

    // Ensure link between menu & menu item is correct
-    expect(menu.getAttribute('aria-activedescendant')).toBe(item.getAttribute('id'))
+    expect(menu).toHaveAttribute('aria-activedescendant', item.getAttribute('id'))
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertMenuLinkedWithMenuItem)
+    Error.captureStackTrace(err, assertMenuLinkedWithMenuItem)
    throw err
  }
 }

-export function assertNoActiveMenuItem(menu: HTMLElement | null) {
+export function assertNoActiveMenuItem(menu = getMenu()) {
  try {
    if (menu === null) return expect(menu).not.toBe(null)

    // Ensure we don't have an active menu
-    expect(menu.hasAttribute('aria-activedescendant')).toBe(false)
+    expect(menu).not.toHaveAttribute('aria-activedescendant')
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertNoActiveMenuItem)
+    Error.captureStackTrace(err, assertNoActiveMenuItem)
    throw err
  }
 }

-type MenuOptions = { attributes?: Record<string, string | null> } & (
-  | { state: MenuState.Closed }
-  | { state: MenuState.Open }
-)
-export function assertMenu(menu: HTMLElement | null, options: MenuOptions) {
+export function assertMenu(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: MenuState
+  },
+  menu = getMenu()
+) {
  try {
-    if (options.state === MenuState.Open) {
-      if (menu === null) return expect(menu).not.toBe(null)
+    switch (options.state) {
+      case MenuState.Open:
+        if (menu === null) return expect(menu).not.toBe(null)

-      // Check that some attributes exists, doesn't really matter what the values are at this point in
-      // time, we just require them.
-      expect(menu.hasAttribute('aria-labelledby')).toBe(true)
+        // Check that some attributes exists, doesn't really matter what the values are at this point in
+        // time, we just require them.
+        expect(menu).toHaveAttribute('aria-labelledby')

-      // Check that we have the correct values for certain attributes
-      expect(menu.getAttribute('role')).toBe('menu')
+        // Check that we have the correct values for certain attributes
+        expect(menu).toHaveAttribute('role', 'menu')

-      // Check that the menu is focused
-      expect(document.activeElement).toBe(menu)
+        if (options.textContent) {
+          expect(menu).toHaveTextContent(options.textContent)
+        }

-      // Ensure menu button has the following attributes
-      for (let attributeName in options.attributes) {
-        expect(menu.getAttribute(attributeName)).toEqual(options.attributes[attributeName])
-      }
-    }
+        // Ensure menu button has the following attributes
+        for (let attributeName in options.attributes) {
+          expect(menu).toHaveAttribute(attributeName, options.attributes[attributeName])
+        }
+        break

-    if (options.state === MenuState.Closed) {
-      expect(menu).toBeNull()
+      case MenuState.Closed:
+        expect(menu).toBe(null)
+        break
+
+      default:
+        assertNever(options.state)
    }
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertMenu)
+    Error.captureStackTrace(err, assertMenu)
    throw err
  }
 }

-type MenuItemOptions = { tag: string; attributes?: Record<string, string | null> }
-export function assertMenuItem(item: HTMLElement | null, options?: MenuItemOptions) {
+export function assertMenuItem(
+  item: HTMLElement | null,
+  options?: { tag?: string; attributes?: Record<string, string | null> }
+) {
  try {
    if (item === null) return expect(item).not.toBe(null)

    // Check that some attributes exists, doesn't really matter what the values are at this point in
    // time, we just require them.
-    expect(item.hasAttribute('id')).toBe(true)
+    expect(item).toHaveAttribute('id')

    // Check that we have the correct values for certain attributes
-    expect(item.getAttribute('role')).toBe('menuitem')
-    expect(item.getAttribute('tabindex')).toBe('-1')
+    expect(item).toHaveAttribute('role', 'menuitem')
+    expect(item).toHaveAttribute('tabindex', '-1')

-    if (options?.tag) {
-      expect(item.tagName.toLowerCase()).toBe(options.tag)
-    }
+    // Ensure menu button has the following attributes
+    if (options) {
+      for (let attributeName in options.attributes) {
+        expect(item).toHaveAttribute(attributeName, options.attributes[attributeName])
+      }

-    // Ensure menu item has the following attributes
-    for (let attributeName in options?.attributes) {
-      expect(item.getAttribute(attributeName)).toEqual(options?.attributes[attributeName])
+      if (options.tag) {
+        expect(item.tagName.toLowerCase()).toBe(options.tag)
+      }
    }
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertMenuItem)
+    Error.captureStackTrace(err, assertMenuItem)
    throw err
  }
 }

+// ---
+
+export function getListboxLabel(): HTMLElement | null {
+  return document.querySelector('label,[id^="headlessui-listbox-label"]')
+}
+
+export function getListboxButton(): HTMLElement | null {
+  return document.querySelector('button,[role="button"]')
+}
+
+export function getListboxButtons(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('button,[role="button"]'))
+}
+
+export function getListbox(): HTMLElement | null {
+  return document.querySelector('[role="listbox"]')
+}
+
+export function getListboxes(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="listbox"]'))
+}
+
+export function getListboxOptions(): HTMLElement[] {
+  return Array.from(document.querySelectorAll('[role="option"]'))
+}
+
+// ---
+
+export enum ListboxState {
+  Open,
+  Closed,
+}
+
+export function assertListbox(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: ListboxState
+  },
+  listbox = getListbox()
+) {
+  try {
+    switch (options.state) {
+      case ListboxState.Open:
+        if (listbox === null) return expect(listbox).not.toBe(null)
+
+        // Check that some attributes exists, doesn't really matter what the values are at this point in
+        // time, we just require them.
+        expect(listbox).toHaveAttribute('aria-labelledby')
+
+        // Check that we have the correct values for certain attributes
+        expect(listbox).toHaveAttribute('role', 'listbox')
+
+        if (options.textContent) {
+          expect(listbox).toHaveTextContent(options.textContent)
+        }
+
+        // Ensure listbox button has the following attributes
+        for (let attributeName in options.attributes) {
+          expect(listbox).toHaveAttribute(attributeName, options.attributes[attributeName])
+        }
+        break
+
+      case ListboxState.Closed:
+        expect(listbox).toBe(null)
+        break
+
+      default:
+        assertNever(options.state)
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListbox)
+    throw err
+  }
+}
+
+export function assertListboxButton(
+  options: {
+    attributes?: Record<string, string | null>
+    textContent?: string
+    state: ListboxState
+  },
+  button = getListboxButton()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+
+    // Ensure menu button have these properties
+    expect(button).toHaveAttribute('id')
+    expect(button).toHaveAttribute('aria-haspopup')
+
+    switch (options.state) {
+      case ListboxState.Open:
+        expect(button).toHaveAttribute('aria-controls')
+        expect(button).toHaveAttribute('aria-expanded', 'true')
+        break
+
+      case ListboxState.Closed:
+        expect(button).not.toHaveAttribute('aria-controls')
+        expect(button).not.toHaveAttribute('aria-expanded')
+        break
+
+      default:
+        assertNever(options.state)
+    }
+
+    if (options.textContent) {
+      expect(button).toHaveTextContent(options.textContent)
+    }
+
+    // Ensure menu button has the following attributes
+    for (let attributeName in options.attributes) {
+      expect(button).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButton)
+    throw err
+  }
+}
+
+export function assertListboxLabel(
+  options: {
+    attributes?: Record<string, string | null>
+    tag?: string
+    textContent?: string
+  },
+  label = getListboxLabel()
+) {
+  try {
+    if (label === null) return expect(label).not.toBe(null)
+
+    // Ensure menu button have these properties
+    expect(label).toHaveAttribute('id')
+
+    if (options.textContent) {
+      expect(label).toHaveTextContent(options.textContent)
+    }
+
+    if (options.tag) {
+      expect(label.tagName.toLowerCase()).toBe(options.tag)
+    }
+
+    // Ensure menu button has the following attributes
+    for (let attributeName in options.attributes) {
+      expect(label).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxLabel)
+    throw err
+  }
+}
+
+export function assertListboxButtonLinkedWithListbox(
+  button = getListboxButton(),
+  listbox = getListbox()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    // Ensure link between button & listbox is correct
+    expect(button).toHaveAttribute('aria-controls', listbox.getAttribute('id'))
+    expect(listbox).toHaveAttribute('aria-labelledby', button.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButtonLinkedWithListbox)
+    throw err
+  }
+}
+
+export function assertListboxLabelLinkedWithListbox(
+  label = getListboxLabel(),
+  listbox = getListbox()
+) {
+  try {
+    if (label === null) return expect(label).not.toBe(null)
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    expect(listbox).toHaveAttribute('aria-labelledby', label.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxLabelLinkedWithListbox)
+    throw err
+  }
+}
+
+export function assertListboxButtonLinkedWithListboxLabel(
+  button = getListboxButton(),
+  label = getListboxLabel()
+) {
+  try {
+    if (button === null) return expect(button).not.toBe(null)
+    if (label === null) return expect(label).not.toBe(null)
+
+    // Ensure link between button & label is correct
+    expect(button).toHaveAttribute('aria-labelledby', `${label.id} ${button.id}`)
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxButtonLinkedWithListboxLabel)
+    throw err
+  }
+}
+
+export function assertActiveListboxOption(item: HTMLElement | null, listbox = getListbox()) {
+  try {
+    if (listbox === null) return expect(listbox).not.toBe(null)
+    if (item === null) return expect(item).not.toBe(null)
+
+    // Ensure link between listbox & listbox item is correct
+    expect(listbox).toHaveAttribute('aria-activedescendant', item.getAttribute('id'))
+  } catch (err) {
+    Error.captureStackTrace(err, assertActiveListboxOption)
+    throw err
+  }
+}
+
+export function assertNoActiveListboxOption(listbox = getListbox()) {
+  try {
+    if (listbox === null) return expect(listbox).not.toBe(null)
+
+    // Ensure we don't have an active listbox
+    expect(listbox).not.toHaveAttribute('aria-activedescendant')
+  } catch (err) {
+    Error.captureStackTrace(err, assertNoActiveListboxOption)
+    throw err
+  }
+}
+
+export function assertNoSelectedListboxOption(items = getListboxOptions()) {
+  try {
+    for (let item of items) expect(item).not.toHaveAttribute('aria-selected')
+  } catch (err) {
+    Error.captureStackTrace(err, assertNoSelectedListboxOption)
+    throw err
+  }
+}
+
+export function assertListboxOption(
+  item: HTMLElement | null,
+  options?: {
+    tag?: string
+    attributes?: Record<string, string | null>
+    selected?: boolean
+  }
+) {
+  try {
+    if (item === null) return expect(item).not.toBe(null)
+
+    // Check that some attributes exists, doesn't really matter what the values are at this point in
+    // time, we just require them.
+    expect(item).toHaveAttribute('id')
+
+    // Check that we have the correct values for certain attributes
+    expect(item).toHaveAttribute('role', 'option')
+    expect(item).toHaveAttribute('tabindex', '-1')
+
+    // Ensure listbox button has the following attributes
+    if (!options) return
+
+    for (let attributeName in options.attributes) {
+      expect(item).toHaveAttribute(attributeName, options.attributes[attributeName])
+    }
+
+    if (options.tag) {
+      expect(item.tagName.toLowerCase()).toBe(options.tag)
+    }
+
+    if (options.selected != null) {
+      switch (options.selected) {
+        case true:
+          return expect(item).toHaveAttribute('aria-selected', 'true')
+
+        case false:
+          return expect(item).not.toHaveAttribute('aria-selected')
+
+        default:
+          assertNever(options.selected)
+      }
+    }
+  } catch (err) {
+    Error.captureStackTrace(err, assertListboxOption)
+    throw err
+  }
+}
+
+// ---
+
 export function assertActiveElement(element: HTMLElement | null) {
  try {
    if (element === null) return expect(element).not.toBe(null)
    expect(document.activeElement).toBe(element)
  } catch (err) {
-    if (Error.captureStackTrace) Error.captureStackTrace(err, assertActiveElement)
+    Error.captureStackTrace(err, assertActiveElement)
    throw err
  }
 }
@@ -1,23 +1,11 @@
 #!/bin/bash
 set -e

-ROOT_DIR="$(git rev-parse --show-toplevel)/"
-TARGET_DIR="$(pwd)"
-RELATIVE_TARGET_DIR="${TARGET_DIR/$ROOT_DIR/}"
-
-# INFO: This script is always run from the root of the repository. If we execute this script from a
-# package then the filters (in this case a path to $RELATIVE_TARGET_DIR) will be applied.
-
-pushd $ROOT_DIR > /dev/null
-
 node="yarn node"
-tsdxArgs=()
-
-# Add script name
-tsdxArgs+=("test")
+jestArgs=()

 # Add default arguments
-tsdxArgs+=("--passWithNoTests" $RELATIVE_TARGET_DIR)
+jestArgs+=("--passWithNoTests")

 # Add arguments based on environment variables
 if [ -n "$CI" ]; then
@@ -26,9 +14,7 @@ if [ -n "$CI" ]; then
 fi

 # Passthrough arguments and flags
-tsdxArgs+=($@)
+jestArgs+=($@)

 # Execute
-$node "$(yarn bin tsdx)" "${tsdxArgs[@]}"
-
-popd > /dev/null
+$node "$(yarn bin jest)" "${jestArgs[@]}"
@@ -1010,7 +1010,7 @@
    core-js-pure "^3.0.0"
    regenerator-runtime "^0.13.4"

-"@babel/runtime@7.11.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
+"@babel/runtime@7.11.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
  version "7.11.2"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1479,10 +1479,10 @@
    "@nodelib/fs.scandir" "2.1.3"
    fastq "^1.6.0"

-"@popperjs/core@^2.4.4":
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
-  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+"@popperjs/core@^2.5.3":
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.3.tgz#4982b0b66b7a4cf949b86f5d25a8cf757d3cfd9d"
+  integrity sha512-RFwCobxsvZ6j7twS7dHIZQZituMIDJJNHS/qY6iuthVebxS3zhRY+jaC2roEKiAYaVuTcGmX6Luc6YBcf6zJVg==

 "@rollup/plugin-commonjs@^11.0.0":
  version "11.1.0"
@@ -1609,7 +1609,34 @@
    dom-accessibility-api "^0.5.1"
    pretty-format "^26.4.2"

-"@testing-library/react@^11.0.2":
+"@testing-library/dom@^7.24.3":
+  version "7.24.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.24.3.tgz#dae3071463cf28dc7755b43d9cf2202e34cbb85d"
+  integrity sha512-6eW9fUhEbR423FZvoHRwbWm9RUUByLWGayYFNVvqTnQLYvsNpBS4uEuKH9aqr3trhxFwGVneJUonehL3B1sHJw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.10.3"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.1"
+    pretty-format "^26.4.2"
+
+"@testing-library/jest-dom@^5.11.4":
+  version "5.11.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.4.tgz#f325c600db352afb92995c2576022b35621ddc99"
+  integrity sha512-6RRn3epuweBODDIv3dAlWjOEHQLpGJHB2i912VS3JQtsD22+ENInhdDNl4ZZQiViLlIfFinkSET/J736ytV9sw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    "@types/testing-library__jest-dom" "^5.9.1"
+    aria-query "^4.2.2"
+    chalk "^3.0.0"
+    css "^3.0.0"
+    css.escape "^1.5.1"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
+"@testing-library/react@^11.0.4":
  version "11.0.4"
  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.0.4.tgz#c84082bfe1593d8fcd475d46baee024452f31dee"
  integrity sha512-U0fZO2zxm7M0CB5h1+lh31lbAwMSmDMEMGpMT3BUPJwIjDEKYWOV4dx7lb3x2Ue0Pyt77gmz/VropuJnSz/Iew==
@@ -1617,15 +1644,15 @@
    "@babel/runtime" "^7.11.2"
    "@testing-library/dom" "^7.24.2"

-"@testing-library/vue@^5.0.4":
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/vue/-/vue-5.0.4.tgz#25d1de4a8c7a18ad28a4c6fa458f56f93cb190b9"
-  integrity sha512-09Ahx9DJB3sWsgZN8iSATDKgN5DFQAZr+lUJ+wQpkK3mfe2AyAwR2f9UDaCczvAjsoagHDaYrIyqyFb5bSJ1sA==
+"@testing-library/vue@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/vue/-/vue-5.1.0.tgz#3d0eb3d1861661c44f2bc20f6a1b5d8bd8b7500c"
+  integrity sha512-RuV63Ywys7rhF+UpdSKpFrcQfyiGj9ecxAL76HCOCGbtlXdyqUbGegZ+vZpC22scTCSxmr42l0g0gJEyp00W+g==
  dependencies:
-    "@babel/runtime" "^7.9.6"
-    "@testing-library/dom" "^7.5.7"
-    "@types/testing-library__vue" "^2.0.1"
-    "@vue/test-utils" "^1.0.3"
+    "@babel/runtime" "^7.11.2"
+    "@testing-library/dom" "^7.24.3"
+    "@types/testing-library__vue" "^5.0.0"
+    "@vue/test-utils" "^1.1.0"

 "@types/accepts@*":
  version "1.3.5"
@@ -1790,6 +1817,14 @@
  dependencies:
    "@types/istanbul-lib-report" "*"

+"@types/jest@*":
+  version "26.0.14"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.14.tgz#078695f8f65cb55c5a98450d65083b2b73e5a3f3"
+  integrity sha512-Hz5q8Vu0D288x3iWXePSn53W7hAjP0H7EQ6QvDO9c7t46mR0lNOLlfuwQ+JkVxuhygHzlzPX+0jKdA3ZgSh+Vg==
+  dependencies:
+    jest-diff "^25.2.1"
+    pretty-format "^25.2.1"
+
 "@types/jest@^24.0.15":
  version "24.9.1"
  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534"
@@ -1843,11 +1878,16 @@
  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.3.tgz#c893b73721db73699943bfc3653b1deb7faa4a3a"
  integrity sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==

-"@types/node@*", "@types/node@^14.10.1", "@types/node@^14.11.1":
+"@types/node@*":
  version "14.11.1"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
  integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==

+"@types/node@^14.11.2":
+  version "14.11.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
+  integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==
+
 "@types/normalize-package-data@^2.4.0":
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -1920,13 +1960,20 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==

-"@types/testing-library__vue@^2.0.1":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__vue/-/testing-library__vue-2.0.3.tgz#5559a0af03de44d751c9352ce8cdf254716a26ee"
-  integrity sha512-TPkSj+kwQVpUh4FOhcztMUBd1C12CQBOOaOyKuKtloBRkNcBqZJ+t/O6hwX6wdyGFLLMhosMH9VsZk/VF4eerQ==
+"@types/testing-library__jest-dom@^5.9.1":
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.2.tgz#59e4771a1cf87d51e89a5cc8195cd3b647cba322"
+  integrity sha512-K7nUSpH/5i8i0NagTJ+uFUDRueDlnMNhJtMjMwTGPPSqyImbWC/hgKPDCKt6Phu2iMJg2kWqlax+Ucj2DKMwpA==
+  dependencies:
+    "@types/jest" "*"
+
+"@types/testing-library__vue@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/testing-library__vue/-/testing-library__vue-5.0.0.tgz#b16de69eb2769f6c9bb85c66a1dab53ca56ee1fd"
+  integrity sha512-R94Vv9UfDoW/Vvb+ZBsy9evZO7utmFhEoe4F7+Xo8G/DpO5TZM/BdL07zkF3sjqWSyRhbHYHwXIrPwJAXQZGHg==
  dependencies:
    "@testing-library/dom" "^7.5.7"
-    "@vue/test-utils" "^1.0.0-beta.29"
+    "@vue/test-utils" "^1.0.3"
    pretty-format "^25.5.0"
    vue "^2.6.10"
    vue-router "^3.0"
@@ -2126,7 +2173,7 @@
  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.13.tgz#2ec450daa7eae752da38da41a5b1c84056b10b7e"
  integrity sha512-8zEVHmffW1P8Wlt8P63N+zKJrmzL6y0P2P6biWdl4CI9E5QVKlbOEYl7i+tU/dpa6oLj6nEzBxUCwA7UHvcPkw==

-"@vue/test-utils@^1.0.0-beta.29", "@vue/test-utils@^1.0.3":
+"@vue/test-utils@^1.0.3", "@vue/test-utils@^1.1.0":
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.1.0.tgz#76305e73a786c921ede1352849614e26c7113f94"
  integrity sha512-M+3jtVqNYIrvzO5gaxogre5a5+96h0hN/dXw+5Lj0t+dp6fAhYcUjpLrC9j9cEEkl2Rcuh/gKYRUmR5N4vcqPw==
@@ -2135,10 +2182,10 @@
    lodash "^4.17.15"
    pretty "^2.0.0"

-"@vue/test-utils@^2.0.0-beta.5":
-  version "2.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-beta.5.tgz#c5980e3e6d22a1811483577bcfbcc2c4493c4a73"
-  integrity sha512-ohWcS277p/3KHK5di6UskDZK8hsaZ7hzsJiMl1f0jI+boeaq53MqwA9c8VaHsJrmJEOjNH0Y3QDzyU7LTXpKNQ==
+"@vue/test-utils@^2.0.0-beta.6":
+  version "2.0.0-beta.6"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-beta.6.tgz#2f7a653b0025cd4236968269c5972e807fa1fb2c"
+  integrity sha512-nBj5HHoTD+2xg0OQ93p/Hil5SkFUcNJ5BA2RUnHlOH6a4PVskgMK8dOLyVcZ1ZJif7knjt7yQVJ6K6YwIzeR1A==

 "@webassemblyjs/ast@1.9.0":
  version "1.9.0"
@@ -2444,7 +2491,7 @@ ansi-escapes@^3.0.0:
  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==

-ansi-escapes@^4.2.1:
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
  version "4.3.1"
  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
  integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
@@ -2650,6 +2697,11 @@ astral-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==

+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-each@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -3320,11 +3372,16 @@ camelcase@^6.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==

-caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001131:
+caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001131:
  version "1.0.30001131"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz#afad8a28fc2b7a0d3ae9407e71085a0ead905d54"
  integrity sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==

+caniuse-lite@^1.0.30001109:
+  version "1.0.30001140"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001140.tgz#30dae27599f6ede2603a0962c82e468bca894232"
+  integrity sha512-xFtvBtfGrpjTOxTpjP5F2LmN04/ZGfYV8EQzUIC/RmKpdrmzJrjqlJ4ho7sGuAMPko2/Jl08h7x9uObCfBFaAA==
+
 capture-exit@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3501,6 +3558,14 @@ cli-spinners@^2.0.0, cli-spinners@^2.2.0:
  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
  integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==

+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
 cli-width@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
@@ -3627,6 +3692,11 @@ commander@^5.0.0:
  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==

+commander@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
+  integrity sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==
+
 commondir@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -3911,7 +3981,7 @@ css-unit-converter@^1.1.1:
  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==

-css.escape@^1.5.0:
+css.escape@^1.5.0, css.escape@^1.5.1:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
@@ -3926,6 +3996,15 @@ css@^2.0.0:
    source-map-resolve "^0.5.2"
    urix "^0.1.0"

+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssesc@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -4089,6 +4168,11 @@ decode-uri-component@^0.2.0:
  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=

+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -4212,6 +4296,11 @@ diff-sequences@^24.9.0:
  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==

+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
+
 diff-sequences@^26.3.0:
  version "26.3.0"
  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.3.0.tgz#62a59b1b29ab7fd27cef2a33ae52abe73042d0a2"
@@ -4457,7 +4546,7 @@ enhanced-resolve@^4.3.0:
    memory-fs "^0.5.0"
    tapable "^1.0.0"

-enquirer@^2.3.4:
+enquirer@^2.3.4, enquirer@^2.3.6:
  version "2.3.6"
  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -4895,7 +4984,7 @@ execa@^1.0.0:
    signal-exit "^3.0.0"
    strip-eof "^1.0.0"

-execa@^4.0.0, execa@^4.0.1:
+execa@^4.0.0, execa@^4.0.1, execa@^4.0.3:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
  integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
@@ -5063,7 +5152,7 @@ figgy-pudding@^3.5.1:
  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==

-figures@^3.0.0:
+figures@^3.0.0, figures@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
@@ -5199,14 +5288,14 @@ fragment-cache@^0.2.1:
  dependencies:
    map-cache "^0.2.2"

-framer-motion@^2.6.13:
-  version "2.6.15"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.6.15.tgz#08e8aae96f199ed1a40a8414458b455101301d6d"
-  integrity sha512-S9q1adpF0ZEoKQfI3SC3V4EAWnxa8JmHh+8H7fNgBWmiGOR9+BtglEhDcRx8/ylnb+H+uqM50RryonsnGV6U1A==
+framer-motion@^2.7.6:
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.7.6.tgz#ab88b432576f25542c15932e1daf1b3a7d130176"
+  integrity sha512-FhoU46MHqD0deJ5GRr9I8wKGTVftVtW+upT1uiqhmxWE0zzmcv4sAgdYAUTpMG9nZJf4FeFuItNxLElmcA/Clw==
  dependencies:
    framesync "^4.1.0"
    hey-listen "^1.0.8"
-    popmotion "9.0.0-rc.14"
+    popmotion "9.0.0-rc.19"
    style-value-types "^3.1.9"
    tslib "^1.10.0"
  optionalDependencies:
@@ -5313,6 +5402,11 @@ get-caller-file@^2.0.1:
  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==

+get-own-enumerable-property-symbols@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
+
 get-package-type@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -6058,6 +6152,11 @@ is-number@^7.0.0:
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

+is-obj@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -6084,6 +6183,11 @@ is-regex@^1.1.0, is-regex@^1.1.1:
  dependencies:
    has-symbols "^1.0.1"

+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -6371,6 +6475,16 @@ jest-diff@^24.3.0, jest-diff@^24.9.0:
    jest-get-type "^24.9.0"
    pretty-format "^24.9.0"

+jest-diff@^25.2.1:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
+  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
+  dependencies:
+    chalk "^3.0.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.0"
+
 jest-diff@^26.1.0, jest-diff@^26.4.2:
  version "26.4.2"
  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.4.2.tgz#a1b7b303bcc534aabdb3bd4a7caf594ac059f5aa"
@@ -6470,6 +6584,11 @@ jest-get-type@^24.9.0:
  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==

+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
+
 jest-get-type@^26.3.0:
  version "26.3.0"
  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
@@ -7346,6 +7465,41 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

+lint-staged@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.4.0.tgz#d18628f737328e0bbbf87d183f4020930e9a984e"
+  integrity sha512-uaiX4U5yERUSiIEQc329vhCTDDwUcSvKdRLsNomkYLRzijk3v8V9GWm2Nz0RMVB87VcuzLvtgy6OsjoH++QHIg==
+  dependencies:
+    chalk "^4.1.0"
+    cli-truncate "^2.1.0"
+    commander "^6.0.0"
+    cosmiconfig "^7.0.0"
+    debug "^4.1.1"
+    dedent "^0.7.0"
+    enquirer "^2.3.6"
+    execa "^4.0.3"
+    listr2 "^2.6.0"
+    log-symbols "^4.0.0"
+    micromatch "^4.0.2"
+    normalize-path "^3.0.0"
+    please-upgrade-node "^3.2.0"
+    string-argv "0.3.1"
+    stringify-object "^3.3.0"
+
+listr2@^2.6.0:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.6.2.tgz#4912eb01e1e2dd72ec37f3895a56bf2622d6f36a"
+  integrity sha512-6x6pKEMs8DSIpA/tixiYY2m/GcbgMplMVmhQAaLFxEtNSKLeWTGjtmU57xvv6QCm2XcqzyNXL/cTSVf4IChCRA==
+  dependencies:
+    chalk "^4.1.0"
+    cli-truncate "^2.1.0"
+    figures "^3.2.0"
+    indent-string "^4.0.0"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rxjs "^6.6.2"
+    through "^2.3.8"
+
 load-json-file@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
@@ -7465,6 +7619,13 @@ log-symbols@^3.0.0:
  dependencies:
    chalk "^2.4.2"

+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
+  dependencies:
+    chalk "^4.0.0"
+
 log-update@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
@@ -7474,6 +7635,16 @@ log-update@^2.3.0:
    cli-cursor "^2.0.0"
    wrap-ansi "^3.0.1"

+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+  dependencies:
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7658,6 +7829,11 @@ mimic-fn@^2.1.0:
  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==

+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 mini-svg-data-uri@^1.0.3:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
@@ -8345,6 +8521,13 @@ p-map@^3.0.0:
  dependencies:
    aggregate-error "^3.0.0"

+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-reduce@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
@@ -8612,10 +8795,10 @@ pnp-webpack-plugin@1.6.4:
  dependencies:
    ts-pnp "^1.1.6"

-popmotion@9.0.0-rc.14:
-  version "9.0.0-rc.14"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.14.tgz#e57351b7b85a3e42b7a16affbbd440138797c11f"
-  integrity sha512-zdMw1OSKjFBH+KKpZx7P+cGSUb3QCqg5QD12f6llucUeEFT+SDZYxvTY09JI23ZcJyzxgKFT1anbLq0eZ9bj3g==
+popmotion@9.0.0-rc.19:
+  version "9.0.0-rc.19"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.19.tgz#24b28d9d4481536da699af77841d04bc5351f1d5"
+  integrity sha512-rmXYVzkFPHZAqTgnlrif2Wiojv2qOra0IFb22Md/Uogqi7ZLPi7EoVbZzwQxoSpbeixWx8+yr4LamAXqsFj4OQ==
  dependencies:
    framesync "^4.1.0"
    hey-listen "^1.0.8"
@@ -8779,7 +8962,7 @@ postcss@^6.0.9:
    source-map "^0.6.1"
    supports-color "^5.4.0"

-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.28, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.28, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
  version "7.0.34"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
@@ -8788,6 +8971,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.1
    source-map "^0.6.1"
    supports-color "^6.1.0"

+postcss@^7.0.11, postcss@^7.0.18:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -8815,7 +9007,7 @@ pretty-format@^24.9.0:
    ansi-styles "^3.2.0"
    react-is "^16.8.4"

-pretty-format@^25.5.0:
+pretty-format@^25.2.1, pretty-format@^25.5.0:
  version "25.5.0"
  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
@@ -9156,6 +9348,14 @@ rechoir@^0.6.2:
  dependencies:
    resolve "^1.1.6"

+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 reduce-css-calc@^2.1.6:
  version "2.1.7"
  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
@@ -9572,7 +9772,7 @@ run-queue@^1.0.0, run-queue@^1.0.3:
  dependencies:
    aproba "^1.1.1"

-rxjs@^6.6.0:
+rxjs@^6.6.0, rxjs@^6.6.2:
  version "6.6.3"
  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
  integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
@@ -9871,6 +10071,24 @@ slice-ansi@^2.1.0:
    astral-regex "^1.0.0"
    is-fullwidth-code-point "^2.0.0"

+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 snapdragon-node@^2.0.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -9926,6 +10144,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
    source-map-url "^0.4.0"
    urix "^0.1.0"

+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.5.6, source-map-support@~0.5.12:
  version "0.5.19"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -10111,6 +10337,11 @@ stream-shift@^1.0.0:
  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==

+string-argv@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
 string-hash@1.1.3, string-hash@^1.1.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
@@ -10208,6 +10439,15 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

+stringify-object@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+  dependencies:
+    get-own-enumerable-property-symbols "^3.0.0"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
 strip-ansi@6.0.0, strip-ansi@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -10256,6 +10496,13 @@ strip-final-newline@^2.0.0:
  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==

+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^3.0.1:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -10471,7 +10718,7 @@ through2@^2.0.0:
    readable-stream "~2.3.6"
    xtend "~4.0.1"

-through@^2.3.6:
+through@^2.3.6, through@^2.3.8:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -11065,10 +11312,10 @@ vue-router@^3.0:
  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
  integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==

-vue-router@^4.0.0-beta.10:
-  version "4.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-beta.10.tgz#45f9e6fee6fcc7094b696e90c2c9f76c3aaf40ed"
-  integrity sha512-y3YxV8rO9e4mgFqdyskytRMLzwbxR65ZaAW59xZL+T3M3kHX5p+/XB6j7K5cVm/EgZFOLRb+Zht3ShVaEonn/A==
+vue-router@^4.0.0-beta.12:
+  version "4.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-beta.12.tgz#873d1bbd16882ab2ae35973e3e691412104f3914"
+  integrity sha512-prbqAs2hSlKGt3U/Iyq8G62q/oprwmEd//a6x5M1uqP1aZxwjq0s27ZG8hfUSOOPB7SYg4NOydwy6zi/b3S2Ww==

 vue@^2.6.10:
  version "2.6.12"