spelling and grammar fixes (#2833)

packages/docs/src/en/directives/bind.md

@@ -159,7 +159,7 @@ And like most expressions in Alpine, you can always use the result of a JavaScri
 
 `x-bind` allows you to bind an object of different directives and attributes to an element.
 
-The object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directoves, callbacks to be evaluated by Alpine.
+The object keys can be anything you would normally write as an attribute name in Alpine. This includes Alpine directives and modifiers, but also plain HTML attributes. The object values are either plain strings, or in the case of dynamic Alpine directives, callbacks to be evaluated by Alpine.
 
 ```alpine
 <div x-data="dropdown()">

packages/docs/src/en/directives/model.md

@@ -288,7 +288,7 @@ Color: <span x-text="color"></span>
 <a name="lazy"></a>
 ### `.lazy`
 
-On text inputs, by default, `x-model` updates the property on every key-stroke. By adding the `.lazy` modifier, you can force an `x-model` input to only update the property when user focuses away from the input element.
+On text inputs, by default, `x-model` updates the property on every keystroke. By adding the `.lazy` modifier, you can force an `x-model` input to only update the property when user focuses away from the input element.
 
 This is handy for things like real-time form-validation where you might not want to show an input validation error until the user "tabs" away from a field.
 

packages/docs/src/en/directives/on.md

@@ -166,7 +166,7 @@ In the above example, clicking the button WON'T log the message. This is because
 
 In the above example, after showing the dropdown contents by clicking the "Toggle" button, you can close the dropdown by clicking anywhere on the page outside the content.
 
-This is because `.outside` is listening for clicks that DONT originate from the element it's registered on.
+This is because `.outside` is listening for clicks that DON'T originate from the element it's registered on.
 
 > It's worth noting that the `.outside` expression will only be evaluated when the element it's registered on is visible on the page. Otherwise, there would be nasty race conditions where clicking the "Toggle" button would also fire the `@click.outside` handler when it is not visible.
 

packages/docs/src/en/directives/teleport.md

@@ -101,7 +101,7 @@ To make this experience more seamless, you can "forward" events by simply regist
 
 Notice how we are now able to listen for events dispatched from within the teleported element from outside the `<template>` element itself?
 
-Alpine does this by looking for event listeners registered on `<template x-teleport...>` and stops those events from propogating past the live, teleported, DOM element. Then, it creates a copy of that event and re-dispatches it from `<template x-teleport...>`.
+Alpine does this by looking for event listeners registered on `<template x-teleport...>` and stops those events from propagating past the live, teleported, DOM element. Then, it creates a copy of that event and re-dispatches it from `<template x-teleport...>`.
 
 <a name="nesting"></a>
 ## Nesting

packages/docs/src/en/essentials/state.md

@@ -54,7 +54,7 @@ Although this may seem obvious to some, it's worth mentioning that Alpine data c
 <a name="data-less-alpine"></a>
 ### Data-less Alpine
 
-Sometimes you may want to use Alpine functionality, but don't need any reactive data. In these cases, you can opt-out of passing an expression to `x-data` entirely. For example:
+Sometimes you may want to use Alpine functionality, but don't need any reactive data. In these cases, you can opt out of passing an expression to `x-data` entirely. For example:
 
 ```alpine
 <button x-data @click="alert('I\'ve been clicked!')">Click Me</button>

packages/docs/src/en/magics/id.md

@@ -34,7 +34,7 @@ Now let's say you want to have those same two input elements, but this time you
 
 This presents a problem, you now need to be able to reference the same ID twice. One for the `<label>`'s `for` attribute, and the other for the `id` on the input.
 
-Here's is a way that you might think to accomplish this and is totally valid:
+Here is a way that you might think to accomplish this and is totally valid:
 
 ```alpine
 <div x-data="{ id: $id('text-input') }">

packages/docs/src/en/plugins/focus.md

@@ -187,7 +187,7 @@ Here is nesting in action:
 <a name="inert"></a>
 #### .inert
 
-When building things like dialogs/modals, it's recommended to hide all the other elements on the page from screenreaders when trapping focus.
+When building things like dialogs/modals, it's recommended to hide all the other elements on the page from screen readers when trapping focus.
 
 By adding `.inert` to `x-trap`, when focus is trapped, all other elements on the page will receive `aria-hidden="true"` attributes, and when focus trapping is disabled, those attributes will also be removed.
 
@@ -218,7 +218,7 @@ By adding `.inert` to `x-trap`, when focus is trapped, all other elements on the
 <a name="noscroll"></a>
 #### .noscroll
 
-When building dialogs/modals with Alpine, it's recommended that you disable scrollling for the surrounding content when the dialog is open.
+When building dialogs/modals with Alpine, it's recommended that you disable scrolling for the surrounding content when the dialog is open.
 
 `x-trap` allows you to do this automatically with the `.noscroll` modifiers.
 

packages/docs/src/en/plugins/morph.md

@@ -137,7 +137,7 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
 
 The "Morph" plugin works by comparing two DOM trees, the live element, and the passed in HTML.
 
-Morph walks both trees simultaneusly and compares each node and its children. If it finds differences, it "patches" (changes) the current DOM tree to match the passed in HTML's tree.
+Morph walks both trees simultaneously and compares each node and its children. If it finds differences, it "patches" (changes) the current DOM tree to match the passed in HTML's tree.
 
 While the default algorithm is very capable, there are cases where you may want to hook into its lifecycle and observe or change its behavior as it's happening.
 
@@ -249,4 +249,4 @@ By adding keys to each node, we can accomplish this like so:
 
 Now that there are "keys" on the `<li>`s, Morph will match them in both trees and move them accordingly.
 
-You can configure what Morph considers a "key" with the `key:` configutation option. [More on that here](#lifecycle-hooks)
+You can configure what Morph considers a "key" with the `key:` configuration option. [More on that here](#lifecycle-hooks)

packages/docs/src/en/upgrade-guide.md

@@ -299,7 +299,7 @@ In Alpine V2 for below code
 </div>
 ```
 
-after clicking button all `$refs` were displayed. However in Alpine V3 it's possible to access only `$refs` for elements created statically, so only first ref will be returned as expected.
+after clicking button all `$refs` were displayed. However, in Alpine V3 it's possible to access only `$refs` for elements created statically, so only first ref will be returned as expected.
 
 
 <a name="no-ie-11"></a>