@pdanpdan/vue-keyboard-trap - npm Package Compare versions

Comparing version 1.0.19 to 1.0.20

dist/index.es.js

@@ -55,4 +55,4 @@ import * as U from "vue";
   m.dataset[r.datasetName] = "";
-  const c = m.getAttributeNames()[0];
-  return r.datasetNameSelector = `[${c}]`, r.datasetNameSelectorRovingHorizontal = `[${c}~="roving"][${c}~="horizontal"],[${c}~="roving"]:not([${c}~="vertical"])`, r.datasetNameSelectorRovingVertical = `[${c}~="roving"][${c}~="vertical"],[${c}~="roving"]:not([${c}~="horizontal"])`, r.datasetNameRow = `${r.datasetName}Row`, r.datasetNameRowSelector = (i) => `:focus,[${c}-row~="${i}"]${r.gridSkipSelector},[${c}-row~="*"]${r.gridSkipSelector}`, r.datasetNameCol = `${r.datasetName}Col`, r.datasetNameColSelector = (i) => `:focus,[${c}-col~="${i}"]${r.gridSkipSelector},[${c}-col~="*"]${r.gridSkipSelector}`, r;
+  const l = m.getAttributeNames()[0];
+  return r.datasetNameSelector = `[${l}]`, r.datasetNameSelectorRovingHorizontal = `[${l}~="roving"][${l}~="horizontal"],[${l}~="roving"]:not([${l}~="vertical"])`, r.datasetNameSelectorRovingVertical = `[${l}~="roving"][${l}~="vertical"],[${l}~="roving"]:not([${l}~="horizontal"])`, r.datasetNameRow = `${r.datasetName}Row`, r.datasetNameRowSelector = (i) => `:focus,[${l}-row~="${i}"]${r.gridSkipSelector},[${l}-row~="*"]${r.gridSkipSelector}`, r.datasetNameCol = `${r.datasetName}Col`, r.datasetNameColSelector = (i) => `:focus,[${l}-col~="${i}"]${r.gridSkipSelector},[${l}-col~="*"]${r.gridSkipSelector}`, r;
 }
@@ -63,20 +63,20 @@ function H() {
 function j(o, r = !1) {
-  const { left: a, top: m } = o.getBoundingClientRect(), c = document.elementFromPoint(a, m);
-  if (o.contains(c) === !0)
+  const { left: a, top: m } = o.getBoundingClientRect(), l = document.elementFromPoint(a, m);
+  if (o.contains(l) === !0)
     return !0;
   if (r === !0 || typeof o.scrollIntoView != "function")
-    return c === null;
+    return l === null;
   const i = [];
-  let t = o.parentElement;
-  for (; t !== null; )
-    i.push([t, t.scrollLeft, t.scrollTop]), t = t.parentElement;
+  let e = o.parentElement;
+  for (; e !== null; )
+    i.push([e, e.scrollLeft, e.scrollTop]), e = e.parentElement;
   o.scrollIntoView();
-  const T = j(o, !0);
+  const w = j(o, !0);
   for (let v = i.length - 1; v >= 0; v -= 1) {
-    const [e, n, s] = i[v];
-    e.scrollLeft = n, e.scrollTop = s;
+    const [t, s, n] = i[v];
+    t.scrollLeft = s, t.scrollTop = n;
   }
-  return T;
+  return w;
 }
-function N(o, r = H) {
+function x(o, r = H) {
   return o === null || typeof o.focus != "function" || r(o) !== !0 ? !1 : (o.focus(), o === document.activeElement);
@@ -93,7 +93,7 @@ }
 }
-let p = null;
+let b = null;
 function S(o, r) {
-  p !== o && (o !== null && (o.dataset[r.datasetNameActive] = "", o.__vKbdTrapActiveClean = () => {
+  b !== o && (o !== null && (o.dataset[r.datasetNameActive] = "", o.__vKbdTrapActiveClean = () => {
     delete o.dataset[r.datasetNameActive], o.__vKbdTrapActiveClean = void 0;
-  }), p !== null && typeof p.__vKbdTrapActiveClean == "function" && p.__vKbdTrapActiveClean(), p = o);
+  }), b !== null && typeof b.__vKbdTrapActiveClean == "function" && b.__vKbdTrapActiveClean(), b = o);
 }
@@ -105,8 +105,8 @@ function P(o) {
 function z(o, r, a, m) {
-  r === !0 ? (delete o.dataset[m.datasetName], o.tabIndex === m.trapTabIndex && o.removeAttribute("tabindex")) : (o.dataset[m.datasetName] = Object.keys(a.modifiers).filter((c) => a.modifiers[c] === !0).join(" "), o.tabIndex < 0 && o.getAttribute("tabindex") === null && o.matches("dialog") === !1 && (o.tabIndex = m.trapTabIndex));
+  r === !0 ? (delete o.dataset[m.datasetName], o.tabIndex === m.trapTabIndex && o.removeAttribute("tabindex")) : (o.dataset[m.datasetName] = Object.keys(a.modifiers).filter((l) => a.modifiers[l] === !0).join(" "), o.tabIndex < 0 && o.getAttribute("tabindex") === null && o.matches("dialog") === !1 && o.matches("[popover]") === !1 && (o.tabIndex = m.trapTabIndex));
 }
-function O(o, r) {
-  const a = W(o), m = (t, { value: T, modifiers: v }) => {
-    const e = {
-      disable: T === !1,
+function D(o, r) {
+  const a = W(o), m = (e, { value: w, modifiers: v }) => {
+    const t = {
+      disable: w === !1,
       modifiers: v,
@@ -116,113 +116,117 @@ focusTarget: null,
       bind() {
-        t.__vKbdTrap = e, t.addEventListener("keydown", e.trap), t.addEventListener("focusin", e.activate), t.addEventListener("focusout", e.deactivate), t.addEventListener("pointerdown", e.overwiteFocusTarget, { passive: !0 }), e.disable === !1 && z(t, e.disable, e, a);
+        e.__vKbdTrap = t, e.addEventListener("keydown", t.trap), e.addEventListener("focusin", t.activate), e.addEventListener("focusout", t.deactivate), e.addEventListener("pointerdown", t.overwiteFocusTarget, { passive: !0 }), t.disable === !1 && z(e, t.disable, t, a);
       },
       unbind() {
-        delete t.__vKbdTrap, t.removeEventListener("keydown", e.trap), t.removeEventListener("focusin", e.activate), t.removeEventListener("focusout", e.deactivate), t.removeEventListener("pointerdown", e.overwiteFocusTarget), z(t, !0, e, a);
+        delete e.__vKbdTrap, e.removeEventListener("keydown", t.trap), e.removeEventListener("focusin", t.activate), e.removeEventListener("focusout", t.deactivate), e.removeEventListener("pointerdown", t.overwiteFocusTarget), z(e, !0, t, a);
       },
-      activate(n) {
-        if (e.disable === !0 || n.__vKbdTrap === !0)
+      activate(s) {
+        if (t.disable === !0 || s.__vKbdTrap === !0)
           return;
-        n.__vKbdTrap = !0;
-        const s = n.relatedTarget;
-        p !== t && (s === null || s.closest(a.datasetNameSelector) !== t) && (S(t, a), e.relatedFocusTarget = s, (s === null || s.dataset[a.datasetNamePreventRefocus] === void 0 || t.contains(s) === !1) && requestAnimationFrame(() => {
-          e.refocus(e.modifiers.roving !== !0);
+        s.__vKbdTrap = !0;
+        const n = s.relatedTarget;
+        b !== e && (n === null || n.closest(a.datasetNameSelector) !== e) && (S(e, a), t.relatedFocusTarget = n, (n === null || n.dataset[a.datasetNamePreventRefocus] === void 0 || e.contains(n) === !1) && requestAnimationFrame(() => {
+          t.refocus(t.modifiers.roving !== !0);
         }));
       },
-      deactivate(n) {
-        if (e.disable === !0 || n.__vKbdTrap === !0)
+      deactivate(s) {
+        if (t.disable === !0 || s.__vKbdTrap === !0)
           return;
-        n.__vKbdTrap = !0;
-        const s = n.relatedTarget;
-        p === t && (s === null || s.closest(a.datasetNameSelector) !== t) && (e.focusTarget = n.target, S(null, a));
+        s.__vKbdTrap = !0;
+        const n = s.relatedTarget;
+        b === e && (n === null || n.closest(a.datasetNameSelector) !== e) && (t.focusTarget = s.target, S(null, a));
       },
-      trap(n) {
-        if (e.disable === !0 || n.__vKbdTrap === !0)
+      trap(s) {
+        if (t.disable === !0 || s.__vKbdTrap === !0)
           return;
-        const { code: s, shiftKey: q } = n, { activeElement: g } = document;
-        if (s === "Escape") {
-          if (n.__vKbdTrap = !0, p === t) {
-            if (e.focusTarget = g, e.modifiers.escexits === !0) {
-              S(t.parentElement === null ? null : t.parentElement.closest(a.datasetNameSelector), a);
-              const l = P(p);
-              l !== null && l.refocus();
-              return;
+        const { code: n, shiftKey: T } = s, { activeElement: g } = document;
+        if (n === "Escape") {
+          if (s.__vKbdTrap = !0, b === e) {
+            if (t.focusTarget = g, T === !0)
+              s.preventDefault();
+            else {
+              if (t.modifiers.escexits === !0) {
+                S(e.parentElement === null ? null : e.parentElement.closest(a.datasetNameSelector), a);
+                const c = P(b);
+                c !== null && c.refocus();
+                return;
+              }
+              if (t.modifiers.escrefocus === !0 && x(t.relatedFocusTarget) === !0)
+                return;
             }
-            if (e.modifiers.escrefocus === !0 && N(e.relatedFocusTarget) === !0)
-              return;
-            S(null, a);
+            const u = e.parentElement && e.parentElement.closest(a.datasetNameSelector);
+            S(u || null, a);
           } else
-            S(t, a);
+            S(e, a);
           return;
         }
-        if (p !== t)
+        if (b !== e)
           return;
-        n.__vKbdTrap = !0;
-        let f = 0, x = (l) => l, y = !1, w = !1;
-        if (e.modifiers.roving === !0) {
-          const l = g.matches(a.rovingSkipSelector);
-          if (s !== "Tab" && l === !0)
+        s.__vKbdTrap = !0;
+        let f = 0, h = (u) => u, y = !1, N = !1;
+        if (t.modifiers.roving === !0) {
+          const u = g.matches(a.rovingSkipSelector);
+          if (n !== "Tab" && u === !0)
             return;
-          if (s === "Tab")
-            l === !1 && e.modifiers.tabinside !== !0 ? (y = t.parentElement.closest(a.datasetNameSelector), y !== null && (n.__vKbdTrap = void 0), q === !0 ? (f = 1, x = (u, d) => d) : (f = -1, x = () => 0)) : f = q === !0 ? -1 : 1;
-          else if (s === "Home")
-            f = 1, x = (u, d) => d;
-          else if (s === "End")
-            f = -1, x = () => 0;
-          else if (t.parentElement !== null && (e.modifiers.vertical === !0 && e.modifiers.horizontal !== !0 && (s === "ArrowLeft" || s === "ArrowRight") || e.modifiers.horizontal === !0 && e.modifiers.vertical !== !0 && (s === "ArrowUp" || s === "ArrowDown"))) {
-            const u = t.parentElement.closest(
-              e.modifiers.vertical === !0 ? a.datasetNameSelectorRovingHorizontal : a.datasetNameSelectorRovingVertical
+          if (n === "Tab")
+            u === !1 && t.modifiers.tabinside !== !0 ? (y = e.parentElement.closest(a.datasetNameSelector), y !== null && (s.__vKbdTrap = void 0), T === !0 ? (f = 1, h = (c, d) => d) : (f = -1, h = () => 0)) : f = T === !0 ? -1 : 1;
+          else if (n === "Home")
+            f = 1, h = (c, d) => d;
+          else if (n === "End")
+            f = -1, h = () => 0;
+          else if (e.parentElement !== null && (t.modifiers.vertical === !0 && t.modifiers.horizontal !== !0 && (n === "ArrowLeft" || n === "ArrowRight") || t.modifiers.horizontal === !0 && t.modifiers.vertical !== !0 && (n === "ArrowUp" || n === "ArrowDown"))) {
+            const c = e.parentElement.closest(
+              t.modifiers.vertical === !0 ? a.datasetNameSelectorRovingHorizontal : a.datasetNameSelectorRovingVertical
             );
-            u !== null && (y = u, n.__vKbdTrap = void 0, s === (M(g, t) === !0 ? "ArrowRight" : "ArrowLeft") || s === "ArrowUp" ? (f = 1, x = (d, A) => A) : (f = -1, x = () => 0));
+            c !== null && (y = c, s.__vKbdTrap = void 0, n === (M(g, e) === !0 ? "ArrowRight" : "ArrowLeft") || n === "ArrowUp" ? (f = 1, h = (d, A) => A) : (f = -1, h = () => 0));
           } else
-            (e.modifiers.vertical === !0 || e.modifiers.horizontal !== !0) && (s === "ArrowUp" ? (f = -1, w = "v") : s === "ArrowDown" && (f = 1, w = "v")), (e.modifiers.vertical !== !0 || e.modifiers.horizontal === !0) && (s === "ArrowLeft" ? (f = -1, w = "h") : s === "ArrowRight" && (f = 1, w = "h"), f !== 0 && w === "h" && M(g, t) === !0 && (f *= -1));
-        } else
-          s === "Tab" && (f = q === !0 ? -1 : 1);
+            (t.modifiers.vertical === !0 || t.modifiers.horizontal !== !0) && (n === "ArrowUp" ? (f = -1, N = "v") : n === "ArrowDown" && (f = 1, N = "v")), (t.modifiers.vertical !== !0 || t.modifiers.horizontal === !0) && (n === "ArrowLeft" ? (f = -1, N = "h") : n === "ArrowRight" && (f = 1, N = "h"), f !== 0 && N === "h" && M(g, e) === !0 && (f *= -1));
+        } else n === "Tab" && (f = T === !0 ? -1 : 1);
         if (f === 0)
           return;
-        y === !1 ? n.preventDefault() : (e.focusTarget = g, e.focusTarget.dataset[a.datasetNamePreventRefocus] = "", requestAnimationFrame(() => {
-          e.focusTarget && delete e.focusTarget.dataset[a.datasetNamePreventRefocus];
+        y === !1 ? s.preventDefault() : (t.focusTarget = g, t.focusTarget.dataset[a.datasetNamePreventRefocus] = "", requestAnimationFrame(() => {
+          t.focusTarget && delete t.focusTarget.dataset[a.datasetNamePreventRefocus];
         }));
-        let b = [];
-        if (w !== !1) {
-          let l;
-          if (e.modifiers.grid === !0) {
-            const u = I(g.dataset[a.datasetNameRow]), d = I(g.dataset[a.datasetNameCol]), A = w === "v" ? a.datasetNameColSelector(d) : a.datasetNameRowSelector(u);
-            b = Array.from(t.querySelectorAll(A)), l = new WeakMap(
-              b.map((R) => {
-                const _ = I(R.dataset[a.datasetNameRow]), $ = I(R.dataset[a.datasetNameCol]);
-                let E;
-                return w === "v" ? (_ !== u || $ === d) && (E = 1e3 * _ + 1 * $) : ($ !== d || _ === u) && (E = 1e3 * $ + 1 * _), [R, E];
+        let p = [];
+        if (N !== !1) {
+          let u;
+          if (t.modifiers.grid === !0) {
+            const c = I(g.dataset[a.datasetNameRow]), d = I(g.dataset[a.datasetNameCol]), A = N === "v" ? a.datasetNameColSelector(d) : a.datasetNameRowSelector(c);
+            p = Array.from(e.querySelectorAll(A)), u = new WeakMap(
+              p.map((R) => {
+                const _ = I(R.dataset[a.datasetNameRow]), E = I(R.dataset[a.datasetNameCol]);
+                let C;
+                return N === "v" ? (_ !== c || E === d) && (C = 1e3 * _ + 1 * E) : (E !== d || _ === c) && (C = 1e3 * E + 1 * _), [R, C];
               })
             );
-          } else if (t.matches('[role="grid"]') === !0 && g.matches('[role="row"] [role="gridcell"]')) {
-            const u = Array.from(t.querySelectorAll('[role="row"]')), d = /* @__PURE__ */ new WeakMap(), A = u.map((L, F) => {
-              const K = Array.from(L.querySelectorAll('[role="gridcell"]'));
-              return K.forEach((k, D) => {
-                d.set(k, [F + 1, D + 1]);
+          } else if (e.matches('[role="grid"]') === !0 && g.matches('[role="row"] [role="gridcell"]')) {
+            const c = Array.from(e.querySelectorAll('[role="row"]')), d = /* @__PURE__ */ new WeakMap(), A = c.map((F, q) => {
+              const K = Array.from(F.querySelectorAll('[role="gridcell"]'));
+              return K.forEach((k, V) => {
+                d.set(k, [q + 1, V + 1]);
               }), K;
-            }), R = g.closest('[role="row"]'), _ = u.indexOf(R) + 1, $ = A[_ - 1].indexOf(g) + 1, { focusableSelector: E } = a;
-            b = Array.from(t.querySelectorAll(E)), l = new WeakMap(
-              b.map((L) => {
-                const [F, K] = d.get(L) || [null, null];
+            }), R = g.closest('[role="row"]'), _ = c.indexOf(R) + 1, E = A[_ - 1].indexOf(g) + 1, { focusableSelector: C } = a;
+            p = Array.from(e.querySelectorAll(C)), u = new WeakMap(
+              p.map((F) => {
+                const [q, K] = d.get(F) || [null, null];
                 let k;
-                return w === "v" ? K === $ && (k = 1 * F) : F === _ && (k = 1 * K), [L, k];
+                return N === "v" ? K === E && (k = 1 * q) : q === _ && (k = 1 * K), [F, k];
               })
             );
           }
-          l !== void 0 && (b = b.filter((u) => l.get(u) !== void 0), b.sort((u, d) => l.get(u) - l.get(d)));
+          u !== void 0 && (p = p.filter((c) => u.get(c) !== void 0), p.sort((c, d) => u.get(c) - u.get(d)));
         }
-        if (b.length === 0) {
-          const { focusableSelector: l } = a;
-          if (b = Array.from(t.querySelectorAll(l)), v.indexorder === !0) {
-            const u = new WeakMap(
-              b.map((d) => [d, Math.max(d.tabIndex || 0, 0)])
+        if (p.length === 0) {
+          const { focusableSelector: u } = a;
+          if (p = Array.from(e.querySelectorAll(u)), v.indexorder === !0) {
+            const c = new WeakMap(
+              p.map((d) => [d, Math.max(d.tabIndex || 0, 0)])
             );
-            b.sort((d, A) => u.get(d) - u.get(A));
+            p.sort((d, A) => c.get(d) - c.get(A));
           }
-          t.matches(l) && b.unshift(t);
+          e.matches(u) && p.unshift(e);
         }
-        const C = b.length - 1;
-        let h = x(b.indexOf(g), C);
-        for (let l = 0; l < C; l += 1)
-          if (h += f, h < 0 ? h = C : h > C && (h = 0), N(b[h]) === !0) {
+        const L = p.length - 1;
+        let $ = h(p.indexOf(g), L);
+        for (let u = 0; u < L; u += 1)
+          if ($ += f, $ < 0 ? $ = L : $ > L && ($ = 0), x(p[$]) === !0) {
             y !== !1 && S(y, a);
@@ -232,25 +236,34 @@ return;
       },
-      overwiteFocusTarget(n) {
-        e.disable === !1 && n.__vKbdTrap !== !0 && (n.__vKbdTrap = !0, e.focusTarget = n.target);
+      overwiteFocusTarget(s) {
+        t.disable === !1 && s.__vKbdTrap !== !0 && (s.__vKbdTrap = !0, t.focusTarget = s.target);
       },
-      refocus(n) {
-        return e.disable === !1 && p === t && e.focusTarget && e.focusTarget.closest(a.datasetNameSelector) === t ? e.focusTarget.tabIndex === a.trapTabIndex || e.focusTarget.matches("dialog") === !0 ? e.modifiers.autofocus === !0 && N(t.querySelector(a.autofocusSelector)) === !0 || N(t.querySelector(a.focusableSelector)) === !0 || N(e.focusTarget) === !0 : n === !0 ? !1 : N(e.focusTarget) === !0 || N(t.querySelector(a.focusableSelector)) === !0 : !1;
+      refocus(s) {
+        if (t.disable === !1 && b === e && t.focusTarget) {
+          let n = t.focusTarget.closest(a.datasetNameSelector);
+          for (; n && n !== e; ) {
+            const T = P(n);
+            if (T !== null && T.disable === !1 && T.focusTarget)
+              return S(n, a), T.refocus(s !== void 0 ? T.modifiers.roving !== !0 : void 0);
+            n = n.parentElement && n.parentElement.closest(a.datasetNameSelector);
+          }
+          return t.focusTarget.tabIndex === a.trapTabIndex || t.focusTarget.matches("dialog") === !0 || t.focusTarget.matches("[popover]") === !0 ? t.modifiers.autofocus === !0 && x(e.querySelector(a.autofocusSelector)) === !0 || x(e.querySelector(a.focusableSelector)) === !0 || x(t.focusTarget) === !0 : s === !0 ? !1 : x(t.focusTarget) === !0 || x(e.querySelector(a.focusableSelector)) === !0;
+        }
+        return !1;
       },
       autofocus() {
         requestAnimationFrame(() => {
-          e.disable === !1 && N(t.querySelector(a.autofocusSelector), j) === !1 && N(t.querySelector(a.focusableSelector), j);
+          t.disable === !1 && x(e.querySelector(a.autofocusSelector), j) === !1 && x(e.querySelector(a.focusableSelector), j);
         });
       }
     };
-    e.bind(), v.autofocus === !0 && e.autofocus();
-  }, c = (t, { value: T, modifiers: v }) => {
-    const e = P(t);
-    if (e !== null) {
-      const n = T === !1;
-      e.modifiers = v, z(t, n, e, a), p === t && (n === !0 ? S(null, a) : t.dataset[a.datasetNameActive] = ""), e.disable !== n && (e.disable = n, v.autofocus === !0 ? e.autofocus() : n === !1 && p !== t && t.contains(document.activeElement) === !0 && S(t, a));
-    } else
-      r !== void 0 ? m(t, { value: T, modifiers: v }) : p === t && S(null, a);
-  }, i = (t) => {
-    const T = P(t);
-    T !== null && T.unbind(), p === t && S(null, a);
+    t.bind(), v.autofocus === !0 && t.autofocus();
+  }, l = (e, { value: w, modifiers: v }) => {
+    const t = P(e);
+    if (t !== null) {
+      const s = w === !1;
+      t.modifiers = v, z(e, s, t, a), b === e && (s === !0 ? S(null, a) : e.dataset[a.datasetNameActive] = ""), t.disable !== s && (t.disable = s, v.autofocus === !0 ? t.autofocus() : s === !1 && b !== e && e.contains(document.activeElement) === !0 && S(e, a));
+    } else r !== void 0 ? m(e, { value: w, modifiers: v }) : b === e && S(null, a);
+  }, i = (e) => {
+    const w = P(e);
+    w !== null && w.unbind(), b === e && S(null, a);
   };
@@ -261,3 +274,3 @@ return r !== void 0 ? r({
       beforeMount: m,
-      updated: c,
+      updated: l,
       unmounted: i,
@@ -271,3 +284,3 @@ getSSRProps() {
       bind: m,
-      update: c,
+      update: l,
       unbind: i
@@ -277,8 +290,8 @@ }
 }
-const { markRaw: G, version: J } = U, V = J.indexOf("2.") === 0 ? void 0 : G, Q = {
+const { markRaw: G, version: J } = U, O = J.indexOf("2.") === 0 ? void 0 : G, Q = {
   install(o, r) {
-    const { name: a, directive: m } = O(r, V);
+    const { name: a, directive: m } = D(r, O);
     o.directive(a, m);
   }
-}, X = (o) => O(o, V);
+}, X = (o) => D(o, O);
 export {
@@ -285,0 +298,0 @@ X as VueKeyboardTrapDirectiveFactory,

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(S,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],R):(S=typeof globalThis<"u"?globalThis:S||self,R(S.VueKeyboardTrap={},S.Vue))})(this,function(S,R){"use strict";function H(o){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const u=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(r,a,u.get?u:{enumerable:!0,get:()=>o[a]})}}return r.default=o,Object.freeze(r)}const B=H(R);function G(o){const r={name:"kbd-trap",focusableSelector:[":focus"].concat(["a[href]","area[href]","audio[controls]","video[controls]","iframe","[tabindex]:not(slot)",'[contenteditable]:not([contenteditable="false"])',"details > summary:first-of-type"].map(s=>`${s}:not([tabindex^="-"])`)).concat(['input:not([type="hidden"]):not(fieldset[disabled] input)',"select:not(fieldset[disabled] select)","textarea:not(fieldset[disabled] textarea)","button:not(fieldset[disabled] button)",'[class*="focusable"]'].map(s=>`${s}:not([disabled]):not([tabindex^="-"])`)).concat(['input:not([type="hidden"])',"select","textarea","button"].map(s=>`fieldset[disabled]:not(fieldset[disabled] fieldset) > legend ${s}:not([disabled]):not([tabindex^="-"])`)).join(","),rovingSkipSelector:['input:not([disabled]):not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"])',"select:not([disabled])","select:not([disabled]) *","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[contenteditable]:not([contenteditable="false"]) *'].join(","),gridSkipSelector:[":not([disabled])",':not([tabindex^="-"])'].join(""),autofocusSelector:['[autofocus]:not([autofocus="false"])','[data-autofocus]:not([data-autofocus="false"])'].map(s=>`${s}:not([disabled])`).join(","),trapTabIndex:-9999,...o},a=r.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter(s=>s.length>0).map(s=>`${s[0].toLocaleUpperCase()}${s.slice(1)}`).join("");if(r.datasetName===void 0&&(r.datasetName=`v${a}`),r.datasetNameActive=`${r.datasetName}Active`,r.datasetNamePreventRefocus=`${r.datasetName}PreventRefocus`,typeof window>"u")return r;const u=document.createElement("span");u.dataset[r.datasetName]="";const c=u.getAttributeNames()[0];return r.datasetNameSelector=`[${c}]`,r.datasetNameSelectorRovingHorizontal=`[${c}~="roving"][${c}~="horizontal"],[${c}~="roving"]:not([${c}~="vertical"])`,r.datasetNameSelectorRovingVertical=`[${c}~="roving"][${c}~="vertical"],[${c}~="roving"]:not([${c}~="horizontal"])`,r.datasetNameRow=`${r.datasetName}Row`,r.datasetNameRowSelector=s=>`:focus,[${c}-row~="${s}"]${r.gridSkipSelector},[${c}-row~="*"]${r.gridSkipSelector}`,r.datasetNameCol=`${r.datasetName}Col`,r.datasetNameColSelector=s=>`:focus,[${c}-col~="${s}"]${r.gridSkipSelector},[${c}-col~="*"]${r.gridSkipSelector}`,r}function J(){return!0}function P(o,r=!1){const{left:a,top:u}=o.getBoundingClientRect(),c=document.elementFromPoint(a,u);if(o.contains(c)===!0)return!0;if(r===!0||typeof o.scrollIntoView!="function")return c===null;const s=[];let t=o.parentElement;for(;t!==null;)s.push([t,t.scrollLeft,t.scrollTop]),t=t.parentElement;o.scrollIntoView();const w=P(o,!0);for(let v=s.length-1;v>=0;v-=1){const[e,n,i]=s[v];e.scrollLeft=n,e.scrollTop=i}return w}function y(o,r=J){return o===null||typeof o.focus!="function"||r(o)!==!0?!1:(o.focus(),o===document.activeElement)}const Q=/(\d+)/;function F(o){const r=Q.exec(o);return r===null?"":r[1]}function z(o,r){const a=(o&&o!==r&&o.parentElement||r).closest('[dir="rtl"],[dir="ltr"]');return a&&a.matches('[dir="rtl"]')}let b=null;function T(o,r){b!==o&&(o!==null&&(o.dataset[r.datasetNameActive]="",o.__vKbdTrapActiveClean=()=>{delete o.dataset[r.datasetNameActive],o.__vKbdTrapActiveClean=void 0}),b!==null&&typeof b.__vKbdTrapActiveClean=="function"&&b.__vKbdTrapActiveClean(),b=o)}function O(o){const r=(o||{}).__vKbdTrap;return r===Object(r)?r:null}function M(o,r,a,u){r===!0?(delete o.dataset[u.datasetName],o.tabIndex===u.trapTabIndex&&o.removeAttribute("tabindex")):(o.dataset[u.datasetName]=Object.keys(a.modifiers).filter(c=>a.modifiers[c]===!0).join(" "),o.tabIndex<0&&o.getAttribute("tabindex")===null&&o.matches("dialog")===!1&&(o.tabIndex=u.trapTabIndex))}function D(o,r){const a=G(o),u=(t,{value:w,modifiers:v})=>{const e={disable:w===!1,modifiers:v,focusTarget:null,relatedFocusTarget:null,bind(){t.__vKbdTrap=e,t.addEventListener("keydown",e.trap),t.addEventListener("focusin",e.activate),t.addEventListener("focusout",e.deactivate),t.addEventListener("pointerdown",e.overwiteFocusTarget,{passive:!0}),e.disable===!1&&M(t,e.disable,e,a)},unbind(){delete t.__vKbdTrap,t.removeEventListener("keydown",e.trap),t.removeEventListener("focusin",e.activate),t.removeEventListener("focusout",e.deactivate),t.removeEventListener("pointerdown",e.overwiteFocusTarget),M(t,!0,e,a)},activate(n){if(e.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;b!==t&&(i===null||i.closest(a.datasetNameSelector)!==t)&&(T(t,a),e.relatedFocusTarget=i,(i===null||i.dataset[a.datasetNamePreventRefocus]===void 0||t.contains(i)===!1)&&requestAnimationFrame(()=>{e.refocus(e.modifiers.roving!==!0)}))},deactivate(n){if(e.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;b===t&&(i===null||i.closest(a.datasetNameSelector)!==t)&&(e.focusTarget=n.target,T(null,a))},trap(n){if(e.disable===!0||n.__vKbdTrap===!0)return;const{code:i,shiftKey:V}=n,{activeElement:g}=document;if(i==="Escape"){if(n.__vKbdTrap=!0,b===t){if(e.focusTarget=g,e.modifiers.escexits===!0){T(t.parentElement===null?null:t.parentElement.closest(a.datasetNameSelector),a);const l=O(b);l!==null&&l.refocus();return}if(e.modifiers.escrefocus===!0&&y(e.relatedFocusTarget)===!0)return;T(null,a)}else T(t,a);return}if(b!==t)return;n.__vKbdTrap=!0;let m=0,N=l=>l,A=!1,_=!1;if(e.modifiers.roving===!0){const l=g.matches(a.rovingSkipSelector);if(i!=="Tab"&&l===!0)return;if(i==="Tab")l===!1&&e.modifiers.tabinside!==!0?(A=t.parentElement.closest(a.datasetNameSelector),A!==null&&(n.__vKbdTrap=void 0),V===!0?(m=1,N=(d,f)=>f):(m=-1,N=()=>0)):m=V===!0?-1:1;else if(i==="Home")m=1,N=(d,f)=>f;else if(i==="End")m=-1,N=()=>0;else if(t.parentElement!==null&&(e.modifiers.vertical===!0&&e.modifiers.horizontal!==!0&&(i==="ArrowLeft"||i==="ArrowRight")||e.modifiers.horizontal===!0&&e.modifiers.vertical!==!0&&(i==="ArrowUp"||i==="ArrowDown"))){const d=t.parentElement.closest(e.modifiers.vertical===!0?a.datasetNameSelectorRovingHorizontal:a.datasetNameSelectorRovingVertical);d!==null&&(A=d,n.__vKbdTrap=void 0,i===(z(g,t)===!0?"ArrowRight":"ArrowLeft")||i==="ArrowUp"?(m=1,N=(f,h)=>h):(m=-1,N=()=>0))}else(e.modifiers.vertical===!0||e.modifiers.horizontal!==!0)&&(i==="ArrowUp"?(m=-1,_="v"):i==="ArrowDown"&&(m=1,_="v")),(e.modifiers.vertical!==!0||e.modifiers.horizontal===!0)&&(i==="ArrowLeft"?(m=-1,_="h"):i==="ArrowRight"&&(m=1,_="h"),m!==0&&_==="h"&&z(g,t)===!0&&(m*=-1))}else i==="Tab"&&(m=V===!0?-1:1);if(m===0)return;A===!1?n.preventDefault():(e.focusTarget=g,e.focusTarget.dataset[a.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{e.focusTarget&&delete e.focusTarget.dataset[a.datasetNamePreventRefocus]}));let p=[];if(_!==!1){let l;if(e.modifiers.grid===!0){const d=F(g.dataset[a.datasetNameRow]),f=F(g.dataset[a.datasetNameCol]),h=_==="v"?a.datasetNameColSelector(f):a.datasetNameRowSelector(d);p=Array.from(t.querySelectorAll(h)),l=new WeakMap(p.map(k=>{const x=F(k.dataset[a.datasetNameRow]),K=F(k.dataset[a.datasetNameCol]);let E;return _==="v"?(x!==d||K===f)&&(E=1e3*x+1*K):(K!==f||x===d)&&(E=1e3*K+1*x),[k,E]}))}else if(t.matches('[role="grid"]')===!0&&g.matches('[role="row"] [role="gridcell"]')){const d=Array.from(t.querySelectorAll('[role="row"]')),f=new WeakMap,h=d.map((q,I)=>{const C=Array.from(q.querySelectorAll('[role="gridcell"]'));return C.forEach((L,ee)=>{f.set(L,[I+1,ee+1])}),C}),k=g.closest('[role="row"]'),x=d.indexOf(k)+1,K=h[x-1].indexOf(g)+1,{focusableSelector:E}=a;p=Array.from(t.querySelectorAll(E)),l=new WeakMap(p.map(q=>{const[I,C]=f.get(q)||[null,null];let L;return _==="v"?C===K&&(L=1*I):I===x&&(L=1*C),[q,L]}))}l!==void 0&&(p=p.filter(d=>l.get(d)!==void 0),p.sort((d,f)=>l.get(d)-l.get(f)))}if(p.length===0){const{focusableSelector:l}=a;if(p=Array.from(t.querySelectorAll(l)),v.indexorder===!0){const d=new WeakMap(p.map(f=>[f,Math.max(f.tabIndex||0,0)]));p.sort((f,h)=>d.get(f)-d.get(h))}t.matches(l)&&p.unshift(t)}const j=p.length-1;let $=N(p.indexOf(g),j);for(let l=0;l<j;l+=1)if($+=m,$<0?$=j:$>j&&($=0),y(p[$])===!0){A!==!1&&T(A,a);return}},overwiteFocusTarget(n){e.disable===!1&&n.__vKbdTrap!==!0&&(n.__vKbdTrap=!0,e.focusTarget=n.target)},refocus(n){return e.disable===!1&&b===t&&e.focusTarget&&e.focusTarget.closest(a.datasetNameSelector)===t?e.focusTarget.tabIndex===a.trapTabIndex||e.focusTarget.matches("dialog")===!0?e.modifiers.autofocus===!0&&y(t.querySelector(a.autofocusSelector))===!0||y(t.querySelector(a.focusableSelector))===!0||y(e.focusTarget)===!0:n===!0?!1:y(e.focusTarget)===!0||y(t.querySelector(a.focusableSelector))===!0:!1},autofocus(){requestAnimationFrame(()=>{e.disable===!1&&y(t.querySelector(a.autofocusSelector),P)===!1&&y(t.querySelector(a.focusableSelector),P)})}};e.bind(),v.autofocus===!0&&e.autofocus()},c=(t,{value:w,modifiers:v})=>{const e=O(t);if(e!==null){const n=w===!1;e.modifiers=v,M(t,n,e,a),b===t&&(n===!0?T(null,a):t.dataset[a.datasetNameActive]=""),e.disable!==n&&(e.disable=n,v.autofocus===!0?e.autofocus():n===!1&&b!==t&&t.contains(document.activeElement)===!0&&T(t,a))}else r!==void 0?u(t,{value:w,modifiers:v}):b===t&&T(null,a)},s=t=>{const w=O(t);w!==null&&w.unbind(),b===t&&T(null,a)};return r!==void 0?r({name:a.name,directive:{beforeMount:u,updated:c,unmounted:s,getSSRProps(){}}}):{name:a.name,directive:{bind:u,update:c,unbind:s}}}const{markRaw:X,version:Y}=B,U=Y.indexOf("2.")===0?void 0:X,W={install(o,r){const{name:a,directive:u}=D(r,U);o.directive(a,u)}},Z=o=>D(o,U);S.VueKeyboardTrapDirectiveFactory=Z,S.VueKeyboardTrapDirectivePlugin=W,S.default=W,Object.defineProperties(S,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(y,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],R):(y=typeof globalThis<"u"?globalThis:y||self,R(y.VueKeyboardTrap={},y.Vue))})(this,function(y,R){"use strict";function H(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const d=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(a,r,d.get?d:{enumerable:!0,get:()=>o[r]})}}return a.default=o,Object.freeze(a)}const B=H(R);function G(o){const a={name:"kbd-trap",focusableSelector:[":focus"].concat(["a[href]","area[href]","audio[controls]","video[controls]","iframe","[tabindex]:not(slot)",'[contenteditable]:not([contenteditable="false"])',"details > summary:first-of-type"].map(s=>`${s}:not([tabindex^="-"])`)).concat(['input:not([type="hidden"]):not(fieldset[disabled] input)',"select:not(fieldset[disabled] select)","textarea:not(fieldset[disabled] textarea)","button:not(fieldset[disabled] button)",'[class*="focusable"]'].map(s=>`${s}:not([disabled]):not([tabindex^="-"])`)).concat(['input:not([type="hidden"])',"select","textarea","button"].map(s=>`fieldset[disabled]:not(fieldset[disabled] fieldset) > legend ${s}:not([disabled]):not([tabindex^="-"])`)).join(","),rovingSkipSelector:['input:not([disabled]):not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"])',"select:not([disabled])","select:not([disabled]) *","textarea:not([disabled])",'[contenteditable]:not([contenteditable="false"])','[contenteditable]:not([contenteditable="false"]) *'].join(","),gridSkipSelector:[":not([disabled])",':not([tabindex^="-"])'].join(""),autofocusSelector:['[autofocus]:not([autofocus="false"])','[data-autofocus]:not([data-autofocus="false"])'].map(s=>`${s}:not([disabled])`).join(","),trapTabIndex:-9999,...o},r=a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter(s=>s.length>0).map(s=>`${s[0].toLocaleUpperCase()}${s.slice(1)}`).join("");if(a.datasetName===void 0&&(a.datasetName=`v${r}`),a.datasetNameActive=`${a.datasetName}Active`,a.datasetNamePreventRefocus=`${a.datasetName}PreventRefocus`,typeof window>"u")return a;const d=document.createElement("span");d.dataset[a.datasetName]="";const c=d.getAttributeNames()[0];return a.datasetNameSelector=`[${c}]`,a.datasetNameSelectorRovingHorizontal=`[${c}~="roving"][${c}~="horizontal"],[${c}~="roving"]:not([${c}~="vertical"])`,a.datasetNameSelectorRovingVertical=`[${c}~="roving"][${c}~="vertical"],[${c}~="roving"]:not([${c}~="horizontal"])`,a.datasetNameRow=`${a.datasetName}Row`,a.datasetNameRowSelector=s=>`:focus,[${c}-row~="${s}"]${a.gridSkipSelector},[${c}-row~="*"]${a.gridSkipSelector}`,a.datasetNameCol=`${a.datasetName}Col`,a.datasetNameColSelector=s=>`:focus,[${c}-col~="${s}"]${a.gridSkipSelector},[${c}-col~="*"]${a.gridSkipSelector}`,a}function J(){return!0}function D(o,a=!1){const{left:r,top:d}=o.getBoundingClientRect(),c=document.elementFromPoint(r,d);if(o.contains(c)===!0)return!0;if(a===!0||typeof o.scrollIntoView!="function")return c===null;const s=[];let e=o.parentElement;for(;e!==null;)s.push([e,e.scrollLeft,e.scrollTop]),e=e.parentElement;o.scrollIntoView();const N=D(o,!0);for(let g=s.length-1;g>=0;g-=1){const[t,i,n]=s[g];t.scrollLeft=i,t.scrollTop=n}return N}function w(o,a=J){return o===null||typeof o.focus!="function"||a(o)!==!0?!1:(o.focus(),o===document.activeElement)}const Q=/(\d+)/;function j(o){const a=Q.exec(o);return a===null?"":a[1]}function V(o,a){const r=(o&&o!==a&&o.parentElement||a).closest('[dir="rtl"],[dir="ltr"]');return r&&r.matches('[dir="rtl"]')}let p=null;function v(o,a){p!==o&&(o!==null&&(o.dataset[a.datasetNameActive]="",o.__vKbdTrapActiveClean=()=>{delete o.dataset[a.datasetNameActive],o.__vKbdTrapActiveClean=void 0}),p!==null&&typeof p.__vKbdTrapActiveClean=="function"&&p.__vKbdTrapActiveClean(),p=o)}function q(o){const a=(o||{}).__vKbdTrap;return a===Object(a)?a:null}function M(o,a,r,d){a===!0?(delete o.dataset[d.datasetName],o.tabIndex===d.trapTabIndex&&o.removeAttribute("tabindex")):(o.dataset[d.datasetName]=Object.keys(r.modifiers).filter(c=>r.modifiers[c]===!0).join(" "),o.tabIndex<0&&o.getAttribute("tabindex")===null&&o.matches("dialog")===!1&&o.matches("[popover]")===!1&&(o.tabIndex=d.trapTabIndex))}function z(o,a){const r=G(o),d=(e,{value:N,modifiers:g})=>{const t={disable:N===!1,modifiers:g,focusTarget:null,relatedFocusTarget:null,bind(){e.__vKbdTrap=t,e.addEventListener("keydown",t.trap),e.addEventListener("focusin",t.activate),e.addEventListener("focusout",t.deactivate),e.addEventListener("pointerdown",t.overwiteFocusTarget,{passive:!0}),t.disable===!1&&M(e,t.disable,t,r)},unbind(){delete e.__vKbdTrap,e.removeEventListener("keydown",t.trap),e.removeEventListener("focusin",t.activate),e.removeEventListener("focusout",t.deactivate),e.removeEventListener("pointerdown",t.overwiteFocusTarget),M(e,!0,t,r)},activate(i){if(t.disable===!0||i.__vKbdTrap===!0)return;i.__vKbdTrap=!0;const n=i.relatedTarget;p!==e&&(n===null||n.closest(r.datasetNameSelector)!==e)&&(v(e,r),t.relatedFocusTarget=n,(n===null||n.dataset[r.datasetNamePreventRefocus]===void 0||e.contains(n)===!1)&&requestAnimationFrame(()=>{t.refocus(t.modifiers.roving!==!0)}))},deactivate(i){if(t.disable===!0||i.__vKbdTrap===!0)return;i.__vKbdTrap=!0;const n=i.relatedTarget;p===e&&(n===null||n.closest(r.datasetNameSelector)!==e)&&(t.focusTarget=i.target,v(null,r))},trap(i){if(t.disable===!0||i.__vKbdTrap===!0)return;const{code:n,shiftKey:S}=i,{activeElement:T}=document;if(n==="Escape"){if(i.__vKbdTrap=!0,p===e){if(t.focusTarget=T,S===!0)i.preventDefault();else{if(t.modifiers.escexits===!0){v(e.parentElement===null?null:e.parentElement.closest(r.datasetNameSelector),r);const l=q(p);l!==null&&l.refocus();return}if(t.modifiers.escrefocus===!0&&w(t.relatedFocusTarget)===!0)return}const u=e.parentElement&&e.parentElement.closest(r.datasetNameSelector);v(u||null,r)}else v(e,r);return}if(p!==e)return;i.__vKbdTrap=!0;let m=0,h=u=>u,$=!1,_=!1;if(t.modifiers.roving===!0){const u=T.matches(r.rovingSkipSelector);if(n!=="Tab"&&u===!0)return;if(n==="Tab")u===!1&&t.modifiers.tabinside!==!0?($=e.parentElement.closest(r.datasetNameSelector),$!==null&&(i.__vKbdTrap=void 0),S===!0?(m=1,h=(l,f)=>f):(m=-1,h=()=>0)):m=S===!0?-1:1;else if(n==="Home")m=1,h=(l,f)=>f;else if(n==="End")m=-1,h=()=>0;else if(e.parentElement!==null&&(t.modifiers.vertical===!0&&t.modifiers.horizontal!==!0&&(n==="ArrowLeft"||n==="ArrowRight")||t.modifiers.horizontal===!0&&t.modifiers.vertical!==!0&&(n==="ArrowUp"||n==="ArrowDown"))){const l=e.parentElement.closest(t.modifiers.vertical===!0?r.datasetNameSelectorRovingHorizontal:r.datasetNameSelectorRovingVertical);l!==null&&($=l,i.__vKbdTrap=void 0,n===(V(T,e)===!0?"ArrowRight":"ArrowLeft")||n==="ArrowUp"?(m=1,h=(f,x)=>x):(m=-1,h=()=>0))}else(t.modifiers.vertical===!0||t.modifiers.horizontal!==!0)&&(n==="ArrowUp"?(m=-1,_="v"):n==="ArrowDown"&&(m=1,_="v")),(t.modifiers.vertical!==!0||t.modifiers.horizontal===!0)&&(n==="ArrowLeft"?(m=-1,_="h"):n==="ArrowRight"&&(m=1,_="h"),m!==0&&_==="h"&&V(T,e)===!0&&(m*=-1))}else n==="Tab"&&(m=S===!0?-1:1);if(m===0)return;$===!1?i.preventDefault():(t.focusTarget=T,t.focusTarget.dataset[r.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{t.focusTarget&&delete t.focusTarget.dataset[r.datasetNamePreventRefocus]}));let b=[];if(_!==!1){let u;if(t.modifiers.grid===!0){const l=j(T.dataset[r.datasetNameRow]),f=j(T.dataset[r.datasetNameCol]),x=_==="v"?r.datasetNameColSelector(f):r.datasetNameRowSelector(l);b=Array.from(e.querySelectorAll(x)),u=new WeakMap(b.map(k=>{const A=j(k.dataset[r.datasetNameRow]),K=j(k.dataset[r.datasetNameCol]);let C;return _==="v"?(A!==l||K===f)&&(C=1e3*A+1*K):(K!==f||A===l)&&(C=1e3*K+1*A),[k,C]}))}else if(e.matches('[role="grid"]')===!0&&T.matches('[role="row"] [role="gridcell"]')){const l=Array.from(e.querySelectorAll('[role="row"]')),f=new WeakMap,x=l.map((I,O)=>{const L=Array.from(I.querySelectorAll('[role="gridcell"]'));return L.forEach((F,ee)=>{f.set(F,[O+1,ee+1])}),L}),k=T.closest('[role="row"]'),A=l.indexOf(k)+1,K=x[A-1].indexOf(T)+1,{focusableSelector:C}=r;b=Array.from(e.querySelectorAll(C)),u=new WeakMap(b.map(I=>{const[O,L]=f.get(I)||[null,null];let F;return _==="v"?L===K&&(F=1*O):O===A&&(F=1*L),[I,F]}))}u!==void 0&&(b=b.filter(l=>u.get(l)!==void 0),b.sort((l,f)=>u.get(l)-u.get(f)))}if(b.length===0){const{focusableSelector:u}=r;if(b=Array.from(e.querySelectorAll(u)),g.indexorder===!0){const l=new WeakMap(b.map(f=>[f,Math.max(f.tabIndex||0,0)]));b.sort((f,x)=>l.get(f)-l.get(x))}e.matches(u)&&b.unshift(e)}const P=b.length-1;let E=h(b.indexOf(T),P);for(let u=0;u<P;u+=1)if(E+=m,E<0?E=P:E>P&&(E=0),w(b[E])===!0){$!==!1&&v($,r);return}},overwiteFocusTarget(i){t.disable===!1&&i.__vKbdTrap!==!0&&(i.__vKbdTrap=!0,t.focusTarget=i.target)},refocus(i){if(t.disable===!1&&p===e&&t.focusTarget){let n=t.focusTarget.closest(r.datasetNameSelector);for(;n&&n!==e;){const S=q(n);if(S!==null&&S.disable===!1&&S.focusTarget)return v(n,r),S.refocus(i!==void 0?S.modifiers.roving!==!0:void 0);n=n.parentElement&&n.parentElement.closest(r.datasetNameSelector)}return t.focusTarget.tabIndex===r.trapTabIndex||t.focusTarget.matches("dialog")===!0||t.focusTarget.matches("[popover]")===!0?t.modifiers.autofocus===!0&&w(e.querySelector(r.autofocusSelector))===!0||w(e.querySelector(r.focusableSelector))===!0||w(t.focusTarget)===!0:i===!0?!1:w(t.focusTarget)===!0||w(e.querySelector(r.focusableSelector))===!0}return!1},autofocus(){requestAnimationFrame(()=>{t.disable===!1&&w(e.querySelector(r.autofocusSelector),D)===!1&&w(e.querySelector(r.focusableSelector),D)})}};t.bind(),g.autofocus===!0&&t.autofocus()},c=(e,{value:N,modifiers:g})=>{const t=q(e);if(t!==null){const i=N===!1;t.modifiers=g,M(e,i,t,r),p===e&&(i===!0?v(null,r):e.dataset[r.datasetNameActive]=""),t.disable!==i&&(t.disable=i,g.autofocus===!0?t.autofocus():i===!1&&p!==e&&e.contains(document.activeElement)===!0&&v(e,r))}else a!==void 0?d(e,{value:N,modifiers:g}):p===e&&v(null,r)},s=e=>{const N=q(e);N!==null&&N.unbind(),p===e&&v(null,r)};return a!==void 0?a({name:r.name,directive:{beforeMount:d,updated:c,unmounted:s,getSSRProps(){}}}):{name:r.name,directive:{bind:d,update:c,unbind:s}}}const{markRaw:X,version:Y}=B,U=Y.indexOf("2.")===0?void 0:X,W={install(o,a){const{name:r,directive:d}=z(a,U);o.directive(r,d)}},Z=o=>z(o,U);y.VueKeyboardTrapDirectiveFactory=Z,y.VueKeyboardTrapDirectivePlugin=W,y.default=W,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "@pdanpdan/vue-keyboard-trap",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Vue3 and Vue2 directive for keyboard navigation - roving movement and trapping inside container",
@@ -75,24 +75,24 @@ "productName": "Vue Keyboard Trap",
     "build": "vite build --config ./vite.src.config.js",
-    "prepublishOnly": "yarn lint && yarn build"
+    "prepublishOnly": "pnpm lint && pnpm build"
   },
   "peerDependencies": {
-    "vue": "^3.0.0 || ^2.0.0"
+    "vue": ">=2.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.3.4",
-    "eslint": "^8.50.0",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-vue": "^9.17.0",
-    "flexsearch": "^0.7.31",
-    "markdown-it": "^13.0.1",
-    "sass": "^1.68.0",
-    "vite": "^4.4.9",
-    "vitepress": "^1.0.0-rc.20",
-    "vue": "^3.3.4"
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "flexsearch": "^0.7.43",
+    "markdown-it": "^14.1.0",
+    "sass": "^1.78.0",
+    "vite": "^5.4.6",
+    "vitepress": "1.3.4",
+    "vue": "^3.5.6"
   },
   "engines": {
-    "node": ">= 12.22.0 || >= 14.19.0 || >= 16.14.0",
-    "yarn": ">= 1.22.0"
-  }
+    "node": ">= 12.22.0"
+  },
+  "packageManager": "pnpm@9.10.0"
 }

README.md

@@ -8,4 +8,3 @@ # VueKeyboardTrap (vue-keyboard-trap)
 ![npm release](https://img.shields.io/npm/v/@pdanpdan/vue-keyboard-trap?style=for-the-badge)  
-![npm downloads](https://img.shields.io/npm/dm/@pdanpdan/vue-keyboard-trap?style=for-the-badge)  
-[![Featured on Openbase](https://badges.openbase.com/js/featured/@pdanpdan/vue-keyboard-trap.svg?style=for-the-badge&token=U3YQZMmWy6J/QT2oYy4qFYmtcOEWBZ1c4xZTbpYg+/U=)](https://openbase.com/js/@pdanpdan/vue-keyboard-trap?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
+![npm downloads](https://img.shields.io/npm/dm/@pdanpdan/vue-keyboard-trap?style=for-the-badge)
 
@@ -27,2 +26,6 @@ ## Project description
 ```bash
+pnpm add @pdanpdan/vue-keyboard-trap
+```
+or
+```bash
 yarn add @pdanpdan/vue-keyboard-trap
@@ -203,3 +206,3 @@ ```
 
-If you want you can access the SASS cosmetic style (user hints) from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass).
+If you want you can access the CSS cosmetic style (user hints) from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.css](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.css).
 
@@ -305,2 +308,3 @@ ### Directive configuration options
   - if `.escrefocus` modifier is used then refocus the last focusable element that was active before the current trap group got focus
+  - if `.escexits` or `.escrefocus` are used then press `SHIFT + ESC` to disable / enable the current tab group
 - `HOME` / `END` when `.roving` modifier is used
@@ -353,4 +357,6 @@ - move to first / last focusable element in the current trap group
 
-A default style is provided in `dist/styles/index.sass` (can be imported as `import '@pdapdan/vue-keyboard-trap/styles'`, as `import '@pdapdan/vue-keyboard-trap/dist/styles/index.sass'` (if the bundler does not use the `/styles` export) or included from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass)).
+A default style is provided as SASS in `dist/styles/index.sass` (can be imported as `import '@pdapdan/vue-keyboard-trap/styles'`, as `import '@pdapdan/vue-keyboard-trap/dist/styles/index.sass'` (if the bundler does not use the `/styles` export) or included from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.sass)).
 
+The default style is also provided as CSS in `dist/styles/index.css` (can be imported as `import '@pdapdan/vue-keyboard-trap/dist/styles/index.css'` or included from [https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.css](https://cdn.jsdelivr.net/gh/pdanpdan/vue-keyboard-trap/dist/styles/index.css)).
+
 There are some CSS variables that can be used to customize the aspect of the hints:
@@ -384,3 +390,3 @@
 ```bash
-yarn
+pnpm i
 ```
@@ -391,3 +397,3 @@
 ```bash
-yarn dev
+pnpm dev
 ```
@@ -398,3 +404,3 @@
 ```bash
-yarn lint
+pnpm lint
 ```
@@ -405,3 +411,3 @@
 ```bash
-yarn build
+pnpm build
 ```
@@ -408,0 +414,0 @@

src/directives/keyboard-trap/directive.js

@@ -76,3 +76,3 @@ import { createConfig } from './options';
 
-    if (el.tabIndex < 0 && el.getAttribute('tabindex') === null && el.matches('dialog') === false) {
+    if (el.tabIndex < 0 && el.getAttribute('tabindex') === null && el.matches('dialog') === false && el.matches('[popover]') === false) {
       el.tabIndex = config.trapTabIndex;
@@ -183,19 +183,24 @@ }
 
-            if (ctx.modifiers.escexits === true) {
-              setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector), config);
+            if (shiftKey === true) {
+              ev.preventDefault();
+            } else {
+              if (ctx.modifiers.escexits === true) {
+                setActiveTrapEl(el.parentElement === null ? null : el.parentElement.closest(config.datasetNameSelector), config);
 
-              const newCtx = getCtx(activeTrapEl);
+                const newCtx = getCtx(activeTrapEl);
 
-              if (newCtx !== null) {
-                newCtx.refocus();
+                if (newCtx !== null) {
+                  newCtx.refocus();
+                }
+
+                return;
               }
 
-              return;
+              if (ctx.modifiers.escrefocus === true && focus(ctx.relatedFocusTarget) === true) {
+                return;
+              }
             }
 
-            if (ctx.modifiers.escrefocus === true && focus(ctx.relatedFocusTarget) === true) {
-              return;
-            }
-
-            setActiveTrapEl(null, config);
+            const trapEl = el.parentElement && el.parentElement.closest(config.datasetNameSelector);
+            setActiveTrapEl(trapEl || null, config);
           } else {
@@ -454,5 +459,17 @@ setActiveTrapEl(el, config);
           && ctx.focusTarget
-          && ctx.focusTarget.closest(config.datasetNameSelector) === el
         ) {
-          if (ctx.focusTarget.tabIndex === config.trapTabIndex || ctx.focusTarget.matches('dialog') === true) {
+          let trapEl = ctx.focusTarget.closest(config.datasetNameSelector);
+
+          while (trapEl && trapEl !== el) {
+            const newCtx = getCtx(trapEl);
+
+            if (newCtx !== null && newCtx.disable === false && newCtx.focusTarget) {
+              setActiveTrapEl(trapEl, config);
+              return newCtx.refocus(onlyIfTrapEl !== undefined ? newCtx.modifiers.roving !== true : undefined);
+            }
+
+            trapEl = trapEl.parentElement && trapEl.parentElement.closest(config.datasetNameSelector);
+          }
+
+          if (ctx.focusTarget.tabIndex === config.trapTabIndex || ctx.focusTarget.matches('dialog') === true || ctx.focusTarget.matches('[popover]') === true) {
             return (ctx.modifiers.autofocus === true && focus(el.querySelector(config.autofocusSelector)) === true)
@@ -459,0 +476,0 @@ || focus(el.querySelector(config.focusableSelector)) === true

No alert changes

Improved metrics

Total package byte prevSize

199698

increased by5.33%

Lines of code

1312

increased by4.88%

Number of lines in readme file

422

increased by1.44%

No dependency changes