From bfe1a7e804808469252cf40ad2cd924591b9451a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 2 Jul 2020 08:16:06 -0400
Subject: [PATCH] Move API details to bottom

---
 docs/components/alert.md         | 4 ++--
 docs/components/avatar.md        | 4 ++--
 docs/components/badge.md         | 4 ++--
 docs/components/button.md        | 3 +--
 docs/components/color-picker.md  | 6 +++---
 docs/components/details.md       | 6 +++---
 docs/components/dialog.md        | 4 ++--
 docs/components/drawer.md        | 4 ++--
 docs/components/dropdown.md      | 6 +++---
 docs/components/form.md          | 4 ++--
 docs/components/icon.md          | 6 +++---
 docs/components/input.md         | 4 ++--
 docs/components/progress-bar.md  | 4 ++--
 docs/components/progress-ring.md | 6 +++---
 docs/components/range.md         | 6 +++---
 docs/components/select.md        | 6 +++---
 docs/components/spinner.md       | 6 +++---
 docs/components/tab-group.md     | 4 ++--
 docs/components/tag.md           | 4 ++--
 docs/components/textarea.md      | 6 +++---
 docs/components/tooltip.md       | 6 +++---
 21 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/docs/components/alert.md b/docs/components/alert.md
index 14238a824..3ba4ec1f8 100644
--- a/docs/components/alert.md
+++ b/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]
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index fa126c820..f9f3fb6c1 100644
--- a/docs/components/avatar.md
+++ b/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]
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 05dfdcf06..4acbc8d41 100644
--- a/docs/components/badge.md
+++ b/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]
diff --git a/docs/components/button.md b/docs/components/button.md
index 52d75ecb1..cb85506bf 100644
--- a/docs/components/button.md
+++ b/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]
diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md
index 9a2527bcc..ca3560756 100644
--- a/docs/components/color-picker.md
+++ b/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]
diff --git a/docs/components/details.md b/docs/components/details.md
index e26a5c19d..2fd81abc7 100644
--- a/docs/components/details.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-details]
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 34241a752..bbc01af54 100644
--- a/docs/components/dialog.md
+++ b/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]
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index 7a318f4b6..25cbfc8d1 100644
--- a/docs/components/drawer.md
+++ b/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]
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 55ca35715..134bd8eaf 100644
--- a/docs/components/dropdown.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-dropdown]
diff --git a/docs/components/form.md b/docs/components/form.md
index 192a9c85d..745d3de81 100644
--- a/docs/components/form.md
+++ b/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]
diff --git a/docs/components/icon.md b/docs/components/icon.md
index d6599fbd6..a8fc18b5f 100644
--- a/docs/components/icon.md
+++ b/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>
\ No newline at end of file
+</style>
+
+[component-metadata:sl-icon]
diff --git a/docs/components/input.md b/docs/components/input.md
index e780e4f8e..3d1481621 100644
--- a/docs/components/input.md
+++ b/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]
diff --git a/docs/components/progress-bar.md b/docs/components/progress-bar.md
index 94f630593..db71ff5c2 100644
--- a/docs/components/progress-bar.md
+++ b/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]
diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md
index 96a44504c..f961a8cf1 100644
--- a/docs/components/progress-ring.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-progress-ring]
diff --git a/docs/components/range.md b/docs/components/range.md
index f1f536c72..911baf8a9 100644
--- a/docs/components/range.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-range]
diff --git a/docs/components/select.md b/docs/components/select.md
index 4a192bcd1..ac98fd1ec 100644
--- a/docs/components/select.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-select]
diff --git a/docs/components/spinner.md b/docs/components/spinner.md
index 2432f3f95..a20754c75 100644
--- a/docs/components/spinner.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-spinner]
diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md
index 64611d819..e363fe36c 100644
--- a/docs/components/tab-group.md
+++ b/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]
diff --git a/docs/components/tag.md b/docs/components/tag.md
index 01bf75c24..bfc53a4e8 100644
--- a/docs/components/tag.md
+++ b/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]
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index cd7d8052a..e2c7d1e5c 100644
--- a/docs/components/textarea.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-textarea]
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 61fbb22b8..e9edc0691 100644
--- a/docs/components/tooltip.md
+++ b/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>
-```
\ No newline at end of file
+```
+
+[component-metadata:sl-tooltip]