From 9deb51e95a2bbba098e99cf8297df3dddab9993b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 9 Mar 2023 16:09:33 -0500
Subject: [PATCH] update docs

---
 cspell.json                              | 1 +
 docs/assets/plugins/metadata/metadata.js | 3 +++
 docs/getting-started/overview.md         | 5 +++--
 docs/resources/changelog.md              | 1 +
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/cspell.json b/cspell.json
index f778ba505..d3c5cd400 100644
--- a/cspell.json
+++ b/cspell.json
@@ -39,6 +39,7 @@
     "datetime",
     "describedby",
     "Docsify",
+    "dogfood",
     "dropdowns",
     "easings",
     "enterkeyhint",
diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 1008704eb..30c192a22 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -436,6 +436,9 @@
           result += `
             ## Importing
 
+            If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to
+            use any of the following snippets to [cherry pick](getting-started/installation#cherry-picking) this component.
+
             <sl-tab-group>
             <sl-tab slot="nav" panel="script">Script</sl-tab>
             <sl-tab slot="nav" panel="import">Import</sl-tab>
diff --git a/docs/getting-started/overview.md b/docs/getting-started/overview.md
index 289651315..1d774f98e 100644
--- a/docs/getting-started/overview.md
+++ b/docs/getting-started/overview.md
@@ -32,9 +32,10 @@ Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
 
 Add the following code to your page.
 
+<!-- prettier-ignore -->
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace-autoloader.js"></script>
 ```
 
 Now you have access to all of Shoelace's components! Try adding a button:
@@ -43,7 +44,7 @@ Now you have access to all of Shoelace's components! Try adding a button:
 <sl-button>Click me</sl-button>
 ```
 
-?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
+?> This will activate Shoelace's experimental autoloader, which registers components on the fly as you use them. To learn more about it, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
 
 ## New to Web Components?
 
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index ef860120a..181b9a5ff 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a regression in `<sl-input>` that caused `min` and `max` to stop working when `type="date"` [#1224](https://github.com/shoelace-style/shoelace/issues/1224)
 - Improved accessibility of `<sl-carousel>` [#1218](https://github.com/shoelace-style/shoelace/pull/1218)
 - Improved `<sl-option>` so it converts non-string values to strings for convenience [#1226](https://github.com/shoelace-style/shoelace/issues/1226)
+- Updated the docs to dogfood the autoloader
 
 ## 2.2.0