What Input?

A global utility for tracking the current input method (mouse, keyboard or touch).

_What Input_ is now v5

Now with more information and less opinion!

_What Input_ adds data attributes to the window based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.

How it works

_What Input_ uses event bubbling on the window to watch for mouse, keyboard and touch events (via mousedown, keydown and touchstart). It then sets or updates a data-whatinput attribute.

Pointer Events are supported but note that pen inputs are remapped to touch.

_What Input_ also exposes a tiny API that allows the developer to ask for the current input, set custom ignore keys, and set and remove custom callback functions.

_What Input does not make assumptions about the input environment before the page is interacted with._ However, the mousemove and pointermove events are used to set a data-whatintent="mouse" attribute to indicate that a mouse is being used _indirectly_.

Demo

Check out the demo to see _What Input_ in action.

https://ten1seven.github.io/what-input

$3

Since interacting with a form _always_ requires use of the keyboard, _What Input_ uses the data-whatintent attribute to display a "buffered" version of input events while form s, </code>s are being interacted with (i.e. mouse user's <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">data-whatintent</code> will be preserved as <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mouse</code> while typing).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installing</h2></p><p class="my-3">Download the file directly.</p><p class="my-3">Install via Yarn:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />yarn add what-input<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Install via NPM:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />npm install what-input<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">Include the script directly in your project.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="path/to/what-input.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Or require with a script loader.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import 'what-input'</p><p class="my-3">// or</p><p class="my-3">import whatInput from 'what-input'</p><p class="my-3">// or</p><p class="my-3">require('what-input')</p><p class="my-3">// or</p><p class="my-3">var whatInput = require('what-input')</p><p class="my-3">// or</p><p class="my-3">requirejs.config({<br /> paths: {<br /> whatInput: 'path/to/what-input',<br /> },<br />})</p><p class="my-3">require(['whatInput'], function () {})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">_What Input_ will start doing its thing while you do yours.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Persisting Input/Intent Across Pages</p><p class="my-3">By default, _What Input_ uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">session storage</a> to persist the input and intent values across pages. The benefit is that once a visitor has interacted with the page, subsequent pages won't have to wait for interactions to know the input method.</p><p class="my-3">This behavior can be disabled by adding a </code>data-whatpersist="false"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute on either the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html dir="ltr" lang="en" data-whatpersist="false"><br /> ...<br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><body data-whatpersist="false"><br /> ...<br /></body><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Session storage can be cleared at any time with:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.clearStorage()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />/*<br /> * only suppress the focus ring once what-input has successfully started<br /> */</p><p class="my-3">/<em> suppress focus ring on form controls for mouse users </em>/<br />[data-whatintent='mouse'] *:focus {<br /> outline: none;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Note:</strong> If you remove outlines with </code>outline: none;<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, be sure to provide clear visual </code>:focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> styles so the user can see which element they are on at any time for greater accessibility. Visit <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">W3C's WCAG 2.0 2.4.7 Guideline</a> to learn more.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Current Input</p><p class="my-3">Ask _What Input_ what the current input method is. This works best if asked after the events _What Input_ is bound to (</code>mousedown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>keydown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>touchstart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.ask() // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>touch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">myButton.addEventListener('click', () => {<br /> if (whatInput.ask() === 'mouse') {<br /> // do mousy things<br /> } else if (whatInput.ask() === 'keyboard') {<br /> // do keyboard things<br /> }<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If it's necessary to know if </code>mousemove<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is being used, use the </code>'intent'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option. For example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />/*<br /> * nothing has happened but the mouse has moved<br /> */</p><p class="my-3">whatInput.ask() // returns </code>initial<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because the page has not been directly interacted with<br />whatInput.ask('intent') // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because mouse movement was detected</p><p class="my-3">/*<br /> * the keyboard has been used, then the mouse was moved<br /> */</p><p class="my-3">whatInput.ask() // returns </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because the keyboard was the last direct page interaction<br />whatInput.ask('intent') // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because mouse movement was the most recent action detected<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Ask _What Input_ the currently focused DOM element.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.element() // returns a string, like </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or null<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Ignore Keys</p><p class="my-3">Set a custom array of <a href="http://keycode.info/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">keycodes</a> that will be ignored (will not switch over to </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) when pressed. _A custom list will overwrite the default values._</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />/*<br /> * default ignored keys:<br /> * 16, // shift<br /> * 17, // control<br /> * 18, // alt<br /> * 91, // Windows key / left Apple cmd<br /> * 93 // Windows menu / right Apple cmd<br /> */</p><p class="my-3">whatInput.ignoreKeys([1, 2, 3])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Specific Keys</p><p class="my-3">Set a custom array of <a href="http://keycode.info/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">keycodes</a> that will trigger the keyboard pressed intent (will not switch to </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> unless these keys are pressed). _This overrides ignoreKeys._</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// only listen to tab keyboard press<br />whatInput.specificKeys([9])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Custom Callbacks</p><p class="my-3">Fire a function when the input or intent changes.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// create a function to be fired<br />var myFunction = function (type) {<br /> console.log(type)<br />}</p><p class="my-3">// fire </code>myFunction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when the intent changes<br />whatInput.registerOnChange(myFunction, 'intent')</p><p class="my-3">// fire </code>myFunction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when the input changes<br />whatInput.registerOnChange(myFunction, 'input')</p><p class="my-3">// remove custom event<br />whatInput.unRegisterOnChange(myFunction)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Compatibility</h2></p><p class="my-3">_What Input_ works in all modern browsers.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Changelog</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Improved detection and respect for of </code>data-whatpersist<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before </code>DOMContentLoaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Fix via <a href="https://github.com/FanFataL" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">FanFataL</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Adds </code>useCapture<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> so events can be detected before </code>preventDefault<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> cancels them on local listeners (h/t <a href="https://github.com/jojo080889" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">jojo080889</a>).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> TypeScript definitions via <a href="https://github.com/greypants" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">greypants</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Moves sourcemap to sit next to JavaScript package.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> adds </code>DOMContentLoaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event before looking for </code>data-whatpersist<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute on body.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Hotfix for shaky support of </code>dataset<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in IE10.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Ability to add </code>data-whatpersist="false"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag to disable usage of session storage to persist input/intent across pages.<br />- <strong>Updated:</strong> Build tools and added linting.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> </code>activeElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is null bug in IE is fixed (thanks @EasterPeanut).<br />- <strong>Fixed:</strong> Mousewheel event detection works correctly again.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> iOS was occasionally reporting </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because of event execution order.<br />- <strong>Added:</strong> </code>touchend<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to input map<br />- <strong>Added:</strong> Allows buttons inside forms to be treated like other form inputs.<br />- <strong>Added:</strong> iTouch intent indicator in demo page (it worked all along, you just couldn't see it).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Increase buffering time by 20ms to fix iOS reporting mousedown<br />- <strong>Fixed:</strong> Adds </code>touchend<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to input map</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Sourcemap for the minified version.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> </code>specificKeys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> functionality to allow overriding of keyboard keys list. Fix via <a href="https://github.com/bk3" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bk3</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Browsers with cookies turned off would throw an error with session storage. Fix via <a href="https://github.com/yuheiy" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yuheiy</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Session variable stores last used input and intent so subsequent page loads don't have to wait for interactions to set the correct input and intent state.<br />- <strong>Removed:</strong> IE8 support.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> </code>unRegisterOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> failed to unregister items at index 0.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Fail gracefully in non-DOM environments.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Event buffer for touch was not working correctly.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> A the ability to add and remove custom callback function when the input or intent changes with </code>whatInput.registerOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>whatInput.unRegisterOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />- <strong>Added:</strong> A </code>data-whatelement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute exposes any currently focused DOM element (i.e. </code>data-whatelement="a"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>data-whatelement="input"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />- <strong>Added:</strong> A </code>data-whatclasses<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute exposes any currently focused element's classes as a comma-separated list (i.e. </code>data-whatclasses="class1,class2"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />- <strong>Added:</strong> An API option to provide a custom array of keycodes that will be ignored.<br />- <strong>Changed:</strong> Typing in form fields is no longer filtered out. The </code>data-whatinput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute immediately reflects the current input. The </code>data-whatintent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute now takes on the role of remembering mouse input prior to typing in or clicking on a form field.<br />- <strong>Changed:</strong> If you use the Tab key to move from one input to another one - the </code>data-whatinput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute reflects the current input (switches to "keyboard").<br />- <strong>Removed:</strong> </code>whatInput.types()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> API option.<br />- <strong>Removed:</strong> Bower support.<br />- <strong>Fixed:</strong> Using mouse modifier keys (</code>shift<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>control<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>alt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>cmd`) no longer toggles back to keyboard.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Acknowledgments</h2></p><p class="my-3">Special thanks to <a href="http://viget.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Viget</a> for their encouragement and commitment to open source projects. Visit <a href="http://code.viget.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">code.viget.com</a> to see more projects from <a href="http://viget.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Viget</a>.</p><p class="my-3">Thanks to <a href="https://github.com/mAAdhaTTah" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">mAAdhaTTah</a> for the initial conversion to Webpack. Thanks to <a href="https://github.com/greypants" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">greypants</a> for adding TypeScript definitions.</p><p class="my-3">_What Input_ is written and maintained by <a href="https://github.com/ten1seven" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@ten1seven</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">_What Input_ is freely available under the <a href="http://opensource.org/licenses/MIT" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</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 class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"what-input\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"what-input\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"what-input - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A global utility for tracking the current input method (mouse, keyboard or touch).\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>what-input - npm explorer</title><meta name="description" content="A global utility for tracking the current input method (mouse, keyboard or touch)."/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"what-input\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"5.2.12\"]}],[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-blue-600 border-blue-200\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-file-code mr-1 h-3 w-3\",\"children\":[[\"$\",\"path\",\"1tg20x\",{\"d\":\"M10 12.5 8 15l2 2.5\"}],[\"$\",\"path\",\"yinavb\",{\"d\":\"m14 12.5 2 2.5-2 2.5\"}],[\"$\",\"path\",\"tnqrlb\",{\"d\":\"M14 2v4a2 2 0 0 0 2 2h4\"}],[\"$\",\"path\",\"1mlx9k\",{\"d\":\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"}],\"$undefined\"]}],\"TypeScript\"]}],\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"A global utility for tracking the current input method (mouse, keyboard or touch).\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"accessibility\",{\"href\":\"/search?q=accessibility\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"accessibility\"}]}],[\"$\",\"$L5\",\"a11y\",{\"href\":\"/search?q=a11y\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"a11y\"}]}],[\"$\",\"$L5\",\"input\",{\"href\":\"/search?q=input\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"input\"}]}],\"$L18\"]}],\"$L19\",\"$L1a\"]}],\"$L1b\"]}],\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n22:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"javascript\",{\"href\":\"/search?q=javascript\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"javascript\"}]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"3 years ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"MIT\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"83.6 KB\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~Jeremy%20Fields\",\"className\":\"font-medium hover:underline\",\"children\":\"Jeremy Fields\"}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1d\",null,{\"packageName\":\"what-input\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/ten1seven/what-input\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}],\"Repository\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}],[\"$\",\"a\",null,{\"href\":\"https://github.com/ten1seven/what-input\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Homepage\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}],\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/what-input\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_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-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"23:T2720,"])</script><script>self.__next_f.push([1,"# What Input?\n\n**A global utility for tracking the current input method (mouse, keyboard or touch).**\n\n## _What Input_ is now v5\n\nNow with more information and less opinion!\n\n_What Input_ adds data attributes to the `window` based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.\n\n## How it works\n\n_What Input_ uses event bubbling on the `window` to watch for mouse, keyboard and touch events (via `mousedown`, `keydown` and `touchstart`). It then sets or updates a `data-whatinput` attribute.\n\nPointer Events are supported but note that `pen` inputs are remapped to `touch`.\n\n_What Input_ also exposes a tiny API that allows the developer to ask for the current input, set custom ignore keys, and set and remove custom callback functions.\n\n_What Input does not make assumptions about the input environment before the page is interacted with._ However, the `mousemove` and `pointermove` events are used to set a `data-whatintent=\"mouse\"` attribute to indicate that a mouse is being used _indirectly_.\n\n## Demo\n\nCheck out the demo to see _What Input_ in action.\n\nhttps://ten1seven.github.io/what-input\n\n### Interacting with Forms\n\nSince interacting with a form _always_ requires use of the keyboard, _What Input_ uses the `data-whatintent` attribute to display a \"buffered\" version of input events while form `\u003cinput\u003e`s, `\u003cselect\u003e`s, and `\u003ctextarea\u003e`s are being interacted with (i.e. mouse user's `data-whatintent` will be preserved as `mouse` while typing).\n\n## Installing\n\nDownload the file directly.\n\nInstall via Yarn:\n\n```shell\nyarn add what-input\n```\n\nInstall via NPM:\n\n```shell\nnpm install what-input\n```\n\n## Usage\n\nInclude the script directly in your project.\n\n```html\n\u003cscript src=\"path/to/what-input.js\"\u003e\u003c/script\u003e\n```\n\nOr require with a script loader.\n\n```javascript\nimport 'what-input'\n\n// or\n\nimport whatInput from 'what-input'\n\n// or\n\nrequire('what-input')\n\n// or\n\nvar whatInput = require('what-input')\n\n// or\n\nrequirejs.config({\n paths: {\n whatInput: 'path/to/what-input',\n },\n})\n\nrequire(['whatInput'], function () {})\n```\n\n_What Input_ will start doing its thing while you do yours.\n\n### Default Behavior\n\n#### Persisting Input/Intent Across Pages\n\nBy default, _What Input_ uses [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist the input and intent values across pages. The benefit is that once a visitor has interacted with the page, subsequent pages won't have to wait for interactions to know the input method.\n\nThis behavior can be disabled by adding a `data-whatpersist=\"false\"` attribute on either the `\u003chtml\u003e` or `\u003cbody\u003e`.\n\n```html\n\u003chtml dir=\"ltr\" lang=\"en\" data-whatpersist=\"false\"\u003e\n ...\n\u003c/html\u003e\n```\n\nor\n\n```html\n\u003cbody data-whatpersist=\"false\"\u003e\n ...\n\u003c/body\u003e\n```\n\nSession storage can be cleared at any time with:\n\n```javascript\nwhatInput.clearStorage()\n```\n\n### Basic Styling\n\n```css\n/*\n * only suppress the focus ring once what-input has successfully started\n */\n\n/* suppress focus ring on form controls for mouse users */\n[data-whatintent='mouse'] *:focus {\n outline: none;\n}\n```\n\n**Note:** If you remove outlines with `outline: none;`, be sure to provide clear visual `:focus` styles so the user can see which element they are on at any time for greater accessibility. Visit [W3C's WCAG 2.0 2.4.7 Guideline](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) to learn more.\n\n### Scripting\n\n#### Current Input\n\nAsk _What Input_ what the current input method is. This works best if asked after the events _What Input_ is bound to (`mousedown`, `keydown` and `touchstart`).\n\n```javascript\nwhatInput.ask() // returns `mouse`, `keyboard` or `touch`\n\nmyButton.addEventListener('click', () =\u003e {\n if (whatInput.ask() === 'mouse') {\n // do mousy things\n } else if (whatInput.ask() === 'keyboard') {\n // do keyboard things\n }\n})\n```\n\nIf it's necessary to know if `mousemove` is being used, use the `'intent'` option. For example:\n\n```javascript\n/*\n * nothing has happened but the mouse has moved\n */\n\nwhatInput.ask() // returns `initial` because the page has not been directly interacted with\nwhatInput.ask('intent') // returns `mouse` because mouse movement was detected\n\n/*\n * the keyboard has been used, then the mouse was moved\n */\n\nwhatInput.ask() // returns `keyboard` because the keyboard was the last direct page interaction\nwhatInput.ask('intent') // returns `mouse` because mouse movement was the most recent action detected\n```\n\n### Current Element\n\nAsk _What Input_ the currently focused DOM element.\n\n```javascript\nwhatInput.element() // returns a string, like `input` or null\n```\n\n#### Ignore Keys\n\nSet a custom array of [keycodes](http://keycode.info/) that will be ignored (will not switch over to `keyboard`) when pressed. _A custom list will overwrite the default values._\n\n```javascript\n/*\n * default ignored keys:\n * 16, // shift\n * 17, // control\n * 18, // alt\n * 91, // Windows key / left Apple cmd\n * 93 // Windows menu / right Apple cmd\n */\n\nwhatInput.ignoreKeys([1, 2, 3])\n```\n\n#### Specific Keys\n\nSet a custom array of [keycodes](http://keycode.info/) that will trigger the keyboard pressed intent (will not switch to `keyboard` unless these keys are pressed). _This overrides ignoreKeys._\n\n```javascript\n// only listen to tab keyboard press\nwhatInput.specificKeys([9])\n```\n\n#### Custom Callbacks\n\nFire a function when the input or intent changes.\n\n```javascript\n// create a function to be fired\nvar myFunction = function (type) {\n console.log(type)\n}\n\n// fire `myFunction` when the intent changes\nwhatInput.registerOnChange(myFunction, 'intent')\n\n// fire `myFunction` when the input changes\nwhatInput.registerOnChange(myFunction, 'input')\n\n// remove custom event\nwhatInput.unRegisterOnChange(myFunction)\n```\n\n## Compatibility\n\n_What Input_ works in all modern browsers.\n\n## Changelog\n\n### v5.2.12\n\n- **Fixed:** Improved detection and respect for of `data-whatpersist` before `DOMContentLoaded`. Fix via [FanFataL](https://github.com/FanFataL).\n\n### v5.2.11\n\n- **Fixed:** Adds `useCapture` so events can be detected before `preventDefault` cancels them on local listeners (h/t [jojo080889](https://github.com/jojo080889)).\n\n### v5.2.8 - 5.2.10\n\n- **Added:** TypeScript definitions via [greypants](https://github.com/greypants).\n\n### v5.2.7\n\n- **Fixed:** Moves sourcemap to sit next to JavaScript package.\n\n### v5.2.6\n\n- **Fixed:** adds `DOMContentLoaded` event before looking for `data-whatpersist` attribute on body.\n\n### v5.2.5\n\n- **Fixed:** Hotfix for shaky support of `dataset` in IE10.\n\n### v5.2.4\n\n- **Added:** Ability to add `data-whatpersist=\"false\"` attribute to the `\u003chtml\u003e` or `\u003cbody\u003e` tag to disable usage of session storage to persist input/intent across pages.\n- **Updated:** Build tools and added linting.\n\n### v5.2.3\n\n- **Fixed:** `activeElement` is null bug in IE is fixed (thanks @EasterPeanut).\n- **Fixed:** Mousewheel event detection works correctly again.\n\n### v5.2.1\n\n- **Fixed:** iOS was occasionally reporting `mouse` because of event execution order.\n- **Added:** `touchend` to input map\n- **Added:** Allows buttons inside forms to be treated like other form inputs.\n- **Added:** iTouch intent indicator in demo page (it worked all along, you just couldn't see it).\n\n### v5.1.4\n\n- **Fixed:** Increase buffering time by 20ms to fix iOS reporting mousedown\n- **Fixed:** Adds `touchend` to input map\n\n### v5.1.3\n\n- **Added:** Sourcemap for the minified version.\n\n### v5.1.2\n\n- **Added:** `specificKeys` functionality to allow overriding of keyboard keys list. Fix via [bk3](https://github.com/bk3).\n\n### v5.1.1\n\n- **Fixed:** Browsers with cookies turned off would throw an error with session storage. Fix via [yuheiy](https://github.com/yuheiy).\n\n### v5.1.0\n\n- **Added:** Session variable stores last used input and intent so subsequent page loads don't have to wait for interactions to set the correct input and intent state.\n- **Removed:** IE8 support.\n\n### v5.0.7\n\n- **Fixed:** `unRegisterOnChange` failed to unregister items at index 0.\n\n### v5.0.5\n\n- **Fixed:** Fail gracefully in non-DOM environments.\n\n### v5.0.3\n\n- **Fixed:** Event buffer for touch was not working correctly.\n\n### Changes from v4\n\n- **Added:** A the ability to add and remove custom callback function when the input or intent changes with `whatInput.registerOnChange` and `whatInput.unRegisterOnChange`.\n- **Added:** A `data-whatelement` attribute exposes any currently focused DOM element (i.e. `data-whatelement=\"a\"` or `data-whatelement=\"input\"`).\n- **Added:** A `data-whatclasses` attribute exposes any currently focused element's classes as a comma-separated list (i.e. `data-whatclasses=\"class1,class2\"`).\n- **Added:** An API option to provide a custom array of keycodes that will be ignored.\n- **Changed:** Typing in form fields is no longer filtered out. The `data-whatinput` attribute immediately reflects the current input. The `data-whatintent` attribute now takes on the role of remembering mouse input prior to typing in or clicking on a form field.\n- **Changed:** If you use the Tab key to move from one input to another one - the `data-whatinput` attribute reflects the current input (switches to \"keyboard\").\n- **Removed:** `whatInput.types()` API option.\n- **Removed:** Bower support.\n- **Fixed:** Using mouse modifier keys (`shift`, `control`, `alt`, `cmd`) no longer toggles back to keyboard.\n\n## Acknowledgments\n\nSpecial thanks to [Viget](http://viget.com/) for their encouragement and commitment to open source projects. Visit [code.viget.com](http://code.viget.com/) to see more projects from [Viget](http://viget.com).\n\nThanks to [mAAdhaTTah](https://github.com/mAAdhaTTah) for the initial conversion to Webpack. Thanks to [greypants](https://github.com/greypants) for adding TypeScript definitions.\n\n_What Input_ is written and maintained by [@ten1seven](https://github.com/ten1seven).\n\n## License\n\n_What Input_ is freely available under the [MIT License](http://opensource.org/licenses/MIT).\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"$L1e\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1f\",null,{\"children\":[[\"$\",\"$L20\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",0,\")\"]}]]}],[\"$\",\"$L20\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",56,\")\"]}]]}]]}],[\"$\",\"$L21\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L22\",null,{\"readme\":\"$23\"}]}],\"$L24\",\"$L25\"]}]\n"])</script><script>self.__next_f.push([1,"3e:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[false,false,[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":25}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"autoprefixer\",{\"href\":\"/package/autoprefixer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"autoprefixer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.6.1\"}]]}],[\"$\",\"$L5\",\"babel-core\",{\"href\":\"/package/babel-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.23.1\"}]]}],[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L26\",\"$undefined\"]}],\"babel-loader\"]}],\"$L27\"]}],\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\"]}]}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L21\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L3e\",null,{\"packageName\":\"what-input\",\"versions\":[{\"version\":\"5.2.12\",\"date\":\"2022-05-25T16:00:19.696Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.11\",\"date\":\"2022-04-20T22:45:18.712Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.10\",\"date\":\"2020-06-01T14:22:05.124Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.9\",\"date\":\"2020-05-14T19:10:19.904Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.8\",\"date\":\"2020-05-14T12:49:05.467Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.7\",\"date\":\"2020-03-04T00:15:11.727Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.6\",\"date\":\"2019-10-02T22:30:18.091Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.5\",\"date\":\"2019-10-02T13:32:46.524Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.4\",\"date\":\"2019-09-27T22:15:07.488Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.3\",\"date\":\"2019-06-05T21:11:16.853Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.1\",\"date\":\"2019-03-27T22:30:59.649Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.4\",\"date\":\"2019-03-04T18:10:48.170Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.3\",\"date\":\"2018-11-09T21:12:40.048Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.2\",\"date\":\"2018-09-07T20:07:35.606Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.1\",\"date\":\"2018-07-19T20:40:22.889Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.0\",\"date\":\"2018-05-15T18:31:10.823Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.7\",\"date\":\"2018-05-02T14:51:54.950Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.6\",\"date\":\"2018-05-02T14:33:55.771Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.5\",\"date\":\"2018-02-07T17:40:28.569Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.4\",\"date\":\"2018-01-16T14:33:41.230Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.3\",\"date\":\"2017-10-03T21:48:14.685Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.2\",\"date\":\"2017-09-25T15:15:43.800Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.1\",\"date\":\"2017-09-05T13:38:35.741Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.3.1\",\"date\":\"2017-07-12T15:32:45.850Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.3.0\",\"date\":\"2017-07-03T20:00:37.775Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.2.0\",\"date\":\"2017-06-13T21:38:18.782Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.6\",\"date\":\"2017-06-12T20:11:06.989Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.5\",\"date\":\"2017-06-12T20:05:57.709Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.3\",\"date\":\"2017-05-05T12:31:29.657Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.2\",\"date\":\"2017-05-05T01:17:42.399Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.1\",\"date\":\"2017-02-27T20:09:47.485Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.0\",\"date\":\"2017-02-25T19:06:50.739Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.6\",\"date\":\"2017-01-16T16:25:10.984Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.5\",\"date\":\"2017-01-16T16:19:37.480Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.4\",\"date\":\"2016-12-07T17:25:25.730Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.3\",\"date\":\"2016-10-30T23:57:08.715Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.2\",\"date\":\"2016-10-30T23:42:45.557Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.1\",\"date\":\"2016-09-25T06:15:27.493Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.0\",\"date\":\"2016-09-24T21:35:03.076Z\",\"deprecated\":\"$undefined\"},{\"version\":\"3.0.0\",\"date\":\"2016-06-21T23:20:43.619Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.1\",\"date\":\"2016-06-21T22:54:34.992Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.0\",\"date\":\"2016-05-15T14:55:38.409Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.1\",\"date\":\"2016-02-29T22:44:24.158Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.0\",\"date\":\"2016-02-29T00:26:50.991Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.5\",\"date\":\"2016-02-24T00:44:26.738Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.4\",\"date\":\"2016-02-22T22:03:51.238Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.3\",\"date\":\"2016-02-19T21:43:04.827Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.2\",\"date\":\"2016-02-19T21:37:21.072Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.1\",\"date\":\"2016-02-18T02:42:00.115Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.2.0\",\"date\":\"2016-02-17T20:07:37.222Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.4\",\"date\":\"2015-12-14T15:50:05.939Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.3\",\"date\":\"2015-12-01T21:53:08.054Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.2\",\"date\":\"2015-10-15T20:07:59.072Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.1\",\"date\":\"2015-10-06T14:36:40.896Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.0\",\"date\":\"2015-09-17T17:47:20.897Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.0\",\"date\":\"2015-05-04T21:44:43.027Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"5.2.12\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">what-input</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v5.2.12</span><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-blue-600 border-blue-200"><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-file-code mr-1 h-3 w-3"><path d="M10 12.5 8 15l2 2.5"></path><path d="m14 12.5 2 2.5-2 2.5"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path></svg>TypeScript</span></div></div><p class="text-lg text-muted-foreground">A global utility for tracking the current input method (mouse, keyboard or touch).</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=accessibility"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">accessibility</span></a><a href="/search?q=a11y"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">a11y</span></a><a href="/search?q=input"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">input</span></a><a href="/search?q=javascript"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">javascript</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.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-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.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-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 3 years ago</span><span class="flex items-center gap-1.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-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span><span class="flex items-center gap-1.5">Unpacked: 83.6 KB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~Jeremy%20Fields">Jeremy Fields</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install what-input</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_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 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><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-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://github.com/ten1seven/what-input" target="_blank" rel="noopener noreferrer" 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-github mr-1.5 h-4 w-4"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>Repository</a><a href="https://github.com/ten1seven/what-input" target="_blank" rel="noopener noreferrer" 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-house mr-1.5 h-4 w-4"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>Homepage</a><a href="https://npmjs.com/package/what-input" target="_blank" rel="noopener noreferrer" 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-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(0)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(56)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h1 class="text-2xl font-bold mt-6 mb-4">What Input?</h1></p><p class="my-3"><strong>A global utility for tracking the current input method (mouse, keyboard or touch).</strong></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">_What Input_ is now v5</h2></p><p class="my-3">Now with more information and less opinion!</p><p class="my-3">_What Input_ adds data attributes to the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">window</code> based on the type of input being used. It also exposes a simple API that can be used for scripting interactions.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">How it works</h2></p><p class="my-3">_What Input_ uses event bubbling on the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">window</code> to watch for mouse, keyboard and touch events (via <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mousedown</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">keydown</code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">touchstart</code>). It then sets or updates a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">data-whatinput</code> attribute.</p><p class="my-3">Pointer Events are supported but note that <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pen</code> inputs are remapped to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">touch</code>.</p><p class="my-3">_What Input_ also exposes a tiny API that allows the developer to ask for the current input, set custom ignore keys, and set and remove custom callback functions.</p><p class="my-3">_What Input does not make assumptions about the input environment before the page is interacted with._ However, the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mousemove</code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pointermove</code> events are used to set a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">data-whatintent="mouse"</code> attribute to indicate that a mouse is being used _indirectly_.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Demo</h2></p><p class="my-3">Check out the demo to see _What Input_ in action.</p><p class="my-3">https://ten1seven.github.io/what-input</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Since interacting with a form _always_ requires use of the keyboard, _What Input_ uses the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">data-whatintent</code> attribute to display a "buffered" version of input events while form <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input></code>s, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><select></code>s, and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>s are being interacted with (i.e. mouse user's <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">data-whatintent</code> will be preserved as <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mouse</code> while typing).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installing</h2></p><p class="my-3">Download the file directly.</p><p class="my-3">Install via Yarn:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />yarn add what-input<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Install via NPM:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">shell<br />npm install what-input<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">Include the script directly in your project.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><script src="path/to/what-input.js"></script><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Or require with a script loader.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import 'what-input'</p><p class="my-3">// or</p><p class="my-3">import whatInput from 'what-input'</p><p class="my-3">// or</p><p class="my-3">require('what-input')</p><p class="my-3">// or</p><p class="my-3">var whatInput = require('what-input')</p><p class="my-3">// or</p><p class="my-3">requirejs.config({<br /> paths: {<br /> whatInput: 'path/to/what-input',<br /> },<br />})</p><p class="my-3">require(['whatInput'], function () {})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">_What Input_ will start doing its thing while you do yours.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Persisting Input/Intent Across Pages</p><p class="my-3">By default, _What Input_ uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">session storage</a> to persist the input and intent values across pages. The benefit is that once a visitor has interacted with the page, subsequent pages won't have to wait for interactions to know the input method.</p><p class="my-3">This behavior can be disabled by adding a </code>data-whatpersist="false"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute on either the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><html dir="ltr" lang="en" data-whatpersist="false"><br /> ...<br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><body data-whatpersist="false"><br /> ...<br /></body><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Session storage can be cleared at any time with:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.clearStorage()<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />/*<br /> * only suppress the focus ring once what-input has successfully started<br /> */</p><p class="my-3">/<em> suppress focus ring on form controls for mouse users </em>/<br />[data-whatintent='mouse'] *:focus {<br /> outline: none;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Note:</strong> If you remove outlines with </code>outline: none;<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, be sure to provide clear visual </code>:focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> styles so the user can see which element they are on at any time for greater accessibility. Visit <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">W3C's WCAG 2.0 2.4.7 Guideline</a> to learn more.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Current Input</p><p class="my-3">Ask _What Input_ what the current input method is. This works best if asked after the events _What Input_ is bound to (</code>mousedown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>keydown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>touchstart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.ask() // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>touch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">myButton.addEventListener('click', () => {<br /> if (whatInput.ask() === 'mouse') {<br /> // do mousy things<br /> } else if (whatInput.ask() === 'keyboard') {<br /> // do keyboard things<br /> }<br />})<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If it's necessary to know if </code>mousemove<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is being used, use the </code>'intent'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option. For example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />/*<br /> * nothing has happened but the mouse has moved<br /> */</p><p class="my-3">whatInput.ask() // returns </code>initial<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because the page has not been directly interacted with<br />whatInput.ask('intent') // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because mouse movement was detected</p><p class="my-3">/*<br /> * the keyboard has been used, then the mouse was moved<br /> */</p><p class="my-3">whatInput.ask() // returns </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because the keyboard was the last direct page interaction<br />whatInput.ask('intent') // returns </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because mouse movement was the most recent action detected<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Ask _What Input_ the currently focused DOM element.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />whatInput.element() // returns a string, like </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or null<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Ignore Keys</p><p class="my-3">Set a custom array of <a href="http://keycode.info/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">keycodes</a> that will be ignored (will not switch over to </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) when pressed. _A custom list will overwrite the default values._</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />/*<br /> * default ignored keys:<br /> * 16, // shift<br /> * 17, // control<br /> * 18, // alt<br /> * 91, // Windows key / left Apple cmd<br /> * 93 // Windows menu / right Apple cmd<br /> */</p><p class="my-3">whatInput.ignoreKeys([1, 2, 3])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Specific Keys</p><p class="my-3">Set a custom array of <a href="http://keycode.info/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">keycodes</a> that will trigger the keyboard pressed intent (will not switch to </code>keyboard<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> unless these keys are pressed). _This overrides ignoreKeys._</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// only listen to tab keyboard press<br />whatInput.specificKeys([9])<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Custom Callbacks</p><p class="my-3">Fire a function when the input or intent changes.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />// create a function to be fired<br />var myFunction = function (type) {<br /> console.log(type)<br />}</p><p class="my-3">// fire </code>myFunction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when the intent changes<br />whatInput.registerOnChange(myFunction, 'intent')</p><p class="my-3">// fire </code>myFunction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when the input changes<br />whatInput.registerOnChange(myFunction, 'input')</p><p class="my-3">// remove custom event<br />whatInput.unRegisterOnChange(myFunction)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Compatibility</h2></p><p class="my-3">_What Input_ works in all modern browsers.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Changelog</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Improved detection and respect for of </code>data-whatpersist<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> before </code>DOMContentLoaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Fix via <a href="https://github.com/FanFataL" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">FanFataL</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Adds </code>useCapture<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> so events can be detected before </code>preventDefault<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> cancels them on local listeners (h/t <a href="https://github.com/jojo080889" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">jojo080889</a>).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> TypeScript definitions via <a href="https://github.com/greypants" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">greypants</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Moves sourcemap to sit next to JavaScript package.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> adds </code>DOMContentLoaded<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event before looking for </code>data-whatpersist<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute on body.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Hotfix for shaky support of </code>dataset<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in IE10.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Ability to add </code>data-whatpersist="false"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to the </code><html><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag to disable usage of session storage to persist input/intent across pages.<br />- <strong>Updated:</strong> Build tools and added linting.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> </code>activeElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is null bug in IE is fixed (thanks @EasterPeanut).<br />- <strong>Fixed:</strong> Mousewheel event detection works correctly again.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> iOS was occasionally reporting </code>mouse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> because of event execution order.<br />- <strong>Added:</strong> </code>touchend<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to input map<br />- <strong>Added:</strong> Allows buttons inside forms to be treated like other form inputs.<br />- <strong>Added:</strong> iTouch intent indicator in demo page (it worked all along, you just couldn't see it).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Increase buffering time by 20ms to fix iOS reporting mousedown<br />- <strong>Fixed:</strong> Adds </code>touchend<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to input map</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Sourcemap for the minified version.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> </code>specificKeys<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> functionality to allow overriding of keyboard keys list. Fix via <a href="https://github.com/bk3" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">bk3</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Browsers with cookies turned off would throw an error with session storage. Fix via <a href="https://github.com/yuheiy" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">yuheiy</a>.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> Session variable stores last used input and intent so subsequent page loads don't have to wait for interactions to set the correct input and intent state.<br />- <strong>Removed:</strong> IE8 support.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> </code>unRegisterOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> failed to unregister items at index 0.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Fail gracefully in non-DOM environments.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Fixed:</strong> Event buffer for touch was not working correctly.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <strong>Added:</strong> A the ability to add and remove custom callback function when the input or intent changes with </code>whatInput.registerOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>whatInput.unRegisterOnChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />- <strong>Added:</strong> A </code>data-whatelement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute exposes any currently focused DOM element (i.e. </code>data-whatelement="a"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>data-whatelement="input"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />- <strong>Added:</strong> A </code>data-whatclasses<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute exposes any currently focused element's classes as a comma-separated list (i.e. </code>data-whatclasses="class1,class2"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br />- <strong>Added:</strong> An API option to provide a custom array of keycodes that will be ignored.<br />- <strong>Changed:</strong> Typing in form fields is no longer filtered out. The </code>data-whatinput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute immediately reflects the current input. The </code>data-whatintent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute now takes on the role of remembering mouse input prior to typing in or clicking on a form field.<br />- <strong>Changed:</strong> If you use the Tab key to move from one input to another one - the </code>data-whatinput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute reflects the current input (switches to "keyboard").<br />- <strong>Removed:</strong> </code>whatInput.types()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> API option.<br />- <strong>Removed:</strong> Bower support.<br />- <strong>Fixed:</strong> Using mouse modifier keys (</code>shift<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>control<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>alt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>cmd`) no longer toggles back to keyboard.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Acknowledgments</h2></p><p class="my-3">Special thanks to <a href="http://viget.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Viget</a> for their encouragement and commitment to open source projects. Visit <a href="http://code.viget.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">code.viget.com</a> to see more projects from <a href="http://viget.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Viget</a>.</p><p class="my-3">Thanks to <a href="https://github.com/mAAdhaTTah" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">mAAdhaTTah</a> for the initial conversion to Webpack. Thanks to <a href="https://github.com/greypants" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">greypants</a> for adding TypeScript definitions.</p><p class="my-3">_What Input_ is written and maintained by <a href="https://github.com/ten1seven" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@ten1seven</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">_What Input_ is freely available under the <a href="http://opensource.org/licenses/MIT" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT License</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><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.3.2\"}]\n28:[\"$\",\"$L5\",\"babel-preset-env\",{\"href\":\"/package/babel-preset-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-env\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.6.0\"}]]}]\n29:[\"$\",\"$L5\",\"browser-sync\",{\"href\":\"/package/browser-sync\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"browser-sync\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.26.7\"}]]}]\n2a:[\"$\",\"$L5\",\"css-mqpacker\",{\"href\":\"/package/css-mqpacker\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-mqpacker\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]]}]\n2b:[\"$\",\"$L5\",\"del\",{\"href\":\"/package/del\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"del\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.0\"}]]}]\n2c:[\"$\",\"$L5\",\"gulp\",{\"href\":\"/package/gulp\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opa"])</script><script>self.__next_f.push([1,"city-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n2d:[\"$\",\"$L5\",\"gulp-concat\",{\"href\":\"/package/gulp-concat\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-concat\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.6.1\"}]]}]\n2e:[\"$\",\"$L5\",\"gulp-cssnano\",{\"href\":\"/package/gulp-cssnano\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-cssnano\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.1.3\"}]]}]\n2f:[\"$\",\"$L5\",\"gulp-gh-pages\",{\"href\":\"/package/gulp-gh-pages\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-gh-pages\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.5.4\"}]]}]\n30:[\"$\",\"$L5\",\"gulp-header\",{\"href\":\"/package/gulp-header\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-header\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.9\"}]]}]\n31:[\"$\",\"$L5\",\"gulp-load-plugins\",{\"href\":\"/package/gulp-load-plugins\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,"])</script><script>self.__next_f.push([1,"\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-load-plugins\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.1\"}]]}]\n32:[\"$\",\"$L5\",\"gulp-notify\",{\"href\":\"/package/gulp-notify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-notify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.0\"}]]}]\n33:[\"$\",\"$L5\",\"gulp-plumber\",{\"href\":\"/package/gulp-plumber\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-plumber\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.2.1\"}]]}]\n34:[\"$\",\"$L5\",\"gulp-postcss\",{\"href\":\"/package/gulp-postcss\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-postcss\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.0\"}]]}]\n35:[\"$\",\"$L5\",\"gulp-rename\",{\"href\":\"/package/gulp-rename\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-rename\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.0\"}]]}]\n36:[\"$\",\"$L5\",\"gulp-sass\",{\"href\":\"/package/gulp-sass\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www"])</script><script>self.__next_f.push([1,".w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-sass\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.2\"}]]}]\n37:[\"$\",\"$L5\",\"gulp-sass-glob\",{\"href\":\"/package/gulp-sass-glob\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-sass-glob\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.0\"}]]}]\n38:[\"$\",\"$L5\",\"gulp-sourcemaps\",{\"href\":\"/package/gulp-sourcemaps\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-sourcemaps\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.6.5\"}]]}]\n39:[\"$\",\"$L5\",\"gulp-standard\",{\"href\":\"/package/gulp-standard\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-standard\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^14.0.0\"}]]}]\n3a:[\"$\",\"$L5\",\"gulp-uglify\",{\"href\":\"/package/gulp-uglify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-uglify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.0.2\"}]]}]\n3b:[\"$\",\"$L5\",\"stylelint-config-prettier\",{\"href\":\"/package/stylelint-config-prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children"])</script><script>self.__next_f.push([1,"\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"stylelint-config-prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.0\"}]]}]\n3c:[\"$\",\"$L5\",\"stylelint-config-standard\",{\"href\":\"/package/stylelint-config-standard\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"stylelint-config-standard\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.0.0\"}]]}]\n3d:[\"$\",\"$L5\",\"webpack-stream\",{\"href\":\"/package/webpack-stream\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-stream\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"3.2.0\"}]]}]\n"])</script><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>