Auto-generate JS component Dependencies tables

Derive each docs "Dependencies" table from the component's real import
graph (site/src/libs/js-dependencies.ts) via a new <JsDependencies>
shortcode, so the tables stay in sync with the source automatically
instead of being hand-maintained. Add the table to every JavaScript-
backed component page and migrate the existing tooltip, popover, and
menu tables onto the shortcode.

Author: mdo

AGENTS.md

@@ -46,6 +46,7 @@ Sass source in `scss/`, TypeScript source in `js/src/`, docs site in `site/` (As
 - Frontmatter schema: `title` (required), `description` (required), `toc`, `aliases`, `added`, `mdn`, `reference`, etc.
 - Shortcodes: `Example`, `Callout`, `Code`, `Details`
 - Internal links: `[[docsref:/path/]]`
+- JS component "Dependencies" tables are auto-generated — add a `### Dependencies` heading with `<JsDependencies component="<js-src-basename>" />` (before `### Options`) on any doc for a `js/src/*.ts` component. The table is derived at build time by walking the component's import graph in `site/src/libs/js-dependencies.ts`; never hand-write the file list. When a new source file or third-party package enters the graph, add its human-readable label to `FILE_DESCRIPTIONS` / `PACKAGE_DESCRIPTIONS` in that lib (the build throws if a label is missing).
 
 ## Formatting
 

site/src/components/shortcodes/JsDependencies.astro

@@ -0,0 +1,49 @@
+---
+import { getJsDependencies } from '@libs/js-dependencies'
+
+interface Props {
+  /**
+   * Name of the component's JavaScript source file (relative to `js/src`, without extension), e.g. `tooltip` or
+   * `otp-input`. The dependency table is generated by walking this file's import graph.
+   */
+  component: string
+  /**
+   * Optional display name used in the introductory sentence, defaulting to the `component` value.
+   */
+  name?: string
+}
+
+const { component, name } = Astro.props
+
+if (!component) {
+  throw new Error("Missing required 'component' prop for the '<JsDependencies />' component.")
+}
+
+const dependencies = getJsDependencies(component)
+const label = name ?? component
+---
+
+<p>The {label} plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:</p>
+
+<div class="table-responsive">
+  <table class="table md:table-stacked">
+    <thead>
+      <tr>
+        <th>File</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        dependencies.map((dependency) => (
+          <tr>
+            <td data-cell="File">
+              <code>{dependency.file}</code>
+            </td>
+            <td data-cell="Description">{dependency.description}</td>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>

site/src/components/shortcodes/index.ts

@@ -9,6 +9,7 @@ export { default as Details } from './Details.astro'
 export { default as Example } from './Example.astro'
 export { default as GuideFooter } from './GuideFooter.mdx'
 export { default as JsDataAttributes } from './JsDataAttributes.mdx'
+export { default as JsDependencies } from './JsDependencies.astro'
 export { default as JsDismiss } from './JsDismiss.astro'
 export { default as JsDocs } from './JsDocs.astro'
 export { default as MenuPlacementPlayground } from './MenuPlacementPlayground.astro'

site/src/content/docs/components/alert.mdx

@@ -134,6 +134,10 @@ See the [triggers](#triggers) section for more details.
 
 **Note that closing an alert will remove it from the DOM.**
 
+### Dependencies
+
+<JsDependencies component="alert" />
+
 ### Methods
 
 You can create an alert instance with the alert constructor, for example:

site/src/content/docs/components/button.mdx

@@ -259,6 +259,10 @@ Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re
 | `data-bs-toggle="button"` | Toggles the button’s active (`pressed`) state via the Button plugin. |
 </BsTable>
 
+### Dependencies
+
+<JsDependencies component="button" />
+
 ### Methods
 
 You can create a button instance with the button constructor, for example:

site/src/content/docs/components/carousel.mdx

@@ -571,6 +571,10 @@ Call carousel manually with:
 const carousel = new bootstrap.Carousel('#myCarousel')
 ```
 
+### Dependencies
+
+<JsDependencies component="carousel" />
+
 ### Options
 
 <JsDataAttributes />

site/src/content/docs/components/collapse.mdx

@@ -137,6 +137,10 @@ const collapseElementList = document.querySelectorAll('.collapse')
 const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))
 ```
 
+### Dependencies
+
+<JsDependencies component="collapse" />
+
 ### Options
 
 <JsDataAttributes />

site/src/content/docs/components/dialog.mdx

@@ -485,6 +485,10 @@ Create a dialog with a single line of JavaScript:
 const myDialog = new bootstrap.Dialog('#myDialog')
 ```
 
+### Dependencies
+
+<JsDependencies component="dialog" />
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop="static"`.

site/src/content/docs/components/drawer.mdx

@@ -349,6 +349,10 @@ const drawerElementList = document.querySelectorAll('dialog.drawer')
 const drawerList = [...drawerElementList].map(drawerEl => new bootstrap.Drawer(drawerEl))
 ```
 
+### Dependencies
+
+<JsDependencies component="drawer" />
+
 ### Options
 
 <JsDataAttributes />

site/src/content/docs/components/menu.mdx

@@ -619,20 +619,7 @@ menu.toggle()
 
 ### Dependencies
 
-The menu plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:
-
-<BsTable>
-| File | Description |
-| --- | --- |
-| `js/src/menu.ts` | Main menu component |
-| `js/src/base-component.ts` | Base component class |
-| `js/src/dom/event-handler.ts` | Event handling utilities |
-| `js/src/dom/manipulator.ts` | Data attribute manipulation |
-| `js/src/dom/selector-engine.ts` | DOM selector utilities |
-| `js/src/util/index.ts` | Core utility functions |
-| `js/src/util/floating-ui.ts` | Responsive placement utilities |
-| `@floating-ui/dom` | Third-party positioning library |
-</BsTable>
+<JsDependencies component="menu" />
 
 ### Options