@alpinejs/docs 3.13.2-revision.2 → 3.13.3-revision.1

package/package.json

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

package/src/en/directives/model.md

@@ -307,6 +307,19 @@ By default, any data stored in a property via `x-model` is stored as a string. T
 <span x-text="typeof age"></span>
 ```
 
+<a name="boolean"></a>
+### `.boolean`
+
+By default, any data stored in a property via `x-model` is stored as a string. To force Alpine to store the value as a JavaScript boolean, add the `.boolean` modifier. Both integers (1/0) and strings (true/false) are valid boolean values.
+
+```alpine
+<select x-model.boolean="isActive">
+    <option value="true">Yes</option>
+    <option value="false">No</option>
+</select>
+<span x-text="typeof isActive"></span>
+```
+
 <a name="debounce"></a>
 ### `.debounce`
 

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

package/src/en/plugins/anchor.md

@@ -32,7 +32,7 @@ You can include the CDN build of this plugin as a `<script>` tag, just make sure
 
 ### Via NPM
 
-You can install Collapse from NPM for use inside your bundle like so:
+You can install Anchor from NPM for use inside your bundle like so:
 
 ```shell
 npm install @alpinejs/anchor
@@ -76,7 +76,7 @@ For example, here's a simple dropdown anchored to the button that toggles it:
         <button x-ref="button" @click="open = ! open">Toggle</button>
     </div>
 
-    <div x-show="open" x-anchor="$refs.button" class="bg-white rounded p-4 border shadow">
+    <div x-show="open" x-anchor="$refs.button" class="bg-white rounded p-4 border shadow z-10">
         Dropdown content
     </div>
 </div>
@@ -110,7 +110,7 @@ Here is an example of using `.bottom-start` to position a dropdown below and to
         <button x-ref="button" @click="open = ! open">Toggle</button>
     </div>
 
-    <div x-show="open" x-anchor.bottom-start="$refs.button" class="bg-white rounded p-4 border shadow">
+    <div x-show="open" x-anchor.bottom-start="$refs.button" class="bg-white rounded p-4 border shadow z-10">
         Dropdown content
     </div>
 </div>
@@ -137,7 +137,7 @@ You can add an offset to your anchored element using the `.offset.[px value]` mo
         <button x-ref="button" @click="open = ! open">Toggle</button>
     </div>
 
-    <div x-show="open" x-anchor.offset.10="$refs.button" class="bg-white rounded p-4 border shadow">
+    <div x-show="open" x-anchor.offset.10="$refs.button" class="bg-white rounded p-4 border shadow z-10">
         Dropdown content
     </div>
 </div>
@@ -146,7 +146,7 @@ You can add an offset to your anchored element using the `.offset.[px value]` mo
 <a name="manual-styling"></a>
 ## Manual styling
 
-By default, `x-alpine` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.no-style` modifer and use the `$anchor` magic to access the values inside another Alpine expression.
+By default, `x-anchor` applies the positioning styles to your element under the hood. If you'd prefer full control over styling, you can pass the `.no-style` modifer and use the `$anchor` magic to access the values inside another Alpine expression.
 
 Below is an example of bypassing `x-anchor`'s internal styling and instead applying the styles yourself using `x-bind:style`:
 
@@ -174,7 +174,7 @@ Below is an example of bypassing `x-anchor`'s internal styling and instead apply
         x-show="open"
         x-anchor.no-style="$refs.button"
         x-bind:style="{ position: 'absolute', top: $anchor.y+'px', left: $anchor.x+'px' }"
-        class="bg-white rounded p-4 border shadow"
+        class="bg-white rounded p-4 border shadow z-10"
     >
         Dropdown content
     </div>