auto import dependencies

docs/assets/plugins/metadata/metadata.js

@@ -420,8 +420,7 @@
           result += `
             ## Dependencies
 
-            This component has the following dependencies so, if you're [cherry picking](/getting-started/installation#cherry-picking),
-            be sure to import these components in addition to <code>&lt;${tag}&gt;</code>.
+            This component imports the following dependencies.
 
             ${createDependenciesList(component.tagName, getAllComponents(metadata))}
           `;

docs/getting-started/installation.md

@@ -56,9 +56,9 @@ However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Sh
 
 The previous approach is the _easiest_ way to load Shoelace, but easy isn't always efficient. You'll incur the full size of the library even if you only use a handful of components. This is convenient for prototyping, but may result in longer load times in production. To improve this, you can cherry pick the components you need.
 
-Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually, including its dependencies.
+Cherry picking can be done from your local install or [directly from the CDN](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/). This will limit the number of files the browser has to download and reduce the amount of bytes being transferred. The disadvantage is that you need to load and register each component manually.
 
-Here's an example that loads only the button component and its dependencies. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
+Here's an example that loads only the button component. Again, if you're not using a module resolver, you'll need to adjust the path to point to the folder Shoelace is in.
 
 ```html
 <!-- The base stylesheet is always required -->
@@ -66,14 +66,11 @@ Here's an example that loads only the button component and its dependencies. Aga
 
 <script type="module" data-shoelace="/scripts/shoelace">
   import SlButton from '@shoelace-style/shoelace/dist/components/button/button.js';
-  import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
   
-  // <sl-button> and <sl-spinner> are ready to use!
+  // <sl-button> is ready to use!
 </script>
 ```
 
-If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state.
-
 !> Never cherry pick components or utilities from `shoelace.js` as this will cause the browser to load the entire library. Instead, cherry pick from specific modules as shown above.
 
 !> You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.

docs/getting-started/usage.md

@@ -164,26 +164,6 @@ const MyComponent = (props) => {
 };
 ```
 
-### Dependencies
-
-Some components depend on other components internally. For example, `<sl-button>` requires you to load `<sl-spinner>` because it's used internally for its loading state. If a component has dependencies, they'll be listed in the "Dependencies" section of its documentation. These are always Shoelace components, not third-party libraries. 
-
-Since dependencies are just components, you can load them the same way.
-
-```jsx
-import SlButton from '@shoelace-style/react/dist/button';
-import SlSpinner from '@shoelace-style/react/dist/spinner';
-```
-
-However, this may cause your linter to complain (e.g. "SlButton is defined but never used"). If you're not going to use the dependent components in your JSX, you can import them as side effects instead.
-
-```jsx
-import '@shoelace-style/react/dist/button';
-import '@shoelace-style/react/dist/spinner';
-```
-
-This extra step is required for dependencies to ensure they get registered with the browser as custom elements.
-
 ## Vue
 
 Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements. You just have to tell it to ignore Shoelace components. This is pretty easy because they all start with `sl-`.

docs/resources/changelog.md

@@ -8,7 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Shoelace even easier to use. For transparency, component dependencies will continue to be listed in the docs.
+
 - Added "Reflects" column to the properties table
+- Dependencies are now automatically imported for all components
 
 ## 2.0.0-beta.46
 

src/components/alert/alert.ts

@@ -8,6 +8,8 @@ import { waitForEvent } from '../../internal/event';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import styles from './alert.styles';
 
+import '../icon-button/icon-button';
+
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });
 
 /**

src/components/avatar/avatar.ts

@@ -3,6 +3,8 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map';
 import styles from './avatar.styles';
 
+import '../icon/icon';
+
 /**
  * @since 2.0
  * @status stable

src/components/button/button.ts

@@ -6,6 +6,8 @@ import { emit } from '../../internal/event';
 import { hasSlot } from '../../internal/slot';
 import styles from './button.styles';
 
+import '../spinner/spinner';
+
 /**
  * @since 2.0
  * @status stable

src/components/color-picker/color-picker.ts

@@ -11,6 +11,11 @@ import type SlInput from '../input/input';
 import color from 'color';
 import styles from './color-picker.styles';
 
+import '../button/button';
+import '../dropdown/dropdown';
+import '../icon/icon';
+import '../input/input';
+
 /**
  * @since 2.0
  * @status stable

src/components/details/details.ts

@@ -9,6 +9,8 @@ import { focusVisible } from '../../internal/focus-visible';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
 import styles from './details.styles';
 
+import '../icon/icon';
+
 let id = 0;
 
 /**

src/components/dialog/dialog.ts

@@ -13,6 +13,8 @@ import Modal from '../../internal/modal';
 import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry';
 import styles from './dialog.styles';
 
+import '../icon-button/icon-button';
+
 const hasPreventScroll = isPreventScrollSupported();
 
 let id = 0;

src/components/drawer/drawer.ts

@@ -14,6 +14,8 @@ import Modal from '../../internal/modal';
 import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry';
 import styles from './drawer.styles';
 
+import '../icon-button/icon-button';
+
 const hasPreventScroll = isPreventScrollSupported();
 
 let id = 0;

src/components/icon-button/icon-button.ts

@@ -5,6 +5,8 @@ import { ifDefined } from 'lit-html/directives/if-defined';
 import { focusVisible } from '../../internal/focus-visible';
 import styles from './icon-button.styles';
 
+import '../icon/icon';
+
 /**
  * @since 2.0
  * @status stable

src/components/image-comparer/image-comparer.ts

@@ -6,6 +6,8 @@ import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
 import styles from './image-comparer.styles';
 
+import '../icon/icon';
+
 /**
  * @since 2.0
  * @status stable

src/components/input/input.ts

@@ -8,6 +8,8 @@ import { getLabelledBy, renderFormControl } from '../../internal/form-control';
 import { hasSlot } from '../../internal/slot';
 import styles from './input.styles';
 
+import '../icon/icon';
+
 let id = 0;
 
 /**

src/components/menu-divider/menu-divider.ts

@@ -6,8 +6,6 @@ import styles from './menu-divider.styles';
  * @since 2.0
  * @status stable
  *
- * @dependency sl-menu
- *
  * @csspart base - The component's base wrapper.
  */
 @customElement('sl-menu-divider')

src/components/menu-item/menu-item.ts

@@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map';
 import { watch } from '../../internal/watch';
 import styles from './menu-item.styles';
 
+import '../icon/icon';
+
 /**
  * @since 2.0
  * @status stable

src/components/menu-label/menu-label.ts

@@ -6,8 +6,6 @@ import styles from './menu-label.styles';
  * @since 2.0
  * @status stable
  *
- * @dependency sl-menu
- *
  * @slot - The menu label's content.
  *
  * @csspart base - The component's base wrapper.

src/components/rating/rating.ts

@@ -9,6 +9,8 @@ import { focusVisible } from '../../internal/focus-visible';
 import { clamp } from '../../internal/math';
 import styles from './rating.styles';
 
+import '../icon/icon';
+
 /**
  * @since 2.0
  * @status stable

src/components/select/select.ts

@@ -13,6 +13,12 @@ import type SlMenu from '../menu/menu';
 import type SlMenuItem from '../menu-item/menu-item';
 import styles from './select.styles';
 
+import '../dropdown/dropdown';
+import '../icon/icon';
+import '../icon-button/icon-button';
+import '../menu/menu';
+import '../tag/tag';
+
 let id = 0;
 
 /**

src/components/tab-group/tab-group.ts

@@ -10,6 +10,8 @@ import type SlTab from '../tab/tab';
 import type SlTabPanel from '../tab-panel/tab-panel';
 import styles from './tab-group.styles';
 
+import '../icon-button/icon-button';
+
 /**
  * @since 2.0
  * @status stable

src/components/tab/tab.ts

@@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map';
 import { emit } from '../../internal/event';
 import styles from './tab.styles';
 
+import '../icon-button/icon-button';
+
 let id = 0;
 
 /**

src/components/tag/tag.ts

@@ -4,6 +4,8 @@ import { classMap } from 'lit-html/directives/class-map';
 import { emit } from '../../internal/event';
 import styles from './tag.styles';
 
+import '../icon-button/icon-button';
+
 /**
  * @since 2.0
  * @status stable