add display-label part

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)

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