From 0384b0352816789add76f8842678c865ac41e3e1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 1 May 2023 13:43:42 -0400
Subject: [PATCH] add checkbox + exported parts; #1318

---
 docs/resources/changelog.md           |  1 +
 src/components/tree-item/tree-item.ts | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 72c73cbb7..1ba4008c4 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Added the `checkbox` part and related exported parts to `<sl-tree-item>` so you can target it with CSS [#1318](https://github.com/shoelace-style/shoelace/discussions/1318)
 - Fixed a bug where changing the size of `<sl-radio-group>` wouldn't update the size of child elements
 - Improved the docs to more clearly explain sizing radios and radio buttons
 
diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index 2acec1320..3c8ca7bd6 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -47,6 +47,14 @@ import type { CSSResultGroup, PropertyValueMap } from 'lit';
  * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
  * @csspart label - The tree item's label.
  * @csspart children - The container that wraps the tree item's nested children.
+ * @csspart checkbox - The checkbox that shows when using multiselect.
+ * @csspart checkbox__base - The checkbox's exported `base` part.
+ * @csspart checkbox__control - The checkbox's exported `control` part.
+ * @csspart checkbox__control--checked - The checkbox's exported `control--checked` part.
+ * @csspart checkbox__control--indeterminate - The checkbox's exported `control--indeterminate` part.
+ * @csspart checkbox__checked-icon - The checkbox's exported `checked-icon` part.
+ * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
+ * @csspart checkbox__label - The checkbox's exported `label` part.
  */
 @customElement('sl-tree-item')
 export default class SlTreeItem extends ShoelaceElement {
@@ -258,11 +266,21 @@ export default class SlTreeItem extends ShoelaceElement {
             () =>
               html`
                 <sl-checkbox
-                  tabindex="-1"
+                  part="checkbox"
+                  exportparts="
+                    base:checkbox__base,
+                    control:checkbox__control,
+                    control--checked:checkbox__control--checked,
+                    control--indeterminate:checkbox__control--indeterminate,
+                    checked-icon:checkbox__checked-icon,
+                    indeterminate-icon:checkbox__indeterminate-icon,
+                    label:checkbox__label
+                  "
                   class="tree-item__checkbox"
                   ?disabled="${this.disabled}"
                   ?checked="${live(this.selected)}"
                   ?indeterminate="${this.indeterminate}"
+                  tabindex="-1"
                 ></sl-checkbox>
               `
           )}