search-box
	input.search(placeholder="Search...", onkeydown="{_handleKeyDown}")
	
	script.
		let lastKnownQuery;
		
		Object.assign(this, {
			_handleKeyDown: (event) => {
				switch (event.code) {
					case "ArrowDown":
						this.trigger("selectionDown");
						break;
					case "ArrowUp":
						this.trigger("selectionUp");
						break;
					case "Enter":
						this.trigger("confirm");
						break;
					case "Escape":
						this.trigger("cancel");
						break;
				}
				
				let searchInput = this.root.querySelector(".search");
				
				if (searchInput.value !== lastKnownQuery) {
					lastKnownQuery = searchInput.value;
					this.trigger("queryChanged", searchInput.value);
				}
			
				return true;
			}
		})
	
	style(scoped, type="scss").
		.search {
			border: 0px;
			padding: 17px 9px;
			font-size: 21px;
			background-color: transparent;
			width: 100%;
			color: white;
			font-weight: bold;
			
			&::-webkit-input-placeholder {
				color: #d99d9d;
			}
		}