update metadata and more

Author: mdo

site/src/content/docs/content/images.mdx

@@ -2,6 +2,7 @@
 title: Images
 description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
 toc: true
+css_layer: content
 ---
 
 ## Responsive images

site/src/content/docs/content/prose.mdx

@@ -2,6 +2,7 @@
 title: Prose
 description: Use the `.prose` wrapper class to make long form content more easily without the need for specifying Bootstrap classes on every element. Especially useful for converting Markdown or MDX to HTML, or simply for making content heavy pages more readable.
 toc: true
+css_layer: content
 ---
 
 ## How it works

site/src/content/docs/content/reboot.mdx

@@ -3,6 +3,7 @@ title: Reboot
 description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
 aliases: "/docs/[[config:docs_version]]/content/"
 toc: true
+css_layer: reboot
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/content/tables.mdx

@@ -2,6 +2,7 @@
 title: Tables
 description: Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
 toc: true
+css_layer: content
 css_media: viewport
 ---
 

site/src/content/docs/content/typography.mdx

@@ -2,6 +2,7 @@
 title: Typography
 description: Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
 toc: true
+css_layer: content
 ---
 
 ## Global settings

site/src/content/docs/forms/checkbox.mdx

@@ -2,6 +2,8 @@
 title: Checkbox
 description: Highly customizable, native checkbox `<input>` elements for presenting toggleable options.
 toc: true
+css_layer: forms
+mdn: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox
 ---
 
 import { getData } from '@libs/data'

site/src/content/docs/forms/chip-input.mdx

@@ -2,6 +2,8 @@
 title: Chip input
 description: Create tag-like inputs for multi-value fields like skills, categories, or email recipients using themed chips.
 toc: true
+css_layer: forms
+js: required
 ---
 
 import { getData } from '@libs/data'
@@ -23,7 +25,7 @@ See examples of all of this in action below.
 
 Use `.chip` for standalone chips. Add `.chip-icon` for a leading icon, `.chip-img` for an image like an avatar, and `.chip-dismiss` for a remove button. Note that we use an inline SVG for the dismiss button icon—you can modify this as needed. JavaScript users can use the `dismissIcon` option for passing a custom SVG.
 
-<Example code={`<span class="chip">Basic chip</span>
+<Example class="d-flex flex-wrap gap-2" code={`<span class="chip">Basic chip</span>
 
   <span class="chip">
     <img src="https://github.com/mdo.png" class="chip-img" width="16" height="16" alt="">
@@ -50,7 +52,7 @@ Use `.chip` for standalone chips. Add `.chip-icon` for a leading icon, `.chip-im
 
 Apply `.theme-*` classes to color your chips. Chips are subtle by default as this allows for a clear, themed active state.
 
-<Example code={[
+<Example class="d-flex flex-wrap gap-2" code={[
   `<span class="chip">Default</span>`,
   ...getData('theme-colors').map((themeColor) => `<span class="chip theme-${themeColor.name}">${themeColor.title}</span>`)
 ]} />
@@ -59,7 +61,7 @@ Apply `.theme-*` classes to color your chips. Chips are subtle by default as thi
 
 Add `.active` to make chips use the solid appearance (bg/contrast). This is useful for toggle-style chip selections.
 
-<Example code={`<span class="chip theme-primary">Default</span>
+<Example class="d-flex flex-wrap gap-2" code={`<span class="chip theme-primary">Default</span>
   <span class="chip theme-primary active">Active</span>
   <span class="chip theme-success">Default</span>
   <span class="chip theme-success active">Active</span>`} />

site/src/content/docs/forms/combobox.mdx

@@ -2,6 +2,10 @@
 title: Combobox
 description: A customizable select-like component built with markup-first HTML, powered by the Menu component for positioning and keyboard navigation.
 toc: true
+css_layer: components
+js: required
+deps:
+  - title: Menu
 ---
 
 ## Overview

site/src/content/docs/forms/datepicker.mdx

@@ -2,6 +2,11 @@
 title: Datepicker
 description: A flexible date picker component powered by Vanilla Calendar Pro, with Bootstrap styling and data attribute support.
 toc: true
+css_layer: components
+js: required
+deps:
+  - title: Vanilla Calendar Pro
+    url: https://vanilla-calendar.pro/
 ---
 
 ## Overview
@@ -29,7 +34,7 @@ Note that we're using a width utility of `.w-12` to ensure the input is wide eno
 Use the [form adorn component]([[docsref:/forms/form-adorn]]) to add a calendar icon alongside the datepicker input. When the input is inside a `.form-adorn` wrapper, the calendar automatically positions relative to the wrapper instead of the input.
 
 <Example code={`<label for="datepickerIconStart" class="form-label">Select date</label>
-  <div class="form-adorn w-12">
+  <div class="form-control form-adorn w-12">
     <div class="form-adorn-icon">
       <svg class="bi" width="16" height="16"><use href="#calendar-week" /></svg>
     </div>

site/src/content/docs/forms/floating-labels.mdx

@@ -2,6 +2,7 @@
 title: Floating labels
 description: Create beautifully simple form labels that float over your input fields.
 toc: true
+css_layer: forms
 ---
 
 ## Example