From e12ee97bd97f5c4d1c2112402cc351190e79055d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 4 Oct 2021 09:29:14 -0400
Subject: [PATCH] add --padding to tab panel

---
 docs/assets/styles/docs.css                  |  4 ----
 docs/resources/changelog.md                  |  1 +
 src/components/tab-group/tab-group.styles.ts | 16 ++++++++++++++++
 src/components/tab-panel/tab-panel.styles.ts |  4 +++-
 src/components/tab-panel/tab-panel.ts        |  2 ++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 52afd220..e6afa312 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -229,10 +229,6 @@ strong {
   margin-bottom: 0;
 }
 
-.markdown-section sl-tab-panel::part(base) {
-  padding: var(--sl-spacing-medium) 0;
-}
-
 .docsify-pagination-container {
   border-top-color: rgb(var(--sl-color-neutral-200)) !important;
 }
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 46f41dc2..7a3efc5d 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -16,6 +16,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
 - Added the `--sl-panel-border-width` design token
 - Added missing background color to `<sl-details>`
+- ADded the `--padding` custom property to `<sl-tab-panel>`
 - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index 270821e1..b6d831e1 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -93,6 +93,10 @@ export default css`
     order: 2;
   }
 
+  .tab-group--top ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
   /*
    * Bottom
    */
@@ -135,6 +139,10 @@ export default css`
     order: 1;
   }
 
+  .tab-group--bottom ::slotted(sl-tab-panel) {
+    --padding: var(--sl-spacing-medium) 0;
+  }
+
   /*
    * Start
    */
@@ -163,6 +171,10 @@ export default css`
     order: 2;
   }
 
+  .tab-group--start ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
+
   /*
    * End
    */
@@ -190,4 +202,8 @@ export default css`
     flex: 1 1 auto;
     order: 1;
   }
+
+  .tab-group--end ::slotted(sl-tab-panel) {
+    --padding: 0 var(--sl-spacing-medium);
+  }
 `;
diff --git a/src/components/tab-panel/tab-panel.styles.ts b/src/components/tab-panel/tab-panel.styles.ts
index 284323dc..685a2d91 100644
--- a/src/components/tab-panel/tab-panel.styles.ts
+++ b/src/components/tab-panel/tab-panel.styles.ts
@@ -5,11 +5,13 @@ export default css`
   ${componentStyles}
 
   :host {
+    --padding: 0;
+
     display: block;
   }
 
   .tab-panel {
     border: solid 1px transparent;
-    padding: 20px 20px;
+    padding: var(--padding);
   }
 `;
diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 4b95b455..68e652c0 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -11,6 +11,8 @@ let id = 0;
  * @slot - The tab panel's content.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
  */
 @customElement('sl-tab-panel')
 export default class SlTabPanel extends LitElement {