UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

484 lines • 80.8 kB
<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_form-combobox.html"
				aria-controls="panel_form-combobox.html"
				aria-selected="false"
				tabindex="-1"
			>HTML</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_form-combobox.css"
				aria-controls="panel_form-combobox.css"
				aria-selected="false"
				tabindex="-1"
			>CSS</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_form-combobox.ts"
				aria-controls="panel_form-combobox.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_form-combobox.html" aria-labelledby="trigger_form-combobox.html" hidden>
	<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">form-combobox.html</span>
			<span class="language">html</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">form-combobox</span><span style="color:#A6E22E"> value</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">""</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">label</span><span style="color:#A6E22E"> for</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-input"</span><span style="color:#F8F8F2">>Choose a city&#x3C;/</span><span style="color:#F92672">label</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"input"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">input</span></span>
<span class="line"><span style="color:#A6E22E">			id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-input"</span></span>
<span class="line"><span style="color:#A6E22E">			type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"text"</span></span>
<span class="line"><span style="color:#A6E22E">			role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"combobox"</span></span>
<span class="line"><span style="color:#A6E22E">			aria-expanded</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"false"</span></span>
<span class="line"><span style="color:#A6E22E">			aria-controls</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-popup"</span></span>
<span class="line"><span style="color:#A6E22E">			aria-autocomplete</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"list"</span></span>
<span class="line"><span style="color:#A6E22E">			autocomplete</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"off"</span></span>
<span class="line"><span style="color:#A6E22E">			required</span></span>
<span class="line"><span style="color:#F8F8F2">		/></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">ol</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-popup"</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"listbox"</span><span style="color:#A6E22E"> hidden</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Amsterdam&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Berlin&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Copenhagen&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Dublin&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Edinburgh&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Frankfurt&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Geneva&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Helsinki&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Istanbul&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Jakarta&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Kairo&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>London&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Madrid&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>New York&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Oslo&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Paris&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Qingdao&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Rome&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Stockholm&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Tokyo&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Ulan Bator&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Vienna&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Warsaw&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Xi'an&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Yokohama&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">li</span><span style="color:#A6E22E"> role</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"option"</span><span style="color:#A6E22E"> tabindex</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"-1"</span><span style="color:#F8F8F2">>Zurich&#x3C;/</span><span style="color:#F92672">li</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">ol</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"clear"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Clear input"</span><span style="color:#A6E22E"> hidden</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			✕</span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">div</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"error"</span><span style="color:#A6E22E"> aria-live</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"assertive"</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-error"</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"description"</span><span style="color:#A6E22E"> aria-live</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"polite"</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"city-description"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		Tell us where you live so we can set your timezone for our calendar and</span></span>
<span class="line"><span style="color:#F8F8F2">		notification features.</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">form-combobox</span><span style="color:#F8F8F2">></span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_form-combobox.css" aria-labelledby="trigger_form-combobox.css" hidden>
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">form-combobox.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">form-combobox</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; </span><span style="color:#66D9EF;font-style:italic">label</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; p,</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; button {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-dimmed);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		transition</span><span style="color:#F8F8F2">: opacity </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--transition-short) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--easing-inout);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; </span><span style="color:#F92672">label</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xxs);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; </span><span style="color:#F92672">input</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">inline-block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		box-sizing</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">border-box</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-input);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> solid</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-border);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs)</span></span>
<span class="line"><span style="color:#66D9EF">			var</span><span style="color:#F8F8F2">(--space-xxs);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--input-height);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		transition</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">color</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--transition-short) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--easing-inout);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;[aria-invalid="true"] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			box-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xxs) </span><span style="color:#AE81FF">2</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-error-invalid);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;</span><span style="color:#A6E22E">::placeholder</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-translucent);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.input</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">relative</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.clear</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		right</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">50</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-xs);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--line-height-xs);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-input);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-soft);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		width</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">calc</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">0.6</span><span style="color:#F92672"> *</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--input-height));</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">calc</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">0.6</span><span style="color:#F92672"> *</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--input-height));</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">calc</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">0.2</span><span style="color:#F92672"> *</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--input-height));</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;:hover {</span></span>
<span class="line"><span style="color:#F8F8F2">			background-color: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	[</span><span style="color:#A6E22E">role</span><span style="color:#F92672">=</span><span style="color:#E6DB74">"listbox"</span><span style="color:#F8F8F2">] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		gap</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		list-style</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		top</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		left</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		width</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">calc</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F92672"> -</span><span style="color:#AE81FF"> 2</span><span style="color:#F92672">px</span><span style="color:#F8F8F2">);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#66D9EF"> solid</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--color-border);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-top</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		z-index</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		[</span><span style="color:#66D9EF;font-style:italic">role</span><span style="color:#F8F8F2">="option"] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--line-height-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">pointer</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			transition</span><span style="color:#F8F8F2">: </span><span style="color:#F44747">background</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--transition-short) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--easing-inout);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">			&#x26;[aria-selected="true"] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-primary);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-inverted);</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">			&#x26;</span><span style="color:#A6E22E">:hover</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary-hover);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">				&#x26;[aria-selected="true"] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">					background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-primary-hover);</span></span>
<span class="line"><span style="color:#F8F8F2">				}</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.error</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">	.description</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-xs);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		line-height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--line-height-s);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;:empty {</span></span>
<span class="line"><span style="color:#F8F8F2">			display: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.error</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">color-mix</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">in</span><span style="color:#66D9EF"> srgb</span><span style="color:#F8F8F2">, </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text) </span><span style="color:#AE81FF">50</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">, </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-error));</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.description</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-soft);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">:focus-within</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; </span><span style="color:#66D9EF;font-style:italic">label</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; p,</span></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; button {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			opacity</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--opacity-solid);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26; </span><span style="color:#F92672">input</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_form-combobox.ts" aria-labelledby="trigger_form-combobox.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">form-combobox.ts</span>
			<span class="language">ts</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> Component,</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> Computed,</span></span>
<span class="line"><span style="color:#F8F8F2">	UNSET,</span></span>
<span class="line"><span style="color:#F8F8F2">	batch,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	effect,</span></span>
<span class="line"><span style="color:#F8F8F2">	fromSelector,</span></span>
<span class="line"><span style="color:#F8F8F2">	on,</span></span>
<span class="line"><span style="color:#F8F8F2">	setAttribute,</span></span>
<span class="line"><span style="color:#F8F8F2">	setProperty,</span></span>
<span class="line"><span style="color:#F8F8F2">	setText,</span></span>
<span class="line"><span style="color:#F8F8F2">	show,</span></span>
<span class="line"><span style="color:#F8F8F2">	state,</span></span>
<span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../..'</span></span>
<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { createClearFunction } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../functions/shared/clear-input'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">FormComboboxProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">	value</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span></span>
<span class="line"><span style="color:#F8F8F2">	length</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span></span>
<span class="line"><span style="color:#F8F8F2">	error</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span></span>
<span class="line"><span style="color:#F8F8F2">	description</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span></span>
<span class="line"><span style="color:#A6E22E">	clear</span><span style="color:#F8F8F2">()</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> void</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">FormComboboxMode</span><span style="color:#F92672"> =</span><span style="color:#E6DB74"> 'idle'</span><span style="color:#F92672"> |</span><span style="color:#E6DB74"> 'editing'</span><span style="color:#F92672"> |</span><span style="color:#E6DB74"> 'selected'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormComboboxProps</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">	'form-combobox'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		value: </span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		length: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		error: </span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		description: </span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">		clear</span><span style="color:#F8F8F2">() {},</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">	(</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">, { </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">all</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> input </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'input'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">		if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">input) </span><span style="color:#F92672">throw</span><span style="color:#F92672"> new</span><span style="color:#A6E22E"> Error</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'Input element not found'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">		// Internal signals</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> mode </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> state</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormComboboxMode</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'idle'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> focusIndex </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> state</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">-</span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> filterText </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> state</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> showPopup </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> state</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">false</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> options </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> fromSelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLLIElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">			'[role="option"]:not([hidden])'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">		)(el) </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Computed</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLLIElement</span><span style="color:#F8F8F2">[]></span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#A6E22E"> isExpanded</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> mode.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'editing'</span><span style="color:#F92672"> &#x26;&#x26;</span><span style="color:#F8F8F2"> showPopup.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">		// Internal function</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#A6E22E"> commit</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span><span style="color:#FD971F;font-style:italic">value</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">			input.value </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> value</span></span>
<span class="line"><span style="color:#88846F">			// Clear any custom validity messages</span></span>
<span class="line"><span style="color:#F8F8F2">			input.</span><span style="color:#A6E22E">setCustomValidity</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#88846F">			// Force validation state update</span></span>
<span class="line"><span style="color:#F8F8F2">			input.</span><span style="color:#A6E22E">checkValidity</span><span style="color:#F8F8F2">()</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">			batch</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#88846F">				// Set mode to selected when input is changed</span></span>
<span class="line"><span style="color:#F8F8F2">				mode.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'selected'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">				el.value </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> value</span></span>
<span class="line"><span style="color:#F8F8F2">				el.length </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> value.length</span></span>
<span class="line"><span style="color:#F8F8F2">				el.error </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.validationMessage </span><span style="color:#F92672">??</span><span style="color:#E6DB74"> ''</span></span>
<span class="line"><span style="color:#F8F8F2">				filterText.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(value.</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">())</span></span>
<span class="line"><span style="color:#F8F8F2">				focusIndex.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">-</span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">				showPopup.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">((input.required </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F92672"> !</span><span style="color:#F8F8F2">input.value) </span><span style="color:#F92672">||</span><span style="color:#AE81FF"> false</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">			})</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">		// Add clear method to component</span></span>
<span class="line"><span style="color:#F8F8F2">		el.clear </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> createClearFunction</span><span style="color:#F8F8F2">(input)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">		return</span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#88846F">			// Effects and event listeners on component</span></span>
<span class="line"><span style="color:#A6E22E">			setAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value'</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#F8F8F2">			() </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#A6E22E">				effect</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">					const</span><span style="color:#F8F8F2"> m </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> mode.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">					const</span><span style="color:#F8F8F2"> i </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> focusIndex.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F92672">					if</span><span style="color:#F8F8F2"> (m </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'idle'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">return</span></span>
<span class="line"><span style="color:#F92672">					else</span><span style="color:#F92672"> if</span><span style="color:#F8F8F2"> (m </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'editing'</span><span style="color:#F92672"> &#x26;&#x26;</span><span style="color:#F8F8F2"> i </span><span style="color:#F92672">>=</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">						options.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">().</span><span style="color:#A6E22E">at</span><span style="color:#F8F8F2">(i)?.</span><span style="color:#A6E22E">focus</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F92672">					else</span><span style="color:#F8F8F2"> input.</span><span style="color:#A6E22E">focus</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#A6E22E">			on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'keydown'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				const</span><span style="color:#F8F8F2"> { key, altKey } </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> e</span></span>
<span class="line"><span style="color:#F92672">				if</span><span style="color:#F8F8F2"> ([</span><span style="color:#E6DB74">'ArrowDown'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'ArrowUp'</span><span style="color:#F8F8F2">].</span><span style="color:#A6E22E">includes</span><span style="color:#F8F8F2">(key)) {</span></span>
<span class="line"><span style="color:#F8F8F2">					e.</span><span style="color:#A6E22E">preventDefault</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">					e.</span><span style="color:#A6E22E">stopPropagation</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#88846F">					// Set mode to editing when navigating options</span></span>
<span class="line"><span style="color:#F8F8F2">					mode.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'editing'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">					if</span><span style="color:#F8F8F2"> (altKey) showPopup.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'ArrowDown'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">					else</span></span>
<span class="line"><span style="color:#F8F8F2">						focusIndex.</span><span style="color:#A6E22E">update</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">v</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#F8F8F2">							key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'ArrowDown'</span></span>
<span class="line"><span style="color:#F92672">								?</span><span style="color:#F8F8F2"> Math.</span><span style="color:#A6E22E">min</span><span style="color:#F8F8F2">(v </span><span style="color:#F92672">+</span><span style="color:#AE81FF"> 1</span><span style="color:#F8F8F2">, options.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">().length </span><span style="color:#F92672">-</span><span style="color:#AE81FF"> 1</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">								:</span><span style="color:#F8F8F2"> Math.</span><span style="color:#A6E22E">max</span><span style="color:#F8F8F2">(v </span><span style="color:#F92672">-</span><span style="color:#AE81FF"> 1</span><span style="color:#F8F8F2">, </span><span style="color:#F92672">-</span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#F8F8F2">						)</span></span>
<span class="line"><span style="color:#F8F8F2">				}</span></span>
<span class="line"><span style="color:#F8F8F2">			}),</span></span>
<span class="line"><span style="color:#A6E22E">			on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'keyup'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				const</span><span style="color:#F8F8F2"> { key } </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> e</span></span>
<span class="line"><span style="color:#F92672">				if</span><span style="color:#F8F8F2"> (key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'Delete'</span><span style="color:#F8F8F2">) {</span></span>
<span class="line"><span style="color:#F8F8F2">					e.</span><span style="color:#A6E22E">preventDefault</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">					e.</span><span style="color:#A6E22E">stopPropagation</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#A6E22E">					commit</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">''</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">				}</span></span>
<span class="line"><span style="color:#F8F8F2">			}),</span></span>
<span class="line"><span style="color:#A6E22E">			on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'focusout'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#A6E22E">				requestAnimationFrame</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#88846F">					// Set mode to idle when no element in our component has focus</span></span>
<span class="line"><span style="color:#F92672">					if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">el.</span><span style="color:#A6E22E">contains</span><span style="color:#F8F8F2">(document.activeElement)) mode.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'idle'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">				})</span></span>
<span class="line"><span style="color:#F8F8F2">			}),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effects on error and description</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.error'</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E">setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'error'</span><span style="color:#F8F8F2">)),</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.description'</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E">setText</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'description'</span><span style="color:#F8F8F2">)),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effects and event listeners on input</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'input'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'ariaInvalid'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">!!</span><span style="color:#F8F8F2">el.error)),</span></span>
<span class="line"><span style="color:#A6E22E">				setAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'aria-errormessage'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#F8F8F2">					el.error </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.error'</span><span style="color:#F8F8F2">)?.id</span></span>
<span class="line"><span style="color:#F92672">						?</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.error'</span><span style="color:#F8F8F2">)?.id</span></span>
<span class="line"><span style="color:#F92672">						:</span><span style="color:#F8F8F2"> UNSET,</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#A6E22E">				setAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'aria-describedby'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#F8F8F2">					el.description </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.description'</span><span style="color:#F8F8F2">)?.id</span></span>
<span class="line"><span style="color:#F92672">						?</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.description'</span><span style="color:#F8F8F2">)?.id</span></span>
<span class="line"><span style="color:#F92672">						:</span><span style="color:#F8F8F2"> UNSET,</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#A6E22E">				setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'ariaExpanded'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">isExpanded</span><span style="color:#F8F8F2">())),</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'change'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">					input.</span><span style="color:#A6E22E">checkValidity</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#A6E22E">					batch</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">						el.value </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.value</span></span>
<span class="line"><span style="color:#F8F8F2">						el.error </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.validationMessage </span><span style="color:#F92672">??</span><span style="color:#E6DB74"> ''</span></span>
<span class="line"><span style="color:#F8F8F2">					})</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'input'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#A6E22E">					batch</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#88846F">						// Set mode to editing when typing</span></span>
<span class="line"><span style="color:#F8F8F2">						mode.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'editing'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">						showPopup.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">true</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F8F8F2">						filterText.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(input.value.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">().</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">())</span></span>
<span class="line"><span style="color:#F8F8F2">						el.length </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.value.length</span></span>
<span class="line"><span style="color:#F8F8F2">					})</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effects and event listeners on clear button</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'.clear'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				show</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F92672"> !!</span><span style="color:#F8F8F2">el.length),</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'click'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">					el.</span><span style="color:#A6E22E">clear</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effect on listbox</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'[role="listbox"]'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				show</span><span style="color:#F8F8F2">(isExpanded),</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'keyup'</span><span style="color:#F8F8F2">, (</span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Event</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">					const</span><span style="color:#F8F8F2"> { key } </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> e </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">KeyboardEvent</span></span>
<span class="line"><span style="color:#F92672">					if</span><span style="color:#F8F8F2"> (key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'Enter'</span><span style="color:#F8F8F2">) {</span></span>
<span class="line"><span style="color:#A6E22E">						commit</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">							options</span></span>
<span class="line"><span style="color:#F8F8F2">								.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">								.</span><span style="color:#A6E22E">at</span><span style="color:#F8F8F2">(focusIndex.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">())</span></span>
<span class="line"><span style="color:#F8F8F2">								?.textContent?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">||</span><span style="color:#E6DB74"> ''</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">						)</span></span>
<span class="line"><span style="color:#F8F8F2">					} </span><span style="color:#F92672">else</span><span style="color:#F92672"> if</span><span style="color:#F8F8F2"> (key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'Escape'</span><span style="color:#F8F8F2">) {</span></span>
<span class="line"><span style="color:#A6E22E">						commit</span><span style="color:#F8F8F2">(el.value)</span></span>
<span class="line"><span style="color:#F8F8F2">					} </span><span style="color:#F92672">else</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">						const</span><span style="color:#F8F8F2"> lowKey </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> key.</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">						const</span><span style="color:#F8F8F2"> nextIndex </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> options</span></span>
<span class="line"><span style="color:#F8F8F2">							.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">							.</span><span style="color:#A6E22E">findIndex</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">option</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#F8F8F2">								(</span></span>
<span class="line"><span style="color:#F8F8F2">									option.textContent?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">().</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">||</span></span>
<span class="line"><span style="color:#E6DB74">									''</span></span>
<span class="line"><span style="color:#F8F8F2">								).</span><span style="color:#A6E22E">startsWith</span><span style="color:#F8F8F2">(lowKey),</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F92672">						if</span><span style="color:#F8F8F2"> (nextIndex </span><span style="color:#F92672">!==</span><span style="color:#F92672"> -</span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">) focusIndex.</span><span style="color:#A6E22E">set</span><span style="color:#F8F8F2">(nextIndex)</span></span>
<span class="line"><span style="color:#F8F8F2">					}</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effects and event listeners on options</span></span>
<span class="line"><span style="color:#A6E22E">			all</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLLIElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">				'[role="option"]'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				setProperty</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'ariaSelected'</span><span style="color:#F8F8F2">, </span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#A6E22E">					String</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">						target.textContent?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">().</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">===</span></span>
<span class="line"><span style="color:#F8F8F2">							el.value.</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">(),</span></span>
<span class="line"><span style="color:#F8F8F2">					),</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#A6E22E">				show</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">target</span><span style="color:#66D9EF;font-style:italic"> =></span></span>
<span class="line"><span style="color:#F8F8F2">					target.textContent</span></span>
<span class="line"><span style="color:#F8F8F2">						?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">						.</span><span style="color:#A6E22E">toLowerCase</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">						.</span><span style="color:#A6E22E">includes</span><span style="color:#F8F8F2">(filterText.</span><span style="color:#A6E22E">get</span><span style="color:#F8F8F2">()),</span></span>
<span class="line"><span style="color:#F8F8F2">				),</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'click'</span><span style="color:#F8F8F2">, (</span><span style="color:#FD971F;font-style:italic">e</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Event</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#A6E22E">					commit</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">						(e.target </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLLIElement</span><span style="color:#F8F8F2">).textContent?.</span><span style="color:#A6E22E">trim</span><span style="color:#F8F8F2">() </span><span style="color:#F92672">||</span><span style="color:#E6DB74"> ''</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">					)</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#F8F8F2">		]</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#E6DB74">		'form-combobox'</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">FormComboboxProps</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>
</module-tabgroup>