[image-comparer] Remove base part

Had to move the keydown listener to the divider, but that seems like a good change *anyway* since if the content is interactive (such as our own theme previews) we don't really want to be listening to key presses on it, we only really want to be listening to key presses on the divider, which is the actual focusable part.

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">
-        <span part="prefix" class="prefix">
+        <slot name="prefix"></slot>
-          <slot name="prefix"></slot>
+      </span>
-        </span>
 
-        ${this.renderType === 'link'
+      ${this.renderType === 'link'
-          ? html`
+        ? html`
-              <a
+            <a
-                part="label"
+              part="label"
-                class="label label--link"
+              class="label label--link"
-                href="${this.href!}"
+              href="${this.href!}"
-                target="${ifDefined(this.target ? this.target : undefined)}"
+              target="${ifDefined(this.target ? this.target : undefined)}"
-                rel=${ifDefined(this.target ? this.rel : undefined)}
+              rel=${ifDefined(this.target ? this.rel : undefined)}
-              >
+            >
-                <slot></slot>
+              <slot></slot>
-              </a>
+            </a>
-            `
+          `
-          : ''}
+        : ''}
-        ${this.renderType === 'button'
+      ${this.renderType === 'button'
-          ? html`
+        ? html`
-              <button part="label" type="button" class="label label--button">
+            <button part="label" type="button" class="label label--button">
-                <slot @slotchange=${this.handleSlotChange}></slot>
+              <slot @slotchange=${this.handleSlotChange}></slot>
-              </button>
+            </button>
-            `
+          `
-          : ''}
+        : ''}
-        ${this.renderType === 'dropdown'
+      ${this.renderType === 'dropdown'
-          ? html`
+        ? html`
-              <div part="label" class="label label--dropdown">
+            <div part="label" class="label label--dropdown">
-                <slot @slotchange=${this.handleSlotChange}></slot>
+              <slot @slotchange=${this.handleSlotChange}></slot>
-              </div>
+            </div>
-            `
+          `
-          : ''}
+        : ''}
 
-        <span part="suffix" class="suffix">
+      <span part="suffix" class="suffix">
-          <slot name="suffix"></slot>
+        <slot name="suffix"></slot>
-        </span>
+      </span>
 
-        <span part="separator" class="separator" aria-hidden="true">
+      <span part="separator" class="separator" aria-hidden="true">
-          <slot name="separator"></slot>
+        <slot name="separator"></slot>
-        </span>
+      </span>
-      </div>
     `;
   }
 }

src/components/image-comparer/image-comparer.css

@@ -6,9 +6,6 @@
 
   display: inline-block;
   position: relative;
-}
-
-.image-comparer {
   max-width: 100%;
   max-height: 100%;
   overflow: hidden;

src/components/image-comparer/image-comparer.ts

@@ -23,7 +23,6 @@ import styles from './image-comparer.css';
  *
  * @event change - Emitted when the position changes.
  *
- * @csspart base - The component's base wrapper.
  * @csspart before - The container that wraps the before image.
  * @csspart after - The container that wraps the after image.
  * @csspart divider - The divider that separates the images.
@@ -40,19 +39,18 @@ export default class WaImageComparer extends WebAwesomeElement {
 
   private readonly localize = new LocalizeController(this);
 
-  @query('.image-comparer') base: HTMLElement;
   @query('.handle') handle: HTMLElement;
 
   /** The position of the divider as a percentage. */
   @property({ type: Number, reflect: true }) position = 50;
 
   private handleDrag(event: PointerEvent) {
-    const { width } = this.base.getBoundingClientRect();
+    const { width } = this.getBoundingClientRect();
     const isRtl = this.localize.dir() === 'rtl';
 
     event.preventDefault();
 
-    drag(this.base, {
+    drag(this, {
       onMove: x => {
         this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2));
         if (isRtl) this.position = 100 - this.position;
@@ -98,46 +96,45 @@ export default class WaImageComparer extends WebAwesomeElement {
     const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
 
     return html`
-      <div part="base" id="image-comparer" class="image-comparer" @keydown=${this.handleKeyDown}>
+      <div class="image">
-        <div class="image">
+        <div part="before" class="before">
-          <div part="before" class="before">
+          <slot name="before"></slot>
-            <slot name="before"></slot>
-          </div>
-
-          <div
-            part="after"
-            class="after"
-            style=${styleMap({
-              clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
-            })}
-          >
-            <slot name="after"></slot>
-          </div>
         </div>
 
         <div
-          part="divider"
+          part="after"
-          class="divider"
+          class="after"
           style=${styleMap({
-            left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
+            clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
           })}
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
         >
-          <div
+          <slot name="after"></slot>
-            part="handle"
+        </div>
-            class="handle"
+      </div>
-            role="scrollbar"
+
-            aria-valuenow=${this.position}
+      <div
-            aria-valuemin="0"
+        part="divider"
-            aria-valuemax="100"
+        class="divider"
-            aria-controls="image-comparer"
+        style=${styleMap({
-            tabindex="0"
+          left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
-          >
+        })}
-            <slot name="handle">
+        @keydown=${this.handleKeyDown}
-              <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
+        @mousedown=${this.handleDrag}
-            </slot>
+        @touchstart=${this.handleDrag}
-          </div>
+      >
+        <div
+          part="handle"
+          class="handle"
+          role="scrollbar"
+          aria-valuenow=${this.position}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-controls="image-comparer"
+          tabindex="0"
+        >
+          <slot name="handle">
+            <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
+          </slot>
         </div>
       </div>
     `;