Add close-button part to tab; fixes #303

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)

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}