diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 9ffdbb6..8f65b01 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
-- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
+- Prevent default behavior when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
 - Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
 - Ensure `children` prop of `Field` component can be a render prop ([#2941](https://github.com/tailwindlabs/headlessui/pull/2941))
 - Add `hidden` attribute to internal `<Hidden />` component when the `Features.Hidden` feature is used ([#2955](https://github.com/tailwindlabs/headlessui/pull/2955))
@@ -118,7 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure the caret is in a consistent position when syncing the `Combobox.Input` value ([#2568](https://github.com/tailwindlabs/headlessui/pull/2568))
-- Improve "outside click" behaviour in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
+- Improve "outside click" behavior in combination with 3rd party libraries ([#2572](https://github.com/tailwindlabs/headlessui/pull/2572))
 - Ensure IME works on Android devices ([#2580](https://github.com/tailwindlabs/headlessui/pull/2580))
 - Calculate `aria-expanded` purely based on the open/closed state ([#2610](https://github.com/tailwindlabs/headlessui/pull/2610))
 - Submit form on `Enter` even if no submit-like button was found ([#2613](https://github.com/tailwindlabs/headlessui/pull/2613))
@@ -376,7 +376,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix closing of `Popover.Panel` in React 18 ([#1409](https://github.com/tailwindlabs/headlessui/pull/1409))
 - Ignore `Escape` when event got prevented in `Dialog` component ([#1424](https://github.com/tailwindlabs/headlessui/pull/1424))
-- Improve `FocusTrap` behaviour ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
+- Improve `FocusTrap` behavior ([#1432](https://github.com/tailwindlabs/headlessui/pull/1432))
 - Simplify `Popover` Tab logic by using sentinel nodes instead of keydown event interception ([#1440](https://github.com/tailwindlabs/headlessui/pull/1440))
 - Ensure the `Popover.Panel` is clickable without closing the `Popover` ([#1443](https://github.com/tailwindlabs/headlessui/pull/1443))
 - Improve "Scroll lock" scrollbar width for `Dialog` component ([#1457](https://github.com/tailwindlabs/headlessui/pull/1457))
@@ -434,7 +434,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure correct order when conditionally rendering `Menu.Item`, `Listbox.Option` and `RadioGroup.Option` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
-- Improve controlled Tabs behaviour ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
+- Improve controlled Tabs behavior ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
 - Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
 - Improve overal codebase, use modern tech like `esbuild` and TypeScript 4! ([#1055](https://github.com/tailwindlabs/headlessui/pull/1055))
 - Improve build files ([#1078](https://github.com/tailwindlabs/headlessui/pull/1078))
@@ -513,7 +513,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improve SSR for `Dialog` ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
 - Delay focus trap initialization ([#477](https://github.com/tailwindlabs/headlessui/pull/477))
-- Improve incorrect behaviour for nesting `Dialog` components ([#560](https://github.com/tailwindlabs/headlessui/pull/560))
+- Improve incorrect behavior for nesting `Dialog` components ([#560](https://github.com/tailwindlabs/headlessui/pull/560))
 
 ## [1.1.1] - 2021-04-28
 
@@ -577,7 +577,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `Switch` has `type="button"` ([#192](https://github.com/tailwindlabs/headlessui/pull/192))
 - Fix `useId()` hook returning `undefined` on the client
 - Fix `disabled` not working when inside a disabled fieldset ([#202](https://github.com/tailwindlabs/headlessui/pull/202))
-- Trigger "outside click" behaviour on mousedown ([#212](https://github.com/tailwindlabs/headlessui/pull/212))
+- Trigger "outside click" behavior on mousedown ([#212](https://github.com/tailwindlabs/headlessui/pull/212))
 - Ensure the `active` MenuItem is scrolled into view
 - Ensure valid Menu accessibility tree ([#228](https://github.com/tailwindlabs/headlessui/pull/228))
 
@@ -606,8 +606,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixes
 
-- Fix outside click behaviour. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
-- Ensure when using keyboard navigation we prevent the default behaviour.
+- Fix outside click behavior. If you had multiple menu's, when menu 1 is open, menu 2 is closed and you click on menu button 2 it will open both menu's. This is now fixed.
+- Ensure when using keyboard navigation we prevent the default behavior.
 
 ## [0.1.2] - 2020-09-25
 
diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx
index 7c1c60e..623fcdb 100644
--- a/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx
+++ b/packages/@headlessui-react/src/components/checkbox/checkbox.test.tsx
@@ -159,7 +159,7 @@ describe('Form submissions', () => {
     // Submit
     await press(Keys.Enter)
 
-    // Notifications should be off (or in this case, non-existant)
+    // Notifications should be off (or in this case, non-existent)
     expect(handleSubmission).toHaveBeenLastCalledWith({})
   })
 })
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 249858a..0556083 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1096,7 +1096,7 @@ function InputFn<
 
         // When the user is still in the middle of composing by using an IME, then we don't want to
         // submit this value and close the Combobox yet. Instead, we will fallback to the default
-        // behaviour which is to "end" the composition.
+        // behavior which is to "end" the composition.
         if (isComposing.current) return
 
         event.preventDefault()
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
index 5ed2ac7..2c9f4b2 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.test.tsx
@@ -174,7 +174,7 @@ describe('Rendering', () => {
               <Dialog
                 open={isOpen}
                 onClose={setIsOpen}
-                // @ts-expect-error: We explicitly type role to only accept valid options — but we still want to verify runtime behaviorr
+                // @ts-expect-error: We explicitly type role to only accept valid options — but we still want to verify runtime behavior
                 role="foobar"
               >
                 <TabSentinel />
@@ -1771,7 +1771,7 @@ describe('Mouse interactions', () => {
             <button id="trigger" onClick={() => setIsOpen((v) => !v)}>
               Trigger
             </button>
-            <div id="imoutside">this thing</div>
+            <div id="i-am-outside">this thing</div>
             <Dialog autoFocus={false} open={isOpen} onClose={setIsOpen}>
               <Dialog.Backdrop />
               <Dialog.Panel>
@@ -1791,12 +1791,12 @@ describe('Mouse interactions', () => {
       assertDialog({ state: DialogState.Visible })
 
       // Start a click inside the dialog and end it outside
-      await mouseDrag(document.getElementById('inside'), document.getElementById('imoutside'))
+      await mouseDrag(document.getElementById('inside'), document.getElementById('i-am-outside'))
 
       // It should not have hidden
       assertDialog({ state: DialogState.Visible })
 
-      await click(document.getElementById('imoutside'))
+      await click(document.getElementById('i-am-outside'))
 
       // It's gone
       assertDialog({ state: DialogState.InvisibleUnmounted })
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 6b573c2..79685de 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -239,7 +239,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
   let hasParentDialog = useContext(DialogContext) !== null
   let [portals, PortalWrapper] = useNestedPortals()
 
-  // We use this because reading these values during iniital render(s)
+  // We use this because reading these values during initial render(s)
   // can result in `null` rather then the actual elements
   // This doesn't happen when using certain components like a
   // `<Dialog.Title>` because they cause the parent to re-render
@@ -259,7 +259,7 @@ function DialogFn<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
   })
 
   // If there are multiple dialogs, then you can be the root, the leaf or one
-  // in between. We only care abou whether you are the top most one or not.
+  // in between. We only care about whether you are the top most one or not.
   let position = !hasNestedDialogs ? 'leaf' : 'parent'
 
   // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
index 2f99355..36a5896 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
@@ -156,7 +156,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         render(
           <>
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Disclosure>
               {({ close }) => (
                 <>
@@ -187,8 +187,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -199,7 +199,7 @@ describe('Rendering', () => {
           let elementRef = useRef(null)
           return (
             <>
-              <button ref={elementRef}>restoreable</button>
+              <button ref={elementRef}>restorable</button>
               <Disclosure>
                 {({ close }) => (
                   <>
@@ -231,8 +231,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -501,7 +501,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         render(
           <>
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Disclosure>
               <Disclosure.Button>Trigger</Disclosure.Button>
               <Disclosure.Panel>
@@ -528,8 +528,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -540,7 +540,7 @@ describe('Rendering', () => {
           let elementRef = useRef(null)
           return (
             <>
-              <button ref={elementRef}>restoreable</button>
+              <button ref={elementRef}>restorable</button>
               <Disclosure>
                 <Disclosure.Button>Trigger</Disclosure.Button>
                 <Disclosure.Panel>
@@ -568,8 +568,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
index 22eefca..a793444 100644
--- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
+++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
@@ -332,7 +332,7 @@ function useInitialFocus(
     // There is an additional issue with doing this immediately. The FocusTrap is used inside a
     // Dialog, the Dialog is rendered inside of a Portal and the Portal is rendered at the end of
     // the `document.body`. This means that the moment we call focus, the browser immediately
-    // tries to focus the element, which will still be at the bodem resulting in the page to
+    // tries to focus the element, which will still be at the bottom resulting in the page to
     // scroll down. Delaying this will prevent the page to scroll down entirely.
     microTask(() => {
       if (!mounted.current) {
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
index b06c177..8fa5cb5 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
@@ -1490,7 +1490,7 @@ describe('Composition', () => {
 describe('Keyboard interactions', () => {
   describe('`Enter` key', () => {
     it(
-      'should be possible to close the listbox with Enter when there is no active listboxoption',
+      'should be possible to close the listbox with Enter when there is no active listbox option',
       suppressConsoleLogs(async () => {
         render(
           <Listbox value={undefined} onChange={(x) => console.log(x)}>
@@ -3474,7 +3474,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should be possible to search for the next occurence',
+      'should be possible to search for the next occurrence',
       suppressConsoleLogs(async () => {
         render(
           <Listbox value={undefined} onChange={(x) => console.log(x)}>
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index 852a3ec..cb2b6e1 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -218,8 +218,9 @@ let reducers: {
 
     // Optimization:
     //
-    // If the current DOM node and the previous DOM node are next to eachother, or if the previous
-    // DOM node is already the first DOM node, then we don't have to sort all the DOM nodes.
+    // If the current DOM node and the previous DOM node are next to each other,
+    // or if the previous DOM node is already the first DOM node, then we don't
+    // have to sort all the DOM nodes.
     else if (action.focus === Focus.Previous) {
       let activeOptionIdx = state.activeOptionIndex
       if (activeOptionIdx !== null) {
@@ -233,7 +234,7 @@ let reducers: {
         if (previousOptionIndex !== null) {
           let previousDom = state.options[previousOptionIndex].dataRef.current.domRef
           if (
-            // Next to eachother
+            // Next to each other
             currentDom.current?.previousElementSibling === previousDom.current ||
             // Or already the first element
             previousDom.current?.previousElementSibling === null
@@ -249,8 +250,9 @@ let reducers: {
 
     // Optimization:
     //
-    // If the current DOM node and the next DOM node are next to eachother, or if the next DOM node
-    // is already the last DOM node, then we don't have to sort all the DOM nodes.
+    // If the current DOM node and the next DOM node are next to each other, or
+    // if the next DOM node is already the last DOM node, then we don't have to
+    // sort all the DOM nodes.
     else if (action.focus === Focus.Next) {
       let activeOptionIdx = state.activeOptionIndex
       if (activeOptionIdx !== null) {
@@ -264,7 +266,7 @@ let reducers: {
         if (nextOptionIndex !== null) {
           let nextDom = state.options[nextOptionIndex].dataRef.current.domRef
           if (
-            // Next to eachother
+            // Next to each other
             currentDom.current?.nextElementSibling === nextDom.current ||
             // Or already the last element
             nextDom.current?.nextElementSibling === null
diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx
index 3646ee4..7b0c085 100644
--- a/packages/@headlessui-react/src/components/menu/menu.test.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.test.tsx
@@ -2706,7 +2706,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should be possible to search for the next occurence',
+      'should be possible to search for the next occurrence',
       suppressConsoleLogs(async () => {
         render(
           <Menu>
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 0aa6dcd..46c2953 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -199,8 +199,9 @@ let reducers: {
 
     // Optimization:
     //
-    // If the current DOM node and the previous DOM node are next to eachother, or if the previous
-    // DOM node is already the first DOM node, then we don't have to sort all the DOM nodes.
+    // If the current DOM node and the previous DOM node are next to each other,
+    // or if the previous DOM node is already the first DOM node, then we don't
+    // have to sort all the DOM nodes.
     else if (action.focus === Focus.Previous) {
       let activeItemIdx = state.activeItemIndex
       if (activeItemIdx !== null) {
@@ -214,7 +215,7 @@ let reducers: {
         if (previousItemIndex !== null) {
           let previousDom = state.items[previousItemIndex].dataRef.current.domRef
           if (
-            // Next to eachother
+            // Next to each other
             currentDom.current?.previousElementSibling === previousDom.current ||
             // Or already the first element
             previousDom.current?.previousElementSibling === null
@@ -230,8 +231,9 @@ let reducers: {
 
     // Optimization:
     //
-    // If the current DOM node and the next DOM node are next to eachother, or if the next DOM node
-    // is already the last DOM node, then we don't have to sort all the DOM nodes.
+    // If the current DOM node and the next DOM node are next to each other, or
+    // if the next DOM node is already the last DOM node, then we don't have to
+    // sort all the DOM nodes.
     else if (action.focus === Focus.Next) {
       let activeItemIdx = state.activeItemIndex
       if (activeItemIdx !== null) {
@@ -245,7 +247,7 @@ let reducers: {
         if (nextItemIndex !== null) {
           let nextDom = state.items[nextItemIndex].dataRef.current.domRef
           if (
-            // Next to eachother
+            // Next to each other
             currentDom.current?.nextElementSibling === nextDom.current ||
             // Or already the last element
             nextDom.current?.nextElementSibling === null
diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
index 405778a..126902f 100644
--- a/packages/@headlessui-react/src/components/popover/popover.test.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -188,7 +188,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         render(
           <>
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Popover>
               {({ close }) => (
                 <>
@@ -219,8 +219,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -231,7 +231,7 @@ describe('Rendering', () => {
           let elementRef = useRef(null)
           return (
             <>
-              <button ref={elementRef}>restoreable</button>
+              <button ref={elementRef}>restorable</button>
               <Popover>
                 {({ close }) => (
                   <>
@@ -263,8 +263,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -740,7 +740,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         render(
           <>
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Popover>
               <Popover.Button>Trigger</Popover.Button>
               <Popover.Panel>
@@ -767,8 +767,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -779,7 +779,7 @@ describe('Rendering', () => {
           let elementRef = useRef(null)
           return (
             <>
-              <button ref={elementRef}>restoreable</button>
+              <button ref={elementRef}>restorable</button>
               <Popover>
                 <Popover.Button>Trigger</Popover.Button>
                 <Popover.Panel>
@@ -807,8 +807,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
@@ -1873,7 +1873,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristc based portal)',
+      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristic based portal)',
       suppressConsoleLogs(async () => {
         function Example() {
           let [portal, setPortal] = useState<HTMLElement | null>(null)
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index e9554e3..3c67bf5 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -189,8 +189,8 @@ function usePopoverAPIContext(component: string) {
 }
 
 let PopoverGroupContext = createContext<{
-  registerPopover(registerbag: PopoverRegisterBag): void
-  unregisterPopover(registerbag: PopoverRegisterBag): void
+  registerPopover(registerBag: PopoverRegisterBag): void
+  unregisterPopover(registerBag: PopoverRegisterBag): void
   isFocusWithinPopoverGroup(): boolean
   closeOthers(buttonId: string): void
   mainTreeNodeRef: MutableRefObject<HTMLElement | null>
@@ -282,10 +282,11 @@ function PopoverFn<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
       }
     }
 
-    // Use another heuristic to try and calculate wether or not the focusable elements are near
-    // eachother (aka, following the default focus/tab order from the browser). If they are then it
-    // doesn't really matter if they are portalled or not because we can follow the default tab
-    // order. But if they are not, then we can consider it being portalled so that we can ensure
+    // Use another heuristic to try and calculate wether or not the focusable
+    // elements are near each other (aka, following the default focus/tab order
+    // from the browser). If they are then it doesn't really matter if they are
+    // portalled or not because we can follow the default tab order. But if they
+    // are not, then we can consider it being portalled so that we can ensure
     // that tab and shift+tab (hopefully) go to the correct spot.
     let elements = getFocusableElements()
     let buttonIdx = elements.indexOf(button)
@@ -1086,9 +1087,9 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
   let [popovers, setPopovers] = useState<PopoverRegisterBag[]>([])
   let root = useMainTreeNode()
 
-  let unregisterPopover = useEvent((registerbag: PopoverRegisterBag) => {
+  let unregisterPopover = useEvent((registerBag: PopoverRegisterBag) => {
     setPopovers((existing) => {
-      let idx = existing.indexOf(registerbag)
+      let idx = existing.indexOf(registerBag)
       if (idx !== -1) {
         let clone = existing.slice()
         clone.splice(idx, 1)
@@ -1098,9 +1099,9 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     })
   })
 
-  let registerPopover = useEvent((registerbag: PopoverRegisterBag) => {
-    setPopovers((existing) => [...existing, registerbag])
-    return () => unregisterPopover(registerbag)
+  let registerPopover = useEvent((registerBag: PopoverRegisterBag) => {
+    setPopovers((existing) => [...existing, registerBag])
+    return () => unregisterPopover(registerBag)
   })
 
   let isFocusWithinPopoverGroup = useEvent(() => {
diff --git a/packages/@headlessui-react/src/components/switch/switch.test.tsx b/packages/@headlessui-react/src/components/switch/switch.test.tsx
index 06d2c46..308121b 100644
--- a/packages/@headlessui-react/src/components/switch/switch.test.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.test.tsx
@@ -196,7 +196,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case, non-existant)
+      // Notifications should be off (or in this case, non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -235,7 +235,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case, non-existant)
+      // Notifications should be off (or in this case, non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -265,7 +265,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case non-existant)
+      // Notifications should be off (or in this case non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -669,7 +669,7 @@ describe('Mouse interactions', () => {
   })
 
   xit('should be possible to hover the label and trigger a hover on the switch', async () => {
-    // This test doen't work in JSDOM :(
+    // This test doesn't work in JSDOM :(
     // Keeping it here for reference when we can test this in a real browser
     function Example() {
       let [state] = useState(false)
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
index e2da039..37ec8fc 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.test.tsx
@@ -1074,13 +1074,13 @@ describe('Rendering', () => {
 
         assertActiveElement(document.body)
 
-        // test controlled behaviour
+        // test controlled behavior
         await click(getByText('setSelectedIndex'))
         assertTabs({ active: 1 })
         await click(getByText('setSelectedIndex'))
         assertTabs({ active: 2 })
 
-        // test uncontrolled behaviour again
+        // test uncontrolled behavior again
         await click(getByText('Tab 1'))
         assertTabs({ active: 2 }) // Should still be Tab 3 because `selectedIndex` didn't update
         await click(getByText('Tab 2'))
@@ -1133,17 +1133,17 @@ describe('Rendering', () => {
 
         assertActiveElement(document.body)
 
-        // test uncontrolled behaviour
+        // test uncontrolled behavior
         await click(getByText('Tab 2'))
         expect(handleChange).toHaveBeenCalledTimes(1)
         expect(handleChange).toHaveBeenNthCalledWith(1, 1)
         assertTabs({ active: 1 })
 
-        // test controlled behaviour
+        // test controlled behavior
         await click(getByText('setSelectedIndex'))
         assertTabs({ active: 2 })
 
-        // test uncontrolled behaviour again
+        // test uncontrolled behavior again
         await click(getByText('Tab 2'))
         expect(handleChange).toHaveBeenCalledTimes(2)
         expect(handleChange).toHaveBeenNthCalledWith(2, 1)
diff --git a/packages/@headlessui-react/src/components/tooltip/tooltip.tsx b/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
index 99f57f7..efbe7c8 100644
--- a/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
+++ b/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
@@ -251,7 +251,7 @@ function TooltipFn<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(
       when = When.Immediate
     }
 
-    // This tooltip should be immediatley visible, therefore it should be the active tooltip.
+    // This tooltip should be immediately visible, therefore it should be the active tooltip.
     if (when === When.Immediate) {
       tooltipStore.setTooltipId(id)
     }
@@ -259,7 +259,7 @@ function TooltipFn<TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(
     dispatch({ type: ActionTypes.ShowTooltip, when })
   })
   let hideTooltip = useEvent((when: When) => {
-    // We are the current active tooltip and we need to be hidden immediatlely, therefore there
+    // We are the current active tooltip and we need to be hidden immediately, therefore there
     // should not be any active tooltip anymore.
     if (activeTooltipId === id && when === When.Immediate) {
       tooltipStore.setTooltipId(null)
diff --git a/packages/@headlessui-react/src/components/transition/transition.test.tsx b/packages/@headlessui-react/src/components/transition/transition.test.tsx
index 2b1b10e..f40f34d 100644
--- a/packages/@headlessui-react/src/components/transition/transition.test.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.test.tsx
@@ -334,7 +334,7 @@ describe('Setup API', () => {
 
       // TODO: This is not quite right
       // The `foo1\nfoo2` should be gone
-      // I think this is a qurk of JSDOM
+      // I think this is a quirk of JSDOM
       expect(container.firstChild).toMatchInlineSnapshot(`
         <div>
           <button>
@@ -754,7 +754,7 @@ describe('Transitions', () => {
               null, // Initial render
               null, // Setup leave classes
               fastLeaveDuration, // Done with fast leave
-              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
+              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
             ]
           },
         ])
@@ -804,7 +804,7 @@ describe('Transitions', () => {
               null, // Initial render
               null, // Setup leave classes
               fastLeaveDuration, // Done with fast leave
-              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
+              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
             ]
           },
         ])
diff --git a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
index 2c577e3..c8228e3 100644
--- a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
+++ b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
@@ -24,7 +24,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
         // have `scroll-behavior: smooth` set, then changing the scrollTop in any way shape or form
         // will trigger a "smooth" scroll and the new position would be incorrect.
         //
-        // This is why we are forcing the `scroll-behaviour: auto` here, and then restoring it later.
+        // This is why we are forcing the `scroll-behavior: auto` here, and then restoring it later.
         // We have to be a bit careful, because removing `scroll-behavior: auto` back to
         // `scroll-behavior: smooth` can start triggering smooth scrolling. Delaying this by a
         // microTask will guarantee that everything is done such that both enter/exit of the Dialog is
@@ -125,7 +125,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
                   scrollableParent = scrollableParent.parentElement
                 }
 
-                // We crawled up the tree until the beginnging of the Portal, let's prevent the
+                // We crawled up the tree until the beginning of the Portal, let's prevent the
                 // event if this is the case. If not, then we are in a container where we are
                 // allowed to scroll so we don't have to prevent the event.
                 if (scrollableParent.dataset.headlessuiPortal === '') {
diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts
index dd9e7eb..6b01625 100644
--- a/packages/@headlessui-react/src/hooks/use-outside-click.ts
+++ b/packages/@headlessui-react/src/hooks/use-outside-click.ts
@@ -36,7 +36,7 @@ export function useOutsideClick(
 
     // Check whether the event got prevented already. This can happen if you use the
     // useOutsideClick hook in both a Dialog and a Menu and the inner Menu "cancels" the default
-    // behaviour so that only the Menu closes and not the Dialog (yet)
+    // behavior so that only the Menu closes and not the Dialog (yet)
     if (event.defaultPrevented) return
 
     let target = resolveTarget(event)
@@ -85,7 +85,7 @@ export function useOutsideClick(
     // This allows us to check whether the event was defaultPrevented when you are nesting this
     // inside a `<Dialog />` for example.
     if (
-      // This check alllows us to know whether or not we clicked on a "focusable" element like a
+      // This check allows us to know whether or not we clicked on a "focusable" element like a
       // button or an input. This is a backwards compatibility check so that you can open a <Menu
       // /> and click on another <Menu /> which should close Menu A and open Menu B. We might
       // revisit that so that you will require 2 clicks instead.
diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx
index 2aeea1b..75dab82 100644
--- a/packages/@headlessui-react/src/internal/floating.tsx
+++ b/packages/@headlessui-react/src/internal/floating.tsx
@@ -312,8 +312,9 @@ export function FloatingProvider({
 
   // Calculate placement information to expose as data attributes
   let [exposedTo = to, exposedAlign = align] = context.placement.split('-')
-  // If userland code is using custom styles specifically for `bottom`, but they chose `selection`,
-  // then we want to make sure to map it to selection again otherwise styles could be wrong.
+  // If user-land code is using custom styles specifically for `bottom`, but
+  // they chose `selection`, then we want to make sure to map it to selection
+  // again otherwise styles could be wrong.
   if (to === 'selection') exposedTo = 'selection'
 
   let data = useMemo(
diff --git a/packages/@headlessui-react/src/internal/modal.tsx b/packages/@headlessui-react/src/internal/modal.tsx
index c0e8ffc..75cbdbd 100644
--- a/packages/@headlessui-react/src/internal/modal.tsx
+++ b/packages/@headlessui-react/src/internal/modal.tsx
@@ -121,7 +121,7 @@ function ModalFn<TTag extends ElementType = typeof DEFAULT_MODAL_TAG>(
 
   let [portals, PortalWrapper] = useNestedPortals()
 
-  // We use this because reading these values during iniital render(s)
+  // We use this because reading these values during initial render(s)
   // can result in `null` rather then the actual elements
   let defaultContainer: RefObject<HTMLElement> = {
     get current() {
diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
index cf30183..f48e303 100644
--- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
+++ b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
@@ -161,9 +161,9 @@ export function assertLinkedWithDescription(
 
     expect(element).toHaveAttribute('aria-describedby')
 
-    let descriptionledBy = new Set(element.getAttribute('aria-describedby')?.split(' ') ?? [])
+    let describedby = new Set(element.getAttribute('aria-describedby')?.split(' ') ?? [])
     for (let description of descriptions) {
-      expect(descriptionledBy).toContain(description.id)
+      expect(describedby).toContain(description.id)
     }
   } catch (err) {
     if (err instanceof Error) Error.captureStackTrace(err, assertLinkedWithDescription)
diff --git a/packages/@headlessui-react/src/test-utils/execute-timeline.ts b/packages/@headlessui-react/src/test-utils/execute-timeline.ts
index 9a6c979..106a886 100644
--- a/packages/@headlessui-react/src/test-utils/execute-timeline.ts
+++ b/packages/@headlessui-react/src/test-utils/execute-timeline.ts
@@ -89,7 +89,7 @@ export async function executeTimeline(
       return snapshot.content !== snapshots[i - 1].content
     })
 
-    // Add a relative time compaired to the previous snapshot. We recorded everything in
+    // Add a relative time compared to the previous snapshot. We recorded everything in
     // process.hrtime.bigint() which is in nanoseconds, we want it in milliseconds.
     .map((snapshot, i, all) => ({
       ...snapshot,
diff --git a/packages/@headlessui-react/src/test-utils/scenarios.tsx b/packages/@headlessui-react/src/test-utils/scenarios.tsx
index c576a43..b3f3081 100644
--- a/packages/@headlessui-react/src/test-utils/scenarios.tsx
+++ b/packages/@headlessui-react/src/test-utils/scenarios.tsx
@@ -253,7 +253,7 @@ export function commonFormScenarios(
           </form>
         )
 
-        // Submit the form to get the intial state of the form
+        // Submit the form to get the initial state of the form
         await click(screen.getByText('Submit'))
         let formState = Object.fromEntries(formDataMock.mock.calls[0][0])
 
diff --git a/packages/@headlessui-react/src/types.ts b/packages/@headlessui-react/src/types.ts
index 11dfd81..cbd9b9a 100644
--- a/packages/@headlessui-react/src/types.ts
+++ b/packages/@headlessui-react/src/types.ts
@@ -44,7 +44,7 @@ type ClassNameOverride<TTag extends ReactTag, TSlot = {}> =
     ? { className?: PropsOf<TTag>['className'] | ((bag: TSlot) => string) }
     : {}
 
-// Provide clean TypeScript props, which exposes some of our custom API's.
+// Provide clean TypeScript props, which exposes some of our custom APIs.
 export type Props<
   TTag extends ReactTag,
   TSlot = {},
diff --git a/packages/@headlessui-react/src/utils/focus-management.ts b/packages/@headlessui-react/src/utils/focus-management.ts
index add6500..150ce03 100644
--- a/packages/@headlessui-react/src/utils/focus-management.ts
+++ b/packages/@headlessui-react/src/utils/focus-management.ts
@@ -304,11 +304,11 @@ export function focusIn(
 
   // By default if you <Tab> to a text input or a textarea, the browser will
   // select all the text once the focus is inside these DOM Nodes. However,
-  // since we are manually moving focus this behaviour is not happening. This
+  // since we are manually moving focus this behavior is not happening. This
   // code will make sure that the text gets selected as-if you did it manually.
   // Note: We only do this when going forward / backward. Not for the
   // Focus.First or Focus.Last actions. This is similar to the `autoFocus`
-  // behaviour on an input where the input will get focus but won't be
+  // behavior on an input where the input will get focus but won't be
   // selected.
   if (focus & (Focus.Next | Focus.Previous) && isSelectableElement(next)) {
     next.select()
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
index d1e7772..b1eb4a4 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -5554,7 +5554,7 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s',
             options: [
               { value: 'alice', children: 'Alice', disabled: false },
               { value: 'bob', children: 'Bob', disabled: true },
-              { value: 'charile', children: 'Charlie', disabled: false },
+              { value: 'charlie', children: 'Charlie', disabled: false },
             ],
             update(newValue: any) {
               value.value = newValue
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
index f7fb251..368e73e 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.test.ts
@@ -2331,7 +2331,7 @@ describe('Mouse interactions', () => {
             <button id="trigger" @click="toggleOpen">
               Trigger
             </button>
-            <div id="imoutside">this thing</div>
+            <div id="i-am-outside">this thing</div>
             <Dialog :open="isOpen" @close="setIsOpen">
               <DialogBackdrop />
               <DialogPanel>
@@ -2361,12 +2361,12 @@ describe('Mouse interactions', () => {
       assertDialog({ state: DialogState.Visible })
 
       // Start a click inside the dialog and end it outside
-      await mouseDrag(document.getElementById('inside'), document.getElementById('imoutside'))
+      await mouseDrag(document.getElementById('inside'), document.getElementById('i-am-outside'))
 
       // It should not have hidden
       assertDialog({ state: DialogState.Visible })
 
-      await click(document.getElementById('imoutside'))
+      await click(document.getElementById('i-am-outside'))
 
       // It's gone
       assertDialog({ state: DialogState.InvisibleUnmounted })
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index f63e597..eff3c9f 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -148,7 +148,7 @@ export let Dialog = defineComponent({
     })
 
     // If there are multiple dialogs, then you can be the root, the leaf or one
-    // in between. We only care abou whether you are the top most one or not.
+    // in between. We only care about whether you are the top most one or not.
     let position = computed(() => (!hasNestedDialogs.value ? 'leaf' : 'parent'))
 
     // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
index 19f5e48..05fc681 100644
--- a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
+++ b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
@@ -143,7 +143,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Disclosure v-slot="{ close }">
               <DisclosureButton>Trigger</DisclosureButton>
               <DisclosurePanel>
@@ -169,8 +169,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -179,7 +179,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button ref="elementRef">restoreable</button>
+            <button ref="elementRef">restorable</button>
             <Disclosure v-slot="{ close }">
               <DisclosureButton>Trigger</DisclosureButton>
               <DisclosurePanel>
@@ -205,8 +205,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
@@ -455,7 +455,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Disclosure>
               <DisclosureButton>Trigger</DisclosureButton>
               <DisclosurePanel v-slot="{ close }">
@@ -481,8 +481,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -491,7 +491,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button ref="elementRef">restoreable</button>
+            <button ref="elementRef">restorable</button>
             <Disclosure>
               <DisclosureButton>Trigger</DisclosureButton>
               <DisclosurePanel v-slot="{ close }">
@@ -517,8 +517,8 @@ describe('Rendering', () => {
         // Ensure the disclosure is closed
         assertDisclosurePanel({ state: DisclosureState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
diff --git a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
index eb779dd..ee0856f 100644
--- a/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
+++ b/packages/@headlessui-vue/src/components/focus-trap/focus-trap.ts
@@ -302,7 +302,7 @@ function useInitialFocus(
         // There is an additional issue with doing this immediately. The FocusTrap is used inside a
         // Dialog, the Dialog is rendered inside of a Portal and the Portal is rendered at the end of
         // the `document.body`. This means that the moment we call focus, the browser immediately
-        // tries to focus the element, which will still be at the bodem resulting in the page to
+        // tries to focus the element, which will still be at the bottom resulting in the page to
         // scroll down. Delaying this will prevent the page to scroll down entirely.
         microTask(() => {
           if (!mounted.value) {
diff --git a/packages/@headlessui-vue/src/components/menu/menu.test.tsx b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
index bfa5f13..4581dfe 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.test.tsx
+++ b/packages/@headlessui-vue/src/components/menu/menu.test.tsx
@@ -2869,7 +2869,7 @@ describe('Keyboard interactions', () => {
       assertMenuLinkedWithMenuItem(items[1])
     })
 
-    it('should be possible to search for the next occurence', async () => {
+    it('should be possible to search for the next occurrence', async () => {
       renderTemplate(jsx`
         <Menu>
           <MenuButton>Trigger</MenuButton>
diff --git a/packages/@headlessui-vue/src/components/popover/popover.test.ts b/packages/@headlessui-vue/src/components/popover/popover.test.ts
index db62701..3a208e2 100644
--- a/packages/@headlessui-vue/src/components/popover/popover.test.ts
+++ b/packages/@headlessui-vue/src/components/popover/popover.test.ts
@@ -185,7 +185,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Popover v-slot="{ close }">
               <PopoverButton>Trigger</PopoverButton>
               <PopoverPanel>
@@ -211,8 +211,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -221,7 +221,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button ref="elementRef">restoreable</button>
+            <button ref="elementRef">restorable</button>
             <Popover v-slot="{ close }">
               <PopoverButton>Trigger</PopoverButton>
               <PopoverPanel> <button @click="close(elementRef)">Close me</button>} </PopoverPanel>
@@ -245,8 +245,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
@@ -611,7 +611,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button id="test">restoreable</button>
+            <button id="test">restorable</button>
             <Popover>
               <PopoverButton>Trigger</PopoverButton>
               <PopoverPanel v-slot="{ close }">
@@ -637,8 +637,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
 
@@ -647,7 +647,7 @@ describe('Rendering', () => {
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
-            <button ref="elementRef">restoreable</button>
+            <button ref="elementRef">restorable</button>
             <Popover>
               <PopoverButton>Trigger</PopoverButton>
               <PopoverPanel v-slot="{ close }">
@@ -673,8 +673,8 @@ describe('Rendering', () => {
         // Ensure the popover is closed
         assertPopoverPanel({ state: PopoverState.InvisibleUnmounted })
 
-        // Ensure the restoreable button got the restored focus
-        assertActiveElement(getByText('restoreable'))
+        // Ensure the restorable button got the restored focus
+        assertActiveElement(getByText('restorable'))
       })
     )
   })
@@ -1667,7 +1667,7 @@ describe('Keyboard interactions', () => {
     )
 
     it(
-      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristc based portal)',
+      'should focus the Popover.Button when pressing Shift+Tab when we focus inside the Popover.Panel (heuristic based portal)',
       suppressConsoleLogs(async () => {
         renderTemplate({
           template: html`
diff --git a/packages/@headlessui-vue/src/components/popover/popover.ts b/packages/@headlessui-vue/src/components/popover/popover.ts
index 1f52e1f..5eb7d8a 100644
--- a/packages/@headlessui-vue/src/components/popover/popover.ts
+++ b/packages/@headlessui-vue/src/components/popover/popover.ts
@@ -76,8 +76,8 @@ function usePopoverContext(component: string) {
 }
 
 let PopoverGroupContext = Symbol('PopoverGroupContext') as InjectionKey<{
-  registerPopover(registerbag: PopoverRegisterBag): void
-  unregisterPopover(registerbag: PopoverRegisterBag): void
+  registerPopover(registerBag: PopoverRegisterBag): void
+  unregisterPopover(registerBag: PopoverRegisterBag): void
   isFocusWithinPopoverGroup(): boolean
   closeOthers(buttonId: string): void
   mainTreeNodeRef: Ref<HTMLElement | null>
@@ -130,11 +130,12 @@ export let Popover = defineComponent({
         }
       }
 
-      // Use another heuristic to try and calculate wether or not the focusable elements are near
-      // eachother (aka, following the default focus/tab order from the browser). If they are then it
-      // doesn't really matter if they are portalled or not because we can follow the default tab
-      // order. But if they are not, then we can consider it being portalled so that we can ensure
-      // that tab and shift+tab (hopefully) go to the correct spot.
+      // Use another heuristic to try and calculate wether or not the focusable
+      // elements are near each other (aka, following the default focus/tab
+      // order from the browser). If they are then it doesn't really matter if
+      // they are portalled or not because we can follow the default tab order.
+      // But if they are not, then we can consider it being portalled so that we
+      // can ensure that tab and shift+tab (hopefully) go to the correct spot.
       let elements = getFocusableElements()
       let buttonIdx = elements.indexOf(dom(button)!)
 
diff --git a/packages/@headlessui-vue/src/components/switch/switch.test.tsx b/packages/@headlessui-vue/src/components/switch/switch.test.tsx
index c6ad6ca..b3c045e 100644
--- a/packages/@headlessui-vue/src/components/switch/switch.test.tsx
+++ b/packages/@headlessui-vue/src/components/switch/switch.test.tsx
@@ -188,7 +188,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case, non-existant)
+      // Notifications should be off (or in this case, non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -230,7 +230,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case, non-existant)
+      // Notifications should be off (or in this case, non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -263,7 +263,7 @@ describe('Rendering', () => {
       // Submit
       await click(document.getElementById('submit'))
 
-      // Notifications should be off (or in this case non-existant)
+      // Notifications should be off (or in this case non-existent)
       expect(handleSubmission).toHaveBeenLastCalledWith({})
     })
 
@@ -777,7 +777,7 @@ describe('Mouse interactions', () => {
   })
 
   xit('should be possible to hover the label and trigger a hover on the switch', async () => {
-    // This test doen't work in JSDOM :(
+    // This test doesn't work in JSDOM :(
     // Keeping it here for reference when we can test this in a real browser
     renderTemplate({
       template: html`
diff --git a/packages/@headlessui-vue/src/components/transitions/transition.test.ts b/packages/@headlessui-vue/src/components/transitions/transition.test.ts
index 933db08..80a1216 100644
--- a/packages/@headlessui-vue/src/components/transitions/transition.test.ts
+++ b/packages/@headlessui-vue/src/components/transitions/transition.test.ts
@@ -708,7 +708,7 @@ describe('Transitions', () => {
               null, // Initial render
               null, // Setup leave classes
               fastLeaveDuration, // Done with fast leave
-              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
+              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
             ]
           },
         ])
@@ -762,7 +762,7 @@ describe('Transitions', () => {
               null, // Initial render
               null, // Setup leave classes
               fastLeaveDuration, // Done with fast leave
-              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compaired with previous render snapshot so we have to subtract those)
+              slowLeaveDuration - fastLeaveDuration, // Done with slow leave (which starts at the same time, but it is compared with previous render snapshot so we have to subtract those)
             ]
           },
         ])
diff --git a/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
index 2c577e3..a19966a 100644
--- a/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
+++ b/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
@@ -125,7 +125,7 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
                   scrollableParent = scrollableParent.parentElement
                 }
 
-                // We crawled up the tree until the beginnging of the Portal, let's prevent the
+                // We crawled up the tree until the beginning of the Portal, let's prevent the
                 // event if this is the case. If not, then we are in a container where we are
                 // allowed to scroll so we don't have to prevent the event.
                 if (scrollableParent.dataset.headlessuiPortal === '') {
diff --git a/packages/@headlessui-vue/src/hooks/use-outside-click.ts b/packages/@headlessui-vue/src/hooks/use-outside-click.ts
index 64fd65f..4a305d2 100644
--- a/packages/@headlessui-vue/src/hooks/use-outside-click.ts
+++ b/packages/@headlessui-vue/src/hooks/use-outside-click.ts
@@ -68,7 +68,7 @@ export function useOutsideClick(
     // This allows us to check whether the event was defaultPrevented when you are nesting this
     // inside a `<Dialog />` for example.
     if (
-      // This check alllows us to know whether or not we clicked on a "focusable" element like a
+      // This check allows us to know whether or not we clicked on a "focusable" element like a
       // button or an input. This is a backwards compatibility check so that you can open a <Menu
       // /> and click on another <Menu /> which should close Menu A and open Menu B. We might
       // revisit that so that you will require 2 clicks instead.
diff --git a/packages/@headlessui-vue/src/test-utils/execute-timeline.ts b/packages/@headlessui-vue/src/test-utils/execute-timeline.ts
index 895c1c8..55822af 100644
--- a/packages/@headlessui-vue/src/test-utils/execute-timeline.ts
+++ b/packages/@headlessui-vue/src/test-utils/execute-timeline.ts
@@ -90,7 +90,7 @@ export async function executeTimeline(
       return snapshot.content !== snapshots[i - 1].content
     })
 
-    // Add a relative time compaired to the previous snapshot. We recorded everything in
+    // Add a relative time compared to the previous snapshot. We recorded everything in
     // process.hrtime.bigint() which is in nanoseconds, we want it in milliseconds.
     .map((snapshot, i, all) => ({
       ...snapshot,