@alpinejs/docs 3.13.5-revision.1 → 3.13.7-revision.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.13.5-revision.1",
+    "version": "3.13.7-revision.1",
     "description": "The documentation for Alpine",
     "author": "Caleb Porzio",
     "license": "MIT"

package/src/en/directives/model.md

@@ -13,7 +13,7 @@ Here's a simple example of using `x-model` to bind the value of a text field to
 <div x-data="{ message: '' }">
     <input type="text" x-model="message">
 
-    <span x-text="message">
+    <span x-text="message"></span>
 </div>
 ```
 

package/src/en/directives/teleport.md

@@ -11,8 +11,6 @@ The `x-teleport` directive allows you to transport part of your Alpine template
 
 This is useful for things like modals (especially nesting them), where it's helpful to break out of the z-index of the current Alpine component.
 
-> Warning: if you are a [Livewire](https://laravel-livewire.com) user, this functionality does not currently work inside Livewire components. Support for this is on the roadmap.
-
 <a name="x-teleport"></a>
 ## x-teleport
 
@@ -115,7 +113,7 @@ Teleporting is especially helpful if you are trying to nest one modal within ano
     <template x-teleport="body">
         <div x-show="open">
             Modal contents...
-            
+
             <div x-data="{ open: false }">
                 <button @click="open = ! open">Toggle Nested Modal</button>
 
@@ -138,7 +136,7 @@ Teleporting is especially helpful if you are trying to nest one modal within ano
         <template x-teleport="#modal4">
             <div x-show="open">
                 <div class="py-4">Modal contents...</div>
-                
+
                 <div x-data="{ open: false }">
                     <button @click="open = ! open">Toggle Nested Modal</button>
 

package/src/en/essentials/installation.md

@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
 Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
 
 ```alpine
-<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.7/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/plugins/focus.md

@@ -304,7 +304,7 @@ For example:
 <a name="noautofocus"></a>
 #### .noautofocus
 
-By default, when `x-trap` traps focous within an element, it focuses the first focussable element within that element. This is a sensible default, however there are times where you may want to disable this behavior and not automatically focus any elements when `x-trap` engages.
+By default, when `x-trap` traps focus within an element, it focuses the first focussable element within that element. This is a sensible default, however there are times where you may want to disable this behavior and not automatically focus any elements when `x-trap` engages.
 
 By adding `.noautofocus`, Alpine will not automatically focus any elements when trapping focus.
 

package/src/en/plugins/intersect.md

@@ -89,11 +89,14 @@ You may choose to use this for clarity when also using the `:leave` suffix.
 <a name="x-intersect-leave"></a>
 ### x-intersect:leave
 
-Appending `:leave` runs your expression when the element leaves the viewport:
+Appending `:leave` runs your expression when the element leaves the viewport.
 
 ```alpine
 <div x-intersect:leave="shown = true">...</div>
 ```
+> By default, this means the *whole element* is not in the viewport. Use `x-intersect:leave.full` to run your expression when only *parts of the element* are not in the viewport.
+
+[→ Read more about the underlying `IntersectionObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
 
 <a name="modifiers"></a>
 ## Modifiers