@haiilo/catalyst 4.1.2 → 5.0.0

package/dist/components/cat-tooltip.js.map

@@ -1 +1 @@
-{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  position: absolute;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: $cat-tooltip-z-index;\n  max-width: $-max-width;\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n  display: inline-block;\n\n  &:focus {\n    outline: none;\n  }\n}\n","import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private hidden = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  componentWillRender(): void {\n    this.hidden = !this.content || this.disabled;\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.content}\n        </div>\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n}\n"],"version":3}
+{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n$-shift-padding: 0.25rem; // padding given to the shift() middleware\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  --cat-font-color-head: cat-token('color.ui.font.tooltip', $wrap: false);\n  --cat-font-color-body: cat-token('color.ui.font.tooltip', $wrap: false);\n  position: absolute;\n  width: max-content;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: $cat-tooltip-z-index;\n  max-width: min(calc(100vw - 2 * $-shift-padding), $-max-width);\n\n  &-hidden {\n    @include cat-visually-hidden;\n  }\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n  display: inline-block;\n\n  &:focus {\n    outline: none;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private static readonly SHIFT_PADDING = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n  private hidden = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedContent = false;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        <div\n          ref={el => (this.tooltip = el)}\n          id={this.id}\n          aria-hidden={this.hidden}\n          class={{\n            tooltip: true,\n            'tooltip-hidden': this.hidden,\n            'tooltip-round': this.round,\n            [`tooltip-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\n        </div>\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private async update() {\n    if (this.trigger && this.tooltip) {\n      await computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.showTooltip();\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n\n  private showTooltip() {\n    !this.hidden && this.tooltip?.classList.add('tooltip-show');\n  }\n}\n"],"version":3}

package/dist/components/first-tabbable.js

@@ -1,5 +1,5 @@
 /*!
-* tabbable 6.0.0
+* tabbable 6.0.1
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
@@ -11,23 +11,22 @@ var getRootNode = !NoElement && Element.prototype.getRootNode ? function (elemen
 } : function (element) {
   return element.ownerDocument;
 };
+
 /**
  * @param {Element} el container to check in
  * @param {boolean} includeContainer add container to check
  * @param {(node: Element) => boolean} filter filter candidates
  * @returns {Element[]}
  */
-
 var getCandidates = function getCandidates(el, includeContainer, filter) {
   var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
-
   if (includeContainer && matches.call(el, candidateSelector)) {
     candidates.unshift(el);
   }
-
   candidates = candidates.filter(filter);
   return candidates;
 };
+
 /**
  * @callback GetShadowRoot
  * @param {Element} element to check for shadow root
@@ -41,9 +40,9 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  */
 
 /**
- * @typedef {Object} CandidatesScope
- * @property {Element} scope contains inner candidates
- * @property {Element[]} candidates
+ * @typedef {Object} CandidateScope
+ * @property {Element} scopeParent contains inner candidates
+ * @property {Element[]} candidates list of candidates found in the scope parent
  */
 
 /**
@@ -52,7 +51,7 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  *  if a function, implies shadow support is enabled and either returns the shadow root of an element
  *  or a boolean stating if it has an undisclosed shadow root
  * @property {(node: Element) => boolean} filter filter candidates
- * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+ * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list
  * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
  */
 
@@ -60,44 +59,38 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  * @param {Element[]} elements list of element containers to match candidates from
  * @param {boolean} includeContainer add container list to check
  * @param {IterativeOptions} options
- * @returns {Array.<Element|CandidatesScope>}
+ * @returns {Array.<Element|CandidateScope>}
  */
-
-
 var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
   var candidates = [];
   var elementsToCheck = Array.from(elements);
-
   while (elementsToCheck.length) {
     var element = elementsToCheck.shift();
-
     if (element.tagName === 'SLOT') {
       // add shadow dom slot scope (slot itself cannot be focusable)
       var assigned = element.assignedElements();
       var content = assigned.length ? assigned : element.children;
       var nestedCandidates = getCandidatesIteratively(content, true, options);
-
       if (options.flatten) {
         candidates.push.apply(candidates, nestedCandidates);
       } else {
         candidates.push({
-          scope: element,
+          scopeParent: element,
           candidates: nestedCandidates
         });
       }
     } else {
       // check candidate element
       var validCandidate = matches.call(element, candidateSelector);
-
       if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
         candidates.push(element);
-      } // iterate over shadow content if possible
-
+      }
 
-      var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
+      // iterate over shadow content if possible
+      var shadowRoot = element.shadowRoot ||
+      // check for an undisclosed shadow
       typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
       var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
-
       if (shadowRoot && validShadowRoot) {
         // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
         //  shadow exists, so look at light dom children as fallback BUT create a scope for any
@@ -106,12 +99,11 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
         //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
         //  _after_ we return from this recursive call
         var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
-
         if (options.flatten) {
           candidates.push.apply(candidates, _nestedCandidates);
         } else {
           candidates.push({
-            scope: element,
+            scopeParent: element,
             candidates: _nestedCandidates
           });
         }
@@ -122,10 +114,8 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
       }
     }
   }
-
   return candidates;
 };
-
 var getTabindex = function getTabindex(node, isScope) {
   if (node.tabIndex < 0) {
     // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
@@ -143,29 +133,23 @@ var getTabindex = function getTabindex(node, isScope) {
       return 0;
     }
   }
-
   return node.tabIndex;
 };
-
 var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
   return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
-
 var isInput = function isInput(node) {
   return node.tagName === 'INPUT';
 };
-
 var isHiddenInput = function isHiddenInput(node) {
   return isInput(node) && node.type === 'hidden';
 };
-
 var isDetailsWithSummary = function isDetailsWithSummary(node) {
   var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
     return child.tagName === 'SUMMARY';
   });
   return r;
 };
-
 var getCheckedRadio = function getCheckedRadio(nodes, form) {
   for (var i = 0; i < nodes.length; i++) {
     if (nodes[i].checked && nodes[i].form === form) {
@@ -173,20 +157,15 @@ var getCheckedRadio = function getCheckedRadio(nodes, form) {
     }
   }
 };
-
 var isTabbableRadio = function isTabbableRadio(node) {
   if (!node.name) {
     return true;
   }
-
   var radioScope = node.form || getRootNode(node);
-
   var queryRadios = function queryRadios(name) {
     return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
   };
-
   var radioSet;
-
   if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
     radioSet = queryRadios(window.CSS.escape(node.name));
   } else {
@@ -198,23 +177,19 @@ var isTabbableRadio = function isTabbableRadio(node) {
       return false;
     }
   }
-
   var checked = getCheckedRadio(radioSet, node.form);
   return !checked || checked === node;
 };
-
 var isRadio = function isRadio(node) {
   return isInput(node) && node.type === 'radio';
 };
-
 var isNonTabbableRadio = function isNonTabbableRadio(node) {
   return isRadio(node) && !isTabbableRadio(node);
-}; // determines if a node is ultimately attached to the window's document
-
+};
 
+// determines if a node is ultimately attached to the window's document
 var isNodeAttached = function isNodeAttached(node) {
   var _nodeRootHost;
-
   // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
   //  (but NOT _the_ document; see second 'If' comment below for more).
   // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
@@ -236,32 +211,25 @@ var isNodeAttached = function isNodeAttached(node) {
   //  node is actually detached.
   var nodeRootHost = getRootNode(node).host;
   var attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && _nodeRootHost.ownerDocument.contains(nodeRootHost) || node.ownerDocument.contains(node));
-
   while (!attached && nodeRootHost) {
     var _nodeRootHost2;
-
     // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
     //  which means we need to get the host's host and check if that parent host is contained
     //  in (i.e. attached to) the document
     nodeRootHost = getRootNode(nodeRootHost).host;
     attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && _nodeRootHost2.ownerDocument.contains(nodeRootHost));
   }
-
   return attached;
 };
-
 var isZeroArea = function isZeroArea(node) {
   var _node$getBoundingClie = node.getBoundingClientRect(),
-      width = _node$getBoundingClie.width,
-      height = _node$getBoundingClie.height;
-
+    width = _node$getBoundingClie.width,
+    height = _node$getBoundingClie.height;
   return width === 0 && height === 0;
 };
-
 var isHidden = function isHidden(node, _ref) {
   var displayCheck = _ref.displayCheck,
-      getShadowRoot = _ref.getShadowRoot;
-
+    getShadowRoot = _ref.getShadowRoot;
   // NOTE: visibility will be `undefined` if node is detached from the document
   //  (see notes about this further down), which means we will consider it visible
   //  (this is legacy behavior from a very long way back)
@@ -270,24 +238,19 @@ var isHidden = function isHidden(node, _ref) {
   if (getComputedStyle(node).visibility === 'hidden') {
     return true;
   }
-
   var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
   var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
-
   if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
     return true;
   }
-
   if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
     if (typeof getShadowRoot === 'function') {
       // figure out if we should consider the node to be in an undisclosed shadow and use the
       //  'non-zero-area' fallback
       var originalNode = node;
-
       while (node) {
         var parentElement = node.parentElement;
         var rootNode = getRootNode(node);
-
         if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
         ) {
           // node has an undisclosed shadow which means we can only treat it as a black box, so we
@@ -304,25 +267,27 @@ var isHidden = function isHidden(node, _ref) {
           node = parentElement;
         }
       }
-
       node = originalNode;
-    } // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+    }
+    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
     //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
     //  it might be a falsy value, which means shadow DOM support is disabled
+
     // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
     //  now we can just test to see if it would normally be visible or not, provided it's
     //  attached to the main document.
     // NOTE: We must consider case where node is inside a shadow DOM and given directly to
     //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
 
-
     if (isNodeAttached(node)) {
       // this works wherever the node is: if there's at least one client rect, it's
       //  somehow displayed; it also covers the CSS 'display: contents' case where the
       //  node itself is hidden in place of its contents; and there's no need to search
       //  up the hierarchy either
       return !node.getClientRects().length;
-    } // Else, the node isn't attached to the document, which means the `getClientRects()`
+    }
+
+    // Else, the node isn't attached to the document, which means the `getClientRects()`
     //  API will __always__ return zero rects (this can happen, for example, if React
     //  is used to render nodes onto a detached tree, as confirmed in this thread:
     //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
@@ -338,12 +303,10 @@ var isHidden = function isHidden(node, _ref) {
     //
     // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
     //  nodes as visible with the 'none' fallback.__
-
-
     if (displayCheck !== 'legacy-full') {
       return true; // hidden
-    } // else, fallback to 'none' mode and consider the node visible
-
+    }
+    // else, fallback to 'none' mode and consider the node visible
   } else if (displayCheck === 'non-zero-area') {
     // NOTE: Even though this tests that the node's client rect is non-zero to determine
     //  whether it's displayed, and that a detached node will __always__ have a zero-area
@@ -351,89 +314,79 @@ var isHidden = function isHidden(node, _ref) {
     //  this mode, we do want to consider nodes that have a zero area to be hidden at all
     //  times, and that includes attached or not.
     return isZeroArea(node);
-  } // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
-  //  it's visible
-
+  }
 
+  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
+  //  it's visible
   return false;
-}; // form fields (nested) inside a disabled fieldset are not focusable/tabbable
+};
+
+// form fields (nested) inside a disabled fieldset are not focusable/tabbable
 //  unless they are in the _first_ <legend> element of the top-most disabled
 //  fieldset
-
-
 var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
   if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
-    var parentNode = node.parentElement; // check if `node` is contained in a disabled <fieldset>
-
+    var parentNode = node.parentElement;
+    // check if `node` is contained in a disabled <fieldset>
     while (parentNode) {
       if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
         // look for the first <legend> among the children of the disabled <fieldset>
         for (var i = 0; i < parentNode.children.length; i++) {
-          var child = parentNode.children.item(i); // when the first <legend> (in document order) is found
-
+          var child = parentNode.children.item(i);
+          // when the first <legend> (in document order) is found
           if (child.tagName === 'LEGEND') {
             // if its parent <fieldset> is not nested in another disabled <fieldset>,
             // return whether `node` is a descendant of its first <legend>
             return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
           }
-        } // the disabled <fieldset> containing `node` has no <legend>
-
-
+        }
+        // the disabled <fieldset> containing `node` has no <legend>
         return true;
       }
-
       parentNode = parentNode.parentElement;
     }
-  } // else, node's tabbable/focusable state should not be affected by a fieldset's
-  //  enabled/disabled state
-
+  }
 
+  // else, node's tabbable/focusable state should not be affected by a fieldset's
+  //  enabled/disabled state
   return false;
 };
-
 var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled || isHiddenInput(node) || isHidden(node, options) || // For a details element with a summary, the summary element gets the focus
+  if (node.disabled || isHiddenInput(node) || isHidden(node, options) ||
+  // For a details element with a summary, the summary element gets the focus
   isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
     return false;
   }
-
   return true;
 };
-
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
   if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
-
   return true;
 };
-
 var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
   var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
-
   if (isNaN(tabIndex) || tabIndex >= 0) {
     return true;
-  } // If a custom element has an explicit negative tabindex,
+  }
+  // If a custom element has an explicit negative tabindex,
   // browsers will not allow tab targeting said element's children.
-
-
   return false;
 };
+
 /**
- * @param {Array.<Element|CandidatesScope>} candidates
+ * @param {Array.<Element|CandidateScope>} candidates
  * @returns Element[]
  */
-
-
 var sortByOrder = function sortByOrder(candidates) {
   var regularTabbables = [];
   var orderedTabbables = [];
   candidates.forEach(function (item, i) {
-    var isScope = !!item.scope;
-    var element = isScope ? item.scope : item;
+    var isScope = !!item.scopeParent;
+    var element = isScope ? item.scopeParent : item;
     var candidateTabindex = getTabindex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
-
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
     } else {
@@ -451,11 +404,9 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-
 var tabbable = function tabbable(el, options) {
   options = options || {};
   var candidates;
-
   if (options.getShadowRoot) {
     candidates = getCandidatesIteratively([el], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
@@ -466,14 +417,11 @@ var tabbable = function tabbable(el, options) {
   } else {
     candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
-
   return sortByOrder(candidates);
 };
-
 var focusable = function focusable(el, options) {
   options = options || {};
   var candidates;
-
   if (options.getShadowRoot) {
     candidates = getCandidatesIteratively([el], options.includeContainer, {
       filter: isNodeMatchingSelectorFocusable.bind(null, options),
@@ -483,37 +431,27 @@ var focusable = function focusable(el, options) {
   } else {
     candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
   }
-
   return candidates;
 };
-
 var isTabbable = function isTabbable(node, options) {
   options = options || {};
-
   if (!node) {
     throw new Error('No node provided');
   }
-
   if (matches.call(node, candidateSelector) === false) {
     return false;
   }
-
   return isNodeMatchingSelectorTabbable(options, node);
 };
-
 var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
-
 var isFocusable = function isFocusable(node, options) {
   options = options || {};
-
   if (!node) {
     throw new Error('No node provided');
   }
-
   if (matches.call(node, focusableCandidateSelector) === false) {
     return false;
   }
-
   return isNodeMatchingSelectorFocusable(options, node);
 };
 
@@ -521,6 +459,6 @@ const firstTabbable = (container) => {
   return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
 };
 
-export { focusable as a, isFocusable as b, firstTabbable as f, isTabbable as i, tabbable as t };
+export { isFocusable as a, firstTabbable as b, focusable as f, isTabbable as i, tabbable as t };
 
 //# sourceMappingURL=first-tabbable.js.map