From 271ae9a36a55bf7f526ee6426bd1ab939648d1e7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 3 Feb 2022 08:31:52 -0500
Subject: [PATCH] add display-label part

---
 docs/resources/changelog.md     | 1 +
 src/components/select/select.ts | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index cbe5cdac5..6e980e788 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - 🚨 BREAKING: the `unit` property of `<sl-format-bytes>` has changed to `byte | bit` instead of `bytes | bits`
+- Added `display-label` part to `<sl-select>` [#650](https://github.com/shoelace-style/shoelace/issues/650)
 - Fixed a bug that caused `<sl-progress-ring>` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656)
 - Fixed a bug that allowed `<sl-details>` to open and close when disabled using a screen reader [#658](https://github.com/shoelace-style/shoelace/issues/658)
 - Implemented stricter linting to improve consistency and reduce errors, which resulted in many small refactors throughout the codebase [#647](https://github.com/shoelace-style/shoelace/pull/647)
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 07c9b0176..e52d134a5 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -44,14 +44,15 @@ import { watch } from '~/internal/watch';
  * @csspart base - The component's base wrapper.
  * @csspart clear-button - The clear button.
  * @csspart control - The container that holds the prefix, label, and suffix.
+ * @csspart display-label - The label that displays the current selection. Not available when used with `multiple`.
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart help-text - The select's help text.
  * @csspart icon - The select's icon.
  * @csspart prefix - The select's prefix.
  * @csspart label - The select's label.
  * @csspart suffix - The select's suffix.
- * @csspart menu - The select menu, an <sl-menu> element.
- * @csspart tag - The multi select option, an <sl-tag> element.
+ * @csspart menu - The select menu, an `<sl-menu>` element.
+ * @csspart tag - The multi select option, an `<sl-tag>` element.
  * @csspart tags - The container in which multi select options are rendered.
  */
 @customElement('sl-select')
@@ -498,7 +499,7 @@ export default class SlSelect extends LitElement {
               <slot name="prefix"></slot>
             </span>
 
-            <div class="select__label">
+            <div part="display-label" class="select__label">
               ${this.displayTags.length > 0
                 ? html` <span part="tags" class="select__tags"> ${this.displayTags} </span> `
                 : this.displayLabel.length > 0