Export icon button parts so they can be customized

docs/getting-started/changelog.md

@@ -16,9 +16,11 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 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
+- Added `scroll-button` part to `sl-tab-group` so the scroll buttons 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)
+- Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
 - Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
 - Updated to Bootstrap Icons 1.3.0
 

src/components/alert/alert.tsx

@@ -208,7 +208,7 @@ export class Alert {
 
         {this.closable && (
           <span class="alert__close">
-            <sl-icon-button part="close-button" name="x" onClick={this.handleCloseClick} />
+            <sl-icon-button exportparts="base:close-button" name="x" onClick={this.handleCloseClick} />
           </span>
         )}
       </div>

src/components/dialog/dialog.tsx

@@ -246,7 +246,12 @@ export class Dialog {
                   {this.label || String.fromCharCode(65279)}
                 </slot>
               </span>
-              <sl-icon-button part="close-button" class="dialog__close" name="x" onClick={this.handleCloseClick} />
+              <sl-icon-button
+                exportparts="base:close-button"
+                class="dialog__close"
+                name="x"
+                onClick={this.handleCloseClick}
+              />
             </header>
           )}
 

src/components/drawer/drawer.tsx

@@ -263,7 +263,12 @@ export class Drawer {
                   {this.label || String.fromCharCode(65279)}
                 </slot>
               </span>
-              <sl-icon-button part="close-button" class="drawer__close" name="x" onClick={this.handleCloseClick} />
+              <sl-icon-button
+                exportparts="base:close-button"
+                class="drawer__close"
+                name="x"
+                onClick={this.handleCloseClick}
+              />
             </header>
           )}
 

src/components/select/select.tsx

@@ -455,7 +455,7 @@ export class Select {
 
             {this.clearable && hasSelection && (
               <sl-icon-button
-                part="clear-button"
+                exportparts="base:clear-button"
                 class="select__clear"
                 name="x-circle"
                 onClick={this.handleClearClick}

src/components/tab-group/tab-group.tsx

@@ -15,6 +15,7 @@ import { focusVisible } from '../../utilities/focus-visible';
  * @part tabs - The container that wraps the slotted tabs.
  * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
  * @part body - The tab group body where tab panels are slotted in.
+ * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
 
 @Component({
@@ -305,6 +306,7 @@ export class TabGroup {
           {this.hasScrollControls && (
             <sl-icon-button
               class="tab-group__scroll-button tab-group__scroll-button--left"
+              exportparts="base:scroll-button"
               name="chevron-left"
               onClick={this.handleScrollLeft}
             />
@@ -322,6 +324,7 @@ export class TabGroup {
           {this.hasScrollControls && (
             <sl-icon-button
               class="tab-group__scroll-button tab-group__scroll-button--right"
+              exportparts="base:scroll-button"
               name="chevron-right"
               onClick={this.handleScrollRight}
             />

src/components/tag/tag.tsx

@@ -73,7 +73,7 @@ export class Tag {
         </span>
 
         {this.clearable && (
-          <sl-icon-button part="clear-button" name="x" class="tag__clear" onClick={this.handleClearClick} />
+          <sl-icon-button exportparts="base:clear-button" name="x" class="tag__clear" onClick={this.handleClearClick} />
         )}
       </span>
     );