Change input type to search

src/BetterSelect.css

@@ -48,6 +48,10 @@ better-select {
 		display: none;
 	}
 
+	&::part(placeholder) {
+		min-height: 1.4em;
+	}
+
 	&.search::part(search) {
 		display: block;
 	}

src/BetterSelect.js

@@ -42,7 +42,6 @@ export class BetterSelect extends HTMLElement {
 	static styleSheet = css`
 		:host {
 			position: relative;
-			z-index: 100;
 			display: inline-block;
 		}
 		* {
@@ -78,6 +77,7 @@ export class BetterSelect extends HTMLElement {
 			position: absolute;
 			flex-flow: column;
 			margin: 0;
+			z-index: var(--layer-dropdown, 100);
 		}
 		[part="drop-down"]:modal {
 			margin: auto;
@@ -134,11 +134,11 @@ export class BetterSelect extends HTMLElement {
 			<div id="display" part="display">
 				<span part="display-text" id="text"></span>
 				<slot name="placeholder" aria-hidden="true">
-					<span id="placeholder" aria-hidden="true"></span>
+					<span part="placeholder" id="placeholder" aria-hidden="true"></span>
 				</slot>
 			</div>
 			<dialog id="dialog" part="drop-down">
-				<input type="search" id="input" part="search" type="text"></input>
+				<input type="search" id="input" part="search" type="search"></input>
 				<ul id="list" part="list"></ul>
 				<slot id="loading" name="loading"></slot>
 			</dialog>