inclusive-elements 0.5.5 → 0.5.7

package/dist/inclusive-elements6.js

@@ -1,13 +1,14 @@
-var u = Object.defineProperty;
-var p = (o, e, t) => e in o ? u(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var a = (o, e, t) => (p(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { createFocusTrap as f } from "focus-trap";
-import { hello as b, goodbye as m } from "hello-goodbye";
-const n = class n extends HTMLElement {
+var d = Object.defineProperty;
+var l = (n, s, t) => s in n ? d(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
+var o = (n, s, t) => (l(n, typeof s != "symbol" ? s + "" : s, t), t);
+import { createFocusTrap as p } from "focus-trap";
+import { hello as f, goodbye as m } from "hello-goodbye";
+const a = class a extends HTMLElement {
   constructor() {
     super();
-    a(this, "focusTrap");
-    a(this, "connected", !1);
+    o(this, "focusTrap");
+    o(this, "focusTrapPaused", !1);
+    o(this, "connected", !1);
     const t = document.createElement("template");
     t.innerHTML = `
             <div part="backdrop" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0"></div>
@@ -15,23 +16,34 @@ const n = class n extends HTMLElement {
         `;
     const i = this.attachShadow({ mode: "open" });
     i.appendChild(t.content.cloneNode(!0)), this.backdrop.addEventListener("click", () => {
-      var s;
-      this.hasAttribute("static") ? (s = n.attention) == null || s.call(n, i.children[1]) : this.close();
-    }), this.focusTrap = f(this, {
+      var e;
+      this.hasAttribute("static") ? (e = a.attention) == null || e.call(a, i.children[1]) : this.close();
+    }), this.focusTrap = p(this, {
       escapeDeactivates: !1,
       allowOutsideClick: !0,
       preventScroll: !0,
-      initialFocus: () => this.querySelector("[autofocus]") || void 0
+      // This runs after a delay on every activate and unpause, so the trap
+      // may be paused by then. If focus is already inside the modal (e.g.
+      // returned there by an overlay that has just closed), leave it.
+      initialFocus: () => {
+        if (this.focusTrap.paused)
+          return !1;
+        if (!this.contains(document.activeElement))
+          return this.querySelector("[autofocus]") || void 0;
+      },
+      // Content that is still loading may have nothing tabbable yet. The
+      // content element is focusable itself, so trap focus there until it does.
+      fallbackFocus: () => this.content ?? this
+    }), this.addEventListener("keydown", (e) => {
+      e.key === "Escape" && this.open && !this.focusTrapPaused && !this.focusTrap.paused && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), this.close());
     });
   }
   static get observedAttributes() {
     return ["open"];
   }
   connectedCallback() {
-    var t, i, s, c, h, l;
-    this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (i = this.content) == null || i.setAttribute("role", "dialog"), (s = this.content) != null && s.hasAttribute("aria-modal") || (c = this.content) == null || c.setAttribute("aria-modal", "true"), (h = this.content) != null && h.hasAttribute("tabindex") || (l = this.content) == null || l.setAttribute("tabindex", "-1"), this.addEventListener("keydown", (r) => {
-      r.key === "Escape" && this.open && (r.preventDefault(), r.stopPropagation(), this.close());
-    }), this.open && this.wasOpened();
+    var t, i, e, r, c, u;
+    this.connected = !0, (t = this.content) != null && t.hasAttribute("role") || (i = this.content) == null || i.setAttribute("role", "dialog"), (e = this.content) != null && e.hasAttribute("aria-modal") || (r = this.content) == null || r.setAttribute("aria-modal", "true"), (c = this.content) != null && c.hasAttribute("tabindex") || (u = this.content) == null || u.setAttribute("tabindex", "-1"), this.open && this.wasOpened();
   }
   disconnectedCallback() {
     this.connected = !1;
@@ -48,18 +60,27 @@ const n = class n extends HTMLElement {
     const t = new Event("beforeclose", { cancelable: !0 });
     this.dispatchEvent(t) && (this.open = !1);
   }
-  attributeChangedCallback(t, i, s) {
-    t !== "open" || !this.connected || (s !== null ? this.wasOpened() : this.wasClosed());
+  /**
+   * Temporarily stop trapping focus and handling Escape, so that another
+   * overlay opened from within the modal (e.g. a lightbox mounted in
+   * <body>) can manage focus itself.
+   */
+  pauseFocusTrap() {
+    this.focusTrapPaused = !0, this.focusTrap.pause();
+  }
+  resumeFocusTrap() {
+    this.focusTrapPaused = !1, this.focusTrap.unpause();
+  }
+  attributeChangedCallback(t, i, e) {
+    t !== "open" || !this.connected || (e !== null ? this.wasOpened() : this.wasClosed());
   }
   async wasOpened() {
-    document.documentElement.style.overflow = "hidden", this.hidden = !1, b(this), requestAnimationFrame(() => {
-      var t;
-      return (t = this.focusTrap) == null ? void 0 : t.activate();
+    document.documentElement.style.overflow = "hidden", this.hidden = !1, f(this), requestAnimationFrame(() => {
+      this.open && (this.focusTrap.activate(), this.focusTrapPaused ? this.focusTrap.pause() : this.focusTrap.unpause());
     }), this.dispatchEvent(new Event("open"));
   }
   wasClosed() {
-    var t;
-    document.documentElement.style.overflow = "", (t = this.focusTrap) == null || t.deactivate(), m(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
+    document.documentElement.style.overflow = "", this.focusTrap.deactivate(), this.focusTrapPaused = !1, m(this).then(() => this.hidden = !0), this.dispatchEvent(new Event("close"));
   }
   get backdrop() {
     var t;
@@ -69,7 +90,7 @@ const n = class n extends HTMLElement {
     return this.firstElementChild;
   }
 };
-a(n, "attention", (t) => t.animate(
+o(a, "attention", (t) => t.animate(
   [
     { transform: "scale(1)" },
     { transform: "scale(1.1)" },
@@ -77,7 +98,7 @@ a(n, "attention", (t) => t.animate(
   ],
   300
 ));
-let d = n;
+let h = a;
 export {
-  d as default
+  h as default
 };

package/dist/types/modal/modal.d.ts

@@ -1,7 +1,8 @@
 export default class ModalElement extends HTMLElement {
     static attention: (el: Element) => void;
     static get observedAttributes(): string[];
-    private focusTrap?;
+    private focusTrap;
+    private focusTrapPaused;
     private connected;
     constructor();
     connectedCallback(): void;
@@ -9,6 +10,13 @@ export default class ModalElement extends HTMLElement {
     get open(): boolean;
     set open(val: boolean);
     close(): void;
+    /**
+     * Temporarily stop trapping focus and handling Escape, so that another
+     * overlay opened from within the modal (e.g. a lightbox mounted in
+     * <body>) can manage focus itself.
+     */
+    pauseFocusTrap(): void;
+    resumeFocusTrap(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private wasOpened;
     private wasClosed;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inclusive-elements",
-    "version": "0.5.5",
+    "version": "0.5.7",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",