@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

package/build/components/static.js

@@ -561,6 +561,1252 @@ function lowerCamelCase(string) {
   return string.charAt(0).toLowerCase() + string.slice(1);
 }
 
+const not = {
+  inert: ':not([inert]):not([inert] *)',
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ':not(:disabled)',
+};
+
+var focusableSelectors = [
+  `a[href]${not.inert}${not.negTabIndex}`,
+  `area[href]${not.inert}${not.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
+  `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
+  `select${not.inert}${not.negTabIndex}${not.disabled}`,
+  `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
+  `button${not.inert}${not.negTabIndex}${not.disabled}`,
+  `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
+  // Discard until Firefox supports `:has()`
+  // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
+  // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
+  `iframe${not.inert}${not.negTabIndex}`,
+  `audio[controls]${not.inert}${not.negTabIndex}`,
+  `video[controls]${not.inert}${not.negTabIndex}`,
+  `[contenteditable]${not.inert}${not.negTabIndex}`,
+  `[tabindex]${not.inert}${not.negTabIndex}`,
+];
+
+/**
+ * Set the focus to the first element with `autofocus` with the element or the
+ * element itself.
+ */
+function focus(el) {
+    (el.querySelector('[autofocus]') || el).focus();
+}
+/**
+ * Get the first and last focusable elements within a given element.
+ */
+function getFocusableEdges(el) {
+    // Check for a focusable element within the subtree of the given element.
+    const firstEl = findFocusableEl(el, true);
+    // Only if we find the first element do we need to look for the last one. If
+    // there’s no last element, we set `lastEl` as a reference to `firstEl` so
+    // that the returned array is still always of length 2.
+    const lastEl = firstEl ? findFocusableEl(el, false) || firstEl : null;
+    return [firstEl, lastEl];
+}
+/**
+ * Find the first focusable element inside the given element if `forward` is
+ * truthy or the last focusable element otherwise.
+ */
+function findFocusableEl(el, forward) {
+    // If we’re walking forward, check if this element is focusable, and return it
+    // immediately if it is.
+    if (forward && isFocusable(el))
+        return el;
+    // We should only search the subtree of this element if it can have focusable
+    // children.
+    if (canHaveFocusableChildren(el)) {
+        // Start walking the DOM tree, looking for focusable elements.
+        // Case 1: If this element has a shadow root, search it recursively.
+        if (el.shadowRoot) {
+            // Descend into this subtree.
+            let next = getNextChildEl(el.shadowRoot, forward);
+            // Traverse the siblings, searching the subtree of each one for focusable
+            // elements.
+            while (next) {
+                const focusableEl = findFocusableEl(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+        // Case 2: If this element is a slot for a Custom Element, search its
+        // assigned elements recursively.
+        else if (el.localName === 'slot') {
+            const assignedElements = el.assignedElements({
+                flatten: true,
+            });
+            if (!forward)
+                assignedElements.reverse();
+            for (const assignedElement of assignedElements) {
+                const focusableEl = findFocusableEl(assignedElement, forward);
+                if (focusableEl)
+                    return focusableEl;
+            }
+        }
+        // Case 3: this is a regular Light DOM element. Search its subtree.
+        else {
+            // Descend into this subtree.
+            let next = getNextChildEl(el, forward);
+            // Traverse siblings, searching the subtree of each one
+            // for focusable elements.
+            while (next) {
+                const focusableEl = findFocusableEl(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+    }
+    // If we’re walking backward, we want to check the element’s entire subtree
+    // before checking the element itself. If this element is focusable, return
+    // it.
+    if (!forward && isFocusable(el))
+        return el;
+    return null;
+}
+function getNextChildEl(el, forward) {
+    return forward ? el.firstElementChild : el.lastElementChild;
+}
+function getNextSiblingEl(el, forward) {
+    return forward ? el.nextElementSibling : el.previousElementSibling;
+}
+/**
+ * Determine if an element is hidden from the user.
+ */
+const isHidden$1 = (el) => {
+    // Browsers hide all non-<summary> descendants of closed <details> elements
+    // from user interaction, but those non-<summary> elements may still match our
+    // focusable-selectors and may still have dimensions, so we need a special
+    // case to ignore them.
+    if (el.matches('details:not([open]) *') &&
+        !el.matches('details>summary:first-of-type'))
+        return true;
+    // If this element has no painted dimensions, it's hidden.
+    return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+};
+/**
+ * Determine if an element is focusable and has user-visible painted dimensions.
+ */
+const isFocusable = (el) => {
+    // A shadow host that delegates focus will never directly receive focus,
+    // even with `tabindex=0`. Consider our <fancy-button> custom element, which
+    // delegates focus to its shadow button:
+    //
+    // <fancy-button tabindex="0">
+    //  #shadow-root
+    //  <button><slot></slot></button>
+    // </fancy-button>
+    //
+    // The browser acts as as if there is only one focusable element – the shadow
+    // button. Our library should behave the same way.
+    if (el.shadowRoot?.delegatesFocus)
+        return false;
+    return el.matches(focusableSelectors.join(',')) && !isHidden$1(el);
+};
+/**
+ * Determine if an element can have focusable children. Useful for bailing out
+ * early when walking the DOM tree.
+ * @example
+ * This div is inert, so none of its children can be focused, even though they
+ * meet our criteria for what is focusable. Once we check the div, we can skip
+ * the rest of the subtree.
+ * ```html
+ * <div inert>
+ *   <button>Button</button>
+ *   <a href="#">Link</a>
+ * </div>
+ * ```
+ */
+function canHaveFocusableChildren(el) {
+    // The browser will never send focus into a Shadow DOM if the host element
+    // has a negative tabindex. This applies to both slotted Light DOM Shadow DOM
+    // children
+    if (el.shadowRoot && el.getAttribute('tabindex') === '-1')
+        return false;
+    // Elemments matching this selector are either hidden entirely from the user,
+    // or are visible but unavailable for interaction. Their descentants can never
+    // receive focus.
+    return !el.matches(':disabled,[hidden],[inert]');
+}
+/**
+ * Get the active element, accounting for Shadow DOM subtrees.
+ * @author Cory LaViska
+ * @see: https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+ */
+function getActiveEl(root = document) {
+    const activeEl = root.activeElement;
+    if (!activeEl)
+        return null;
+    // If there’s a shadow root, recursively find the active element within it.
+    // If the recursive call returns null, return the active element
+    // of the top-level Document.
+    if (activeEl.shadowRoot)
+        return getActiveEl(activeEl.shadowRoot) || document.activeElement;
+    // If not, we can just return the active element
+    return activeEl;
+}
+/**
+ * Trap the focus inside the given element
+ */
+function trapTabKey(el, event) {
+    const [firstFocusableEl, lastFocusableEl] = getFocusableEdges(el);
+    // If there are no focusable children in the dialog, prevent the user from
+    // tabbing out of it
+    if (!firstFocusableEl)
+        return event.preventDefault();
+    const activeEl = getActiveEl();
+    // If the SHIFT key is pressed while tabbing (moving backwards) and the
+    // currently focused item is the first one, move the focus to the last
+    // focusable item from the dialog element
+    if (event.shiftKey && activeEl === firstFocusableEl) {
+        // @ts-ignore: we know that `lastFocusableEl` is not null here
+        lastFocusableEl.focus();
+        event.preventDefault();
+    }
+    // If the SHIFT key is not pressed (moving forwards) and the currently focused
+    // item is the last one, move the focus to the first focusable item from the
+    // dialog element
+    else if (!event.shiftKey && activeEl === lastFocusableEl) {
+        firstFocusableEl.focus();
+        event.preventDefault();
+    }
+}
+/**
+ * Find the closest element to the given element matching the given selector,
+ * accounting for Shadow DOM subtrees.
+ * @author Louis St-Amour
+ * @see: https://stackoverflow.com/a/56105394
+ */
+function closest(selector, base) {
+    function from(el) {
+        if (!el || el === document || el === window)
+            return null;
+        // Reading the `assignedSlot` property from the element (as suggested by the
+        // aforementioned StackOverflow answer) is not enough, because it does not
+        // take into consideration elements nested deeply within a <slot>. For these
+        // elements, the `assignedSlot` property is `null` as it is only specified
+        // for top-level elements within a <slot>. To still find the closest <slot>,
+        // we walk up the tree looking for the `assignedSlot` property.
+        const slot = findAssignedSlot(el);
+        if (slot)
+            el = slot;
+        return (el.closest(selector) ||
+            from(el.getRootNode().host));
+    }
+    return from(base);
+}
+function findAssignedSlot(node) {
+    return (node.assignedSlot ||
+        (node.parentNode ? findAssignedSlot(node.parentNode) : null));
+}
+
+const SCOPE = 'data-a11y-dialog';
+class A11yDialog {
+    $el;
+    id;
+    previouslyFocused;
+    shown;
+    constructor(element) {
+        this.$el = element;
+        this.id = this.$el.getAttribute(SCOPE) || this.$el.id;
+        this.previouslyFocused = null;
+        this.shown = false;
+        this.maintainFocus = this.maintainFocus.bind(this);
+        this.bindKeypress = this.bindKeypress.bind(this);
+        this.handleTriggerClicks = this.handleTriggerClicks.bind(this);
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.$el.setAttribute('aria-hidden', 'true');
+        this.$el.setAttribute('aria-modal', 'true');
+        this.$el.setAttribute('tabindex', '-1');
+        if (!this.$el.hasAttribute('role')) {
+            this.$el.setAttribute('role', 'dialog');
+        }
+        document.addEventListener('click', this.handleTriggerClicks, true);
+    }
+    /**
+     * Destroy the current instance (after making sure the dialog has been hidden)
+     * and remove all associated listeners from dialog openers and closers
+     */
+    destroy() {
+        // Dispatch a `destroy` event
+        const destroyEvent = this.fire('destroy');
+        // If the event was prevented, do not continue with the normal behavior
+        if (destroyEvent.defaultPrevented)
+            return this;
+        // Hide the dialog to avoid destroying an open instance
+        this.hide();
+        // Remove the click event delegates for our openers and closers
+        document.removeEventListener('click', this.handleTriggerClicks, true);
+        // Clone and replace the dialog element to prevent memory leaks caused by
+        // event listeners that the author might not have cleaned up.
+        this.$el.replaceWith(this.$el.cloneNode(true));
+        return this;
+    }
+    /**
+     * Show the dialog element, trap the current focus within it, listen for some
+     * specific key presses and fire all registered callbacks for `show` event
+     */
+    show(event) {
+        // If the dialog is already open, abort
+        if (this.shown)
+            return this;
+        // Dispatch a `show` event
+        const showEvent = this.fire('show', event);
+        // If the event was prevented, do not continue with the normal behavior
+        if (showEvent.defaultPrevented)
+            return this;
+        // Keep a reference to the currently focused element to be able to restore
+        // it later
+        this.shown = true;
+        this.$el.removeAttribute('aria-hidden');
+        this.previouslyFocused = getActiveEl();
+        // Due to a long lasting bug in Safari, clicking an interactive element
+        // (like a <button>) does *not* move the focus to that element, which means
+        // `document.activeElement` is whatever element is currently focused (like
+        // an <input>), or the <body> element otherwise. We can work around that
+        // problem by checking whether the focused element is the <body>, and if it,
+        // store the click event target.
+        // See: https://bugs.webkit.org/show_bug.cgi?id=22261
+        if (this.previouslyFocused?.tagName === 'BODY' && event?.target) {
+            this.previouslyFocused = event.target;
+        }
+        // Set the focus to the dialog element
+        // See: https://github.com/KittyGiraudel/a11y-dialog/pull/583
+        if (event?.type === 'focus') {
+            this.maintainFocus();
+        }
+        else {
+            focus(this.$el);
+        }
+        // Bind a focus event listener to the body element to make sure the focus
+        // stays trapped inside the dialog while open, and start listening for some
+        // specific key presses (TAB and ESC)
+        document.body.addEventListener('focus', this.maintainFocus, true);
+        this.$el.addEventListener('keydown', this.bindKeypress, true);
+        return this;
+    }
+    /**
+     * Hide the dialog element, restore the focus to the previously active
+     * element, stop listening for some specific key presses and fire all
+     * registered callbacks for `hide` event
+     */
+    hide(event) {
+        // If the dialog is already closed, abort
+        if (!this.shown)
+            return this;
+        // Dispatch a `hide` event
+        const hideEvent = this.fire('hide', event);
+        // If the event was prevented, do not continue with the normal behavior
+        if (hideEvent.defaultPrevented)
+            return this;
+        this.shown = false;
+        this.$el.setAttribute('aria-hidden', 'true');
+        // Remove the focus event listener to the body element and stop listening
+        // for specific key presses
+        document.body.removeEventListener('focus', this.maintainFocus, true);
+        this.$el.removeEventListener('keydown', this.bindKeypress, true);
+        // Ensure the previously focused element (if any) has a `focus` method
+        // before attempting to call it to account for SVG elements
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108
+        this.previouslyFocused?.focus?.();
+        return this;
+    }
+    /**
+     * Register a new callback for the given event type
+     */
+    on(type, handler, options) {
+        this.$el.addEventListener(type, handler, options);
+        return this;
+    }
+    /**
+     * Unregister an existing callback for the given event type
+     */
+    off(type, handler, options) {
+        this.$el.removeEventListener(type, handler, options);
+        return this;
+    }
+    /**
+     * Dispatch and return a custom event from the DOM element associated with
+     * this dialog; this allows authors to listen for and respond to the events
+     * in their own code
+     */
+    fire(type, event) {
+        const customEvent = new CustomEvent(type, {
+            detail: event,
+            cancelable: true,
+        });
+        this.$el.dispatchEvent(customEvent);
+        return customEvent;
+    }
+    /**
+     * Add a delegated event listener for when elememts that open or close the
+     * dialog are clicked, and call `show` or `hide`, respectively
+     */
+    handleTriggerClicks(event) {
+        // We need to retrieve the click target while accounting for Shadow DOM.
+        // When within a web component, `event.target` is the shadow root (e.g.
+        // `<my-dialog>`), so we need to use `event.composedPath()` to get the click
+        // target
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/582
+        const target = event.composedPath()[0];
+        const opener = closest(`[${SCOPE}-show="${this.id}"]`, target);
+        const explicitCloser = closest(`[${SCOPE}-hide="${this.id}"]`, target);
+        const implicitCloser = closest(`[${SCOPE}-hide]`, target) &&
+            closest('[aria-modal="true"]', target) === this.$el;
+        // We use `closest(..)` (instead of `matches(..)`) so that clicking an
+        // element nested within a dialog opener does cause the dialog to open, and
+        // we use our custom `closest(..)` function so that it can cross shadow
+        // boundaries
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/712
+        if (opener)
+            this.show(event);
+        if (explicitCloser || implicitCloser)
+            this.hide(event);
+    }
+    /**
+     * Private event handler used when listening to some specific key presses
+     * (namely ESC and TAB)
+     */
+    bindKeypress(event) {
+        // This is an escape hatch in case there are nested open dialogs, so that
+        // only the top most dialog gets interacted with (`closest` is basically
+        // `Element.prototype.closest()` accounting for Shadow DOM subtrees)
+        if (closest('[aria-modal="true"]', getActiveEl()) !== this.$el) {
+            return;
+        }
+        let hasOpenPopover = false;
+        try {
+            hasOpenPopover = !!this.$el.querySelector('[popover]:not([popover="manual"]):popover-open');
+        }
+        catch {
+            // Run that DOM query in a try/catch because not all browsers support the
+            // `:popover-open` selector, which would cause the whole expression to
+            // fail
+            // See: https://caniuse.com/mdn-css_selectors_popover-open
+            // See: https://github.com/KittyGiraudel/a11y-dialog/pull/578#discussion_r1343215149
+        }
+        // If the dialog is shown and the ESC key is pressed, prevent any further
+        // effects from the ESC key and hide the dialog, unless:
+        // - its role is `alertdialog`, which means it should be modal
+        // - or it contains an open popover, in which case ESC should close it
+        if (event.key === 'Escape' &&
+            this.$el.getAttribute('role') !== 'alertdialog' &&
+            !hasOpenPopover) {
+            event.preventDefault();
+            this.hide(event);
+        }
+        // If the dialog is shown and the TAB key is pressed, make sure the focus
+        // stays trapped within the dialog element
+        if (event.key === 'Tab') {
+            trapTabKey(this.$el, event);
+        }
+    }
+    /**
+     * If the dialog is shown and the focus is not within a dialog element (either
+     * this one or another one in case of nested dialogs) or an element with the
+     * ignore attribute, move it back to the dialog container
+     * See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
+     */
+    maintainFocus() {
+        // We use `getActiveEl()` and not `event.target` here because the latter can
+        // be a shadow root. This can happen when having a focusable element after
+        // slotted content: tabbing out of it causes this focus listener to trigger
+        // with the shadow root as a target event. In such a case, the focus would
+        // be incorrectly moved to the dialog, which shouldn’t happen. Getting the
+        // active element (while accounting for Shadow DOM) avoids that problem.
+        // See: https://github.com/KittyGiraudel/a11y-dialog/issues/778
+        const target = getActiveEl();
+        if (!closest(`[aria-modal="true"], [${SCOPE}-ignore-focus-trap]`, target)) {
+            focus(this.$el);
+        }
+    }
+}
+
+function instantiateDialogs() {
+    for (const el of document.querySelectorAll('[data-a11y-dialog]')) {
+        new A11yDialog(el);
+    }
+}
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', instantiateDialogs);
+    }
+    else {
+        instantiateDialogs();
+    }
+}
+
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+// NOTE: separate `:not()` selectors has broader browser support than the newer
+//  `:not([inert], [inert] *)` (Feb 2023)
+// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
+//  the entire query to fail, resulting in no nodes found, which will break a lot
+//  of things... so we have to rely on JS to identify nodes inside an inert container
+var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
+var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
+var NoElement = typeof Element === 'undefined';
+var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
+  var _element$getRootNode;
+  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
+} : function (element) {
+  return element === null || element === void 0 ? void 0 : element.ownerDocument;
+};
+
+/**
+ * Determines if a node is inert or in an inert ancestor.
+ * @param {Element} [node]
+ * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
+ *  see if any of them are inert. If false, only `node` itself is considered.
+ * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
+ *  False if `node` is falsy.
+ */
+var isInert = function isInert(node, lookUp) {
+  var _node$getAttribute;
+  if (lookUp === void 0) {
+    lookUp = true;
+  }
+  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
+  //  JS API property; we have to check the attribute, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's an active element
+  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
+  var inert = inertAtt === '' || inertAtt === 'true';
+
+  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
+  //  if it weren't for `matches()` not being a function on shadow roots; the following
+  //  code works for any kind of node
+  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
+  //  so it likely would not support `:is([inert] *)` either...
+  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+
+  return result;
+};
+
+/**
+ * Determines if a node's content is editable.
+ * @param {Element} [node]
+ * @returns True if it's content-editable; false if it's not or `node` is falsy.
+ */
+var isContentEditable = function isContentEditable(node) {
+  var _node$getAttribute2;
+  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
+  //  to use the attribute directly to check for this, which can either be empty or 'true';
+  //  if it's `null` (not specified) or 'false', it's a non-editable element
+  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
+  return attValue === '' || attValue === 'true';
+};
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
+      return 0;
+    }
+  }
+  return node.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) {
+      return nodes[i];
+    }
+  }
+};
+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 {
+    try {
+      radioSet = queryRadios(node.name);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
+      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
+var isNodeAttached = function isNodeAttached(node) {
+  var _nodeRoot;
+  // 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
+  //  is attached, and the one we need to check if it's in the document or not (because the
+  //  shadow, and all nodes it contains, is never considered in the document since shadows
+  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
+  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
+  //  visibility, including all the nodes it contains). The host could be any normal node,
+  //  or a custom element (i.e. web component). Either way, that's the one that is considered
+  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
+  //  tested).
+  // To further complicate things, we have to look all the way up until we find a shadow HOST
+  //  that is attached (or find none) because the node might be in nested shadows...
+  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
+  //  document (per the docs) and while it's a Document-type object, that document does not
+  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
+  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
+  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
+  //  node is actually detached.
+  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
+  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
+  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
+  //  `ownerDocument` will be `null`, hence the optional chaining on it.
+  var nodeRoot = node && getRootNode(node);
+  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
+
+  // in some cases, a detached node will return itself as the root instead of a document or
+  //  shadow root object, in which case, we shouldn't try to look further up the host chain
+  var attached = false;
+  if (nodeRoot && nodeRoot !== node) {
+    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
+    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
+    while (!attached && nodeRootHost) {
+      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
+      // 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
+      nodeRoot = getRootNode(nodeRootHost);
+      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
+      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
+    }
+  }
+  return attached;
+};
+var isZeroArea = function isZeroArea(node) {
+  var _node$getBoundingClie = node.getBoundingClientRect(),
+    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;
+  // 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)
+  // NOTE: we check this regardless of `displayCheck="none"` because this is a
+  //  _visibility_ check, not a _display_ check
+  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
+          //  fall back to a non-zero-area test
+          return isZeroArea(node);
+        } else if (node.assignedSlot) {
+          // iterate up slot
+          node = node.assignedSlot;
+        } else if (!parentElement && rootNode !== node.ownerDocument) {
+          // cross shadow boundary
+          node = rootNode.host;
+        } else {
+          // iterate up normal dom
+          node = parentElement;
+        }
+      }
+      node = originalNode;
+    }
+    // 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()`
+    //  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)
+    //
+    // It also means that even window.getComputedStyle(node).display will return `undefined`
+    //  because styles are only computed for nodes that are in the document.
+    //
+    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
+    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
+    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
+    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
+    //  considering __everything__ to be visible because of the innability to determine styles.
+    //
+    // 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 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
+    //  client rect, we don't special-case for whether the node is attached or not. In
+    //  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
+  return false;
+};
+
+// 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>
+    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
+          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>
+        return true;
+      }
+      parentNode = parentNode.parentElement;
+    }
+  }
+
+  // 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 ||
+  // we must do an inert look up to filter out any elements inside an inert ancestor
+  //  because we're limited in the type of selectors we can use in JSDom (see related
+  //  note related to `candidateSelectors`)
+  isInert(node) || 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 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 defaultConfig$2 = function defaultConfig() {
+  return {
+    /** Class which indicates that modal is open */
+    classModalIsOpen: "is-active",
+    /** Class on body which indicates that modal is open */
+    classModalIsOpenBody: "has-modal",
+    /** Root of page content which should be hidden when modal is open */
+    root: "#root",
+    /** Move modal into this element selector (must be unique in DOM) */
+    modalsRoot: "#root-modals"
+  };
+};
+var Modal = /*#__PURE__*/function () {
+  function Modal(element, config) {
+    _classCallCheck(this, Modal);
+    this.element = element;
+    this.config = Object.assign(Object.assign({}, defaultConfig$2()), config);
+    this.handleShow = this.handleShow.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.headerFirstItemSpacing = this.headerFirstItemSpacing.bind(this);
+    Modal.moveToModalRoot = Modal.moveToModalRoot.bind(this);
+    Modal.lockBody = Modal.lockBody.bind(this);
+    Modal.unlockBody = Modal.unlockBody.bind(this);
+    this.element.ODS_Modal = this;
+    this.init();
+    return this;
+  }
+  return _createClass(Modal, [{
+    key: "handleShow",
+    value: function handleShow(el) {
+      Modal.lockBody();
+      if (el) el.classList.add(this.config.classModalIsOpen);
+      // Long modals can have first focusabble element under the fold, so static content above the fold should be focused instead to prevent undesirable scrolling
+      var initialFocusEl = el.querySelector("[data-a11y-dialog-initial-focus]");
+      if (!initialFocusEl) {
+        return;
+      }
+      // set tabindex to -1 so element can't be focused via keyboard
+      if (!isTabbable(initialFocusEl)) {
+        initialFocusEl.setAttribute("tabindex", "-1");
+      }
+      initialFocusEl.focus();
+    }
+  }, {
+    key: "handleHide",
+    value: function handleHide(el) {
+      Modal.unlockBody();
+      if (el) el.classList.remove(this.config.classModalIsOpen);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.instance.show();
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.instance.hide();
+    }
+  }, {
+    key: "headerFirstItemSpacing",
+    value: function headerFirstItemSpacing() {
+      /**
+       * Target the first element which is not .btn inside .modal__header and add margin-right 40px.
+       * css has its limitations and it is not possible with pseudo selectors
+       */
+      var modalHeader = this.element.querySelector(".modal__header");
+      if (modalHeader) {
+        var firstNonBtnElement = Array.from(modalHeader.children).find(function (child) {
+          return !child.classList.contains("btn");
+        });
+        if (firstNonBtnElement) {
+          firstNonBtnElement.style.marginRight = "40px";
+        }
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this = this;
+      if (this.config.modalsRoot) {
+        Modal.moveToModalRoot(this.element, document.querySelector(this.config.modalsRoot));
+      }
+      this.instance = new A11yDialog(this.element);
+      this.instance.on("show", function (event) {
+        var dialogEl = event.currentTarget;
+        _this.handleShow(dialogEl);
+      });
+      this.instance.on("hide", function (event) {
+        var dialogEl = event.currentTarget;
+        _this.handleHide(dialogEl);
+      });
+      this.headerFirstItemSpacing();
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.instance.destroy();
+      this.element.ODS_Modal = this;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      this.destroy();
+      this.init();
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(el) {
+      if (!el) return null;
+      var modalEl = el;
+      return modalEl.ODS_Modal || null;
+    }
+  }, {
+    key: "moveToModalRoot",
+    value: function moveToModalRoot(el, container) {
+      var _a;
+      if (container) {
+        container.appendChild(el);
+      } else {
+        console.warn("`modalsRoot: ".concat((_a = this.config) === null || _a === void 0 ? void 0 : _a.modalsRoot, "` element is not present in DOM. Modal will be placed inside content which can affect it's styling. Please provide `modalsRoot` selector (should be placed outside of main contant, usualy in end of <body /> tag)"));
+      }
+    }
+  }, {
+    key: "lockBody",
+    value: function lockBody(className, root) {
+      var _a, _b;
+      var actualClassName = className || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.classModalIsOpenBody);
+      var actualRoot = root || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.root);
+      var container = document.querySelector(actualRoot);
+      // store current scrollTop value
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      document.body.setAttribute("data-lock-scrolltop", scrollTop.toString());
+      // add locking styles to body
+      document.body.style.height = "100%";
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      // add locking styles to scrollTop
+      if (container) {
+        container.style.height = "100%";
+        container.style.width = "100%";
+        container.style.overflow = "hidden";
+        container.style.position = "fixed";
+        // scroll page-container to scrollTop position
+        container.scrollTop = scrollTop;
+      }
+      // add modal class
+      document.body.classList.add(actualClassName);
+      // attempt to scroll top fixed position
+      window.requestAnimationFrame(function () {
+        window.scrollTo(0, scrollTop);
+      });
+    }
+  }, {
+    key: "unlockBody",
+    value: function unlockBody(className, root) {
+      var _a, _b;
+      var actualClassName = className || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.classModalIsOpenBody);
+      var actualRoot = root || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.root);
+      var container = document.querySelector(actualRoot);
+      var scrollTop = document.body.getAttribute("data-lock-scrolltop") || "0";
+      // remove locking styles from body
+      document.body.style.height = "";
+      document.body.style.width = "";
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      // add modal class
+      document.body.classList.remove(actualClassName);
+      // remove locking styles from page-container
+      if (container) {
+        container.style.height = "";
+        container.style.width = "";
+        container.style.overflow = "";
+        container.style.position = "";
+      }
+      // set scroll position back
+      window.requestAnimationFrame(function () {
+        window.scrollTo({
+          left: 0,
+          top: parseInt(scrollTop, 10),
+          behavior: "instant"
+        });
+      });
+    }
+  }]);
+}();
+
+// we use array to include old browser key names like IE11
+// ie. navigation keys https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
+var keys = {
+  TAB: ['Tab'],
+  ARROWLEFT: ['Left', 'ArrowLeft'],
+  ARROWUP: ['Up', 'ArrowUp'],
+  ARROWRIGHT: ['Right', 'ArrowRight'],
+  ARROWDOWN: ['Down', 'ArrowDown']
+};
+
+var RovingTabindex = /*#__PURE__*/function () {
+  function RovingTabindex(elems) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      direction: 'horizontal'
+    };
+    _classCallCheck(this, RovingTabindex);
+    this.elems = elems;
+    this.config = config;
+    this.isActive = false;
+    this.onKeydown = this.onKeydown.bind(this);
+  }
+  return _createClass(RovingTabindex, [{
+    key: "init",
+    value: function init() {
+      document.addEventListener('keydown', this.onKeydown);
+      this.isActive = true;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      document.removeEventListener('keydown', this.onKeydown);
+      this.isActive = false;
+    }
+  }, {
+    key: "update",
+    value: function update(elems) {
+      this.elems = elems;
+    }
+  }, {
+    key: "onKeydown",
+    value: function onKeydown(e) {
+      var activeElemIndex = this.elems.indexOf(document.activeElement);
+      if ((keys.ARROWUP.includes(e.key) || keys.ARROWDOWN.includes(e.key)) && this.config.direction === 'horizontal') {
+        return;
+      }
+      if ((keys.ARROWLEFT.includes(e.key) || keys.ARROWRIGHT.includes(e.key)) && this.config.direction === 'vertical') {
+        return;
+      }
+      if (keys.ARROWDOWN.includes(e.key) || keys.ARROWRIGHT.includes(e.key)) {
+        e.preventDefault();
+        if (activeElemIndex >= 0 && activeElemIndex < this.elems.length - 1) {
+          this.elems[activeElemIndex + 1].focus();
+        } else {
+          this.elems[0].focus();
+        }
+      }
+      if (keys.ARROWUP.includes(e.key) || keys.ARROWLEFT.includes(e.key)) {
+        e.preventDefault();
+        if (activeElemIndex >= 1) {
+          this.elems[activeElemIndex - 1].focus();
+        } else {
+          this.elems[this.elems.length - 1].focus();
+        }
+      }
+      if (keys.TAB.includes(e.key)) {
+        this.destroy();
+      }
+    }
+  }]);
+}();
+
+var defaultConfig$1 = {
+  tabSelector: '[role="tab"]'
+};
+var Tabs = /*#__PURE__*/function () {
+  function Tabs(element, config) {
+    _classCallCheck(this, Tabs);
+    this.isActive = function (el) {
+      return el ? !el.hasAttribute("hidden") : false;
+    };
+    this.isSelected = function (el) {
+      return el.getAttribute("aria-selected") === "true";
+    };
+    this.element = element;
+    this.config = Object.assign(Object.assign({}, defaultConfig$1), config);
+    this.tabs = [];
+    this.tabPanels = [];
+    this.activeTabIndex = null;
+    this.rovingTabindex = null;
+    this.handleClick = this.handleClick.bind(this);
+    this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.element.ODS_Tabs = this;
+    this.init();
+    return this;
+  }
+  return _createClass(Tabs, [{
+    key: "init",
+    value: function init() {
+      var _this = this;
+      this.tabs = Array.from(this.element.querySelectorAll(this.config.tabSelector));
+      this.tabs.map(function (tab, index) {
+        var controlId = tab.getAttribute("aria-controls");
+        _this.tabPanels.push(controlId ? document.getElementById(controlId) : null);
+        tab.addEventListener("click", _this.handleClick);
+        tab.addEventListener("focus", _this.handleTabFocus);
+        if (_this.isSelected(tab)) {
+          _this.activeTabIndex = index;
+        }
+        return tab;
+      });
+      if (!this.rovingTabindex) {
+        this.rovingTabindex = new RovingTabindex(this.tabs, {
+          direction: "any"
+        });
+      } else {
+        this.rovingTabindex.update(this.tabs);
+      }
+      if (this.activeTabIndex !== null) {
+        this.toggleTabPanel(this.tabPanels[this.activeTabIndex], "on");
+      } else if (this.tabs.length > 0) {
+        this.activateNthTab(0);
+      }
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this2 = this;
+      this.tabs.map(function (tab) {
+        tab.removeEventListener("click", _this2.handleClick);
+        tab.removeEventListener("focus", _this2.handleTabFocus);
+        return tab;
+      });
+      this.tabs = [];
+      this.tabPanels = [];
+      if (this.rovingTabindex) {
+        this.rovingTabindex.destroy();
+      }
+      this.element.ODS_Tabs = null;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      this.destroy();
+      this.init();
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(e) {
+      var _this3 = this;
+      var clickedTab = e.currentTarget;
+      if (clickedTab.hasAttribute("aria-disabled")) {
+        e.preventDefault();
+        return;
+      }
+      this.tabs.map(function (tab, i) {
+        if (tab === clickedTab) {
+          _this3.activeTabIndex = i;
+          return _this3.toggleTab(tab, "on");
+        }
+        return _this3.toggleTab(tab, "off");
+      });
+      this.tabPanels.map(function (tabPanel) {
+        if (tabPanel && tabPanel.getAttribute("id") === clickedTab.getAttribute("aria-controls")) {
+          return _this3.toggleTabPanel(tabPanel, "on");
+        }
+        return _this3.toggleTabPanel(tabPanel, "off");
+      });
+    }
+  }, {
+    key: "toggleTab",
+    value: function toggleTab(el, state) {
+      var isActive = this.isSelected(el);
+      if (state === "on" && !isActive) {
+        el.setAttribute("aria-selected", "true");
+        el.setAttribute("tabindex", "0");
+      }
+      if (state === "off" && isActive) {
+        el.setAttribute("aria-selected", "false");
+        el.setAttribute("tabindex", "-1");
+      }
+    }
+  }, {
+    key: "toggleTabPanel",
+    value: function toggleTabPanel(el, state) {
+      if (!el) return;
+      var isActive = this.isActive(el);
+      if (state === "on" && !isActive) {
+        el.removeAttribute("hidden");
+      }
+      if (state === "off" && isActive) {
+        el.setAttribute("hidden", "");
+      }
+    }
+  }, {
+    key: "activateNthTab",
+    value: function activateNthTab(index) {
+      var _this4 = this;
+      this.tabs.map(function (tab, i) {
+        if (i === index) {
+          _this4.activeTabIndex = i;
+          return _this4.toggleTab(tab, "on");
+        }
+        return _this4.toggleTab(tab, "off");
+      });
+      this.tabPanels.map(function (tabPanel, i) {
+        if (i === index) {
+          return _this4.toggleTabPanel(tabPanel, "on");
+        }
+        return _this4.toggleTabPanel(tabPanel, "off");
+      });
+    }
+  }, {
+    key: "handleTabFocus",
+    value: function handleTabFocus() {
+      if (this.rovingTabindex && !this.rovingTabindex.isActive) {
+        this.rovingTabindex.init();
+      }
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance(el) {
+      return el && el.ODS_Tabs ? el.ODS_Tabs : null;
+    }
+  }]);
+}();
+
 function moduleFactory(Module, selector) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var elements = Array.from(document.querySelectorAll(selector));
@@ -573,24 +1819,23 @@ function destroyModulesWithin(container) {
   var destroyedInstances = {};
   Object.keys(window.ODS.instances).forEach(function (moduleName) {
     window.ODS.instances[moduleName].forEach(function (instance) {
-      if (_typeof(destroyedInstances[moduleName]) !== 'object') {
+      if (_typeof(destroyedInstances[moduleName]) !== "object") {
         destroyedInstances[moduleName] = [];
       }
       var isInContainer = container.contains(instance.element);
-      if (moduleName === 'modal') {
+      if (moduleName === "modal") {
         var _instance$instance;
-        // eslint-disable-next-line
         isInContainer = (_instance$instance = instance.instance) === null || _instance$instance === void 0 ? void 0 : _instance$instance._openers.every(function (opener) {
           return container.contains(opener);
         });
-      } else if (moduleName === 'tooltip') {
+      } else if (moduleName === "tooltip") {
         isInContainer = container.contains(instance.trigger);
       }
       if (isInContainer) {
         instance.destroy();
         destroyedInstances[moduleName].push(instance);
       }
-      if (isInContainer && removeOrphanedNodes && ['modal', 'tooltip'].includes(moduleName)) {
+      if (isInContainer && removeOrphanedNodes && ["modal", "tooltip"].includes(moduleName)) {
         instance.element.remove();
       }
     });
@@ -615,6 +1860,9 @@ function initModulesWithin(container) {
       });
     }
     if (elements.length) {
+      if (!Array.isArray(window.ODS.instances[name])) {
+        window.ODS.instances[name] = [];
+      }
       instances[name] = elements.map(function (element) {
         return new module.Module(element);
       });
@@ -624,7 +1872,6 @@ function initModulesWithin(container) {
   return instances;
 }
 
-// eslint-disable-next-line import/no-cycle
 function toggle(props) {
   var element = props.element,
     attribute = props.attribute,
@@ -1023,7 +2270,6 @@ var SameHeight = /*#__PURE__*/function () {
     key: "init",
     value: function init() {
       var _this2 = this;
-      console.log("test");
       var imgLoaded = [];
       // Instead of finding one child per parent element, we find all elements with the attribute
       this.children = this.element.querySelectorAll('[data-same-height-child="true"]');
@@ -1140,12 +2386,11 @@ var moduleSelectorPairs = [
 //   name: 'Loader',
 //   selector: '[data-loader]',
 // },
-// {
-//   Module: Modal,
-//   name: 'Modal',
-//   selector: '[data-modal]',
-// },
 {
+  Module: Modal,
+  name: "Modal",
+  selector: "[data-modal]"
+}, {
   Module: SameHeight,
   name: "SameHeight",
   selector: "[data-same-height]"
@@ -1165,12 +2410,11 @@ var moduleSelectorPairs = [
 //   name: 'Table',
 //   selector: '[data-table]',
 // },
-// {
-//   Module: Tabs,
-//   name: 'Tabs',
-//   selector: '[data-tabs]',
-// },
 {
+  Module: Tabs,
+  name: "Tabs",
+  selector: "[data-tabs]"
+}, {
   Module: Toggle,
   name: "Toggle",
   selector: "[data-toggle]"