[breadcrumb-item] Drop base part, move styling to host (#881)

* [breadcrumb-item] Drop `base` part, move styling to host

* update changelog

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

docs/docs/resources/changelog.md

@@ -32,6 +32,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Added an `orange` scale to all color palettes
 - Added the [`.wa-cloak` utility](/docs/utilities/fouce) to prevent FOUCE
 - Added the [`allDefined()` utility](/docs/usage/#all-defined) for awaiting component registration
+- Simplified `<wa-breadcrumb-item>` by removing the `base` CSS part
 
 ### Bug fixes
 

src/components/breadcrumb-item/breadcrumb-item.css

@@ -1,14 +1,6 @@
 :host {
   color: var(--wa-color-text-link);
   display: inline-flex;
-}
-
-:host(:last-of-type) {
-  color: var(--wa-color-text-quiet);
-}
-
-.breadcrumb-item {
-  display: inline-flex;
   align-items: center;
   font: inherit;
   font-weight: var(--wa-font-weight-action);
@@ -16,6 +8,10 @@
   white-space: nowrap;
 }
 
+:host(:last-of-type) {
+  color: var(--wa-color-text-quiet);
+}
+
 .label {
   display: inline-block;
   font: inherit;

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -17,7 +17,6 @@ import styles from './breadcrumb-item.css';
  * @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 `<wa-breadcrumb>` instead.
  *
- * @csspart base - The component's base wrapper.
  * @csspart label - The breadcrumb item's label.
  * @csspart prefix - The container that wraps the prefix.
  * @csspart suffix - The container that wraps the suffix.
@@ -72,47 +71,45 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
 
   render() {
     return html`
-      <div part="base" class="breadcrumb-item">
-        <span part="prefix" class="prefix">
-          <slot name="prefix"></slot>
-        </span>
+      <span part="prefix" class="prefix">
+        <slot name="prefix"></slot>
+      </span>
 
-        ${this.renderType === 'link'
-          ? html`
-              <a
-                part="label"
-                class="label label--link"
-                href="${this.href!}"
-                target="${ifDefined(this.target ? this.target : undefined)}"
-                rel=${ifDefined(this.target ? this.rel : undefined)}
-              >
-                <slot></slot>
-              </a>
-            `
-          : ''}
-        ${this.renderType === 'button'
-          ? html`
-              <button part="label" type="button" class="label label--button">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </button>
-            `
-          : ''}
-        ${this.renderType === 'dropdown'
-          ? html`
-              <div part="label" class="label label--dropdown">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </div>
-            `
-          : ''}
+      ${this.renderType === 'link'
+        ? html`
+            <a
+              part="label"
+              class="label label--link"
+              href="${this.href!}"
+              target="${ifDefined(this.target ? this.target : undefined)}"
+              rel=${ifDefined(this.target ? this.rel : undefined)}
+            >
+              <slot></slot>
+            </a>
+          `
+        : ''}
+      ${this.renderType === 'button'
+        ? html`
+            <button part="label" type="button" class="label label--button">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </button>
+          `
+        : ''}
+      ${this.renderType === 'dropdown'
+        ? html`
+            <div part="label" class="label label--dropdown">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+          `
+        : ''}
 
-        <span part="suffix" class="suffix">
-          <slot name="suffix"></slot>
-        </span>
+      <span part="suffix" class="suffix">
+        <slot name="suffix"></slot>
+      </span>
 
-        <span part="separator" class="separator" aria-hidden="true">
-          <slot name="separator"></slot>
-        </span>
-      </div>
+      <span part="separator" class="separator" aria-hidden="true">
+        <slot name="separator"></slot>
+      </span>
     `;
   }
 }