Improve webpage

index.html

@@ -15,9 +15,31 @@
 		url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/schemes/talia.css')
 		layer(theme);
 
+	:root {
+		--color: #4af;
+	}
+
 	better-select {
-		color: black;
-		background: white;
+		background: var(--background);
+
+		&::part(search) {
+			border-radius: 3px;
+			border: 1px solid var(--color);
+		}
+		&::part(search):focus {
+			outline: 2px solid color-mix(in hsl, var(--color), transparent 60%);
+		}
+
+		&:focus {
+			outline: 2px solid var(--color);
+		}
+		&:state(--open) {
+			outline: none;
+		}
+		&::part(item):focus {
+			color: var(--color);
+			background-color: color-mix(in hsl, var(--color), transparent 80%);
+		}
 	}
 
 	md-block:not([rendered]) { display: none }
@@ -28,12 +50,15 @@
 
 	<p>A better muli-option input box for HTML</p>
 
-	<better-select class="search">
-		<span slot="placeholder">Placeholder...</span>
-		<option value="first">First value</option>
-		<option value="second">Second value</option>
-		<option value="third">Third value</option>
-	</better-select>
+	<form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'>
+		<better-select name="better-selection" class="search">
+			<span slot="placeholder">Placeholder...</span>
+			<option value="first">First value</option>
+			<option value="second">Second value</option>
+			<option value="third">Third value</option>
+		</better-select>
+		<button title="Log form data to dev console">Submit</button>
+	</form>
 
 	<vertical-spacer triple></vertical-spacer>
 

readme.md

@@ -21,3 +21,8 @@
 ## Attributes
 
 * `closeSignal`: An AbortSignal that fires when the drop-down closes
+
+## Events
+
+* `change`: Fired whenever the value changes, even if via JavaScript
+* `input`: Fired when the value is changed by selecting an option (after `change`)

src/BetterSelect.js

@@ -144,6 +144,7 @@ export class BetterSelect extends HTMLElement {
 			</dialog>
 		`
 		this.shadowRoot.adoptedStyleSheets = [BetterSelect.styleSheet]
+		this.#internals.setFormValue("", "")
 
 		this.tabIndex = 0
 
@@ -202,6 +203,7 @@ export class BetterSelect extends HTMLElement {
 		this.addEventListener("keypress", event => {
 			if (event.key == "Enter") {
 				this.selectDefault()
+				this.dispatchEvent(new InputEvent("input", {bubbles: true}))
 			}
 		}, {signal})
 
@@ -274,6 +276,7 @@ export class BetterSelect extends HTMLElement {
 	 */
 	setValue(value, state=value) {
 		this.#value = {value, state}
+		this.dispatchEvent(new Event("change", {bubbles: true}));
 		this.#internals.setFormValue(value, state)
 		this.text.innerText = state
 	}