add sl-clear event

docs/getting-started/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Added `sl-clear` event to `sl-select`
 - Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
 - Fixed the margin in `sl-menu-label` to align with menu items
 

src/components/select/select.ts

@@ -101,6 +101,9 @@ export default class SlSelect extends LitElement {
   /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
   @property({ type: Boolean, reflect: true }) invalid = false;
 
+  /** Emitted when the clear button is activated. */
+  @event('sl-clear') slClear: EventEmitter<void>;
+
   /** Emitted when the control's value changes. */
   @event('sl-change') slChange: EventEmitter<void>;
 
@@ -160,6 +163,7 @@ export default class SlSelect extends LitElement {
   handleClearClick(event: MouseEvent) {
     event.stopPropagation();
     this.value = this.multiple ? [] : '';
+    this.slClear.emit();
     this.syncItemsFromValue();
   }