@alpinejs/docs 3.9.3-revision.1 → 3.9.6-revision.1

package/package.json

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

package/src/en/directives/on.md

@@ -13,7 +13,7 @@ Here's an example of simple button that shows an alert when clicked.
 <button x-on:click="alert('Hello World!')">Say Hi</button>
 ```
 
-> `x-on` can only listen for events with lower case names, as HTML attribtes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use  [`x-bind`](/directives/bind.md#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
+> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use  [`x-bind`](/directives/bind.md#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
 
 <a name="shorthand-syntax"></a>
 ## Shorthand syntax

package/src/en/directives/transition.md

@@ -46,15 +46,17 @@ You can override these defaults with modifiers attached to `x-transition`. Let's
 <a name="customizing-duration"></a>
 ### Customizing duration
 
+Initially, the duration is set to be 150 milliseconds when entering, and 75 milliseconds when leaving.
+
 You can configure the duration you want for a transition with the `.duration` modifier:
 
 ```alpine
 <div ... x-transition.duration.500ms>
 ```
 
-The above `<div>` will transition for 500 milliseconds when entering, and 250 milliseconds when leaving.
+The above `<div>` will transition for 500 milliseconds when entering, and 500 milliseconds when leaving.
 
-This difference in duration generally desirable default. If you wish to customize the durations specifically for entering and leaving, you can do that like so:
+If you wish to customize the durations specifically for entering and leaving, you can do that like so:
 
 ```alpine
 <div ...

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://unpkg.com/alpinejs@3.9.3/dist/cdn.min.js"></script>
+<script defer src="https://unpkg.com/alpinejs@3.9.6/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/magics/store.md

@@ -6,7 +6,7 @@ title: store
 
 # $store
 
-You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](#). For example:
+You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/magics/store). For example:
 
 ```alpine
 <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>

package/src/en/plugins/collapse.md

@@ -107,3 +107,32 @@ You can customize the duration of the collapse/expand transition by appending th
     </div>
 </div>
 <!-- END_VERBATIM -->
+
+<a name="dot-min"></a>
+### .min
+
+By default, `x-collapse`'s "collapsed" state sets the height of the element to `0px` and also sets `display: none;`.
+
+Sometimes, it's helpful to "cut-off" an element rather than fully hide it. By using the `.min` modifier, you can set a minimum height for `x-collapse`'s "collapsed" state. For example:
+
+```alpine
+<div x-data="{ expanded: false }">
+    <button @click="expanded = ! expanded">Toggle Content</button>
+
+    <p x-show="expanded" x-collapse.min.50px>
+        ...
+    </p>
+</div>
+```
+
+<!-- START_VERBATIM -->
+<div x-data="{ expanded: false }" class="demo">
+    <button @click="expanded = ! expanded">Toggle Content</button>
+
+    <div x-show="expanded" x-collapse.min.50px>
+        <div class="pt-4">
+            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
+        </div>
+    </div>
+</div>
+<!-- END_VERBATIM -->

package/src/en/plugins/intersect.md

@@ -110,7 +110,7 @@ Sometimes it's useful to evaluate an expression only the first time an element e
 <a name="half"></a>
 ### .half
 
-Evaluates the expression once the intersection threshold exceeds `0.5`. 
+Evaluates the expression once the intersection threshold exceeds `0.5`.
 
 Useful for elements where it's important to show at least part of the element.
 
@@ -121,7 +121,7 @@ Useful for elements where it's important to show at least part of the element.
 <a name="full"></a>
 ### .full
 
-Evaluates the expression once the intersection threshold exceeds `0.99`. 
+Evaluates the expression once the intersection threshold exceeds `0.99`.
 
 Useful for elements where it's important to show the whole element.
 
@@ -134,9 +134,9 @@ Useful for elements where it's important to show the whole element.
 
 Allows you to control the `threshold` property of the underlying `IntersectionObserver`:
 
-This value should be a decimal in the range "0-1". A value of "0" means: trigger an "intersection" if ANY part of the element enters the viewport (the default behavior). While a value of "1" means: don't trigger an "intersection" unless the entire element has entered the viewport.
+This value should be in the range of "0-100". A value of "0" means: trigger an "intersection" if ANY part of the element enters the viewport (the default behavior). While a value of "100" means: don't trigger an "intersection" unless the entire element has entered the viewport.
 
-Any value in between is a "ratio" of those two extremes.
+Any value in between is a percentage of those two extremes.
 
 For example if you want to trigger an intersection after half of the element has entered the page, you can use `.threshold.50`: