@alpinejs/docs 3.13.3-revision.3 → 3.13.4-revision.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alpinejs/docs",
3
- "version": "3.13.3-revision.3",
3
+ "version": "3.13.4-revision.1",
4
4
  "description": "The documentation for Alpine",
5
5
  "author": "Caleb Porzio",
6
6
  "license": "MIT"
@@ -46,7 +46,7 @@ Alpine.start()
46
46
  <a name="basic-example"></a>
47
47
  ## Basic Example
48
48
 
49
- To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter componennt using a common CSP setup:
49
+ To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter component using a common CSP setup:
50
50
 
51
51
  ```alpine
52
52
  <html>
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
33
33
  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.
34
34
 
35
35
  ```alpine
36
- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
36
+ <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.4/dist/cdn.min.js"></script>
37
37
  ```
38
38
 
39
39
  That's it! Alpine is now available for use inside your page.
@@ -37,7 +37,7 @@ As you can see we've extracted the properties and methods we would usually defin
37
37
  If you've chosen to use a build step for your Alpine code, you should register your components in the following way:
38
38
 
39
39
  ```js
40
- import Alpine from `alpinejs`
40
+ import Alpine from 'alpinejs'
41
41
  import dropdown from './dropdown.js'
42
42
 
43
43
  Alpine.data('dropdown', dropdown)
@@ -192,7 +192,7 @@ Because `x-anchor` accepts a reference to any DOM element, you can use utilities
192
192
  <div x-data="{ open: false }">
193
193
  <button id="trigger" @click="open = ! open">Toggle</button>
194
194
 
195
- <div x-show="open" x-anchor="document.getElementById('#trigger')">
195
+ <div x-show="open" x-anchor="document.getElementById('trigger')">
196
196
  Dropdown content
197
197
  </div>
198
198
  </div>
@@ -301,6 +301,13 @@ For example:
301
301
  </div>
302
302
  <!-- END_VERBATIM -->
303
303
 
304
+ <a name="noautofocus"></a>
305
+ #### .noautofocus
306
+
307
+ 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.
308
+
309
+ By adding `.noautofocus`, Alpine will not automatically focus any elements when trapping focus.
310
+
304
311
  <a name="focus-magic"></a>
305
312
  ## $focus
306
313