From 31b05fedd39c4f7cb005be7e0ad119ea32dfedf0 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 1 Dec 2022 16:39:39 -0500
Subject: [PATCH] fix mislabeled slot

---
 docs/resources/changelog.md                     | 1 +
 src/components/image-comparer/image-comparer.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 664bc0942..2268077c7 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug where browser validation tooltips would show up when hovering over form controls [#1037](https://github.com/shoelace-style/shoelace/issues/1037)
 - Fixed a bug in `<sl-tab-group>` that sometimes caused the active tab indicator to not animate
 - Fixed a bug in `<sl-tree-item>` that caused the expand/collapse icon slot to be out of sync when the node is open initially
+- Fixed the mislabeled `handle-icon` slot in `<sl-image-comparer>` (it now points to the `<slot>`, not the slot's fallback content)
 - Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
 - Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
 - Refactored all styles and animations to use `translate`, `rotate`, and `scale` instead of `transform`
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 1591bde59..267642abb 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -30,7 +30,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart after - The container that holds the "after" image.
  * @csspart divider - The divider that separates the images.
  * @csspart handle - The handle that the user drags to expose the after image.
- * @csspart handle-icon - The drag icon that appears inside the handle.
+ * @csspart handle-icon - The handle icon's `<slot>`.
  *
  * @cssproperty --divider-width - The width of the dividing line.
  * @cssproperty --handle-size - The size of the compare handle.
@@ -143,8 +143,8 @@ export default class SlImageComparer extends ShoelaceElement {
             aria-controls="image-comparer"
             tabindex="0"
           >
-            <slot name="handle-icon">
-              <sl-icon part="handle-icon" library="system" name="grip-vertical"></sl-icon>
+            <slot part="handle-icon" name="handle-icon">
+              <sl-icon library="system" name="grip-vertical"></sl-icon>
             </slot>
           </div>
         </div>