From 64dfe9e6482e1929bb87d6a89b89b2bb2436061c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Sun, 10 Jan 2021 12:14:46 -0500
Subject: [PATCH] Add close-button part to tab; fixes #303

---
 docs/getting-started/changelog.md | 1 +
 src/components/tab/tab.tsx        | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 6f201674..9e2b37c3 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
 - Added the `FocusOptions` argument to all components that have a `setFocus()` method
 - Added `sl-initial-focus` event to `sl-dialog` and `sl-drawer` so focus can be customized to a specific element
+- Added `close-button` part to `sl-tab` so the close button can be customized
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
 - Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
 - Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
index 29ff8d25..e6b52ed0 100644
--- a/src/components/tab/tab.tsx
+++ b/src/components/tab/tab.tsx
@@ -9,6 +9,7 @@ let id = 0;
  * @slot - The tab's label.
  *
  * @part base - The component's base wrapper.
+ * @part close-button - The close button, which is the icon button's base wrapper.
  */
 
 @Component({
@@ -81,6 +82,7 @@ export class Tab {
           {this.closable && (
             <sl-icon-button
               name="x"
+              exportparts="base:close-button"
               class="tab__close-button"
               onClick={this.handleCloseClick}
               tabIndex={-1}