Allow disabling of individual options

index.html

@@ -53,7 +53,7 @@
 	<better-select name="better-selection" class="search" placeholder="Placeholder..." search-placeholder="Search...">
 		<span slot="placeholder">Placeholder...</span>
 		<option value="first">First value</option>
-		<option value="second">Second value</option>
+		<option value="second" disabled>Second value</option>
 		<option value="third">Third value</option>
 	</better-select>
 

src/better-select.css

@@ -62,10 +62,14 @@ better-select {
 		padding-inline: var(--h-padding);
 	}
 
-	&::part(item):is(:hover, :focus) {
+	&::part(item enabled):is(:hover, :focus) {
 		background-color: var(--highlight);
 	}
 
+	&::part(item disabled) {
+		opacity: .6;
+	}
+
 	&:not(:state(open))::part(drop-down) {
 		transform: scale(100%, 70%) translate(0, -30%);
 		opacity: 0;

src/better-select.js

@@ -185,10 +185,12 @@ export class BetterSelect extends HTMLElement {
 		[part="list"] {
 			display: contents;
 		}
-		[part="item"] {
+		[part~="item"] {
 			display: block;
-			cursor: pointer;
 			white-space: nowrap;
+			&[part~="enabled"] {
+				cursor: pointer;
+			}
 		}
 		[part="item"]:focus {
 			font-weight: bold;
@@ -258,9 +260,11 @@ export class BetterSelect extends HTMLElement {
 			/** @type {HTMLLIElement} */
 			const item = event.target.closest("#list > li")
 			if (item) {
-				this.setOption(item)
-				this.dispatchEvent(new InputEvent("input", {bubbles: true}))
-				this.close()
+				if (!item.part.contains("disabled")) {
+					this.setOption(item)
+					this.dispatchEvent(new InputEvent("input", {bubbles: true}))
+					this.close()
+				}
 			} else if (!this.#states.has("open")) {
 				this.open()
 			} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
@@ -475,7 +479,15 @@ export class BetterSelect extends HTMLElement {
 	setOptions() {
 		this.list.replaceChildren()
 		for (const option of this.options) {
-			this.list.append(f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`)
+			const fragment = f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`
+			const li = fragment.querySelector("li")
+			if (option.disabled) {
+				li.part.add("disabled")
+				li.removeAttribute("tabindex")
+			} else {
+				li.part.add("enabled")
+			}
+			this.list.append(fragment)
 			if (this.value == undefined && option.selected) {
 				this.value = option.value
 			}