UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

597 lines • 96 kB
<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_input-field.html"
				aria-controls="panel_input-field.html"
				aria-selected="false"
				tabindex="-1"
			>HTML</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_input-field.css"
				aria-controls="panel_input-field.css"
				aria-selected="false"
				tabindex="-1"
			>CSS</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_input-field.ts"
				aria-controls="panel_input-field.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_input-field.html" aria-labelledby="trigger_input-field.html" hidden>
	<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">input-field.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">input-field</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">"name-input"</span><span style="color:#F8F8F2">>Name&#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">"row"</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">"group auto"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"text"</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"name-input"</span><span style="color:#A6E22E"> name</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"name"</span><span style="color:#A6E22E"> autocomplete</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"name"</span><span style="color:#A6E22E"> required</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">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">"name-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">input-field</span><span style="color:#F8F8F2">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">input-field</span><span style="color:#A6E22E"> integer</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">"bday-year-input"</span><span style="color:#F8F8F2">>Birthday Year&#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">"row"</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">"group short"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"number"</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"bday-year-input"</span><span style="color:#A6E22E"> name</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"bday-year"</span><span style="color:#A6E22E"> autocomplete</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"bday-year"</span><span style="color:#A6E22E"> required</span><span style="color:#A6E22E"> minlength</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"4"</span><span style="color:#A6E22E"> maxlength</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"4"</span><span style="color:#A6E22E"> min</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"1900"</span><span style="color:#A6E22E"> max</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"2024"</span><span style="color:#A6E22E"> step</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"1"</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">div</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"spinbutton"</span><span style="color:#A6E22E"> data-step</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"1"</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">"decrement"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Decrement"</span><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">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">"increment"</span><span style="color:#A6E22E"> aria-label</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Increment"</span><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">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">"bday-year-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">"bday-year-description"</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">input-field</span><span style="color:#F8F8F2">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">input-field</span><span style="color:#A6E22E"> validate</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"./examples/snippets/validate.html"</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">"username-input"</span><span style="color:#F8F8F2">>Username&#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">"row"</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">"group auto"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">input</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"text"</span><span style="color:#A6E22E"> id</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"username-input"</span><span style="color:#A6E22E"> name</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"username"</span><span style="color:#A6E22E"> autocomplete</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"username"</span><span style="color:#A6E22E"> aria-describedby</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"username-description"</span><span style="color:#A6E22E"> required</span><span style="color:#A6E22E"> minlength</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"4"</span><span style="color:#A6E22E"> maxlength</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"20"</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">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">"username-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">"username-description"</span><span style="color:#A6E22E"> data-remaining</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"${x} characters remaining"</span><span style="color:#F8F8F2">>Max. 20 characters&#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">input-field</span><span style="color:#F8F8F2">></span></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_input-field.css" aria-labelledby="trigger_input-field.css" hidden>
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">input-field.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">input-field</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;[value="0"] input {</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">transparent</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:#F8F8F2">	&#x26;</span><span style="color:#A6E22E">:hover</span><span style="color:#F92672"> button</span><span style="color:#F8F8F2"> {</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>
<span class="line"><span style="color:#F8F8F2">		&#x26;:not(:</span><span style="color:#66D9EF">disabled</span><span style="color:#F8F8F2">) {</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:#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:#F8F8F2">		}</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; </span><span style="color:#66D9EF;font-style:italic">span</span><span style="color:#F8F8F2"> {</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">button</span><span style="color:#F8F8F2"> {</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>
<span class="line"><span style="color:#F8F8F2">			&#x26;:not(:</span><span style="color:#66D9EF">disabled</span><span style="color:#F8F8F2">) {</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:#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:#F8F8F2">			}</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>
<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:#F8F8F2">	&#x26; </span><span style="color:#F92672">p</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; </span><span style="color:#F92672">span</span><span style="color:#F8F8F2"> {</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:#A6E22E">	.row</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">flex</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:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.group</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">flex</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		align-items</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">baseline</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">		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">		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;.short {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">6</span><span style="color:#F92672">rem</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">			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">			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">			width</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-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">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			line-height</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1.1</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			align-self</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">center</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			text-align</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">center</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:#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:#A6E22E">		.hidden</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">none</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:#F8F8F2">		&#x26; </span><span style="color:#F92672">span</span><span style="color:#A6E22E">:first-child</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			padding-left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</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">span</span><span style="color:#A6E22E">:last-child</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			padding-right</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</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">	&#x26; </span><span style="color:#F92672">input</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		flex-grow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">1</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:#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-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:#AE81FF">2</span><span style="color:#F92672">rem</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 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;::placeholder {</span></span>
<span class="line"><span style="color:#66D9EF">			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:#F8F8F2">	&#x26; </span><span style="color:#F92672">input</span><span style="color:#F8F8F2">[</span><span style="color:#A6E22E">type</span><span style="color:#F92672">=</span><span style="color:#E6DB74">"number"</span><span style="color:#F8F8F2">] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		text-align</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">right</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:#F8F8F2">	&#x26; </span><span style="color:#F92672">input</span><span style="color:#F8F8F2">[</span><span style="color:#A6E22E">aria-invalid</span><span style="color:#F92672">=</span><span style="color:#E6DB74">"true"</span><span style="color:#F8F8F2">] {</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:#F92672">span</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		flex-grow</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</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">	::-webkit-textfield-decoration-container</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		height</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:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	::-webkit-inner-form-spinbutton</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		appearance</span><span style="color:#F8F8F2">: </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>
<span class="line"><span style="color:#A6E22E">	.spinbutton</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">flex</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:#F8F8F2">	&#x26; </span><span style="color:#F92672">button</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">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">		background-color</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">		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">		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">		width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">2</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		height</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">2</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">;</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-transparent);</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:#66D9EF;font-style:italic">		user-select</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;:</span><span style="color:#66D9EF">disabled</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">			cursor: </span><span style="color:#66D9EF">revert</span><span style="color:#F8F8F2">;</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-background);</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">:not</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">:disabled</span><span style="color:#F8F8F2">) {</span></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-secondary-hover);</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">:active</span><span style="color:#F8F8F2"> {</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-secondary-active);</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">	.decrement</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:#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:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.increment</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">0</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-xs) </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-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:#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 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_input-field.ts" aria-labelledby="trigger_input-field.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">input-field.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"> AttributeParser,</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"> Effect,</span></span>
<span class="line"><span style="color:#F8F8F2">	UNSET,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	computed,</span></span>
<span class="line"><span style="color:#F8F8F2">	emitEvent,</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">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../../'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">/* === Type === */</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">InputFieldProps</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 style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> number</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:#88846F">/* === Pure Functions === */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">// Check if value is a number</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#A6E22E"> isNumber</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span><span style="color:#FD971F;font-style:italic">num</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> unknown</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F92672"> typeof</span><span style="color:#F8F8F2"> num </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'number'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">// Parse a value as a number with optional integer flag and fallback value</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span></span>
<span class="line"><span style="color:#FD971F;font-style:italic">	v</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> string</span><span style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> null</span><span style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> undefined</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	int </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">	fallback </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">)</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#66D9EF;font-style:italic"> =></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">v) </span><span style="color:#F92672">return</span><span style="color:#F8F8F2"> fallback</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	const</span><span style="color:#F8F8F2"> temp </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> int </span><span style="color:#F92672">?</span><span style="color:#A6E22E"> parseInt</span><span style="color:#F8F8F2">(v, </span><span style="color:#AE81FF">10</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">:</span><span style="color:#A6E22E"> parseFloat</span><span style="color:#F8F8F2">(v)</span></span>
<span class="line"><span style="color:#F92672">	return</span><span style="color:#F8F8F2"> Number.</span><span style="color:#A6E22E">isFinite</span><span style="color:#F8F8F2">(temp) </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> temp </span><span style="color:#F92672">:</span><span style="color:#F8F8F2"> fallback</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">// Count decimal places in a number</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#A6E22E"> countDecimals</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"> number</span><span style="color:#F8F8F2">)</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">	if</span><span style="color:#F8F8F2"> (Math.</span><span style="color:#A6E22E">floor</span><span style="color:#F8F8F2">(value) </span><span style="color:#F92672">===</span><span style="color:#F8F8F2"> value </span><span style="color:#F92672">||</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(value).</span><span style="color:#A6E22E">indexOf</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">===</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">		return</span><span style="color:#AE81FF"> 0</span></span>
<span class="line"><span style="color:#F92672">	return</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(value).</span><span style="color:#A6E22E">split</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'.'</span><span style="color:#F8F8F2">)[</span><span style="color:#AE81FF">1</span><span style="color:#F8F8F2">].length </span><span style="color:#F92672">||</span><span style="color:#AE81FF"> 0</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">/* === Attribute Parsers === */</span></span>
<span class="line"></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">const</span><span style="color:#A6E22E"> asNumberOrString</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">AttributeParser</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#66D9EF;font-style:italic">string</span><span style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F8F8F2">> </span><span style="color:#F92672">=</span><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">v</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">	return</span><span style="color:#F8F8F2"> input </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F8F8F2"> input.type </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'number'</span></span>
<span class="line"><span style="color:#F92672">		?</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F8F8F2">(v, el.</span><span style="color:#A6E22E">hasAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'integer'</span><span style="color:#F8F8F2">), </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">		:</span><span style="color:#F8F8F2"> (v </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>
<span class="line"><span style="color:#88846F">/* === Component === */</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">(</span></span>
<span class="line"><span style="color:#E6DB74">	'input-field'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		value: asNumberOrString,</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 style="color:#FD971F;font-style:italic">host</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">InputFieldProps</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">			host.</span><span style="color:#A6E22E">clear</span><span style="color:#F92672"> =</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">				host.value </span><span style="color:#F92672">=</span><span style="color:#E6DB74"> ''</span></span>
<span class="line"><span style="color:#F8F8F2">				host.length </span><span style="color:#F92672">=</span><span style="color:#AE81FF"> 0</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"> host.</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"> (input) {</span></span>
<span class="line"><span style="color:#F8F8F2">					input.value </span><span style="color:#F92672">=</span><span style="color:#E6DB74"> ''</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:#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:#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 style="color:#FD971F;font-style:italic">el</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">InputFieldProps</span><span style="color:#F8F8F2">>, { </span><span style="color:#FD971F;font-style:italic">first</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"> fns</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Effect</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">InputFieldProps</span><span style="color:#F8F8F2">, </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">InputFieldProps</span><span style="color:#F8F8F2">>>[] </span><span style="color:#F92672">=</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">'No input element found'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> typeNumber </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.type </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'number'</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> integer </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">hasAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'integer'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> validationEndpoint </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">getAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'validate'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">		// Trigger value-change event to commit the value change</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#A6E22E"> triggerChange</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span></span>
<span class="line"><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:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F92672"> |</span><span style="color:#F8F8F2"> ((</span><span style="color:#FD971F;font-style:italic">v</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> any</span><span style="color:#F8F8F2">) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#66D9EF;font-style:italic"> string</span><span style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><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"> newValue </span><span style="color:#F92672">=</span></span>
<span class="line"><span style="color:#F92672">				typeof</span><span style="color:#F8F8F2"> value </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'function'</span></span>
<span class="line"><span style="color:#F92672">					?</span><span style="color:#A6E22E"> value</span><span style="color:#F8F8F2">(el.value)</span></span>
<span class="line"><span style="color:#F92672">					:</span><span style="color:#F8F8F2"> typeNumber </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F92672"> !</span><span style="color:#A6E22E">isNumber</span><span style="color:#F8F8F2">(value)</span></span>
<span class="line"><span style="color:#F92672">						?</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F8F8F2">(value, integer, </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">						:</span><span style="color:#F8F8F2"> value</span></span>
<span class="line"><span style="color:#F92672">			if</span><span style="color:#F8F8F2"> (Object.</span><span style="color:#A6E22E">is</span><span style="color:#F8F8F2">(el.value, newValue)) </span><span style="color:#F92672">return</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Validate input value against a server-side endpoint</span></span>
<span class="line"><span style="color:#F92672">			if</span><span style="color:#F8F8F2"> (newValue </span><span style="color:#F92672">!==</span><span style="color:#AE81FF"> null</span><span style="color:#F92672"> &#x26;&#x26;</span><span style="color:#F8F8F2"> validationEndpoint) {</span></span>
<span class="line"><span style="color:#A6E22E">				fetch</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">					`</span><span style="color:#F92672">${</span><span style="color:#F8F8F2">validationEndpoint</span><span style="color:#F92672">}</span><span style="color:#E6DB74">?name=</span><span style="color:#F92672">${</span><span style="color:#F8F8F2">input.name</span><span style="color:#F92672">}</span><span style="color:#E6DB74">value=</span><span style="color:#F92672">${</span><span style="color:#F8F8F2">newValue</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:#A6E22E">then</span><span style="color:#F8F8F2">(</span><span style="color:#F92672">async</span><span style="color:#FD971F;font-style:italic"> response</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"> text </span><span style="color:#F92672">=</span><span style="color:#F92672"> await</span><span style="color:#F8F8F2"> response.</span><span style="color:#A6E22E">text</span><span style="color:#F8F8F2">()</span></span>
<span class="line"><span style="color:#F8F8F2">						input.</span><span style="color:#A6E22E">setCustomValidity</span><span style="color:#F8F8F2">(text)</span></span>
<span class="line"><span style="color:#F8F8F2">						el.error </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> text</span></span>
<span class="line"><span style="color:#F8F8F2">					})</span></span>
<span class="line"><span style="color:#F8F8F2">					.</span><span style="color:#A6E22E">catch</span><span style="color:#F8F8F2">(</span><span style="color:#FD971F;font-style:italic">err</span><span style="color:#66D9EF;font-style:italic"> =></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">						el.error </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> err.message</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">			input.</span><span style="color:#A6E22E">checkValidity</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"> newValue</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>
<span class="line"><span style="color:#88846F">		// Handle input changes</span></span>
<span class="line"><span style="color:#F8F8F2">		fns.</span><span style="color:#A6E22E">push</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#A6E22E">			emitEvent</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'value-change'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'value'</span><span style="color:#F8F8F2">),</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">'value'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(el.value)),</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:#A6E22E">					triggerChange</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">						typeNumber</span></span>
<span class="line"><span style="color:#F92672">							?</span><span style="color:#F8F8F2"> (input.valueAsNumber </span><span style="color:#F92672">??</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">							:</span><span style="color:#F8F8F2"> (input.value </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:#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:#F8F8F2">					el.length </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.value.length </span><span style="color:#F92672">??</span><span style="color:#AE81FF"> 0</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">		if</span><span style="color:#F8F8F2"> (typeNumber) {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> spinButton </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'.spinbutton'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">			) </span><span style="color:#F92672">as</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElement</span><span style="color:#F92672"> |</span><span style="color:#66D9EF;font-style:italic"> null</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> step </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">				spinButton?.dataset[</span><span style="color:#E6DB74">'step'</span><span style="color:#F8F8F2">] </span><span style="color:#F92672">||</span><span style="color:#F8F8F2"> input.step,</span></span>
<span class="line"><span style="color:#F8F8F2">				integer,</span></span>
<span class="line"><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:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> min </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F8F8F2">(input.min, integer, </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> max </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> parseNumber</span><span style="color:#F8F8F2">(input.max, integer, </span><span style="color:#AE81FF">100</span><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Round a value to the nearest step</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#A6E22E"> nearestStep</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> (</span><span style="color:#FD971F;font-style:italic">v</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> number</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:#F92672">				if</span><span style="color:#F8F8F2"> (</span><span style="color:#F92672">!</span><span style="color:#F8F8F2">Number.</span><span style="color:#A6E22E">isFinite</span><span style="color:#F8F8F2">(v) </span><span style="color:#F92672">||</span><span style="color:#F8F8F2"> v </span><span style="color:#F92672">&#x3C;</span><span style="color:#F8F8F2"> min) </span><span style="color:#F92672">return</span><span style="color:#F8F8F2"> min</span></span>
<span class="line"><span style="color:#F92672">				if</span><span style="color:#F8F8F2"> (v </span><span style="color:#F92672">></span><span style="color:#F8F8F2"> max) </span><span style="color:#F92672">return</span><span style="color:#F8F8F2"> max</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">				const</span><span style="color:#F8F8F2"> value </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> min </span><span style="color:#F92672">+</span><span style="color:#F8F8F2"> Math.</span><span style="color:#A6E22E">round</span><span style="color:#F8F8F2">((v </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> min) </span><span style="color:#F92672">/</span><span style="color:#F8F8F2"> step) </span><span style="color:#F92672">*</span><span style="color:#F8F8F2"> step</span></span>
<span class="line"><span style="color:#F92672">				return</span><span style="color:#F8F8F2"> integer</span></span>
<span class="line"><span style="color:#F92672">					?</span><span style="color:#F8F8F2"> Math.</span><span style="color:#A6E22E">round</span><span style="color:#F8F8F2">(value)</span></span>
<span class="line"><span style="color:#F92672">					:</span><span style="color:#A6E22E"> parseFloat</span><span style="color:#F8F8F2">(value.</span><span style="color:#A6E22E">toFixed</span><span style="color:#F8F8F2">(</span><span style="color:#A6E22E">countDecimals</span><span style="color:#F8F8F2">(step)))</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Handle arrow key events to increment / decrement value</span></span>
<span class="line"><span style="color:#F8F8F2">			fns.</span><span style="color:#A6E22E">push</span><span style="color:#F8F8F2">(</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">					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:#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, shiftKey } </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"> ([</span><span style="color:#E6DB74">'ArrowUp'</span><span style="color:#F8F8F2">, </span><span style="color:#E6DB74">'ArrowDown'</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">stopPropagation</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:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> n </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> shiftKey </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> step </span><span style="color:#F92672">*</span><span style="color:#AE81FF"> 10</span><span style="color:#F92672"> :</span><span style="color:#F8F8F2"> step</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> newValue </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> nearestStep</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								input.valueAsNumber </span><span style="color:#F92672">+</span></span>
<span class="line"><span style="color:#F8F8F2">									(key </span><span style="color:#F92672">===</span><span style="color:#E6DB74"> 'ArrowUp'</span><span style="color:#F92672"> ?</span><span style="color:#F8F8F2"> n </span><span style="color:#F92672">:</span><span style="color:#F92672"> -</span><span style="color:#F8F8F2">n),</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F8F8F2">							input.value </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(newValue)</span></span>
<span class="line"><span style="color:#A6E22E">							triggerChange</span><span style="color:#F8F8F2">(newValue)</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:#88846F">			// Handle spin button clicks and update their disabled state</span></span>
<span class="line"><span style="color:#F92672">			if</span><span style="color:#F8F8F2"> (spinButton) {</span></span>
<span class="line"><span style="color:#F8F8F2">				fns.</span><span style="color:#A6E22E">push</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#A6E22E">					first</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLButtonElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">						'.decrement'</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">'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:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> n </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">MouseEvent</span><span style="color:#F8F8F2">).shiftKey</span></span>
<span class="line"><span style="color:#F92672">								?</span><span style="color:#F8F8F2"> step </span><span style="color:#F92672">*</span><span style="color:#AE81FF"> 10</span></span>
<span class="line"><span style="color:#F92672">								:</span><span style="color:#F8F8F2"> step</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> newValue </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> nearestStep</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								input.valueAsNumber </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> n,</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F8F8F2">							input.value </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(newValue)</span></span>
<span class="line"><span style="color:#A6E22E">							triggerChange</span><span style="color:#F8F8F2">(newValue)</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>
<span class="line"><span style="color:#E6DB74">							'disabled'</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:#F8F8F2">								(</span><span style="color:#A6E22E">isNumber</span><span style="color:#F8F8F2">(min) </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> (el.value </span><span style="color:#F92672">as</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">:</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">-</span></span>
<span class="line"><span style="color:#F8F8F2">									step </span><span style="color:#F92672">&#x3C;</span></span>
<span class="line"><span style="color:#F8F8F2">								min,</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">					first</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLButtonElement</span><span style="color:#F8F8F2">>(</span></span>
<span class="line"><span style="color:#E6DB74">						'.increment'</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">'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:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> n </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">MouseEvent</span><span style="color:#F8F8F2">).shiftKey</span></span>
<span class="line"><span style="color:#F92672">								?</span><span style="color:#F8F8F2"> step </span><span style="color:#F92672">*</span><span style="color:#AE81FF"> 10</span></span>
<span class="line"><span style="color:#F92672">								:</span><span style="color:#F8F8F2"> step</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">							const</span><span style="color:#F8F8F2"> newValue </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> nearestStep</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#F8F8F2">								input.valueAsNumber </span><span style="color:#F92672">+</span><span style="color:#F8F8F2"> n,</span></span>
<span class="line"><span style="color:#F8F8F2">							)</span></span>
<span class="line"><span style="color:#F8F8F2">							input.value </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> String</span><span style="color:#F8F8F2">(newValue)</span></span>
<span class="line"><span style="color:#A6E22E">							triggerChange</span><span style="color:#F8F8F2">(newValue)</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>
<span class="line"><span style="color:#E6DB74">							'disabled'</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:#F8F8F2">								(</span><span style="color:#A6E22E">isNumber</span><span style="color:#F8F8F2">(max) </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> (el.value </span><span style="color:#F92672">as</span><span style="color:#66D9EF;font-style:italic"> number</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">:</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">+</span></span>
<span class="line"><span style="color:#F8F8F2">									step </span><span style="color:#F92672">></span></span>
<span class="line"><span style="color:#F8F8F2">								max,</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 style="color:#F92672">else</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#88846F">			// Setup clear button and method</span></span>
<span class="line"><span style="color:#F8F8F2">			fns.</span><span style="color:#A6E22E">push</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#A6E22E">				first</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLButtonElement</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">					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:#A6E22E">						triggerChange</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:#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:#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">		// Setup error message</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> errorId </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">'.error'</span><span style="color:#F8F8F2">)?.id</span></span>
<span class="line"><span style="color:#F8F8F2">		fns.</span><span style="color:#A6E22E">push</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">'.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>
<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:#F8F8F2"> (el.error </span><span style="color:#F92672">?</span><span style="color:#E6DB74"> 'true'</span><span style="color:#F92672"> :</span><span style="color:#E6DB74"> 'false'</span><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-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"> errorId </span><span style="color:#F92672">?</span><span style="color:#F8F8F2"> errorId </span><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:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#F8F8F2">		)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">		// Setup description</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> description </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> el.</span><span style="color:#A6E22E">querySelector</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">HTMLElement</span><span style="color:#F8F8F2">>(</span><span style="color:#E6DB74">'.description'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"><span style="color:#F92672">		if</span><span style="color:#F8F8F2"> (description) {</span></span>
<span class="line"><span style="color:#88846F">			// Derived state</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> maxLength </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> input.maxLength</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			const</span><span style="color:#F8F8F2"> remainingMessage </span><span style="color:#F92672">=</span><span style="color:#F8F8F2"> maxLength </span><span style="color:#F92672">&#x26;&#x26;</span><span style="color:#F8F8F2"> description.dataset.remaining</span></span>
<span class="line"><span style="color:#F92672">			if</span><span style="color:#F8F8F2"> (remainingMessage) {</span></span>
<span class="line"><span style="color:#F8F8F2">				el.</span><span style="color:#A6E22E">setSignal</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">					'description'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">					computed</span><span style="color:#F8F8F2">(() </span><span style="color:#66D9EF;font-style:italic">=></span></span>
<span class="line"><span style="color:#F8F8F2">						remainingMessage.</span><span style="color:#A6E22E">replace</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">							'${x}'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">							String</span><span style="color:#F8F8F2">(maxLength </span><span style="color:#F92672">-</span><span style="color:#F8F8F2"> el.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 style="color:#F8F8F2">			}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#88846F">			// Effects</span></span>
<span class="line"><span style="color:#F8F8F2">			fns.</span><span style="color:#A6E22E">push</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 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">					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"> description.id</span></span>
<span class="line"><span style="color:#F92672">							?</span><span style="color:#F8F8F2"> description.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:#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">		return</span><span style="color:#F8F8F2"> fns</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">		'input-field'</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">InputFieldProps</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>