index.html

@@ -15,31 +15,9 @@
 		url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/schemes/talia.css')
 		layer(theme);
 
-	:root {
-		--color: #4af;
-	}
-
 	better-select {
-		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%);
-		}
+		color: black;
+		background: white;
 	}
 
 	md-block:not([rendered]) { display: none }
@@ -50,15 +28,12 @@
 
 	<p>A better muli-option input box for HTML</p>
 
-	<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>
+	<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>
 
 	<vertical-spacer triple></vertical-spacer>
 

readme.md

@@ -21,8 +21,3 @@
 ## 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,7 +144,6 @@ export class BetterSelect extends HTMLElement {
 			</dialog>
 		`
 		this.shadowRoot.adoptedStyleSheets = [BetterSelect.styleSheet]
-		this.#internals.setFormValue("", "")
 
 		this.tabIndex = 0
 
@@ -203,7 +202,6 @@ export class BetterSelect extends HTMLElement {
 		this.addEventListener("keypress", event => {
 			if (event.key == "Enter") {
 				this.selectDefault()
-				this.dispatchEvent(new InputEvent("input", {bubbles: true}))
 			}
 		}, {signal})
 
@@ -276,7 +274,6 @@ 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
 	}