{"version":3,"sources":["focus-visible.js"],"names":["global","factory","exports","module","define","amd","this","applyFocusVisiblePolyfill","scope","hadKeyboardEvent","hadFocusVisibleRecently","hadFocusVisibleRecentlyTimeout","inputTypesAllowlist","text","search","url","tel","email","password","number","date","month","week","time","datetime","datetime-local","isValidFocusTarget","el","document","nodeName","classList","addFocusVisibleClass","contains","add","setAttribute","onPointerDown","e","addInitialPointerMoveListeners","addEventListener","onInitialPointerMove","target","toLowerCase","removeEventListener","metaKey","altKey","ctrlKey","activeElement","visibilityState","type","tagName","readOnly","isContentEditable","hasAttribute","window","clearTimeout","setTimeout","remove","removeAttribute","nodeType","Node","DOCUMENT_FRAGMENT_NODE","host","DOCUMENT_NODE","documentElement","event","CustomEvent","error","createEvent","initCustomEvent","dispatchEvent"],"mappings":"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","file":"focus-visible.js","sourcesContent":["(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (factory());\n}(this, (function () { 'use strict';\n\n  /**\n   * Applies the :focus-visible polyfill at the given scope.\n   * A scope in this case is either the top-level Document or a Shadow Root.\n   *\n   * @param {(Document|ShadowRoot)} scope\n   * @see https://github.com/WICG/focus-visible\n   */\n  function applyFocusVisiblePolyfill(scope) {\n    var hadKeyboardEvent = true;\n    var hadFocusVisibleRecently = false;\n    var hadFocusVisibleRecentlyTimeout = null;\n\n    var inputTypesAllowlist = {\n      text: true,\n      search: true,\n      url: true,\n      tel: true,\n      email: true,\n      password: true,\n      number: true,\n      date: true,\n      month: true,\n      week: true,\n      time: true,\n      datetime: true,\n      'datetime-local': true\n    };\n\n    /**\n     * Helper function for legacy browsers and iframes which sometimes focus\n     * elements like document, body, and non-interactive SVG.\n     * @param {Element} el\n     */\n    function isValidFocusTarget(el) {\n      if (\n        el &&\n        el !== document &&\n        el.nodeName !== 'HTML' &&\n        el.nodeName !== 'BODY' &&\n        'classList' in el &&\n        'contains' in el.classList\n      ) {\n        return true;\n      }\n      return false;\n    }\n\n    /**\n     * Computes whether the given element should automatically trigger the\n     * `focus-visible` class being added, i.e. whether it should always match\n     * `:focus-visible` when focused.\n     * @param {Element} el\n     * @return {boolean}\n     */\n    function focusTriggersKeyboardModality(el) {\n      var type = el.type;\n      var tagName = el.tagName;\n\n      if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {\n        return true;\n      }\n\n      if (tagName === 'TEXTAREA' && !el.readOnly) {\n        return true;\n      }\n\n      if (el.isContentEditable) {\n        return true;\n      }\n\n      return false;\n    }\n\n    /**\n     * Add the `focus-visible` class to the given element if it was not added by\n     * the author.\n     * @param {Element} el\n     */\n    function addFocusVisibleClass(el) {\n      if (el.classList.contains('focus-visible')) {\n        return;\n      }\n      el.classList.add('focus-visible');\n      el.setAttribute('data-focus-visible-added', '');\n    }\n\n    /**\n     * Remove the `focus-visible` class from the given element if it was not\n     * originally added by the author.\n     * @param {Element} el\n     */\n    function removeFocusVisibleClass(el) {\n      if (!el.hasAttribute('data-focus-visible-added')) {\n        return;\n      }\n      el.classList.remove('focus-visible');\n      el.removeAttribute('data-focus-visible-added');\n    }\n\n    /**\n     * If the most recent user interaction was via the keyboard;\n     * and the key press did not include a meta, alt/option, or control key;\n     * then the modality is keyboard. Otherwise, the modality is not keyboard.\n     * Apply `focus-visible` to any current active element and keep track\n     * of our keyboard modality state with `hadKeyboardEvent`.\n     * @param {KeyboardEvent} e\n     */\n    function onKeyDown(e) {\n      if (e.metaKey || e.altKey || e.ctrlKey) {\n        return;\n      }\n\n      if (isValidFocusTarget(scope.activeElement)) {\n        addFocusVisibleClass(scope.activeElement);\n      }\n\n      hadKeyboardEvent = true;\n    }\n\n    /**\n     * If at any point a user clicks with a pointing device, ensure that we change\n     * the modality away from keyboard.\n     * This avoids the situation where a user presses a key on an already focused\n     * element, and then clicks on a different element, focusing it with a\n     * pointing device, while we still think we're in keyboard modality.\n     * @param {Event} e\n     */\n    function onPointerDown(e) {\n      hadKeyboardEvent = false;\n    }\n\n    /**\n     * On `focus`, add the `focus-visible` class to the target if:\n     * - the target received focus as a result of keyboard navigation, or\n     * - the event target is an element that will likely require interaction\n     *   via the keyboard (e.g. a text box)\n     * @param {Event} e\n     */\n    function onFocus(e) {\n      // Prevent IE from focusing the document or HTML element.\n      if (!isValidFocusTarget(e.target)) {\n        return;\n      }\n\n      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {\n        addFocusVisibleClass(e.target);\n      }\n    }\n\n    /**\n     * On `blur`, remove the `focus-visible` class from the target.\n     * @param {Event} e\n     */\n    function onBlur(e) {\n      if (!isValidFocusTarget(e.target)) {\n        return;\n      }\n\n      if (\n        e.target.classList.contains('focus-visible') ||\n        e.target.hasAttribute('data-focus-visible-added')\n      ) {\n        // To detect a tab/window switch, we look for a blur event followed\n        // rapidly by a visibility change.\n        // If we don't see a visibility change within 100ms, it's probably a\n        // regular focus change.\n        hadFocusVisibleRecently = true;\n        window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n        hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {\n          hadFocusVisibleRecently = false;\n        }, 100);\n        removeFocusVisibleClass(e.target);\n      }\n    }\n\n    /**\n     * If the user changes tabs, keep track of whether or not the previously\n     * focused element had .focus-visible.\n     * @param {Event} e\n     */\n    function onVisibilityChange(e) {\n      if (document.visibilityState === 'hidden') {\n        // If the tab becomes active again, the browser will handle calling focus\n        // on the element (Safari actually calls it twice).\n        // If this tab change caused a blur on an element with focus-visible,\n        // re-apply the class when the user switches back to the tab.\n        if (hadFocusVisibleRecently) {\n          hadKeyboardEvent = true;\n        }\n        addInitialPointerMoveListeners();\n      }\n    }\n\n    /**\n     * Add a group of listeners to detect usage of any pointing devices.\n     * These listeners will be added when the polyfill first loads, and anytime\n     * the window is blurred, so that they are active when the window regains\n     * focus.\n     */\n    function addInitialPointerMoveListeners() {\n      document.addEventListener('mousemove', onInitialPointerMove);\n      document.addEventListener('mousedown', onInitialPointerMove);\n      document.addEventListener('mouseup', onInitialPointerMove);\n      document.addEventListener('pointermove', onInitialPointerMove);\n      document.addEventListener('pointerdown', onInitialPointerMove);\n      document.addEventListener('pointerup', onInitialPointerMove);\n      document.addEventListener('touchmove', onInitialPointerMove);\n      document.addEventListener('touchstart', onInitialPointerMove);\n      document.addEventListener('touchend', onInitialPointerMove);\n    }\n\n    function removeInitialPointerMoveListeners() {\n      document.removeEventListener('mousemove', onInitialPointerMove);\n      document.removeEventListener('mousedown', onInitialPointerMove);\n      document.removeEventListener('mouseup', onInitialPointerMove);\n      document.removeEventListener('pointermove', onInitialPointerMove);\n      document.removeEventListener('pointerdown', onInitialPointerMove);\n      document.removeEventListener('pointerup', onInitialPointerMove);\n      document.removeEventListener('touchmove', onInitialPointerMove);\n      document.removeEventListener('touchstart', onInitialPointerMove);\n      document.removeEventListener('touchend', onInitialPointerMove);\n    }\n\n    /**\n     * When the polfyill first loads, assume the user is in keyboard modality.\n     * If any event is received from a pointing device (e.g. mouse, pointer,\n     * touch), turn off keyboard modality.\n     * This accounts for situations where focus enters the page from the URL bar.\n     * @param {Event} e\n     */\n    function onInitialPointerMove(e) {\n      // Work around a Safari quirk that fires a mousemove on <html> whenever the\n      // window blurs, even if you're tabbing out of the page. ¯\\_(ツ)_/¯\n      if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {\n        return;\n      }\n\n      hadKeyboardEvent = false;\n      removeInitialPointerMoveListeners();\n    }\n\n    // For some kinds of state, we are interested in changes at the global scope\n    // only. For example, global pointer input, global key presses and global\n    // visibility change should affect the state at every scope:\n    document.addEventListener('keydown', onKeyDown, true);\n    document.addEventListener('mousedown', onPointerDown, true);\n    document.addEventListener('pointerdown', onPointerDown, true);\n    document.addEventListener('touchstart', onPointerDown, true);\n    document.addEventListener('visibilitychange', onVisibilityChange, true);\n\n    addInitialPointerMoveListeners();\n\n    // For focus and blur, we specifically care about state changes in the local\n    // scope. This is because focus / blur events that originate from within a\n    // shadow root are not re-dispatched from the host element if it was already\n    // the active element in its own scope:\n    scope.addEventListener('focus', onFocus, true);\n    scope.addEventListener('blur', onBlur, true);\n\n    // We detect that a node is a ShadowRoot by ensuring that it is a\n    // DocumentFragment and also has a host property. This check covers native\n    // implementation and polyfill implementation transparently. If we only cared\n    // about the native implementation, we could just check if the scope was\n    // an instance of a ShadowRoot.\n    if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {\n      // Since a ShadowRoot is a special kind of DocumentFragment, it does not\n      // have a root element to add a class to. So, we add this attribute to the\n      // host element instead:\n      scope.host.setAttribute('data-js-focus-visible', '');\n    } else if (scope.nodeType === Node.DOCUMENT_NODE) {\n      document.documentElement.classList.add('js-focus-visible');\n      document.documentElement.setAttribute('data-js-focus-visible', '');\n    }\n  }\n\n  // It is important to wrap all references to global window and document in\n  // these checks to support server-side rendering use cases\n  // @see https://github.com/WICG/focus-visible/issues/199\n  if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n    // Make the polyfill helper globally available. This can be used as a signal\n    // to interested libraries that wish to coordinate with the polyfill for e.g.,\n    // applying the polyfill to a shadow root:\n    window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;\n\n    // Notify interested libraries of the polyfill's presence, in case the\n    // polyfill was loaded lazily:\n    var event;\n\n    try {\n      event = new CustomEvent('focus-visible-polyfill-ready');\n    } catch (error) {\n      // IE11 does not support using CustomEvent as a constructor directly:\n      event = document.createEvent('CustomEvent');\n      event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});\n    }\n\n    window.dispatchEvent(event);\n  }\n\n  if (typeof document !== 'undefined') {\n    // Apply the polyfill to the global document, so that no JavaScript\n    // coordination is required to use the polyfill in the top-level document:\n    applyFocusVisiblePolyfill(document);\n  }\n\n})));\n"]}