From 8edaf67197d9e797da6a3884ec12e671b0d9591a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 21 Jun 2022 09:37:16 -0400
Subject: [PATCH] add checked-icon part

---
 cspell.json                           | 1 +
 docs/resources/changelog.md           | 1 +
 src/components/menu-item/menu-item.ts | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/cspell.json b/cspell.json
index ae3834fff..2c4a620a6 100644
--- a/cspell.json
+++ b/cspell.json
@@ -12,6 +12,7 @@
     "bezier",
     "boxicons",
     "chatbubble",
+    "checkmark",
     "claviska",
     "Clippy",
     "codepen",
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 8f7d7fac9..d11121f2f 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added styles to required form controls so they show an asterisk next to the label by default
 - Added the `--sl-input-required-content` design token
 - Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
+- Added the `checked-icon` part to `<sl-menu-item>`
 - Updated the `fieldset` attribute so it reflects in `<sl-radio-group>`
 
 ## 2.0.0-beta.76
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 4fd48a04e..e6e09b15c 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -21,6 +21,7 @@ import styles from './menu-item.styles';
  * @slot suffix - Used to append an icon or similar element to the menu item.
  *
  * @csspart base - The component's internal wrapper.
+ * @csspart checked-icon - The checkmark's container, only visible when the menu item is checked.
  * @csspart prefix - The prefix container.
  * @csspart label - The menu item label.
  * @csspart suffix - The suffix container.
@@ -88,7 +89,7 @@ export default class SlMenuItem extends LitElement {
           'menu-item--has-submenu': false // reserved for future use
         })}
       >
-        <span class="menu-item__check">
+        <span part="checked-icon" class="menu-item__check">
           <sl-icon name="check-lg" library="system" aria-hidden="true"></sl-icon>
         </span>