@authsignal/browser 0.4.0 → 0.4.2

package/dist/index.js

@@ -105,18 +105,6 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -543,15 +531,15 @@ var PasskeyApiClient = /** @class */ (function () {
         this.baseUrl = baseUrl;
     }
     PasskeyApiClient.prototype.registrationOptions = function (_a) {
-        var token = _a.token, userName = _a.userName, authenticatorAttachment = _a.authenticatorAttachment;
+        var token = _a.token, username = _a.username, authenticatorAttachment = _a.authenticatorAttachment;
         return __awaiter(this, void 0, void 0, function () {
             var body, response;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
                         body = Boolean(authenticatorAttachment)
-                            ? { username: userName, authenticatorAttachment: authenticatorAttachment }
-                            : { username: userName };
+                            ? { username: username, authenticatorAttachment: authenticatorAttachment }
+                            : { username: username };
                         response = fetch("".concat(this.baseUrl, "/client/user-authenticators/passkey/registration-options"), {
                             method: "POST",
                             headers: this.buildHeaders(token),
@@ -564,16 +552,17 @@ var PasskeyApiClient = /** @class */ (function () {
         });
     };
     PasskeyApiClient.prototype.authenticationOptions = function (_a) {
-        var token = _a.token;
+        var token = _a.token, challengeId = _a.challengeId;
         return __awaiter(this, void 0, void 0, function () {
-            var response;
+            var body, response;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        body = { challengeId: challengeId };
                         response = fetch("".concat(this.baseUrl, "/client/user-authenticators/passkey/authentication-options"), {
                             method: "POST",
                             headers: this.buildHeaders(token),
-                            body: JSON.stringify({})
+                            body: JSON.stringify(body)
                         });
                         return [4 /*yield*/, response];
                     case 1: return [2 /*return*/, (_b.sent()).json()];
@@ -582,16 +571,20 @@ var PasskeyApiClient = /** @class */ (function () {
         });
     };
     PasskeyApiClient.prototype.addAuthenticator = function (_a) {
-        var token = _a.token, rest = __rest(_a, ["token"]);
+        var token = _a.token, challengeId = _a.challengeId, registrationCredential = _a.registrationCredential;
         return __awaiter(this, void 0, void 0, function () {
-            var response;
+            var body, response;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        body = {
+                            challengeId: challengeId,
+                            registrationCredential: registrationCredential
+                        };
                         response = fetch("".concat(this.baseUrl, "/client/user-authenticators/passkey"), {
                             method: "POST",
                             headers: this.buildHeaders(token),
-                            body: JSON.stringify(rest)
+                            body: JSON.stringify(body)
                         });
                         return [4 /*yield*/, response];
                     case 1: return [2 /*return*/, (_b.sent()).json()];
@@ -600,16 +593,17 @@ var PasskeyApiClient = /** @class */ (function () {
         });
     };
     PasskeyApiClient.prototype.verify = function (_a) {
-        var token = _a.token, rest = __rest(_a, ["token"]);
+        var token = _a.token, challengeId = _a.challengeId, authenticationCredential = _a.authenticationCredential, deviceId = _a.deviceId;
         return __awaiter(this, void 0, void 0, function () {
-            var response;
+            var body, response;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        body = { challengeId: challengeId, authenticationCredential: authenticationCredential, deviceId: deviceId };
                         response = fetch("".concat(this.baseUrl, "/client/verify/passkey"), {
                             method: "POST",
                             headers: this.buildHeaders(token),
-                            body: JSON.stringify(rest)
+                            body: JSON.stringify(body)
                         });
                         return [4 /*yield*/, response];
                     case 1: return [2 /*return*/, (_b.sent()).json()];
@@ -636,6 +630,23 @@ var PasskeyApiClient = /** @class */ (function () {
             });
         });
     };
+    PasskeyApiClient.prototype.challenge = function (action) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        response = fetch("".concat(this.baseUrl, "/client/challenge"), {
+                            method: "POST",
+                            headers: this.buildHeaders(),
+                            body: JSON.stringify({ action: action })
+                        });
+                        return [4 /*yield*/, response];
+                    case 1: return [2 /*return*/, (_a.sent()).json()];
+                }
+            });
+        });
+    };
     PasskeyApiClient.prototype.buildHeaders = function (token) {
         var authorizationHeader = token ? "Bearer ".concat(token) : "Basic ".concat(window.btoa(encodeURIComponent(this.tenantId)));
         return {
@@ -648,9 +659,10 @@ var PasskeyApiClient = /** @class */ (function () {
 
 var Passkey = /** @class */ (function () {
     function Passkey(_a) {
-        var baseUrl = _a.baseUrl, tenantId = _a.tenantId;
+        var baseUrl = _a.baseUrl, tenantId = _a.tenantId, anonymousId = _a.anonymousId;
         this.passkeyLocalStorageKey = "as_passkey_credential_id";
         this.api = new PasskeyApiClient({ baseUrl: baseUrl, tenantId: tenantId });
+        this.anonymousId = anonymousId;
     }
     Passkey.prototype.signUp = function (_a) {
         var userName = _a.userName, token = _a.token, _b = _a.authenticatorAttachment, authenticatorAttachment = _b === void 0 ? "platform" : _b;
@@ -658,7 +670,7 @@ var Passkey = /** @class */ (function () {
             var optionsResponse, registrationResponse, addAuthenticatorResponse;
             return __generator(this, function (_c) {
                 switch (_c.label) {
-                    case 0: return [4 /*yield*/, this.api.registrationOptions({ userName: userName, token: token, authenticatorAttachment: authenticatorAttachment })];
+                    case 0: return [4 /*yield*/, this.api.registrationOptions({ username: userName, token: token, authenticatorAttachment: authenticatorAttachment })];
                     case 1:
                         optionsResponse = _c.sent();
                         return [4 /*yield*/, startRegistration(optionsResponse.options)];
@@ -681,26 +693,43 @@ var Passkey = /** @class */ (function () {
     };
     Passkey.prototype.signIn = function (params) {
         return __awaiter(this, void 0, void 0, function () {
-            var optionsResponse, authenticationResponse, verifyResponse;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var challengeResponse, _a, optionsResponse, authenticationResponse, verifyResponse;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         if ((params === null || params === void 0 ? void 0 : params.token) && params.autofill) {
-                            throw new Error("Autofill is not supported when providing a token");
+                            throw new Error("autofill is not supported when providing a token");
+                        }
+                        if ((params === null || params === void 0 ? void 0 : params.action) && params.token) {
+                            throw new Error("action is not supported when providing a token");
                         }
-                        return [4 /*yield*/, this.api.authenticationOptions({ token: params === null || params === void 0 ? void 0 : params.token })];
+                        if (!(params === null || params === void 0 ? void 0 : params.action)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.api.challenge(params.action)];
                     case 1:
-                        optionsResponse = _a.sent();
-                        return [4 /*yield*/, startAuthentication(optionsResponse.options, params === null || params === void 0 ? void 0 : params.autofill)];
+                        _a = _b.sent();
+                        return [3 /*break*/, 3];
                     case 2:
-                        authenticationResponse = _a.sent();
+                        _a = null;
+                        _b.label = 3;
+                    case 3:
+                        challengeResponse = _a;
+                        return [4 /*yield*/, this.api.authenticationOptions({
+                                token: params === null || params === void 0 ? void 0 : params.token,
+                                challengeId: challengeResponse === null || challengeResponse === void 0 ? void 0 : challengeResponse.challengeId
+                            })];
+                    case 4:
+                        optionsResponse = _b.sent();
+                        return [4 /*yield*/, startAuthentication(optionsResponse.options, params === null || params === void 0 ? void 0 : params.autofill)];
+                    case 5:
+                        authenticationResponse = _b.sent();
                         return [4 /*yield*/, this.api.verify({
                                 challengeId: optionsResponse.challengeId,
                                 authenticationCredential: authenticationResponse,
-                                token: params === null || params === void 0 ? void 0 : params.token
+                                token: params === null || params === void 0 ? void 0 : params.token,
+                                deviceId: this.anonymousId
                             })];
-                    case 3:
-                        verifyResponse = _a.sent();
+                    case 6:
+                        verifyResponse = _b.sent();
                         if (verifyResponse === null || verifyResponse === void 0 ? void 0 : verifyResponse.isVerified) {
                             this.storeCredentialAgainstDevice(authenticationResponse);
                         }
@@ -777,408 +806,423 @@ function openWindow(_a) {
     return window.open(url, "", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=".concat(width, ", height=").concat(height, ", top=").concat(y, ", left=").concat(x));
 }
 
+const not = {
+  inert: ':not([inert]):not([inert] *)',
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ':not(:disabled)',
+};
+
 var focusableSelectors = [
-  'a[href]:not([tabindex^="-"])',
-  'area[href]:not([tabindex^="-"])',
-  'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])',
-  'input[type="radio"]:not([disabled]):not([tabindex^="-"])',
-  'select:not([disabled]):not([tabindex^="-"])',
-  'textarea:not([disabled]):not([tabindex^="-"])',
-  'button:not([disabled]):not([tabindex^="-"])',
-  'iframe:not([tabindex^="-"])',
-  'audio[controls]:not([tabindex^="-"])',
-  'video[controls]:not([tabindex^="-"])',
-  '[contenteditable]:not([tabindex^="-"])',
-  '[tabindex]:not([tabindex^="-"])',
+  `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}`,
 ];
 
-var TAB_KEY = 'Tab';
-var ESCAPE_KEY = 'Escape';
-
 /**
- * Define the constructor to instantiate a dialog
- *
- * @constructor
- * @param {Element} element
+ * Set the focus to the first element with `autofocus` with the element or the
+ * element itself.
  */
-function A11yDialog(element) {
-  // Prebind the functions that will be bound in addEventListener and
-  // removeEventListener to avoid losing references
-  this._show = this.show.bind(this);
-  this._hide = this.hide.bind(this);
-  this._maintainFocus = this._maintainFocus.bind(this);
-  this._bindKeypress = this._bindKeypress.bind(this);
-
-  this.$el = element;
-  this.shown = false;
-  this._id = this.$el.getAttribute('data-a11y-dialog') || this.$el.id;
-  this._previouslyFocused = null;
-  this._listeners = {};
-
-  // Initialise everything needed for the dialog to work properly
-  this.create();
+function moveFocusToDialog(el) {
+    const focused = (el.querySelector('[autofocus]') || el);
+    focused.focus();
 }
-
-/**
- * Set up everything necessary for the dialog to be functioning
- *
- * @param {(NodeList | Element | string)} targets
- * @return {this}
- */
-A11yDialog.prototype.create = function () {
-  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');
-  }
-
-  // Keep a collection of dialog openers, each of which will be bound a click
-  // event listener to open the dialog
-  this._openers = $$('[data-a11y-dialog-show="' + this._id + '"]');
-  this._openers.forEach(
-    function (opener) {
-      opener.addEventListener('click', this._show);
-    }.bind(this)
-  );
-
-  // Keep a collection of dialog closers, each of which will be bound a click
-  // event listener to close the dialog
-  const $el = this.$el;
-
-  this._closers = $$('[data-a11y-dialog-hide]', this.$el)
-    // This filter is necessary in case there are nested dialogs, so that
-    // only closers from the current dialog are retrieved and effective
-    .filter(function (closer) {
-      // Testing for `[aria-modal="true"]` is not enough since this attribute
-      // and the collect of closers is done at instantation time, when nested
-      // dialogs might not have yet been instantiated. Note that if the dialogs
-      // are manually instantiated, this could still fail because none of these
-      // selectors would match; this would cause closers to close all parent
-      // dialogs instead of just the current one
-      return closer.closest('[aria-modal="true"], [data-a11y-dialog]') === $el
-    })
-    .concat($$('[data-a11y-dialog-hide="' + this._id + '"]'));
-
-  this._closers.forEach(
-    function (closer) {
-      closer.addEventListener('click', this._hide);
-    }.bind(this)
-  );
-
-  // Execute all callbacks registered for the `create` event
-  this._fire('create');
-
-  return this
-};
-
-/**
- * Show the dialog element, disable all the targets (siblings), trap the
- * current focus within it, listen for some specific key presses and fire all
- * registered callbacks for `show` event
- *
- * @param {CustomEvent} event
- * @return {this}
- */
-A11yDialog.prototype.show = function (event) {
-  // If the dialog is already open, abort
-  if (this.shown) {
-    return this
-  }
-
-  // Keep a reference to the currently focused element to be able to restore
-  // it later
-  this._previouslyFocused = document.activeElement;
-  this.$el.removeAttribute('aria-hidden');
-  this.shown = true;
-
-  // Set the focus to the dialog element
-  moveFocusToDialog(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);
-  document.addEventListener('keydown', this._bindKeypress);
-
-  // Execute all callbacks registered for the `show` event
-  this._fire('show', event);
-
-  return this
-};
-
 /**
- * Hide the dialog element, enable all the targets (siblings), restore the
- * focus to the previously active element, stop listening for some specific
- * key presses and fire all registered callbacks for `hide` event
- *
- * @param {CustomEvent} event
- * @return {this}
+ * Get the first and last focusable elements in a given tree.
  */
-A11yDialog.prototype.hide = function (event) {
-  // If the dialog is already closed, abort
-  if (!this.shown) {
-    return this
-  }
-
-  this.shown = false;
-  this.$el.setAttribute('aria-hidden', 'true');
-
-  // If there was a focused element before the dialog was opened (and it has a
-  // `focus` method), restore the focus back to it
-  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/108
-  if (this._previouslyFocused && this._previouslyFocused.focus) {
-    this._previouslyFocused.focus();
-  }
-
-  // Remove the focus event listener to the body element and stop listening
-  // for specific key presses
-  document.body.removeEventListener('focus', this._maintainFocus, true);
-  document.removeEventListener('keydown', this._bindKeypress);
-
-  // Execute all callbacks registered for the `hide` event
-  this._fire('hide', event);
-
-  return this
-};
-
-/**
- * Destroy the current instance (after making sure the dialog has been hidden)
- * and remove all associated listeners from dialog openers and closers
- *
- * @return {this}
- */
-A11yDialog.prototype.destroy = function () {
-  // Hide the dialog to avoid destroying an open instance
-  this.hide();
-
-  // Remove the click event listener from all dialog openers
-  this._openers.forEach(
-    function (opener) {
-      opener.removeEventListener('click', this._show);
-    }.bind(this)
-  );
-
-  // Remove the click event listener from all dialog closers
-  this._closers.forEach(
-    function (closer) {
-      closer.removeEventListener('click', this._hide);
-    }.bind(this)
-  );
-
-  // Execute all callbacks registered for the `destroy` event
-  this._fire('destroy');
-
-  // Keep an object of listener types mapped to callback functions
-  this._listeners = {};
-
-  return this
-};
-
-/**
- * Register a new callback for the given event type
- *
- * @param {string} type
- * @param {Function} handler
- */
-A11yDialog.prototype.on = function (type, handler) {
-  if (typeof this._listeners[type] === 'undefined') {
-    this._listeners[type] = [];
-  }
-
-  this._listeners[type].push(handler);
-
-  return this
-};
-
-/**
- * Unregister an existing callback for the given event type
- *
- * @param {string} type
- * @param {Function} handler
- */
-A11yDialog.prototype.off = function (type, handler) {
-  var index = (this._listeners[type] || []).indexOf(handler);
-
-  if (index > -1) {
-    this._listeners[type].splice(index, 1);
-  }
-
-  return this
-};
-
+function getFocusableEdges(el) {
+    // Check for a focusable element within the subtree of `el`.
+    const first = findFocusableElement(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 `last` as a reference to `first` so that
+    // the returned array is always of length 2.
+    const last = first ? findFocusableElement(el, false) || first : null;
+    return [first, last];
+}
 /**
- * Iterate over all registered handlers for given type and call them all with
- * the dialog element as first argument, event as second argument (if any). Also
- * dispatch a custom event on the DOM element itself to make it possible to
- * react to the lifecycle of auto-instantiated dialogs.
- *
- * @access private
- * @param {string} type
- * @param {CustomEvent} event
+ * Find the first focusable element inside the given node if `forward` is truthy
+ * or the last focusable element otherwise.
  */
-A11yDialog.prototype._fire = function (type, event) {
-  var listeners = this._listeners[type] || [];
-  var domEvent = new CustomEvent(type, { detail: event });
-
-  this.$el.dispatchEvent(domEvent);
-
-  listeners.forEach(
-    function (listener) {
-      listener(this.$el, event);
-    }.bind(this)
-  );
-};
-
+function findFocusableElement(node, forward) {
+    // If we’re walking forward, check if this node is focusable, and return it
+    // immediately if it is.
+    if (forward && isFocusable(node))
+        return node;
+    // We should only search the subtree of this node if it can have focusable
+    // children.
+    if (canHaveFocusableChildren(node)) {
+        // Start walking the DOM tree, looking for focusable elements.
+        // Case 1: If this node has a shadow root, search it recursively.
+        if (node.shadowRoot) {
+            // Descend into this subtree.
+            let next = getNextChildEl(node.shadowRoot, forward);
+            // Traverse siblings, searching the subtree of each one
+            // for focusable elements.
+            while (next) {
+                const focusableEl = findFocusableElement(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+        // Case 2: If this node is a slot for a Custom Element, search its assigned
+        // nodes recursively.
+        else if (node.localName === 'slot') {
+            const assignedElements = node.assignedElements({
+                flatten: true,
+            });
+            if (!forward)
+                assignedElements.reverse();
+            for (const assignedElement of assignedElements) {
+                const focusableEl = findFocusableElement(assignedElement, forward);
+                if (focusableEl)
+                    return focusableEl;
+            }
+        }
+        // Case 3: this is a regular Light DOM node. Search its subtree.
+        else {
+            // Descend into this subtree.
+            let next = getNextChildEl(node, forward);
+            // Traverse siblings, searching the subtree of each one
+            // for focusable elements.
+            while (next) {
+                const focusableEl = findFocusableElement(next, forward);
+                if (focusableEl)
+                    return focusableEl;
+                next = getNextSiblingEl(next, forward);
+            }
+        }
+    }
+    // If we’re walking backward, we want to check the node’s entire subtree
+    // before checking the node itself. If this node is focusable, return it.
+    if (!forward && isFocusable(node))
+        return node;
+    return null;
+}
+function getNextChildEl(node, forward) {
+    return forward ? node.firstElementChild : node.lastElementChild;
+}
+function getNextSiblingEl(el, forward) {
+    return forward ? el.nextElementSibling : el.previousElementSibling;
+}
 /**
- * Private event handler used when listening to some specific key presses
- * (namely ESCAPE and TAB)
- *
- * @access private
- * @param {Event} event
+ * Determine if an element is hidden from the user.
  */
-A11yDialog.prototype._bindKeypress = function (event) {
-  // This is an escape hatch in case there are nested dialogs, so the keypresses
-  // are only reacted to for the most recent one
-  const focused = document.activeElement;
-  if (focused && focused.closest('[aria-modal="true"]') !== this.$el) return
-
-  // If the dialog is shown and the ESCAPE key is being pressed, prevent any
-  // further effects from the ESCAPE key and hide the dialog, unless its role
-  // is 'alertdialog', which should be modal
-  if (
-    this.shown &&
-    event.key === ESCAPE_KEY &&
-    this.$el.getAttribute('role') !== 'alertdialog'
-  ) {
-    event.preventDefault();
-    this.hide(event);
-  }
-
-  // If the dialog is shown and the TAB key is being pressed, make sure the
-  // focus stays trapped within the dialog element
-  if (this.shown && event.key === TAB_KEY) {
-    trapTabKey(this.$el, event);
-  }
+const isHidden = (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);
 };
-
 /**
- * Private event handler used when making sure the focus stays within the
- * currently open dialog
- *
- * @access private
- * @param {Event} event
+ * Determine if an element is focusable and has user-visible painted dimensions.
  */
-A11yDialog.prototype._maintainFocus = function (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 within an element
-  // with the `data-a11y-dialog-focus-trap-ignore` attribute, move it back to
-  // its first focusable child.
-  // See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
-  if (
-    this.shown &&
-    !event.target.closest('[aria-modal="true"]') &&
-    !event.target.closest('[data-a11y-dialog-ignore-focus-trap]')
-  ) {
-    moveFocusToDialog(this.$el);
-  }
+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(el);
 };
-
-/**
- * Convert a NodeList into an array
- *
- * @param {NodeList} collection
- * @return {Array<Element>}
- */
-function toArray(collection) {
-  return Array.prototype.slice.call(collection)
-}
-
 /**
- * Query the DOM for nodes matching the given selector, scoped to context (or
- * the whole document)
- *
- * @param {String} selector
- * @param {Element} [context = document]
- * @return {Array<Element>}
+ * 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 $$(selector, context) {
-  return toArray((context || document).querySelectorAll(selector))
+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]');
 }
-
 /**
- * Set the focus to the first element with `autofocus` with the element or the
- * element itself
- *
- * @param {Element} node
+ * 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 moveFocusToDialog(node) {
-  var focused = node.querySelector('[autofocus]') || node;
-
-  focused.focus();
-}
-
-/**
- * Get the focusable children of the given element
- *
- * @param {Element} node
- * @return {Array<Element>}
- */
-function getFocusableChildren(node) {
-  return $$(focusableSelectors.join(','), node).filter(function (child) {
-    return !!(
-      child.offsetWidth ||
-      child.offsetHeight ||
-      child.getClientRects().length
-    )
-  })
+function getActiveElement(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 getActiveElement(activeEl.shadowRoot) || document.activeElement;
+    // If not, we can just return the active element
+    return activeEl;
 }
-
 /**
  * Trap the focus inside the given element
- *
- * @param {Element} node
- * @param {Event} event
  */
-function trapTabKey(node, event) {
-  var focusableChildren = getFocusableChildren(node);
-  var focusedItemIndex = focusableChildren.indexOf(document.activeElement);
+function trapTabKey(el, event) {
+    const [firstFocusableChild, lastFocusableChild] = getFocusableEdges(el);
+    // If there are no focusable children in the dialog, prevent the user from
+    // tabbing out of it
+    if (!firstFocusableChild)
+        return event.preventDefault();
+    const activeElement = getActiveElement();
+    // 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 && activeElement === firstFocusableChild) {
+        // @ts-ignore: we know that `lastFocusableChild` is not null here
+        lastFocusableChild.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 && activeElement === lastFocusableChild) {
+        firstFocusableChild.focus();
+        event.preventDefault();
+    }
+}
 
-  // If the SHIFT key is being 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 && focusedItemIndex === 0) {
-    focusableChildren[focusableChildren.length - 1].focus();
-    event.preventDefault();
-    // If the SHIFT key is not being 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 &&
-    focusedItemIndex === focusableChildren.length - 1
-  ) {
-    focusableChildren[0].focus();
-    event.preventDefault();
-  }
+class A11yDialog {
+    $el;
+    id;
+    previouslyFocused;
+    shown;
+    constructor(element) {
+        this.$el = element;
+        this.id = this.$el.getAttribute('data-a11y-dialog') || 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() {
+        // 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));
+        // Dispatch a `destroy` event
+        this.fire('destroy');
+        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;
+        // 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 = getActiveElement();
+        // 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(event);
+        }
+        else {
+            moveFocusToDialog(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);
+        // Dispatch a `show` event
+        this.fire('show', event);
+        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;
+        this.shown = false;
+        this.$el.setAttribute('aria-hidden', 'true');
+        this.previouslyFocused?.focus?.();
+        // 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);
+        // Dispatch a `hide` event
+        this.fire('hide', event);
+        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 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) {
+        this.$el.dispatchEvent(new CustomEvent(type, {
+            detail: event,
+            cancelable: true,
+        }));
+    }
+    /**
+     * Add a delegated event listener for when elememts that open or close the
+     * dialog are clicked, and call `show` or `hide`, respectively
+     */
+    handleTriggerClicks(event) {
+        const target = event.target;
+        // We use `.closest(..)` and not `.matches(..)` here so that clicking
+        // an element nested within a dialog opener does cause the dialog to open
+        if (target.closest(`[data-a11y-dialog-show="${this.id}"]`)) {
+            this.show(event);
+        }
+        if (target.closest(`[data-a11y-dialog-hide="${this.id}"]`) ||
+            (target.closest('[data-a11y-dialog-hide]') &&
+                target.closest('[aria-modal="true"]') === this.$el)) {
+            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
+        if (document.activeElement?.closest('[aria-modal="true"]') !== 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 attribute, move it
+     * back to the dialog container
+     * See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
+     */
+    maintainFocus(event) {
+        const target = event.target;
+        if (!target.closest('[aria-modal="true"], [data-a11y-dialog-ignore-focus-trap]')) {
+            moveFocusToDialog(this.$el);
+        }
+    }
 }
 
 function instantiateDialogs() {
-  $$('[data-a11y-dialog]').forEach(function (node) {
-    new A11yDialog(node);
-  });
+    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 {
-    if (window.requestAnimationFrame) {
-      window.requestAnimationFrame(instantiateDialogs);
-    } else {
-      window.setTimeout(instantiateDialogs, 16);
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', instantiateDialogs);
+    }
+    else {
+        instantiateDialogs();
     }
-  }
 }
 
 var CONTAINER_ID = "__authsignal-popup-container";
@@ -1190,16 +1234,16 @@ var DEFAULT_WIDTH = "385px";
 var INITIAL_HEIGHT = "384px";
 var PopupHandler = /** @class */ (function () {
     function PopupHandler(_a) {
-        var width = _a.width;
+        var width = _a.width, isClosable = _a.isClosable;
         this.popup = null;
         if (document.querySelector("#".concat(CONTAINER_ID))) {
             throw new Error("Multiple instances of Authsignal popup is not supported.");
         }
-        this.create({ width: width });
+        this.create({ width: width, isClosable: isClosable });
     }
     PopupHandler.prototype.create = function (_a) {
         var _this = this;
-        var _b = _a.width, width = _b === void 0 ? DEFAULT_WIDTH : _b;
+        var _b = _a.width, width = _b === void 0 ? DEFAULT_WIDTH : _b, _c = _a.isClosable, isClosable = _c === void 0 ? true : _c;
         var isWidthValidCSSValue = CSS.supports("width", width);
         var popupWidth = width;
         if (!isWidthValidCSSValue) {
@@ -1210,10 +1254,15 @@ var PopupHandler = /** @class */ (function () {
         var container = document.createElement("div");
         container.setAttribute("id", CONTAINER_ID);
         container.setAttribute("aria-hidden", "true");
+        if (!isClosable) {
+            container.setAttribute("role", "alertdialog");
+        }
         // Create dialog overlay
         var overlay = document.createElement("div");
         overlay.setAttribute("id", OVERLAY_ID);
-        overlay.setAttribute("data-a11y-dialog-hide", "true");
+        if (isClosable) {
+            overlay.setAttribute("data-a11y-dialog-hide", "true");
+        }
         // Create dialog content
         var content = document.createElement("div");
         content.setAttribute("id", CONTENT_ID);
@@ -1267,11 +1316,11 @@ var PopupHandler = /** @class */ (function () {
         }
         this.popup.hide();
     };
-    PopupHandler.prototype.on = function (event, handler) {
+    PopupHandler.prototype.on = function (event, listener) {
         if (!this.popup) {
             throw new Error("Popup is not initialized");
         }
-        this.popup.on(event, handler);
+        this.popup.on(event, listener);
     };
     return PopupHandler;
 }());
@@ -1299,7 +1348,6 @@ var Authsignal = /** @class */ (function () {
         if (!tenantId) {
             throw new Error("tenantId is required");
         }
-        this.passkey = new Passkey({ tenantId: tenantId, baseUrl: baseUrl });
         var idCookie = getCookie(this.anonymousIdCookieName);
         if (idCookie) {
             this.anonymousId = idCookie;
@@ -1314,6 +1362,7 @@ var Authsignal = /** @class */ (function () {
                 secure: document.location.protocol !== "http:"
             });
         }
+        this.passkey = new Passkey({ tenantId: tenantId, baseUrl: baseUrl, anonymousId: this.anonymousId });
     }
     Authsignal.prototype.launch = function (url, options) {
         switch (options === null || options === void 0 ? void 0 : options.mode) {
@@ -1366,7 +1415,7 @@ var Authsignal = /** @class */ (function () {
     Authsignal.prototype.launchWithPopup = function (url, options) {
         var _this = this;
         var popupOptions = options.popupOptions;
-        var popupHandler = new PopupHandler({ width: popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.width });
+        var popupHandler = new PopupHandler({ width: popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.width, isClosable: popupOptions === null || popupOptions === void 0 ? void 0 : popupOptions.isClosable });
         var popupUrl = "".concat(url, "&mode=popup");
         popupHandler.show({ url: popupUrl });
         return new Promise(function (resolve) {