refactor parts and exported parts

2022-03-09 15:54:18 -05:00 · 2022-03-09 15:54:18 -05:00 · a5cd9a4968
commit a5cd9a4968
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@ -7,6 +7,7 @@

  function createPropsTable(props) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -64,6 +65,7 @@

  function createEventsTable(events) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -94,6 +96,7 @@

  function createMethodsTable(methods) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -132,6 +135,7 @@

  function createSlotsTable(slots) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -158,6 +162,7 @@

  function createCustomPropertiesTable(styles) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -186,6 +191,7 @@

  function createPartsTable(parts) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -212,6 +218,7 @@

  function createAnimationsTable(animations) {
    const table = document.createElement('table');
+    table.classList.add('metadata-table');
    table.innerHTML = `
      <thead>
        <tr>
@ -456,6 +463,8 @@
          result += `
            ## Properties
            ${createPropsTable(props)}
+
+            _Learn more about [properties and attributes](/getting-started/usage#properties)._
          `;
        }

@ -463,6 +472,8 @@
          result += `
            ## Events
            ${createEventsTable(component.events)}
+
+            _Learn more about [listening to events](/getting-started/usage#events)._
          `;
        }

@ -470,18 +481,9 @@
          result += `
            ## Methods

-            <p data-flavor="html">
-              Methods can be called by obtaining a reference to the element and calling
-              <code>el.methodName()</code>.
-            </p>
-
-
-            <p data-flavor="react">
-              Methods can be called by obtaining a <code>ref</code> to the element and calling
-              <code>ref.current.methodName()</code>.
-            </p>
-
            ${createMethodsTable(methods)}
+
+            _Learn more about [calling methods](/getting-started/usage#methods)._
          `;
        }

@ -489,6 +491,8 @@
          result += `
            ## Slots
            ${createSlotsTable(component.slots)}
+
+            _Learn more about [using slots](/getting-started/usage#slots)._
          `;
        }

@ -496,6 +500,8 @@
          result += `
            ## CSS Custom Properties
            ${createCustomPropertiesTable(component.cssProperties)}
+
+            _Learn more about [customizing CSS Custom Properties](/getting-started/customizing#custom-properties)._
          `;
        }

@ -503,6 +509,8 @@
          result += `
            ## CSS Parts
            ${createPartsTable(component.cssParts)}
+
+            _Learn more about [customizing CSS Parts](/getting-started/customizing#component-parts)._
          `;
        }

@ -511,7 +519,7 @@
            ## Animations
            ${createAnimationsTable(component.animations)}

-            Learn how to [customize animations](/getting-started/customizing#animations).
+            _Learn more about [customizing animations](/getting-started/customizing#animations)._
          `;
        }

--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@ -437,6 +437,10 @@ kbd,
  cursor: help;
 }

+.markdown-section .metadata-table {
+  margin-bottom: 0rem;
+}
+
 /* Iframes */
 .markdown-section iframe {
  border: none;
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@ -8,6 +8,15 @@ _During the beta period, these restrictions may be relaxed in the event of a mis

 ## Next

+- 🚨 BREAKING: refactored exported parts to ensure composed components and their parts can be targeted via CSS
+  - Refactored the `eye-dropper-button` part and added `eye-dropper-button__base`, `eye-dropper-button__prefix`, `eye-dropper-button__label`, `eye-dropper-button__suffix`, and `eye-dropper-button__caret` parts to `<sl-color-picker>`
+  - Refactored the `format-button` part and added `format-button__base`, `format-button__prefix`, `format-button__label`, `format-button__suffix`, and `format-button__caret` parts to `<sl-color-picker>`
+  - Moved the `close-button` part in `<sl-alert>` to the internal `<sl-icon-button>` and removed the `<span>` that wrapped it
+  - Moved the `close-button` part in `<sl-dialog>` and `<sl-drawer>` to point to the host element and added the `close-button__base` part
+  - Renamed parts in `<sl-select>` from `tag-base` to `tag__base`, `tag-content` to `tag__content`, and `tag-remove-button` to `tag__remove-button`
+  - Moved the `close-button` part in `<sl-tab>` to the internal `<sl-icon-button>` and added the `close-button__base` part
+  - Moved the `scroll-button` part in `<sl-tab-group>` to the internal `<sl-icon-button>` and added the `scroll-button__base`, `scroll-button--start`, and `scroll-button--end` parts
+  - Moved the `remove-button` part in `<sl-tag>` to the internal `<sl-icon-button>` and added the `remove-button__base` part
 - 🚨 BREAKING: removed `checked-icon` part from `<sl-menu-item>` in preparation for parts refactor
 - 🚨 BREAKING: changed the `typeToSelect()` method's argument from `String` to `KeyboardEvent` in `<sl-menu>` to support more advanced key combinations
 - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@ -262,6 +262,24 @@ Parts let you target a specific element inside the component's shadow DOM but, b

 This convention can be relaxed when the developer experience is greatly improved by not following these suggestions.

+### Naming CSS Parts
+
+While CSS parts can be named [virtually anything](https://www.abeautifulsite.net/posts/valid-names-for-css-parts/), within Shoelace they must use the kebab-case convention and lowercase letters. Modifiers must be delimited by `--` like in BEM. This is useful for allowing users to target parts with various states, such as `my-part--focus`.
+
+When composing elements, use `part` to export the host element and `exportparts` to export its parts.
+
+```js
+render() {
+  return html`
+    <div part="base">
+      <sl-icon part="icon" exportparts="base:icon__base" ...></sl-icon>
+    </div>
+  `;
+}
+```
+
+This results in a consistent, easy to understand structure for parts. In this example, the `icon` part will target the host element and the `icon__base` part will target the icon's `base` part.
+
 ### Form Controls

 Form controls should support submission and validation through the following conventions:
--- a/scripts/plop/plopfile.js
+++ b/scripts/plop/plopfile.js
@ -1,6 +1,5 @@
 export default function (plop) {
  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
-  plop.setHelper('tagToHumanReadableName', tag => tag.replace(/^sl-/, '').replace(/-/g, ' '));

  plop.setHelper('tagToTitle', tag => {
    const withoutPrefix = plop.getHelper('tagWithoutPrefix');
--- a/scripts/plop/templates/component/component.hbs
+++ b/scripts/plop/templates/component/component.hbs
@ -15,7 +15,7 @@ import styles from './{{ tagWithoutPrefix tag }}.styles';
 * @slot - The default slot.
 * @slot example - An example slot.
 *
- * @csspart {{ tagWithoutPrefix tag }} - The internal wrapper for the {{ tagToHumanReadableName tag }}.
+ * @csspart base - The component's internal wrapper.
 *
 * @cssproperty --example - An example CSS custom property.
 */
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@ -28,15 +28,17 @@ export default css`
    margin: inherit;
  }

+  .alert:not(.alert--has-icon) .alert__icon,
+  .alert:not(.alert--closable) .alert__close-button {
+    display: none;
+  }
+
  .alert__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    font-size: var(--sl-font-size-large);
-  }
-
-  .alert__icon ::slotted(*) {
-    margin-left: var(--sl-spacing-large);
+    padding-left: var(--sl-spacing-large);
  }

  .alert--primary {
@ -85,7 +87,7 @@ export default css`
    overflow: hidden;
  }

-  .alert__close {
+  .alert__close-button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import '~/components/icon-button/icon-button';
 import { animateTo, stopAnimations } from '~/internal/animate';
 import { emit, waitForEvent } from '~/internal/event';
+import { HasSlotController } from '~/internal/slot';
 import { watch } from '~/internal/watch';
 import { getAnimation, setDefaultAnimation } from '~/utilities/animation-registry';
 import styles from './alert.styles';
@ -24,10 +25,11 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl
 * @event sl-hide - Emitted when the alert closes.
 * @event sl-after-hide - Emitted after the alert closes and all animations are complete.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart icon - The container that wraps the alert icon.
 * @csspart message - The alert message.
 * @csspart close-button - The close button.
+ * @csspart close-button__base - The close button's `base` part.
 *
 * @cssproperty --box-shadow - The alert's box shadow.
 *
@ -40,6 +42,7 @@ export default class SlAlert extends LitElement {
  static styles = styles;

  private autoHideTimeout: number;
+  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');

  @query('[part="base"]') base: HTMLElement;

@ -177,6 +180,7 @@ export default class SlAlert extends LitElement {
          alert: true,
          'alert--open': this.open,
          'alert--closable': this.closable,
+          'alert--has-icon': this.hasSlotController.test('icon'),
          'alert--primary': this.variant === 'primary',
          'alert--success': this.variant === 'success',
          'alert--neutral': this.variant === 'neutral',
@ -199,14 +203,14 @@ export default class SlAlert extends LitElement {

        ${this.closable
          ? html`
-              <span class="alert__close">
-                <sl-icon-button
-                  exportparts="base:close-button"
-                  name="x"
-                  library="system"
-                  @click=${this.handleCloseClick}
-                ></sl-icon-button>
-              </span>
+              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
+                class="alert__close-button"
+                name="x"
+                library="system"
+                @click=${this.handleCloseClick}
+              ></sl-icon-button>
            `
          : ''}
      </div>
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@ -12,7 +12,7 @@ import styles from './avatar.styles';
 *
 * @slot icon - The default icon to use when no image or initials are present.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart icon - The container that wraps the avatar icon.
 * @csspart initials - The container that wraps the avatar initials.
 * @csspart image - The avatar image.
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@ -9,7 +9,7 @@ import styles from './badge.styles';
 *
 * @slot - The badge's content.
 *
- * @csspart base - The base wrapper
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-badge')
 export default class SlBadge extends LitElement {
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@ -15,7 +15,7 @@ import styles from './breadcrumb-item.styles';
 * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
 * you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart label - The breadcrumb item's label.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@ -13,7 +13,7 @@ import styles from './breadcrumb.styles';
 *
 * @dependency sl-icon
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-breadcrumb')
 export default class SlBreadcrumb extends LitElement {
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@ -8,7 +8,7 @@ import styles from './button-group.styles';
 *
 * @slot - One or more `<sl-button>` elements to display in the button group.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-button-group')
 export default class SlButtonGroup extends LitElement {
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@ -22,7 +22,7 @@ import styles from './button.styles';
 * @slot prefix - Used to prepend an icon or similar element to the button.
 * @slot suffix - Used to append an icon or similar element to the button.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart prefix - The prefix container.
 * @csspart label - The button's label.
 * @csspart suffix - The suffix container.
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@ -13,7 +13,7 @@ import styles from './card.styles';
 * @slot footer - The card's footer.
 * @slot image - The card's image.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart image - The card's image, if present.
 * @csspart header - The card's header, if present.
 * @csspart body - The card's body.
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@ -18,7 +18,7 @@ import styles from './checkbox.styles';
 * @event sl-change - Emitted when the control's checked state changes.
 * @event sl-focus - Emitted when the control gains focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart control - The checkbox control.
 * @csspart checked-icon - The container the wraps the checked icon.
 * @csspart indeterminate-icon - The container that wraps the indeterminate icon.
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@ -43,7 +43,7 @@ declare const EyeDropper: EyeDropperConstructor;
 *
 * @event sl-change Emitted when the color picker's value changes.
 *
- * @csspart base - The component's base wrapper
+ * @csspart base - The component's internal wrapper.
 * @csspart trigger - The color picker's dropdown trigger.
 * @csspart swatches - The container that holds swatches.
 * @csspart swatch - Each individual swatch.
@ -55,8 +55,18 @@ declare const EyeDropper: EyeDropperConstructor;
 * @csspart slider-handle - Hue and opacity slider handles.
 * @csspart preview - The preview color.
 * @csspart input - The text input.
- * @csspart eye-dropper-button - The toggle format button's base.
- * @csspart format-button - The toggle format button's base.
+ * @csspart eye-dropper-button - The eye dropper button.
+ * @csspart eye-dropper-button__button - The eye dropper button's `button` part.
+ * @csspart eye-dropper-button__prefix - The eye dropper button's `prefix` part.
+ * @csspart eye-dropper-button__label - The eye dropper button's `label` part.
+ * @csspart eye-dropper-button__button-suffix - The eye dropper button's `suffix` part.
+ * @csspart eye-dropper-button__caret - The eye dropper button's `caret` part.
+ * @csspart format-button - The format button.
+ * @csspart format-button__button - The format button's `button` part.
+ * @csspart format-button__prefix - The format button's `prefix` part.
+ * @csspart format-button__label - The format button's `label` part.
+ * @csspart format-button__button-suffix - The format button's `suffix` part.
+ * @csspart format-button__caret - The format button's `caret` part.
 *
 * @cssproperty --grid-width - The width of the color grid.
 * @cssproperty --grid-height - The height of the color grid.
@ -732,8 +742,15 @@ export default class SlColorPicker extends LitElement {
            ${!this.noFormatToggle
              ? html`
                  <sl-button
+                    part="format-button"
                    aria-label=${this.localize.term('toggleColorFormat')}
-                    exportparts="base:format-button"
+                    exportparts="
+                      base:format-button__base,
+                      prefix:format-button__prefix,
+                      label:format-button__label,
+                      suffix:format-button__suffix,
+                      caret:format-button__caret
+                    "
                    @click=${this.handleFormatToggle}
                  >
                    ${this.setLetterCase(this.format)}
@ -742,7 +759,17 @@ export default class SlColorPicker extends LitElement {
              : ''}
            ${hasEyeDropper
              ? html`
-                  <sl-button exportparts="base:eye-dropper-button" @click=${this.handleEyeDropper}>
+                  <sl-button
+                    part="eye-dropper-button"
+                    exportparts="
+                      base:eye-dropper-button__base,
+                      prefix:eye-dropper-button__prefix,
+                      label:eye-dropper-button__label,
+                      suffix:eye-dropper-button__suffix,
+                      caret:eye-dropper-button__caret
+                    "
+                    @click=${this.handleEyeDropper}
+                  >
                    <sl-icon
                      library="system"
                      name="eyedropper"
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@ -22,7 +22,7 @@ import styles from './details.styles';
 * @event sl-hide - Emitted when the details closes.
 * @event sl-after-hide - Emitted after the details closes and all animations are complete.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart header - The summary header.
 * @csspart summary - The details summary.
 * @csspart summary-icon - The expand/collapse summary icon.
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@ -34,12 +34,13 @@ import styles from './dialog.styles';
 *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
 *   destructive behavior such as data loss.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart overlay - The overlay.
 * @csspart panel - The dialog panel (where the dialog and its content is rendered).
 * @csspart header - The dialog header.
 * @csspart title - The dialog title.
 * @csspart close-button - The close button.
+ * @csspart close-button__base - The close button's `base` part.
 * @csspart body - The dialog body.
 * @csspart footer - The dialog footer.
 *
@ -251,7 +252,8 @@ export default class SlDialog extends LitElement {
                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
                  </h2>
                  <sl-icon-button
-                    exportparts="base:close-button"
+                    part="close-button"
+                    exportparts="base:close-button__base"
                    class="dialog__close"
                    name="x"
                    label=${this.localize.term('close')}
--- a/src/components/drawer/drawer.ts
+++ b/src/components/drawer/drawer.ts
@ -35,12 +35,13 @@ import styles from './drawer.styles';
 *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
 *   destructive behavior such as data loss.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart overlay - The overlay.
 * @csspart panel - The drawer panel (where the drawer and its content is rendered).
 * @csspart header - The drawer header.
 * @csspart title - The drawer title.
 * @csspart close-button - The close button.
+ * @csspart close-button__base - The close button's `base` part.
 * @csspart body - The drawer body.
 * @csspart footer - The drawer footer.
 *
@ -278,7 +279,8 @@ export default class SlDrawer extends LitElement {
                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
                  </h2>
                  <sl-icon-button
-                    exportparts="base:close-button"
+                    part="close-button"
+                    exportparts="base:close-button__base"
                    class="drawer__close"
                    name="x"
                    label=${this.localize.term('close')}
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@ -24,7 +24,7 @@ import styles from './dropdown.styles';
 * @event sl-hide - Emitted when the dropdown closes.
 * @event sl-after-hide - Emitted after the dropdown closes and all animations are complete.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart trigger - The container that wraps the trigger.
 * @csspart panel - The panel that gets shown when the dropdown is open.
 *
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@ -11,7 +11,7 @@ import styles from './icon-button.styles';
 *
 * @dependency sl-icon
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-icon-button')
 export default class SlIconButton extends LitElement {
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@ -17,7 +17,7 @@ const parser = new DOMParser();
 * @event sl-load - Emitted when the icon has loaded.
 * @event {{ status: number }} sl-error - Emitted when the icon fails to load due to an error.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-icon')
 export default class SlIcon extends LitElement {
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@ -20,7 +20,7 @@ import styles from './image-comparer.styles';
 *
 * @event sl-change - Emitted when the position changes.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart before - The container that holds the "before" image.
 * @csspart after - The container that holds the "after" image.
 * @csspart divider - The divider that separates the images.
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@ -30,7 +30,7 @@ import styles from './input.styles';
 * @event sl-focus - Emitted when the control gains focus.
 * @event sl-blur - Emitted when the control loses focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart form-control - The form control that wraps the label, input, and help-text.
 * @csspart label - The input label.
 * @csspart input - The input control.
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@ -15,7 +15,7 @@ import styles from './menu-item.styles';
 * @slot prefix - Used to prepend an icon or similar element to the menu item.
 * @slot suffix - Used to append an icon or similar element to the menu item.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart prefix - The prefix container.
 * @csspart label - The menu item label.
 * @csspart suffix - The suffix container.
--- a/src/components/menu-label/menu-label.ts
+++ b/src/components/menu-label/menu-label.ts
@ -8,7 +8,7 @@ import styles from './menu-label.styles';
 *
 * @slot - The menu label's content.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-menu-label')
 export default class SlMenuLabel extends LitElement {
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@ -17,7 +17,7 @@ export interface MenuSelectEventDetail {
 *
 * @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-menu')
 export default class SlMenu extends LitElement {
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@ -12,7 +12,7 @@ import styles from './progress-bar.styles';
 *
 * @slot - A label to show inside the indicator.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart indicator - The progress bar indicator.
 * @csspart label - The progress bar label.
 *
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@ -9,7 +9,7 @@ import styles from './progress-ring.styles';
 *
 * @slot - A label to show inside the ring.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart label - The progress ring label.
 *
 * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@ -9,7 +9,7 @@ import styles from './qr-code.styles';
 * @since 2.0
 * @status stable
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 */
@customElement('sl-qr-code')
 export default class SlQrCode extends LitElement {
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@ -11,7 +11,7 @@ import styles from './radio-group.styles';
 * @slot - The default slot where radio controls are placed.
 * @slot label - The radio group label. Required for proper accessibility. Alternatively, you can use the label prop.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart label - The radio group label.
 */
@customElement('sl-radio-group')
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@ -18,7 +18,7 @@ import styles from './radio.styles';
 * @event sl-change - Emitted when the control's checked state changes.
 * @event sl-focus - Emitted when the control gains focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart control - The radio control.
 * @csspart checked-icon - The container the wraps the checked icon.
 * @csspart label - The radio label.
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@ -20,7 +20,7 @@ import styles from './range.styles';
 * @event sl-blur - Emitted when the control loses focus.
 * @event sl-focus - Emitted when the control gains focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart input - The native range input.
 * @csspart tooltip - The range tooltip.
 *
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@ -17,7 +17,7 @@ import styles from './rating.styles';
 *
 * @event sl-change - Emitted when the rating's value changes.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 *
 * @cssproperty --symbol-color - The inactive color for symbols.
 * @cssproperty --symbol-color-active - The active color for symbols.
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@ -39,7 +39,7 @@ import type { TemplateResult } from 'lit';
 * @event sl-focus - Emitted when the control gains focus.
 * @event sl-blur - Emitted when the control loses focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart clear-button - The clear button.
 * @csspart control - The container that holds the prefix, label, and suffix.
 * @csspart display-label - The label that displays the current selection. Not available when used with `multiple`.
@ -51,9 +51,9 @@ import type { TemplateResult } from 'lit';
 * @csspart suffix - The select's suffix.
 * @csspart menu - The select menu, an `<sl-menu>` element.
 * @csspart tag - The multi select option, an `<sl-tag>` element.
- * @csspart tag-base - The tag's `base` part.
- * @csspart tag-content - The tag's `content` part.
- * @csspart tag-remove-button - The tag's `remove-button` part.
+ * @csspart tag__base - The tag's `base` part.
+ * @csspart tag__content - The tag's `content` part.
+ * @csspart tag__remove-button - The tag's `remove-button` part.
 * @csspart tags - The container in which multi select options are rendered.
 */
@customElement('sl-select')
@ -381,7 +381,11 @@ export default class SlSelect extends LitElement {
        return html`
          <sl-tag
            part="tag"
-            exportparts="base:tag-base, content:tag-content, remove-button:tag-remove-button"
+            exportparts="
+              base:tag__base,
+              content:tag__content,
+              remove-button:tag__remove-button
+            "
            variant="neutral"
            size=${this.size}
            ?pill=${this.pill}
@ -406,7 +410,18 @@ export default class SlSelect extends LitElement {
        this.displayLabel = '';
        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
        this.displayTags.push(html`
-          <sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
+          <sl-tag
+            part="tag"
+            exportparts="
+              base:tag__base,
+              content:tag__content,
+              remove-button:tag__remove-button
+            "
+            variant="neutral"
+            size=${this.size}
+          >
+            +${total - this.maxTagsVisible}
+          </sl-tag>
        `);
      }
    } else {
--- a/src/components/skeleton/skeleton.ts
+++ b/src/components/skeleton/skeleton.ts
@ -7,7 +7,7 @@ import styles from './skeleton.styles';
 * @since 2.0
 * @status stable
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
 *
 * @cssproperty --border-radius - The skeleton's border radius.
--- a/src/components/spinner/spinner.ts
+++ b/src/components/spinner/spinner.ts
@ -6,7 +6,7 @@ import styles from './spinner.styles';
 * @since 2.0
 * @status stable
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 *
 * @cssproperty --track-width - The width of the track.
 * @cssproperty --track-color - The color of the track.
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@ -18,7 +18,7 @@ import styles from './switch.styles';
 * @event sl-change - Emitted when the control's checked state changes.
 * @event sl-focus - Emitted when the control gains focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart control - The switch control.
 * @csspart thumb - The switch position indicator.
 * @csspart label - The switch label.
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@ -22,12 +22,15 @@ import styles from './tab-group.styles';
 * @event {{ name: String }} sl-tab-show - Emitted when a tab is shown.
 * @event {{ name: String }} sl-tab-hide - Emitted when a tab is hidden.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart nav - The tab group navigation container.
 * @csspart tabs - The container that wraps the slotted tabs.
 * @csspart active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
 * @csspart body - The tab group body where tab panels are slotted in.
 * @csspart scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
+ * @csspart scroll-button--start - Targets the starting scroll button.
+ * @csspart scroll-button--end - Targets the ending scroll button.
+ * @csspart scroll-button__base - The scroll button's `base` part.
 *
 * @cssproperty --indicator-color - The color of the active tab indicator.
 * @cssproperty --track-color - The color of the indicator's track (i.e. the line that separates tabs from panels).
@ -361,8 +364,9 @@ export default class SlTabGroup extends LitElement {
          ${this.hasScrollControls
            ? html`
                <sl-icon-button
+                  part="scroll-button scroll-button--start"
+                  exportparts="base:scroll-button__base"
                  class="tab-group__scroll-button tab-group__scroll-button--start"
-                  exportparts="base:scroll-button"
                  name="chevron-left"
                  library="system"
                  label=${this.localize.term('scrollToStart')}
@ -381,8 +385,9 @@ export default class SlTabGroup extends LitElement {
          ${this.hasScrollControls
            ? html`
                <sl-icon-button
+                  part="scroll-button scroll-button--end"
+                  exportparts="base:scroll-button__base"
                  class="tab-group__scroll-button tab-group__scroll-button--end"
-                  exportparts="base:scroll-button"
                  name="chevron-right"
                  library="system"
                  label=${this.localize.term('scrollToEnd')}
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@ -9,7 +9,7 @@ import styles from './tab-panel.styles';
 *
 * @slot - The tab panel's content.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 *
 * @cssproperty --padding - The tab panel's padding.
 */
--- a/src/components/tab/tab.ts
+++ b/src/components/tab/tab.ts
@ -17,8 +17,9 @@ import styles from './tab.styles';
 *
 * @event sl-close - Emitted when the tab is closable and the close button is activated.
 *
- * @csspart base - The component's base wrapper.
- * @csspart close-button - The close button, which is the icon button's base wrapper.
+ * @csspart base - The component's internal wrapper.
+ * @csspart close-button - The close button.
+ * @csspart close-button__base - The close button's `base` part.
 */
@customElement('sl-tab')
 export default class SlTab extends LitElement {
@ -81,10 +82,11 @@ export default class SlTab extends LitElement {
        ${this.closable
          ? html`
              <sl-icon-button
+                part="close-button"
+                exportparts="base:close-button__base"
                name="x"
                library="system"
                label=${this.localize.term('close')}
-                exportparts="base:close-button"
                class="tab__close-button"
                @click=${this.handleCloseClick}
                tabindex="-1"
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@ -15,9 +15,10 @@ import styles from './tag.styles';
 *
 * @event sl-remove - Emitted when the remove button is activated.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart content - The tag content.
 * @csspart remove-button - The remove button.
+ * @csspart remove-button__base - The remove button's `base` part.
 */
@customElement('sl-tag')
 export default class SlTag extends LitElement {
@ -71,7 +72,8 @@ export default class SlTag extends LitElement {
        ${this.removable
          ? html`
              <sl-icon-button
-                exportparts="base:remove-button"
+                part="remove-button"
+                exportparts="base:remove-button__base"
                name="x"
                library="system"
                class="tag__remove"
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@ -21,7 +21,7 @@ import styles from './textarea.styles';
 * @event sl-focus - Emitted when the control gains focus.
 * @event sl-blur - Emitted when the control loses focus.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 * @csspart form-control - The form control that wraps the label, textarea, and help text.
 * @csspart label - The textarea label.
 * @csspart textarea - The textarea control.
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@ -20,7 +20,7 @@ import styles from './tooltip.styles';
 * @event sl-hide - Emitted when the tooltip begins to hide.
 * @event sl-after-hide - Emitted after the tooltip has hidden and all animations are complete.
 *
- * @csspart base - The component's base wrapper.
+ * @csspart base - The component's internal wrapper.
 *
 * @cssproperty --max-width - The maximum width of the tooltip.
 * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.