Add clear button when not required

src/better-select.css

@@ -87,4 +87,13 @@ better-select {
 	&:state(open)::part(display)::after {
 		transform: rotate(180deg);
 	}
+
+	&:not([required]):state(value)::part(display)::after {
+		display: none;
+	}
+
+	&::part(clear) {
+		display: block;
+		margin-left: auto;
+	}
 }

src/better-select.js

@@ -154,7 +154,10 @@ export class BetterSelect extends HTMLElement {
 		[part="display-text"]:empty {
 			display: none;
 		}
-		:not(:empty + *)[name="placeholder"] {
+		:not(#text:empty + *)[name="placeholder"] {
+			display: none;
+		}
+		#text:empty ~ *[name="clear"] {
 			display: none;
 		}
 		[part="drop-down"], [part="item"] {
@@ -205,6 +208,13 @@ export class BetterSelect extends HTMLElement {
 			[part="list"] { display: none; }
 			slot[name="loading"] { display: block; }
 		}
+		slot[name="clear"] > button {
+			all: unset;
+			transform: rotate(45deg);
+			&::after {
+				content: "+";
+			}
+		}
 	`
 
 	/** @type {HTMLElement} */
@@ -232,6 +242,11 @@ export class BetterSelect extends HTMLElement {
 				<slot name="placeholder" aria-hidden="true">
 					<span part="placeholder" id="placeholder" aria-hidden="true"></span>
 				</slot>
+				<template id="clear-template">
+					<slot name="clear" part="clear">
+						<button></button>
+					</slot>
+				</template>
 			</div>
 			<dialog id="dialog" part="drop-down">
 				<slot name="top"></slot>
@@ -456,9 +471,27 @@ export class BetterSelect extends HTMLElement {
 		this.#internals.setFormValue(value, state)
 		this.text.innerText = state
 
+		this.#states.toggle("value", value)
+
+		this.updateClearButton()
 		this.setValidity()
 	}
 
+	updateClearButton() {
+		const template = /** @type {HTMLTemplateElement} */(this.shadowRoot.getElementById("clear-template"))
+		const clearButton = template.nextElementSibling
+		if (this.required || this.#value.value === undefined) {
+			clearButton?.remove()
+		} else if (!clearButton && !this.required) {
+			const button = template.content.cloneNode(true)
+			template.after(button)
+			template.nextElementSibling.addEventListener("click", event => {
+				event.stopPropagation()
+				this.clear()
+			})
+		}
+	}
+
 	get value() { return this.#value.value }
 	set value(value) {
 		if (value === undefined) {
@@ -569,7 +602,10 @@ export class BetterSelect extends HTMLElement {
 
 	reportValidity() { return this.#internals.reportValidity() }
 
-	requiredChanged() { this.setValidity() }
+	requiredChanged() {
+		this.updateClearButton()
+		this.setValidity()
+	}
 
 	/**
 	 * @param {String} name