Show dependencies not dependents

docs/assets/plugins/metadata/metadata.js

@@ -175,6 +175,21 @@
     return table.outerHTML;
   }
 
+  function createDependenciesList(dependencies) {
+    const ul = document.createElement('ul');
+    ul.innerHTML = `
+        ${dependencies
+          .map(
+            dependency => `
+              <li><code>${escapeHtml(dependency)}</code></li>
+            `
+          )
+          .join('')}
+    `;
+
+    return ul.outerHTML;
+  }
+
   function createDependentsList(dependents) {
     const ul = document.createElement('ul');
     ul.innerHTML = `
@@ -362,13 +377,14 @@
           `;
         }
 
-        if (data.dependents.length) {
+        if (data.dependencies.length) {
           result += `
-            ## Dependents
+            ## Dependencies
 
-            The following components make use of this component.
+            This component has the following dependencies. If you're not using the lazy loader, be sure to import and
+            register these components in addition to <code>${tag}</code>.
 
-            ${createDependentsList(data.dependents)}
+            ${createDependenciesList(data.dependencies)}
           `;
         }
 

docs/getting-started/changelog.md

@@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
 - Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
 - Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
+- Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
 
 ## 2.0.0-beta.25