From 36294e6d359fe783573ddbd753379936e4acb2ad Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 22 May 2020 16:30:06 -0400
Subject: [PATCH] Remove docs-readme output target

---
 src/components/alert/readme.md            |  47 +--------
 src/components/button/readme.md           | 123 +---------------------
 src/components/checkbox/readme.md         |  11 +-
 src/components/color-picker/readme.md     |  10 +-
 src/components/dialog/readme.md           |  22 +---
 src/components/dropdown-divider/readme.md |   5 +-
 src/components/dropdown-item/readme.md    |   5 +-
 src/components/dropdown/readme.md         |  62 +----------
 src/components/icon/readme.md             |  40 +------
 src/components/input/readme.md            |  76 +------------
 src/components/progress-bar/readme.md     |  19 +---
 src/components/progress-ring/readme.md    |  14 +--
 src/components/radio/readme.md            |  10 +-
 src/components/range/readme.md            |  31 +-----
 src/components/spinner/readme.md          |  10 +-
 src/components/switch/readme.md           |   9 +-
 src/components/tab-group/readme.md        | 123 +---------------------
 src/components/tab-panel/readme.md        |   5 +-
 src/components/tab/readme.md              |   5 +-
 src/components/textarea/readme.md         |  13 +--
 src/components/tooltip/readme.md          |  28 +----
 stencil.config.ts                         |   4 -
 22 files changed, 46 insertions(+), 626 deletions(-)

diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md
index 3c03043d1..bd49ec2a3 100644
--- a/src/components/alert/readme.md
+++ b/src/components/alert/readme.md
@@ -1,49 +1,6 @@
-# Alert
+# sl-alert
 
-```html preview
-<sl-alert type="primary" open>
-  Nothing fancy here, just a simple alert.
-</sl-alert><br>
 
-<sl-alert type="primary" open closable>
-  <sl-icon slot="icon" name="info"></sl-icon>
-  This one is a bit fancier because now it has an icon and is closable.
-</sl-alert>
-```
-
-## Types
-
-```html preview
-<sl-alert type="primary" open closable>
-  <sl-icon slot="icon" name="info"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can continue working or safely leave the app now.
-</sl-alert><br>
-
-<sl-alert type="success" open closable>
-  <sl-icon slot="icon" name="check-circle"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can continue working or safely leave the app now.
-</sl-alert><br>
-
-<sl-alert type="info" open closable>
-  <sl-icon slot="icon" name="settings"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can continue working or safely leave the app now.
-</sl-alert><br>
-
-<sl-alert type="warning" open closable>
-  <sl-icon slot="icon" name="alert-triangle"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can continue working or safely leave the app now.
-</sl-alert><br>
-
-<sl-alert type="danger" open closable>
-  <sl-icon slot="icon" name="alert-octagon"></sl-icon>
-  <strong>Your changes have been saved</strong><br>
-  You can continue working or safely leave the app now.
-</sl-alert>
-```
 
 <!-- Auto Generated Below -->
 
@@ -114,4 +71,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index c4fc2b5b8..652b0fa5d 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -1,124 +1,5 @@
-# Button
+# sl-button
 
-Good ol' buttons. They're usually the first thing I look at when reviewing a component library. Shoelace offers a variation for every theme color.
-
-```html preview
-<sl-button type="default" tabindex>Default</sl-button>
-<sl-button type="primary" tabindex>Primary</sl-button>
-<sl-button type="success" tabindex>Success</sl-button>
-<sl-button type="info">Info</sl-button>
-<sl-button type="warning">Warning</sl-button>
-<sl-button type="danger">Danger</sl-button>
-```
-
-## Pill
-
-Use the `pill` prop to give buttons rounded edges.
-
-```html preview
-<sl-button type="default" pill>Default</sl-button>
-<sl-button type="primary" pill>Primary</sl-button>
-<sl-button type="success" pill>Success</sl-button>
-<sl-button type="info" pill>Info</sl-button>
-<sl-button type="warning" pill>Warning</sl-button>
-<sl-button type="danger" pill>Danger</sl-button>
-```
-
-## Sizes
-
-Use the `size` prop to change a button's size.
-
-```html preview
-<sl-button size="small">Small</sl-button>
-<sl-button size="medium">Medium</sl-button>
-<sl-button size="large">Large</sl-button>
-```
-
-## Circle
-
-Use the `circle` prop to create circular icon buttons.
-
-```html preview
-<sl-button type="default" size="small" circle><sl-icon name="settings"></sl-icon></sl-button>
-<sl-button type="default" size="medium" circle><sl-icon name="settings"></sl-icon></sl-button>
-<sl-button type="default" size="large" circle><sl-icon name="settings"></sl-icon></sl-button>
-```
-
-## Text
-
-Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders.
-
-```html preview
-<sl-button type="text" size="small">Text</sl-button>
-<sl-button type="text" size="medium">Text</sl-button>
-<sl-button type="text" size="large">Text</sl-button>
-```
-
-## Block
-
-Block buttons can be created by setting the button's width to `100%`.
-
-```html preview
-<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button type="default" size="large" style="width: 100%; margin-bottom: 1rem;">Large</sl-button>
-```
-
-## Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html preview
-<sl-button type="default">
-  <sl-icon slot="prefix" name="settings"></sl-icon>
-  Settings
-</sl-button>
-<sl-button type="default">
-  <sl-icon slot="suffix" name="refresh-ccw"></sl-icon>
-  Refresh
-</sl-button>
-<sl-button type="default">
-  <sl-icon slot="prefix" name="link"></sl-icon>
-  <sl-icon slot="suffix" name="external-link"></sl-icon>
-  Open
-</sl-button>
-```
-
-## Caret
-
-Use the `caret` prop to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
-
-```html preview
-<sl-button size="small" caret>Small</sl-button>
-<sl-button size="medium" caret>Medium</sl-button>
-<sl-button size="large" caret>Large</sl-button>
-```
-
-## Loading
-
-Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
-
-```html preview
-<sl-button type="default" loading>Default</sl-button>
-<sl-button type="primary" loading>Primary</sl-button>
-<sl-button type="success" loading>Success</sl-button>
-<sl-button type="info" loading>Info</sl-button>
-<sl-button type="warning" loading>Warning</sl-button>
-<sl-button type="danger" loading>Danger</sl-button>
-```
-
-## Disabled
-
-Use the `disabled` prop to disable a button.
-
-```html preview
-<sl-button type="default" disabled>Default</sl-button>
-<sl-button type="primary" disabled>Primary</sl-button>
-<sl-button type="success" disabled>Success</sl-button>
-<sl-button type="info" disabled>Info</sl-button>
-<sl-button type="warning" disabled>Warning</sl-button>
-<sl-button type="danger" disabled>Danger</sl-button>
-```
 
 
 <!-- Auto Generated Below -->
@@ -197,4 +78,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/checkbox/readme.md b/src/components/checkbox/readme.md
index 48e06a276..4c57bfef9 100644
--- a/src/components/checkbox/readme.md
+++ b/src/components/checkbox/readme.md
@@ -1,11 +1,6 @@
-# Checkbox
+# sl-checkbox
+
 
-```html preview
-<sl-checkbox>Default</sl-checkbox><br><br>
-<sl-checkbox checked>Checked</sl-checkbox><br><br>
-<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br><br>
-<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
-```
 
 <!-- Auto Generated Below -->
 
@@ -62,4 +57,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/color-picker/readme.md b/src/components/color-picker/readme.md
index 40ff38cda..f98563b71 100644
--- a/src/components/color-picker/readme.md
+++ b/src/components/color-picker/readme.md
@@ -1,12 +1,6 @@
-# Color Picker
+# sl-color-picker
 
-```html preview
-<sl-color-picker opacity></sl-color-picker>
-```
 
-```html preview
-<sl-color-picker opacity inline></sl-color-picker>
-```
 
 <!-- Auto Generated Below -->
 
@@ -59,4 +53,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index a1793c3b5..ca43d0c78 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -1,24 +1,6 @@
-# Dialog
+# sl-dialog
 
-```html preview
-<sl-dialog label="Dialog" id="dialog-1">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" type="primary" id="dialog-1-close">Close</sl-button>
-</sl-dialog>
 
-<sl-button id="dialog-1-open">Open Dialog</sl-button>
-
-<script>
-  (() => {
-    const dialog = document.querySelector('#dialog-1');
-    const openButton = document.querySelector('#dialog-1-open');
-    const closeButton = document.querySelector('#dialog-1-close');
-    
-    openButton.addEventListener('click', () => dialog.show());
-    closeButton.addEventListener('click', () => dialog.hide());
-  })();
-</script>
-```
 
 <!-- Auto Generated Below -->
 
@@ -97,4 +79,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/dropdown-divider/readme.md b/src/components/dropdown-divider/readme.md
index 139a7d3d6..8186cee4f 100644
--- a/src/components/dropdown-divider/readme.md
+++ b/src/components/dropdown-divider/readme.md
@@ -1,6 +1,5 @@
-# Dropdown Divider
+# sl-dropdown-divider
 
-TODO
 
 
 <!-- Auto Generated Below -->
@@ -8,4 +7,4 @@ TODO
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/dropdown-item/readme.md b/src/components/dropdown-item/readme.md
index ddd8e3eeb..b0b647aba 100644
--- a/src/components/dropdown-item/readme.md
+++ b/src/components/dropdown-item/readme.md
@@ -1,6 +1,5 @@
-# Dropdown Item
+# sl-dropdown-item
 
-TODO
 
 
 <!-- Auto Generated Below -->
@@ -47,4 +46,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md
index 1a118016f..de1757b93 100644
--- a/src/components/dropdown/readme.md
+++ b/src/components/dropdown/readme.md
@@ -1,63 +1,5 @@
-# Dropdown
+# sl-dropdown
 
-```html preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Dropdown</sl-button>
-  <sl-dropdown-item>Dropdown Item 1</sl-dropdown-item>
-  <sl-dropdown-item>Dropdown Item 2</sl-dropdown-item>
-  <sl-dropdown-item>Dropdown Item 3</sl-dropdown-item>
-  <sl-dropdown-divider></sl-dropdown-divider>
-  <sl-dropdown-item checked>Checked</sl-dropdown-item>
-  <sl-dropdown-item disabled>Disabled</sl-dropdown-item>
-  <sl-dropdown-divider></sl-dropdown-divider>
-  <sl-dropdown-item>
-    Prefix
-    <sl-icon slot="prefix" name="gift"></sl-icon>
-  </sl-dropdown-item>
-  <sl-dropdown-item>
-    Suffix Icon
-    <sl-icon slot="suffix" name="heart"></sl-icon>
-  </sl-dropdown-item>
-</sl-dropdown>
-```
-
-```html preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Edit</sl-button>
-  <sl-dropdown-item>Cut</sl-dropdown-item>
-  <sl-dropdown-item>Copy</sl-dropdown-item>
-  <sl-dropdown-item>Paste</sl-dropdown-item>
-  <sl-dropdown-divider></sl-dropdown-divider>
-  <sl-dropdown-item>Find</sl-dropdown-item>
-  <sl-dropdown-item>Replace</sl-dropdown-item>
-</sl-dropdown>
-```
-
-```html preview
-<sl-dropdown>
-  <sl-button slot="trigger" caret>Scrolling Menu</sl-button>
-  <sl-dropdown-item>Item 1</sl-dropdown-item>
-  <sl-dropdown-item>Item 2</sl-dropdown-item>
-  <sl-dropdown-item>Item 3</sl-dropdown-item>
-  <sl-dropdown-item>Item 4</sl-dropdown-item>
-  <sl-dropdown-item>Item 5</sl-dropdown-item>
-  <sl-dropdown-item>Item 6</sl-dropdown-item>
-  <sl-dropdown-item>Item 7</sl-dropdown-item>
-  <sl-dropdown-item>Item 8</sl-dropdown-item>
-  <sl-dropdown-item>Item 9</sl-dropdown-item>
-  <sl-dropdown-item>Item 10</sl-dropdown-item>
-  <sl-dropdown-item>Item 11</sl-dropdown-item>
-  <sl-dropdown-item>Item 12</sl-dropdown-item>
-  <sl-dropdown-item>Item 13</sl-dropdown-item>
-  <sl-dropdown-item>Item 14</sl-dropdown-item>
-  <sl-dropdown-item>Item 15</sl-dropdown-item>
-  <sl-dropdown-item>Item 16</sl-dropdown-item>
-  <sl-dropdown-item>Item 17</sl-dropdown-item>
-  <sl-dropdown-item>Item 18</sl-dropdown-item>
-  <sl-dropdown-item>Item 19</sl-dropdown-item>
-  <sl-dropdown-item>Item 20</sl-dropdown-item>
-</sl-dropdown>
-```
 
 
 <!-- Auto Generated Below -->
@@ -128,4 +70,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 0fca550f8..2962bc2bf 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -1,42 +1,6 @@
-# Icon
+# sl-icon
 
-```html preview
-<div style="font-size: 1rem; margin-bottom: 2rem;">
-  <sl-icon name="alert-triangle"></sl-icon>
-  <sl-icon name="archive"></sl-icon>
-  <sl-icon name="battery"></sl-icon>
-  <sl-icon name="bell"></sl-icon>
-  <sl-icon name="clock"></sl-icon>
-  <sl-icon name="chevron-down"></sl-icon>
-  <sl-icon name="download"></sl-icon>
-  <sl-icon name="file"></sl-icon>
-  <sl-icon name="flag"></sl-icon>
-  <sl-icon name="image"></sl-icon>
-  <sl-icon name="mic"></sl-icon>
-  <sl-icon name="search"></sl-icon>
-  <sl-icon name="trash"></sl-icon>
-  <sl-icon name="x-circle"></sl-icon>
-</div>
 
-<div style="font-size: 2rem; margin-bottom: 2rem;">
-  <sl-icon name="alert-triangle"></sl-icon>
-  <sl-icon name="archive"></sl-icon>
-  <sl-icon name="battery"></sl-icon>
-  <sl-icon name="bell"></sl-icon>
-  <sl-icon name="clock"></sl-icon>
-  <sl-icon name="chevron-down"></sl-icon>
-  <sl-icon name="download"></sl-icon>
-  <sl-icon name="file"></sl-icon>
-  <sl-icon name="flag"></sl-icon>
-  <sl-icon name="image"></sl-icon>
-  <sl-icon name="mic"></sl-icon>
-  <sl-icon name="search"></sl-icon>
-  <sl-icon name="trash"></sl-icon>
-  <sl-icon name="x-circle"></sl-icon>
-</div>
-```
-
-Icons are courtesy of [Feather Icons](https://feathericons.com/).
 
 <!-- Auto Generated Below -->
 
@@ -76,4 +40,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/input/readme.md b/src/components/input/readme.md
index c68009cda..26f1754b1 100644
--- a/src/components/input/readme.md
+++ b/src/components/input/readme.md
@@ -1,77 +1,5 @@
-# Input
+# sl-input
 
-```html preview
-<sl-input type="text" placeholder="Small" size="small"></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Medium" size="medium"></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Large" size="large"></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Small" size="small">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="settings" slot="suffix"></sl-icon>
-</sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Medium" size="medium">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="settings" slot="suffix"></sl-icon>
-</sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Large" size="large">
-  <sl-icon name="tag" slot="prefix"></sl-icon>
-  <sl-icon name="settings" slot="suffix"></sl-icon>
-</sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>
-
-<br><br>
-
-<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
-
-<br><br>
-
-<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
-
-<br><br>
-
-<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>
-
-<br><br>
-
-<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>
-
-<br><br>
-
-<sl-input type="number" placeholder="Number"></sl-input>
-```
 
 
 <!-- Auto Generated Below -->
@@ -198,4 +126,4 @@ graph TD;
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/progress-bar/readme.md b/src/components/progress-bar/readme.md
index 41f4eebe9..c005c1f71 100644
--- a/src/components/progress-bar/readme.md
+++ b/src/components/progress-bar/readme.md
@@ -1,20 +1,5 @@
-# Progress Bar
+# sl-progress-bar
 
-```html preview
-<sl-progress-bar percentage="0"></sl-progress-bar><br>
-<sl-progress-bar percentage="25"></sl-progress-bar><br>
-<sl-progress-bar percentage="50"></sl-progress-bar><br>
-<sl-progress-bar percentage="75"></sl-progress-bar><br>
-<sl-progress-bar percentage="100"></sl-progress-bar>
-```
-
-```html preview
-<sl-progress-bar percentage="0" height="18">0%</sl-progress-bar><br>
-<sl-progress-bar percentage="25" height="18">25%</sl-progress-bar><br>
-<sl-progress-bar percentage="50" height="18">50%</sl-progress-bar><br>
-<sl-progress-bar percentage="75" height="18">75%</sl-progress-bar><br>
-<sl-progress-bar percentage="100" height="18">100%</sl-progress-bar>
-```
 
 
 <!-- Auto Generated Below -->
@@ -37,4 +22,4 @@
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/progress-ring/readme.md b/src/components/progress-ring/readme.md
index 9f6c23472..242f466e0 100644
--- a/src/components/progress-ring/readme.md
+++ b/src/components/progress-ring/readme.md
@@ -1,14 +1,6 @@
-# Progress Ring
+# sl-progress-ring
+
 
-```html preview
-<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
-  <sl-progress-ring percentage="0">0%</sl-progress-ring><br>
-  <sl-progress-ring percentage="25">25%</sl-progress-ring><br>
-  <sl-progress-ring percentage="50">50%</sl-progress-ring><br>
-  <sl-progress-ring percentage="75">75%</sl-progress-ring><br>
-  <sl-progress-ring percentage="100">100%</sl-progress-ring>
-</div>
-```
 
 <!-- Auto Generated Below -->
 
@@ -24,4 +16,4 @@
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/radio/readme.md b/src/components/radio/readme.md
index ba8dbd1fe..c0c74f9fc 100644
--- a/src/components/radio/readme.md
+++ b/src/components/radio/readme.md
@@ -1,10 +1,6 @@
-# Radio
+# sl-radio
+
 
-```html preview
-<sl-radio>Default</sl-radio><br><br>
-<sl-radio checked>Checked</sl-radio><br><br>
-<sl-radio disabled>Disabled</sl-radio><br><br>
-```
 
 <!-- Auto Generated Below -->
 
@@ -60,4 +56,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/range/readme.md b/src/components/range/readme.md
index 138f95549..53b1aba69 100644
--- a/src/components/range/readme.md
+++ b/src/components/range/readme.md
@@ -1,33 +1,6 @@
-# Range
+# sl-range
 
-```html preview
-<sl-range min="0" max="100" step="1"></sl-range>
 
-<br><br>
-
-<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
-
-<br><br>
-
-<sl-range id="range-with-custom-formatter" min="0" max="100" step="1"></sl-range>
-<script>
-(() => {
-  document.querySelector('#range-with-custom-formatter').tooltipFormatter = value => `Total - ${value}%`;
-})();
-</script>
-
-<br><br>
-
-<sl-range min="1" max="10" step=".25"></sl-range>
-
-<br><br>
-
-<sl-range min="0" max="100" step="1" disabled></sl-range>
-
-<br><br>
-
-<sl-range min="0" max="100" step="1" tooltip="off"></sl-range>
-```
 
 <!-- Auto Generated Below -->
 
@@ -80,4 +53,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/spinner/readme.md b/src/components/spinner/readme.md
index cbe5d5bbf..549b7d6cd 100644
--- a/src/components/spinner/readme.md
+++ b/src/components/spinner/readme.md
@@ -1,10 +1,6 @@
-# Spinner
+# sl-spinner
+
 
-```html preview
-<sl-spinner></sl-spinner>
-<sl-spinner diameter="32"></sl-spinner>
-<sl-spinner diameter="48"></sl-spinner>
-```
 
 <!-- Auto Generated Below -->
 
@@ -19,4 +15,4 @@
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/switch/readme.md b/src/components/switch/readme.md
index ee5420522..51c5b3b9d 100644
--- a/src/components/switch/readme.md
+++ b/src/components/switch/readme.md
@@ -1,10 +1,5 @@
-# Switch
+# sl-switch
 
-```html preview
-<sl-switch>Switch</sl-switch><br><br>
-<sl-switch checked>Checked</sl-switch><br><br>
-<sl-switch disabled>Disabled</sl-switch><br><br>
-```
 
 
 <!-- Auto Generated Below -->
@@ -61,4 +56,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/tab-group/readme.md b/src/components/tab-group/readme.md
index 1bdc526ec..0f6c94593 100644
--- a/src/components/tab-group/readme.md
+++ b/src/components/tab-group/readme.md
@@ -1,124 +1,5 @@
-# Tab Group
+# sl-tab-group
 
-```html preview
-<sl-tab-group placement="top">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">General</sl-tab-panel>
-  <sl-tab-panel name="custom">Custom</sl-tab-panel>
-  <sl-tab-panel name="advanced">Advanced</sl-tab-panel>
-  <sl-tab-panel name="disabled">Disabled</sl-tab-panel>
-</sl-tab-group>
-```
-
-```html preview
-<sl-tab-group placement="bottom">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">General</sl-tab-panel>
-  <sl-tab-panel name="custom">Custom</sl-tab-panel>
-  <sl-tab-panel name="advanced">Advanced</sl-tab-panel>
-  <sl-tab-panel name="disabled">Disabled</sl-tab-panel>
-</sl-tab-group>
-```
-
-```html preview
-<sl-tab-group placement="left">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">General</sl-tab-panel>
-  <sl-tab-panel name="custom">Custom</sl-tab-panel>
-  <sl-tab-panel name="advanced">Advanced</sl-tab-panel>
-  <sl-tab-panel name="disabled">Disabled</sl-tab-panel>
-</sl-tab-group>
-```
-
-```html preview
-<sl-tab-group placement="right">
-  <sl-tab slot="nav" panel="general">General</sl-tab>
-  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
-  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
-  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
-
-  <sl-tab-panel name="general">General</sl-tab-panel>
-  <sl-tab-panel name="custom">Custom</sl-tab-panel>
-  <sl-tab-panel name="advanced">Advanced</sl-tab-panel>
-  <sl-tab-panel name="disabled">Disabled</sl-tab-panel>
-</sl-tab-group>
-```
-
-```html preview
-<sl-tab-group>
-  <sl-tab slot="nav" panel="tab-1">Tab 1</sl-tab>
-  <sl-tab slot="nav" panel="tab-2">Tab 2</sl-tab>
-  <sl-tab slot="nav" panel="tab-3">Tab 3</sl-tab>
-  <sl-tab slot="nav" panel="tab-4">Tab 4</sl-tab>
-  <sl-tab slot="nav" panel="tab-5">Tab 5</sl-tab>
-  <sl-tab slot="nav" panel="tab-6">Tab 6</sl-tab>
-  <sl-tab slot="nav" panel="tab-7">Tab 7</sl-tab>
-  <sl-tab slot="nav" panel="tab-8">Tab 8</sl-tab>
-  <sl-tab slot="nav" panel="tab-9">Tab 9</sl-tab>
-  <sl-tab slot="nav" panel="tab-10">Tab 10</sl-tab>
-  <sl-tab slot="nav" panel="tab-11">Tab 11</sl-tab>
-  <sl-tab slot="nav" panel="tab-12">Tab 12</sl-tab>
-  <sl-tab slot="nav" panel="tab-13">Tab 13</sl-tab>
-  <sl-tab slot="nav" panel="tab-14">Tab 14</sl-tab>
-  <sl-tab slot="nav" panel="tab-15">Tab 15</sl-tab>
-  <sl-tab slot="nav" panel="tab-16">Tab 16</sl-tab>
-  <sl-tab slot="nav" panel="tab-17">Tab 17</sl-tab>
-  <sl-tab slot="nav" panel="tab-18">Tab 18</sl-tab>
-  <sl-tab slot="nav" panel="tab-19">Tab 19</sl-tab>
-  <sl-tab slot="nav" panel="tab-20">Tab 20</sl-tab>
-
-  <sl-tab-panel name="tab-1">Tab panel 1</sl-tab-panel>
-  <sl-tab-panel name="tab-2">Tab panel 2</sl-tab-panel>
-  <sl-tab-panel name="tab-3">Tab panel 3</sl-tab-panel>
-  <sl-tab-panel name="tab-4">Tab panel 4</sl-tab-panel>
-  <sl-tab-panel name="tab-5">Tab panel 5</sl-tab-panel>
-  <sl-tab-panel name="tab-6">Tab panel 6</sl-tab-panel>
-  <sl-tab-panel name="tab-7">Tab panel 7</sl-tab-panel>
-  <sl-tab-panel name="tab-8">Tab panel 8</sl-tab-panel>
-  <sl-tab-panel name="tab-9">Tab panel 9</sl-tab-panel>
-  <sl-tab-panel name="tab-10">Tab panel 10</sl-tab-panel>
-  <sl-tab-panel name="tab-11">Tab panel 11</sl-tab-panel>
-  <sl-tab-panel name="tab-12">Tab panel 12</sl-tab-panel>
-  <sl-tab-panel name="tab-13">Tab panel 13</sl-tab-panel>
-  <sl-tab-panel name="tab-14">Tab panel 14</sl-tab-panel>
-  <sl-tab-panel name="tab-15">Tab panel 15</sl-tab-panel>
-  <sl-tab-panel name="tab-16">Tab panel 16</sl-tab-panel>
-  <sl-tab-panel name="tab-17">Tab panel 17</sl-tab-panel>
-  <sl-tab-panel name="tab-18">Tab panel 18</sl-tab-panel>
-  <sl-tab-panel name="tab-19">Tab panel 19</sl-tab-panel>
-  <sl-tab-panel name="tab-20">Tab panel 20</sl-tab-panel>
-</sl-tab-group>
-```
-
-## Notes
-
-Serious consideration was given to simplifying the tab group API into two components with a structure similar to:
-
-```html
-<!-- Not a valid syntax -->
-<sl-tab-group placement="top">
-  <sl-tab label="General">General</sl-tab>
-  <sl-tab label="Custom">Custom</sl-tab>
-  <sl-tab label="Advanced">Advanced</sl-tab>
-  <sl-tab label="Disabled" disabled>Disabled</sl-tab>
-</sl-tab-group>
-```
-
-However, there are two caveats to this approach. The first is that labels must be generated and stored in the tab group's shadow DOM. For accessibility reasons, tabs and tab panels must be linked via `id` using the `aria-controls` and `aria-labeledby` attribute, respectively. When a tab is inside a shadow DOM, its `id` becomes inaccessible to the light DOM and accessibility is broken.
-
-The second thing is that labels would be limited to text only. If you wanted to put an icon, a badge, or another element inside the label, it wouldn't be possible with this approach.
 
 
 <!-- Auto Generated Below -->
@@ -162,4 +43,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/tab-panel/readme.md b/src/components/tab-panel/readme.md
index d386f40b2..cf612963c 100644
--- a/src/components/tab-panel/readme.md
+++ b/src/components/tab-panel/readme.md
@@ -1,6 +1,5 @@
-# Tab Panel
+# sl-tab-panel
 
-TODO
 
 
 <!-- Auto Generated Below -->
@@ -23,4 +22,4 @@ TODO
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/tab/readme.md b/src/components/tab/readme.md
index 75e7d20c4..84bb02314 100644
--- a/src/components/tab/readme.md
+++ b/src/components/tab/readme.md
@@ -1,6 +1,5 @@
-# Tab
+# sl-tab
 
-TODO
 
 
 <!-- Auto Generated Below -->
@@ -47,4 +46,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/textarea/readme.md b/src/components/textarea/readme.md
index a19eb1277..d28d20b2e 100644
--- a/src/components/textarea/readme.md
+++ b/src/components/textarea/readme.md
@@ -1,14 +1,5 @@
-# Textarea
+# sl-textarea
 
-```html preview
-<sl-textarea placeholder="Standard" resize="none"></sl-textarea><br><br>
-
-<sl-textarea placeholder="Resizable" resize="vertical"></sl-textarea><br><br>
-
-<sl-textarea placeholder="Auto" resize="auto"></sl-textarea><br><br>
-
-<sl-textarea placeholder="Disabled" resize="none" disabled></sl-textarea><br><br>
-```
 
 
 <!-- Auto Generated Below -->
@@ -100,4 +91,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md
index d14c37a81..5d4beb68b 100644
--- a/src/components/tooltip/readme.md
+++ b/src/components/tooltip/readme.md
@@ -1,29 +1,5 @@
-# Tooltip
+# sl-tooltip
 
-```html preview
-<sl-button>Tooltip</sl-button>
-<sl-tooltip>This is a tooltip</sl-tooltip>
-
-<sl-button>Tooltip With Arrow</sl-button>
-<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
-
-<a href="#">Tooltip On Link</a>
-<sl-tooltip>This is a tooltip on a link</sl-tooltip>
-
-<br><br>
-
-<sl-button>Top</sl-button>
-<sl-tooltip placement="top" arrow>Tooltip</sl-tooltip>
-
-<sl-button>Bottom</sl-button>
-<sl-tooltip placement="bottom" arrow>Tooltip</sl-tooltip>
-
-<sl-button>Left</sl-button>
-<sl-tooltip placement="left" arrow>Tooltip</sl-tooltip>
-
-<sl-button>Right</sl-button>
-<sl-tooltip placement="right" arrow>Tooltip</sl-tooltip>
-```
 
 
 <!-- Auto Generated Below -->
@@ -88,4 +64,4 @@ Type: `Promise<void>`
 
 ----------------------------------------------
 
-
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/stencil.config.ts b/stencil.config.ts
index ee65312d7..2304a00ae 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -20,10 +20,6 @@ export const config: Config = {
     {
       type: 'dist-custom-elements-bundle'
     },
-    {
-      type: 'docs-readme',
-      footer: ''
-    },
     {
       type: 'docs-json',
       file: './dist/components.json'