Move API details to bottom

docs/components/alert.md

@@ -13,8 +13,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </sl-alert>
 ```
 
-[component-metadata:sl-alert]
-
 ## Examples
 
 ### Types
@@ -75,3 +73,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   Nothing fancy here, just a simple alert.
 </sl-alert>
 ```
+
+[component-metadata:sl-alert]

docs/components/avatar.md

@@ -14,8 +14,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Gray tabby kitten looking down"></sl-avatar>
 ```
 
-[component-metadata:sl-avatar]
-
 ## Examples
 
 ### Shape
@@ -43,3 +41,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   <sl-icon slot="icon" name="briefcase"></sl-icon>
 </sl-avatar>
 ```
+
+[component-metadata:sl-avatar]

docs/components/badge.md

@@ -14,8 +14,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-badge type="danger">Danger</sl-badge>
 ```
 
-[component-metadata:sl-badge]
-
 ## Examples
 
 ### Buttons
@@ -50,3 +48,5 @@ When including badges in menu items, use the `suffix` slot to make sure they're
   <sl-menu-item>Replies <sl-badge slot="suffix">12</sl-badge></sl-menu-item>
 </sl-menu>
 ```
+
+[component-metadata:sl-badge]

docs/components/button.md

@@ -15,8 +15,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-button type="danger">Danger</sl-button>
 ```
 
-[component-metadata:sl-button]
-
 ## Examples
 
 ### Pill
@@ -130,3 +128,4 @@ Use the `disabled` prop to disable a button.
 <sl-button type="danger" disabled>Danger</sl-button>
 ```
 
+[component-metadata:sl-button]

docs/components/color-picker.md

@@ -1,6 +1,6 @@
 # Color Picker
 
-[component-header:sl-checkbox]
+[component-header:sl-color-picker]
 
 Color pickers give users a way to select a color.
 
@@ -10,8 +10,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-color-picker></sl-color-picker>
 ```
 
-[component-metadata:sl-checkbox]
-
 ## Examples
 
 ### Opacity
@@ -49,3 +47,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 ```html preview
 <sl-color-picker opacity inline></sl-color-picker>
 ```
+
+[component-metadata:sl-color-picker]

docs/components/details.md

@@ -12,8 +12,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </sl-details>
 ```
 
-[component-metadata:sl-details]
-
 ## Examples
 
 ### Disabled
@@ -58,4 +56,6 @@ Details are designed to function independently, but you can simulate a group whe
     margin-bottom: .5rem;
   }
 </style>
-```
+```
+
+[component-metadata:sl-details]

docs/components/dialog.md

@@ -26,8 +26,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </script>
 ```
 
-[component-metadata:sl-dialog]
-
 ## Examples
 
 ### No Overlay Dismiss
@@ -79,3 +77,5 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
   })();
 </script>
 ```
+
+[component-metadata:sl-dialog]

docs/components/drawer.md

@@ -26,8 +26,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </script>
 ```
 
-[component-metadata:sl-drawer]
-
 ## Examples
 
 ### Placement
@@ -192,3 +190,5 @@ By design, a drawer's height is 100% of its container and will never exceed that
   })();
 </script>
 ```
+
+[component-metadata:sl-drawer]

docs/components/dropdown.md

@@ -31,8 +31,6 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
 </sl-dropdown>
 ```
 
-[component-metadata:sl-dropdown]
-
 ## Examples
 
 ### Placement
@@ -111,4 +109,6 @@ Dropdowns are designed to work well with [menus](/components/menu.md) to provide
     <sl-menu-item>Item 20</sl-menu-item>
   </sl-menu>
 </sl-dropdown>
-```
+```
+
+[component-metadata:sl-dropdown]

docs/components/form.md

@@ -43,8 +43,6 @@ All of Shoelace's components make use of the [shadow DOM](https://developer.mozi
 
 ?> Shoelace forms don't make use of `action` and `method` attributes, and they don't submit automatically like native forms. To handle submission, you need to listen for the `slSubmit` event as shown in the example's source above.
 
-[component-metadata:sl-form]
-
 ## Examples
 
 ### GET
@@ -58,3 +56,5 @@ TODO
 ### Native Form Controls
 
 TODO
+
+[component-metadata:sl-form]

docs/components/icon.md

@@ -27,8 +27,6 @@ Shoelace comes bundled with over 1,000 icons courtesy of the [Bootstrap Icons](h
   <input type="text" class="icon-copy-input">
 </div>
 
-[component-metadata:sl-icon]
-
 ## Examples
 
 ### Sizes
@@ -218,4 +216,6 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
       font-size: 20px;
     }    
   }  
-</style>
+</style>
+
+[component-metadata:sl-icon]

docs/components/input.md

@@ -10,8 +10,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-input type="text" placeholder="Input"></sl-input>
 ```
 
-[component-metadata:sl-input]
-
 ## Examples
 
 ### Labels
@@ -85,3 +83,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <br>
 <sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
 ```
+
+[component-metadata:sl-input]

docs/components/progress-bar.md

@@ -14,8 +14,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-progress-bar percentage="100"></sl-progress-bar>
 ```
 
-[component-metadata:sl-progress-bar]
-
 ## Examples
 
 ### Custom Height & Label
@@ -27,3 +25,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
 <sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
 ```
+
+[component-metadata:sl-progress-bar]

docs/components/progress-ring.md

@@ -16,8 +16,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </div>
 ```
 
-[component-metadata:sl-progress-ring]
-
 ## Examples
 
 ### Size
@@ -28,4 +26,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   <sl-progress-ring percentage="50" size="150">50%</sl-progress-ring><br>
   <sl-progress-ring percentage="50" size="200">50%</sl-progress-ring><br>
 </div>
-```
+```
+
+[component-metadata:sl-progress-ring]

docs/components/range.md

@@ -10,8 +10,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-range min="0" max="100" step="1"></sl-range>
 ```
 
-[component-metadata:sl-range]
-
 ## Examples
 
 ### Custom Formatter
@@ -35,4 +33,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 ```html preview
 <sl-range min="0" max="100" step="1" disabled></sl-range>
-```
+```
+
+[component-metadata:sl-range]

docs/components/select.md

@@ -18,8 +18,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </sl-select>
 ```
 
-[component-metadata:sl-select]
-
 ## Examples
 
 ### Labels
@@ -96,4 +94,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   <sl-menu-item value="option-2">Option 2</sl-menu-item>
   <sl-menu-item value="option-3">Option 3</sl-menu-item>
 </sl-select>
-```
+```
+
+[component-metadata:sl-select]

docs/components/spinner.md

@@ -10,8 +10,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-spinner></sl-spinner>
 ```
 
-[component-metadata:sl-spinner]
-
 ## Examples
 
 ## Size
@@ -20,4 +18,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-spinner size="16"></sl-spinner>
 <sl-spinner size="32"></sl-spinner>
 <sl-spinner size="48"></sl-spinner>
-```
+```
+
+[component-metadata:sl-spinner]

docs/components/tab-group.md

@@ -20,8 +20,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 </sl-tab-group>
 ```
 
-[component-metadata:sl-tab-group]
-
 ## Examples
 
 ### Tabs on Bottom
@@ -118,3 +116,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   <sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
 </sl-tab-group>
 ```
+
+[component-metadata:sl-tab-group]

docs/components/tag.md

@@ -14,8 +14,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-tag type="danger">Danger</sl-tag>
 ```
 
-[component-metadata:sl-tag]
-
 ## Examples
 
 ### Size
@@ -69,3 +67,5 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-tag size="large" type="warning" removable>Warning</sl-tag>
 <sl-tag size="large" type="danger" removable>Danger</sl-tag>
 ```
+
+[component-metadata:sl-tag]

docs/components/textarea.md

@@ -10,8 +10,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 <sl-textarea placeholder="Textarea"></sl-textarea>
 ```
 
-[component-metadata:sl-textarea]
-
 ## Examples
 
 ### Labels
@@ -36,4 +34,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 ```html preview
 <sl-textarea placeholder="Textarea" disabled></sl-textarea>
-```
+```
+
+[component-metadata:sl-textarea]

docs/components/tooltip.md

@@ -12,8 +12,6 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
 </sl-tooltip>
 ```
 
-[component-metadata:sl-tooltip]
-
 ## Examples
 
 ### Placement
@@ -146,4 +144,6 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
     <sl-button>Below</sl-button>
   </sl-tooltip>
 </div>
-```
+```
+
+[component-metadata:sl-tooltip]