simplify divider API

docs/resources/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
 

src/components/divider/divider.styles.ts

@@ -10,17 +10,13 @@ export default css`
     --spacing: var(--sl-spacing-medium);
   }
 
-  :host(:not([vertical])) .menu-divider {
+  :host(:not([vertical])) {
     display: block;
     border-top: solid var(--width) var(--color);
     margin: var(--spacing) 0;
   }
 
   :host([vertical]) {
-    height: 100%;
-  }
-
-  :host([vertical]) .menu-divider {
     display: inline-block;
     height: 100%;
     border-left: solid var(--width) var(--color);

src/components/divider/divider.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch';
 import styles from './divider.styles';
@@ -7,10 +7,7 @@ import styles from './divider.styles';
  * @since 2.0
  * @status stable
  *
- * @csspart base - The component's base wrapper.
- *
  * @cssproperty --color - The color of the divider.
- * @cssproperty --spacing - The spacing between the divider and neighboring elements.
  * @cssproperty --width - The width of the divider.
  */
 @customElement('sl-divider')
@@ -28,10 +25,6 @@ export default class SlDivider extends LitElement {
   handleVerticalChange() {
     this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
   }
-
-  render() {
-    return html` <div part="base" class="menu-divider"></div> `;
-  }
 }
 
 declare global {