(x, y) coordinates of the caret in a textarea or input type='text'
npm install textarea-caret
Get the top and left coordinates of the caret in a </code> or<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="text"></code>, in pixels. Useful for textarea autocompletes like<br />GitHub or Twitter, or for single-line autocompletes like the name drop-down<br />in Twitter or Facebook's search or the company dropdown on Google Finance.</p><p class="my-3">How it's done: a faux <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><div></code> is created off-screen and styled exactly like the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">textarea</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code>. Then, the text of the element up to the caret is copied<br />into the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">div</code> and a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><span></code> is inserted right after it. Then, the text content<br />of the span is set to the remainder of the text in the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>, in order to<br />faithfully reproduce the wrapping in the faux <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">div</code> (because wrapping can push<br />the currently typed word onto the next line). The same is done for the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code> to simplify the code, though it makes no difference. Finally, the span's<br />offset within the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">textarea</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code> is returned.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Demo</h2></p><p class="my-3">Check out the <a href="http://jsfiddle.net/dandv/aFPA7/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSFiddle</a><br />or the <a href="http://rawgit.com/component/textarea-caret-position/master/test/index.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">test.html</a>.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2></p><p class="my-3">* supports <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>s and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="text"></code> elements<br />* pixel precision with any combination of paddings, margins, borders, heights vs. line-heights etc.<br />* keyboard, mouse support and touch support<br />* no dependencies whatsoever<br />* browser compatibility: Chrome, Safari, Firefox (despite <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=753662" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">two</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=984275" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bugs</a> it has), Opera, IE9+<br />* supports any font family and size, as well as text-transforms<br />* not confused by horizontal or vertical scrollbars in the textarea<br />* supports hard returns, tabs (except on IE) and consecutive spaces in the text<br />* correct position on lines longer than the columns in the text area<br />* <a href="https://archive.is/wXqud#13402035" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">no problem</a> getting the correct position when the input text is scrolled (i.e. the first visible character is no longer the first in the text)<br />* no <a href="https://github.com/component/textarea-caret-position/blob/06d2197f85f96405b43724e56dc56f220c0092a5/test/position_off_after_wrapping_with_whitespace_before_EOL.gif" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">"ghost" position in the empty space</a> at the end of a line when wrapping long words in a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code><br />* RTL (right-to-left) support</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Example</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var getCaretCoordinates = require('textarea-caret');</p><p class="my-3">document.querySelector('textarea').addEventListener('input', function () {<br /> var caret = getCaretCoordinates(this, this.selectionEnd);<br /> console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height);<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">* </code>element<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the DOM element, either an </code><input type="text"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>textarea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>position<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is an integer indicating the location of the caret. Most often you'll want to pass </code>this.selectionStart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>this.selectionEnd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This way, the library isn't opinionated about what the caret is.</p><p class="my-3">The function returns a caret coordinates object of the form </code>{top: , left: , height: }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, where:<br />* </code>top<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>left<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are the offsets in pixels from the upper-left corner of the element and (or presumably the upper-right, but this hasn't been tested), and<br />* </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the height of the caret - useful to calculate the bottom of the caret.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Known issues</h2></p><p class="my-3">* Off-by-one edge cases with spaces at the end of lines in </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s (<a href="https://github.com/component/textarea-caret-position/issues/9#issuecomment-303601894" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#29</a>). This may be a bug in how browsers render the caret.<br />* Edge case with selecting from right to left strings longer than the </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (<a href="https://github.com/component/textarea-caret-position/issues/40" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#40</a>). The caret position can be quite off in this case.<br />* Tab characters in </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s aren't supported in IE9 (<a href="https://github.com/component/textarea-caret-position/issues/14" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#14</a>)</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Dependencies</h2></p><p class="my-3">None.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">TODO</h2></p><p class="my-3">* Add tests.<br />* Consider adding <a href="http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">IE-specific</a> <a href="http://stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">code</a> if it avoids the necessity of creating the mirror div and might fix <a href="https://github.com/component/textarea-caret-position/issues/14" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#14</a>.<br />* ~~Test IE8 support with </code>currentStyle<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">~~.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Implementation notes</h2></p><p class="my-3">For the same textarea of 25 rows and 40 columns, Chrome 33, Firefox 27 and IE9 returned completely different values<br />for </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Here, </code>computed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is </code>getComputedStyle(textarea)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3">Chrome 33<br />* </code>computed.width <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "240px" = the text itself, no borders, no padding, no scrollbars<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 280 = computed.width + padding-left + padding-right<br />* </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 327 = clientWidth + scrollbar (15px) + border-left + border-right</p><p class="my-3">IE 9: scrollbar looks 16px, the text itself in the text area is 224px wide<br />* </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "241.37px" = text only + sub-pixel scrollbar? (1.37px)<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 264<br />* </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 313</p><p class="my-3">Firefox 27<br />* </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "265.667px"<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 249 - the only browser where textarea.clientWidth < computed.width<br />* </code>textarea.offsetWidth`: 338</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Contributors</h2></p><p class="my-3">* Dan Dascalescu (<a href="https://github.com/dandv" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">dandv</a>)<br />* Jonathan Ong (<a href="https://github.com/jonathanong" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">jonathanong</a>)<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>
top
left
</code> or<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="text"></code>, in pixels. Useful for textarea autocompletes like<br />GitHub or Twitter, or for single-line autocompletes like the name drop-down<br />in Twitter or Facebook's search or the company dropdown on Google Finance.</p><p class="my-3">How it's done: a faux <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><div></code> is created off-screen and styled exactly like the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">textarea</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code>. Then, the text of the element up to the caret is copied<br />into the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">div</code> and a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><span></code> is inserted right after it. Then, the text content<br />of the span is set to the remainder of the text in the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>, in order to<br />faithfully reproduce the wrapping in the faux <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">div</code> (because wrapping can push<br />the currently typed word onto the next line). The same is done for the<br /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code> to simplify the code, though it makes no difference. Finally, the span's<br />offset within the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">textarea</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">input</code> is returned.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Demo</h2></p><p class="my-3">Check out the <a href="http://jsfiddle.net/dandv/aFPA7/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSFiddle</a><br />or the <a href="http://rawgit.com/component/textarea-caret-position/master/test/index.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">test.html</a>.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2></p><p class="my-3">* supports <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>s and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="text"></code> elements<br />* pixel precision with any combination of paddings, margins, borders, heights vs. line-heights etc.<br />* keyboard, mouse support and touch support<br />* no dependencies whatsoever<br />* browser compatibility: Chrome, Safari, Firefox (despite <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=753662" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">two</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=984275" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bugs</a> it has), Opera, IE9+<br />* supports any font family and size, as well as text-transforms<br />* not confused by horizontal or vertical scrollbars in the textarea<br />* supports hard returns, tabs (except on IE) and consecutive spaces in the text<br />* correct position on lines longer than the columns in the text area<br />* <a href="https://archive.is/wXqud#13402035" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">no problem</a> getting the correct position when the input text is scrolled (i.e. the first visible character is no longer the first in the text)<br />* no <a href="https://github.com/component/textarea-caret-position/blob/06d2197f85f96405b43724e56dc56f220c0092a5/test/position_off_after_wrapping_with_whitespace_before_EOL.gif" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">"ghost" position in the empty space</a> at the end of a line when wrapping long words in a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code><br />* RTL (right-to-left) support</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Example</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />var getCaretCoordinates = require('textarea-caret');</p><p class="my-3">document.querySelector('textarea').addEventListener('input', function () {<br /> var caret = getCaretCoordinates(this, this.selectionEnd);<br /> console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height);<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">* </code>element<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the DOM element, either an </code><input type="text"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>textarea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* </code>position<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is an integer indicating the location of the caret. Most often you'll want to pass </code>this.selectionStart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>this.selectionEnd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This way, the library isn't opinionated about what the caret is.</p><p class="my-3">The function returns a caret coordinates object of the form </code>{top: , left: , height: }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, where:<br />* </code>top<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>left<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are the offsets in pixels from the upper-left corner of the element and (or presumably the upper-right, but this hasn't been tested), and<br />* </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is the height of the caret - useful to calculate the bottom of the caret.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Known issues</h2></p><p class="my-3">* Off-by-one edge cases with spaces at the end of lines in </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s (<a href="https://github.com/component/textarea-caret-position/issues/9#issuecomment-303601894" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#29</a>). This may be a bug in how browsers render the caret.<br />* Edge case with selecting from right to left strings longer than the </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (<a href="https://github.com/component/textarea-caret-position/issues/40" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#40</a>). The caret position can be quite off in this case.<br />* Tab characters in </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">s aren't supported in IE9 (<a href="https://github.com/component/textarea-caret-position/issues/14" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#14</a>)</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Dependencies</h2></p><p class="my-3">None.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">TODO</h2></p><p class="my-3">* Add tests.<br />* Consider adding <a href="http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">IE-specific</a> <a href="http://stackoverflow.com/questions/16212871/get-the-offset-position-of-the-caret-in-a-textarea-in-pixels" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">code</a> if it avoids the necessity of creating the mirror div and might fix <a href="https://github.com/component/textarea-caret-position/issues/14" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">#14</a>.<br />* ~~Test IE8 support with </code>currentStyle<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">~~.</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Implementation notes</h2></p><p class="my-3">For the same textarea of 25 rows and 40 columns, Chrome 33, Firefox 27 and IE9 returned completely different values<br />for </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Here, </code>computed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is </code>getComputedStyle(textarea)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3">Chrome 33<br />* </code>computed.width <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "240px" = the text itself, no borders, no padding, no scrollbars<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 280 = computed.width + padding-left + padding-right<br />* </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 327 = clientWidth + scrollbar (15px) + border-left + border-right</p><p class="my-3">IE 9: scrollbar looks 16px, the text itself in the text area is 224px wide<br />* </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "241.37px" = text only + sub-pixel scrollbar? (1.37px)<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 264<br />* </code>textarea.offsetWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 313</p><p class="my-3">Firefox 27<br />* </code>computed.width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: "265.667px"<br />* </code>textarea.clientWidth<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: 249 - the only browser where textarea.clientWidth < computed.width<br />* </code>textarea.offsetWidth`: 338</p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Contributors</h2></p><p class="my-3">* Dan Dascalescu (<a href="https://github.com/dandv" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">dandv</a>)<br />* Jonathan Ong (<a href="https://github.com/jonathanong" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">jonathanong</a>)<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>