Add documentation page for AutoScroll.

packages/embla-carousel-auto-scroll/src/components/AutoScroll.ts

@@ -216,8 +216,10 @@ function AutoScroll(userOptions: AutoScrollOptionsType = {}): AutoScrollType {
     return self
   }
 
-  function play(delayOverride?: number): void {
-    if (typeof delayOverride !== 'undefined') startDelay = delayOverride
+  function play(startDelayOverride?: number): void {
+    if (typeof startDelayOverride !== 'undefined') {
+      startDelay = startDelayOverride
+    }
     resume = true
     startScroll()
   }

packages/embla-carousel-docs/src/content/pages/api/events.mdx

@@ -264,8 +264,6 @@ The `EmblaEventType` is obtained directly from the **core package** `embla-carou
   </TabsItem>
 </Tabs>
 
----
-
 ## Reference
 
 Below follows an exhaustive **list of all** Embla Carousel **events** together with information about how they work.
@@ -357,3 +355,5 @@ Runs when the user has a pointer down on the carousel. It's triggered by a `touc
 Once: <BrandPrimaryText>`no`</BrandPrimaryText>
 
 Runs when the user has released the pointer from the carousel. It's triggered by a `touchend` or a `mouseup` event.
+
+---

packages/embla-carousel-docs/src/content/pages/api/methods.mdx

@@ -158,8 +158,6 @@ The `EmblaCarouselType` is obtained directly from the **core package** `embla-ca
   </TabsItem>
 </Tabs>
 
----
-
 ## Reference
 
 Below follows an exhaustive **list of all** Embla Carousel **methods** with their respective parameters and return values.
@@ -363,3 +361,5 @@ Parameters: <BrandPrimaryText>`event: EmblaEventType`</BrandPrimaryText>
 Returns: <BrandSecondaryText>`void`</BrandSecondaryText>
 
 Emits an embla [event](/api/events/). This doesn't trigger any internal Embla functionality.
+
+---

packages/embla-carousel-docs/src/content/pages/api/options.mdx

@@ -177,8 +177,6 @@ The `EmblaOptionsType` is obtained directly from the **core package** `embla-car
   </TabsItem>
 </Tabs>
 
----
-
 ## Reference
 
 Below follows an exhaustive **list of all** Embla Carousel **options** and their default values.
@@ -422,3 +420,5 @@ Embla automatically watches the [container](/api/methods/#containernode/) for **
   run its default mutation behaviour after your callback, or return `false` if
   you want to disable it.
 </Admonition>
+
+---

packages/embla-carousel-docs/src/content/pages/api/plugins.mdx

@@ -14,9 +14,37 @@ It's possible to **extend** Embla carousel with additional features using **plug
 
 ---
 
+## Installation
+
+All **official plugins** are separate **NPM packages**. They're all **prefixed** with `embla-carousel` followed by its **unique** plugin **name**. For example, the `Autoplay` plugin is installed like so:
+
+<Tabs groupId="package-manager">
+  <TabsItem label="CDN" value="cdn">
+
+    ```html
+    <script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
+    ```
+
+  </TabsItem>
+  <TabsItem label="npm" value="npm">
+
+    ```shell
+    npm install embla-carousel-autoplay --save
+    ```
+
+  </TabsItem>
+  <TabsItem label="yarn" value="yarn">
+
+    ```shell
+    yarn add embla-carousel-autoplay
+    ```
+
+  </TabsItem>
+</Tabs>
+
 ## Usage
 
-The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin has its own [options](/api/plugins/#constructor-options) and [methods](/api/plugins/#calling-methods).
+The Embla Carousel **constructor** accepts an **array of plugins**. Each plugin might have its own [options](/api/plugins/#constructor-options), [methods](/api/plugins/#calling-methods) and [events](/api/plugins/#adding-event-listeners).
 
 ### Adding a plugin
 
@@ -25,7 +53,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
 <Tabs groupId="library">
   <TabsItem label="Vanilla" value="vanilla">
 
-    ```js highlight={4}
+    ```js highlight={2,4}
     import EmblaCarousel from 'embla-carousel'
     import Autoplay from 'embla-carousel-autoplay'
 
@@ -35,7 +63,7 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
   </TabsItem>
   <TabsItem label="React" value="react">
 
-    ```jsx highlight={5}
+    ```jsx highlight={2,5}
     import useEmblaCarousel from 'embla-carousel-react'
     import Autoplay from 'embla-carousel-autoplay'
 
@@ -48,17 +76,13 @@ The constructor plugin array is the default way of providing plugins to Embla Ca
   </TabsItem>
   <TabsItem label="Vue" value="vue">
 
-    ```html highlight={7}
-    <script>
+    ```html highlight={3,5}
+    <script setup>
       import emblaCarouselVue from 'embla-carousel-vue'
       import Autoplay from 'embla-carousel-autoplay'
 
-      export default {
-        setup() {
-          const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()])
-          // ...
-        }
-      }
+      const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()])
+      // ...
     </script>
     ```
 
@@ -105,19 +129,15 @@ Plugins have their own specific **options** which is the first argument of the p
   </TabsItem>
   <TabsItem label="Vue" value="vue">
 
-    ```html highlight={8}
-    <script>
+    ```html highlight={6}
+    <script setup>
       import emblaCarouselVue from 'embla-carousel-vue'
       import Autoplay from 'embla-carousel-autoplay'
 
-      export default {
-        setup() {
-          const [emblaNode] = emblaCarouselVue({ loop: true }, [
-            Autoplay({ delay: 4000 })
-          ])
-          // ...
-        }
-      }
+      const [emblaNode] = emblaCarouselVue({ loop: true }, [
+        Autoplay({ delay: 4000 })
+      ])
+      // ...
     </script>
     ```
 
@@ -159,18 +179,14 @@ All [official plugins](/plugins/) allows you to set **global options** that will
   <TabsItem label="Vue" value="vue">
 
     ```html highlight={5}
-    <script>
+    <script setup>
       import emblaCarouselVue from 'embla-carousel-vue'
       import Autoplay from 'embla-carousel-autoplay'
 
       Autoplay.globalOptions = { delay: 4000 }
 
-      export default {
-        setup() {
-          const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()])
-          // ...
-        }
-      }
+      const [emblaNode] = emblaCarouselVue({ loop: true }, [Autoplay()])
+      // ...
     </script>
     ```
 
@@ -221,25 +237,21 @@ Additionally, some plugins expose their own **API methods**. You can access plug
   </TabsItem>
   <TabsItem label="Vue" value="vue">
 
-    ```html highlight={13}
-    <script>
+    ```html highlight={11}
+    <script setup>
       import { watchEffect } from 'vue'
       import emblaCarouselVue from 'embla-carousel-vue'
       import Autoplay from 'embla-carousel-autoplay'
 
-      export default {
-        setup() {
-          const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [
-            Autoplay()
-          ])
+      const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [
+        Autoplay()
+      ])
 
-          watchEffect(() => {
-            if (emblaApi.value) emblaApi.value.plugins().autoplay.stop()
-          })
+      watchEffect(() => {
+        if (emblaApi.value) emblaApi.value.plugins().autoplay.stop()
+      })
 
-          // ...
-        }
-      }
+      // ...
     </script>
     ```
 
@@ -294,31 +306,27 @@ Some plugins fire their own **events**. Plugin events are structured as follows
   </TabsItem>
   <TabsItem label="Vue" value="vue">
 
-    ```html highlight={18}
-    <script>
+    ```html highlight={16}
+    <script setup>
       import { watchEffect, onBeforeUnmount } from 'vue'
       import emblaCarouselVue from 'embla-carousel-vue'
       import Autoplay from 'embla-carousel-autoplay'
 
-      export default {
-        setup() {
-          const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [
-            Autoplay()
-          ])
-
-          function logAutoplayStopEvent() {
-            console.log('Autoplay plugin stopped playing!')
-          }
+      const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [
+        Autoplay()
+      ])
 
-          watchEffect(() => {
-            if (emblaApi.value) {
-              emblaApi.value.on('autoplay:stop', logAutoplayStopEvent) // add
-            }
-          })
+      function logAutoplayStopEvent() {
+        console.log('Autoplay plugin stopped playing!')
+      }
 
-          // ...
+      watchEffect(() => {
+        if (emblaApi.value) {
+          emblaApi.value.on('autoplay:stop', logAutoplayStopEvent) // add
         }
-      }
+      })
+
+      // ...
     </script>
     ```
 

packages/embla-carousel-docs/src/content/pages/plugins/auto-height.mdx

@@ -1,7 +1,7 @@
 ---
 title: Auto Height
-description: Learn how to add this Auto Height plugin to Embla Carousel
-order: 1
+description: Learn how to use the Auto Height plugin for Embla Carousel
+order: 2
 date: 2022-01-14
 ---
 
@@ -23,6 +23,13 @@ This plugin is used to extend Embla Carousel with **auto height** functionality.
 First you need to install the **npm package** and save it to your dependencies:
 
 <Tabs groupId="package-manager">
+  <TabsItem label="CDN" value="cdn">
+
+    ```html
+    <script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
+    ```
+
+  </TabsItem>
   <TabsItem label="npm" value="npm">
 
     ```shell
@@ -39,32 +46,29 @@ First you need to install the **npm package** and save it to your dependencies:
   </TabsItem>
 </Tabs>
 
-Alternatively, you can use a **CDN** to include it in your project:
-
-```html
-<script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
-```
-
 ## Usage
 
-This plugin accepts a single **optional** parameter, which is its [options](/plugins/auto-height/#options) object that allows you to configure it.
+Please read the [plugins](/api/plugins/#usage) page to learn **how to work with plugins**.
 
-```js
-import EmblaCarousel from 'embla-carousel'
-import AutoHeight from 'embla-carousel-auto-height'
-
-const embla = EmblaCarousel(emblaRoot, { loop: false }, [AutoHeight()]) // Add plugin
-```
+<Admonition type="note">
 
 You can make use of CSS transitions to **transition height** changes. But beware: Transitioning height triggers reflow and may cause a performance hit.
 
+<br />
+
 ```css
 .embla__container {
   transition: height 0.2s;
 }
 ```
 
-If you've been following along with any of the guides in the [Get Started](/get-started/) section, you will probably want to make sure that each **slide height** is **determined** by the **content** it holds. Amend your CSS with the following to achieve this:
+</Admonition>
+
+<Admonition type="warning">
+
+If you've been following along with any of the guides in the [get started](/get-started/) section, you want to make sure that each **slide height** is **determined** by the **content** it holds. Add the following to your CSS to achieve this:
+
+<br />
 
 ```css highlight={3}
 .embla__container {
@@ -73,20 +77,11 @@ If you've been following along with any of the guides in the [Get Started](/get-
 }
 ```
 
-## Options
-
-The Auto Height plugin accepts an optional **options** object as the first argument. Here's an example of how to make use of it:
+</Admonition>
 
-```js
-import EmblaCarousel from 'embla-carousel'
-import AutoHeight from 'embla-carousel-auto-height'
-
-const autoHeightOptions = { destroyHeight: 'auto' } // Options
+## Options
 
-const embla = EmblaCarousel(emblaRoot, { loop: false }, [
-  AutoHeight(autoHeightOptions) // Add plugin with options
-])
-```
+Below follows an exhaustive **list of all** `Auto Height` **options** and their default values.
 
 ---
 
@@ -96,3 +91,5 @@ Type: <BrandPrimaryText>`CSSStyleDeclaration.height`</BrandPrimaryText>
 Default: <BrandSecondaryText>`auto`</BrandSecondaryText>
 
 Choose CSS height declaration that will be applied to the carousel container when the plugin is destroyed.
+
+---