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

Comparing version 1.0.15 to 1.0.16

dist/index.es.js

@@ -5,15 +5,29 @@ import * as U from "vue";
     name: "kbd-trap",
-    focusableSelector: [
-      ":focus",
-      'a[href]:not([tabindex^="-"])',
-      'area[href]:not([tabindex^="-"])',
-      'input:not([disabled]):not([tabindex^="-"])',
-      'select:not([disabled]):not([tabindex^="-"])',
-      'textarea:not([disabled]):not([tabindex^="-"])',
-      'button:not([disabled]):not([tabindex^="-"])',
-      'iframe:not([tabindex^="-"])',
-      '[tabindex]:not([tabindex^="-"])',
-      '[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"])',
-      '[class*="focusable"]:not([disabled]):not([tabindex^="-"])'
-    ].join(","),
+    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((i) => `${i}: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((i) => `${i}:not([disabled]):not([tabindex^="-"])`)
+    ).concat(
+      [
+        'input:not([type="hidden"])',
+        "select",
+        "textarea",
+        "button"
+      ].map((i) => `fieldset[disabled]:not(fieldset[disabled] fieldset) > legend ${i}:not([disabled]):not([tabindex^="-"])`)
+    ).join(","),
     rovingSkipSelector: [
@@ -32,14 +46,14 @@ 'input:not([disabled]):not([type="button"]):not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"])',
     autofocusSelector: [
-      '[autofocus]:not([disabled]):not([autofocus="false"])',
-      '[data-autofocus]:not([disabled]):not([data-autofocus="false"])'
-    ].join(","),
+      '[autofocus]:not([autofocus="false"])',
+      '[data-autofocus]:not([data-autofocus="false"])'
+    ].map((i) => `${i}:not([disabled])`).join(","),
     trapTabIndex: -9999,
     ...o
-  }, r = a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter((f) => f.length > 0).map((f) => `${f[0].toLocaleUpperCase()}${f.slice(1)}`).join("");
+  }, r = a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter((i) => i.length > 0).map((i) => `${i[0].toLocaleUpperCase()}${i.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 s = d.getAttributeNames()[0];
-  return a.datasetNameSelector = `[${s}]`, a.datasetNameSelectorRovingHorizontal = `[${s}~="roving"][${s}~="horizontal"],[${s}~="roving"]:not([${s}~="vertical"])`, a.datasetNameSelectorRovingVertical = `[${s}~="roving"][${s}~="vertical"],[${s}~="roving"]:not([${s}~="horizontal"])`, a.datasetNameRow = `${a.datasetName}Row`, a.datasetNameRowSelector = (f) => `:focus,[${s}-row~="${f}"]${a.gridSkipSelector},[${s}-row~="*"]${a.gridSkipSelector}`, a.datasetNameCol = `${a.datasetName}Col`, a.datasetNameColSelector = (f) => `:focus,[${s}-col~="${f}"]${a.gridSkipSelector},[${s}-col~="*"]${a.gridSkipSelector}`, a;
+  const f = document.createElement("span");
+  f.dataset[a.datasetName] = "";
+  const c = f.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 = (i) => `:focus,[${c}-row~="${i}"]${a.gridSkipSelector},[${c}-row~="*"]${a.gridSkipSelector}`, a.datasetNameCol = `${a.datasetName}Col`, a.datasetNameColSelector = (i) => `:focus,[${c}-col~="${i}"]${a.gridSkipSelector},[${c}-col~="*"]${a.gridSkipSelector}`, a;
 }
@@ -50,19 +64,20 @@ function H() {
 function j(o, a = !1) {
-  const { left: r, top: d } = o.getBoundingClientRect(), s = document.elementFromPoint(r, d);
-  if (s === null && a !== !0 && typeof o.scrollIntoView == "function") {
-    const f = [];
-    let T = o.parentElement;
-    for (; T !== null; )
-      f.push([T, T.scrollLeft, T.scrollTop]), T = T.parentElement;
-    o.scrollIntoView();
-    const L = j(o, !0);
-    for (let y = f.length - 1; y >= 0; y -= 1) {
-      const [e, b, g] = f[y];
-      e.scrollLeft = b, e.scrollTop = g;
-    }
-    return L;
+  const { left: r, top: f } = o.getBoundingClientRect(), c = document.elementFromPoint(r, f);
+  if (o.contains(c) === !0)
+    return !0;
+  if (a === !0 || typeof o.scrollIntoView != "function")
+    return c === null;
+  const i = [];
+  let T = o.parentElement;
+  for (; T !== null; )
+    i.push([T, T.scrollLeft, T.scrollTop]), T = T.parentElement;
+  o.scrollIntoView();
+  const L = j(o, !0);
+  for (let _ = i.length - 1; _ >= 0; _ -= 1) {
+    const [e, b, g] = i[_];
+    e.scrollLeft = b, e.scrollTop = g;
   }
-  return s === null || o.contains(s) === !0;
+  return L;
 }
-function w(o, a = H) {
+function x(o, a = H) {
   return o === null || typeof o.focus != "function" || a(o) !== !0 ? !1 : (o.focus(), o === document.activeElement);
@@ -81,10 +96,10 @@ }
 function O(o, a) {
-  const r = W(o), d = (e) => {
+  const r = W(o), f = (e) => {
     v !== e && (e !== null && (e.dataset[r.datasetNameActive] = "", e.__vKbdTrapActiveClean = () => {
       delete e.dataset[r.datasetNameActive], e.__vKbdTrapActiveClean = void 0;
     }), v !== null && typeof v.__vKbdTrapActiveClean == "function" && v.__vKbdTrapActiveClean(), v = e);
-  }, s = (e) => {
+  }, c = (e) => {
     const b = (e || {}).__vKbdTrap;
     return b === Object(b) ? b : null;
-  }, f = (e, b, g) => {
+  }, i = (e, b, g) => {
     b === !0 ? (delete e.dataset[r.datasetName], e.tabIndex === r.trapTabIndex && e.removeAttribute("tabindex")) : (e.dataset[r.datasetName] = Object.keys(g.modifiers).filter((t) => g.modifiers[t] === !0).join(" "), e.tabIndex < 0 && e.getAttribute("tabindex") === null && (e.tabIndex = r.trapTabIndex));
@@ -98,6 +113,6 @@ }, T = (e, { value: b, modifiers: g }) => {
       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 && f(e, t.disable, t);
+        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 && i(e, t.disable, t);
       },
       unbind() {
-        delete e.__vKbdTrap, e.removeEventListener("keydown", t.trap), e.removeEventListener("focusin", t.activate), e.removeEventListener("focusout", t.deactivate), e.removeEventListener("pointerdown", t.overwiteFocusTarget), f(e, !0, t);
+        delete e.__vKbdTrap, e.removeEventListener("keydown", t.trap), e.removeEventListener("focusin", t.activate), e.removeEventListener("focusout", t.deactivate), e.removeEventListener("pointerdown", t.overwiteFocusTarget), i(e, !0, t);
       },
@@ -108,4 +123,4 @@ activate(n) {
         n.__vKbdTrap = !0;
-        const i = n.relatedTarget;
-        v !== e && (i === null || i.closest(r.datasetNameSelector) !== e) && (d(e), t.relatedFocusTarget = i, (i === null || i.dataset[r.datasetNamePreventRefocus] === void 0 || e.contains(i) === !1) && requestAnimationFrame(() => {
+        const s = n.relatedTarget;
+        v !== e && (s === null || s.closest(r.datasetNameSelector) !== e) && (f(e), t.relatedFocusTarget = s, (s === null || s.dataset[r.datasetNamePreventRefocus] === void 0 || e.contains(s) === !1) && requestAnimationFrame(() => {
           t.refocus(t.modifiers.roving !== !0);
@@ -118,4 +133,4 @@ }));
         n.__vKbdTrap = !0;
-        const i = n.relatedTarget;
-        v === e && (i === null || i.closest(r.datasetNameSelector) !== e) && (t.focusTarget = n.target, d(null));
+        const s = n.relatedTarget;
+        v === e && (s === null || s.closest(r.datasetNameSelector) !== e) && (t.focusTarget = n.target, f(null));
       },
@@ -125,16 +140,16 @@ trap(n) {
           return;
-        const { code: i, shiftKey: z } = n, { activeElement: S } = document;
-        if (i === "Escape") {
+        const { code: s, shiftKey: z } = n, { activeElement: S } = document;
+        if (s === "Escape") {
           if (n.__vKbdTrap = !0, v === e) {
             if (t.focusTarget = S, t.modifiers.escexits === !0) {
-              d(e.parentElement === null ? null : e.parentElement.closest(r.datasetNameSelector));
-              const c = s(v);
-              c !== null && c.refocus();
+              f(e.parentElement === null ? null : e.parentElement.closest(r.datasetNameSelector));
+              const l = c(v);
+              l !== null && l.refocus();
               return;
             }
-            if (t.modifiers.escrefocus === !0 && w(t.relatedFocusTarget) === !0)
+            if (t.modifiers.escrefocus === !0 && x(t.relatedFocusTarget) === !0)
               return;
-            d(null);
+            f(null);
           } else
-            d(e);
+            f(e);
           return;
@@ -145,22 +160,22 @@ }
         n.__vKbdTrap = !0;
-        let m = 0, N = (c) => c, h = !1, x = !1;
+        let m = 0, N = (l) => l, h = !1, w = !1;
         if (t.modifiers.roving === !0) {
-          const c = S.matches(r.rovingSkipSelector);
-          if (i !== "Tab" && c === !0)
+          const l = S.matches(r.rovingSkipSelector);
+          if (s !== "Tab" && l === !0)
             return;
-          if (i === "Tab")
-            c === !1 && t.modifiers.tabinside !== !0 ? (h = !0, z === !0 ? (m = 1, N = (l, u) => u) : (m = -1, N = () => 0)) : m = z === !0 ? -1 : 1;
-          else if (i === "Home")
-            m = 1, N = (l, u) => u;
-          else if (i === "End")
+          if (s === "Tab")
+            l === !1 && t.modifiers.tabinside !== !0 ? (h = !0, z === !0 ? (m = 1, N = (u, d) => d) : (m = -1, N = () => 0)) : m = z === !0 ? -1 : 1;
+          else if (s === "Home")
+            m = 1, N = (u, d) => d;
+          else if (s === "End")
             m = -1, N = () => 0;
-          else if (e.parentElement !== null && (t.modifiers.vertical === !0 && t.modifiers.horizontal !== !0 && (i === "ArrowLeft" || i === "ArrowRight") || t.modifiers.horizontal === !0 && t.modifiers.vertical !== !0 && (i === "ArrowUp" || i === "ArrowDown"))) {
-            const l = e.parentElement.closest(
+          else if (e.parentElement !== null && (t.modifiers.vertical === !0 && t.modifiers.horizontal !== !0 && (s === "ArrowLeft" || s === "ArrowRight") || t.modifiers.horizontal === !0 && t.modifiers.vertical !== !0 && (s === "ArrowUp" || s === "ArrowDown"))) {
+            const u = e.parentElement.closest(
               t.modifiers.vertical === !0 ? r.datasetNameSelectorRovingHorizontal : r.datasetNameSelectorRovingVertical
             );
-            l !== null && (h = l, n.__vKbdTrap = void 0, i === (M(S, e) === !0 ? "ArrowRight" : "ArrowLeft") || i === "ArrowUp" ? (m = 1, N = (u, A) => A) : (m = -1, N = () => 0));
+            u !== null && (h = u, n.__vKbdTrap = void 0, s === (M(S, e) === !0 ? "ArrowRight" : "ArrowLeft") || s === "ArrowUp" ? (m = 1, N = (d, A) => A) : (m = -1, N = () => 0));
           } else
-            (t.modifiers.vertical === !0 || t.modifiers.horizontal !== !0) && (i === "ArrowUp" ? (m = -1, x = "v") : i === "ArrowDown" && (m = 1, x = "v")), (t.modifiers.vertical !== !0 || t.modifiers.horizontal === !0) && (i === "ArrowLeft" ? (m = -1, x = "h") : i === "ArrowRight" && (m = 1, x = "h"), m !== 0 && x === "h" && M(S, e) === !0 && (m *= -1));
+            (t.modifiers.vertical === !0 || t.modifiers.horizontal !== !0) && (s === "ArrowUp" ? (m = -1, w = "v") : s === "ArrowDown" && (m = 1, w = "v")), (t.modifiers.vertical !== !0 || t.modifiers.horizontal === !0) && (s === "ArrowLeft" ? (m = -1, w = "h") : s === "ArrowRight" && (m = 1, w = "h"), m !== 0 && w === "h" && M(S, e) === !0 && (m *= -1));
         } else
-          i === "Tab" && (m = z === !0 ? -1 : 1);
+          s === "Tab" && (m = z === !0 ? -1 : 1);
         if (m === 0)
@@ -172,45 +187,45 @@ return;
         let p = [];
-        if (x !== !1) {
-          let c;
+        if (w !== !1) {
+          let l;
           if (t.modifiers.grid === !0) {
-            const l = P(S.dataset[r.datasetNameRow]), u = P(S.dataset[r.datasetNameCol]), A = x === "v" ? r.datasetNameColSelector(u) : r.datasetNameRowSelector(l);
-            p = Array.from(e.querySelectorAll(A)), c = new WeakMap(
+            const u = P(S.dataset[r.datasetNameRow]), d = P(S.dataset[r.datasetNameCol]), A = w === "v" ? r.datasetNameColSelector(d) : r.datasetNameRowSelector(u);
+            p = Array.from(e.querySelectorAll(A)), l = new WeakMap(
               p.map((k) => {
-                const _ = P(k.dataset[r.datasetNameRow]), R = P(k.dataset[r.datasetNameCol]);
+                const y = P(k.dataset[r.datasetNameRow]), R = P(k.dataset[r.datasetNameCol]);
                 let C;
-                return x === "v" ? (_ !== l || R === u) && (C = 1e3 * _ + 1 * R) : (R !== u || _ === l) && (C = 1e3 * R + 1 * _), [k, C];
+                return w === "v" ? (y !== u || R === d) && (C = 1e3 * y + 1 * R) : (R !== d || y === u) && (C = 1e3 * R + 1 * y), [k, C];
               })
             );
           } else if (e.matches('[role="grid"]') === !0 && S.matches('[role="row"] [role="gridcell"]')) {
-            const l = Array.from(e.querySelectorAll('[role="row"]')), u = /* @__PURE__ */ new WeakMap(), A = l.map((I, q) => {
+            const u = Array.from(e.querySelectorAll('[role="row"]')), d = /* @__PURE__ */ new WeakMap(), A = u.map((I, q) => {
               const K = Array.from(I.querySelectorAll('[role="gridcell"]'));
               return K.forEach((E, D) => {
-                u.set(E, [q + 1, D + 1]);
+                d.set(E, [q + 1, D + 1]);
               }), K;
-            }), k = S.closest('[role="row"]'), _ = l.indexOf(k) + 1, R = A[_ - 1].indexOf(S) + 1, { focusableSelector: C } = r;
-            p = Array.from(e.querySelectorAll(C)), c = new WeakMap(
+            }), k = S.closest('[role="row"]'), y = u.indexOf(k) + 1, R = A[y - 1].indexOf(S) + 1, { focusableSelector: C } = r;
+            p = Array.from(e.querySelectorAll(C)), l = new WeakMap(
               p.map((I) => {
-                const [q, K] = u.get(I) || [null, null];
+                const [q, K] = d.get(I) || [null, null];
                 let E;
-                return x === "v" ? K === R && (E = 1 * q) : q === _ && (E = 1 * K), [I, E];
+                return w === "v" ? K === R && (E = 1 * q) : q === y && (E = 1 * K), [I, E];
               })
             );
           }
-          c !== void 0 && (p = p.filter((l) => c.get(l) !== void 0), p.sort((l, u) => c.get(l) - c.get(u)));
+          l !== void 0 && (p = p.filter((u) => l.get(u) !== void 0), p.sort((u, d) => l.get(u) - l.get(d)));
         }
         if (p.length === 0) {
-          const { focusableSelector: c } = r;
-          if (p = Array.from(e.querySelectorAll(c)), g.indexorder === !0) {
-            const l = new WeakMap(
-              p.map((u) => [u, Math.max(u.tabIndex || 0, 0)])
+          const { focusableSelector: l } = r;
+          if (p = Array.from(e.querySelectorAll(l)), g.indexorder === !0) {
+            const u = new WeakMap(
+              p.map((d) => [d, Math.max(d.tabIndex || 0, 0)])
             );
-            p.sort((u, A) => l.get(u) - l.get(A));
+            p.sort((d, A) => u.get(d) - u.get(A));
           }
-          e.matches(c) && p.unshift(e);
+          e.matches(l) && p.unshift(e);
         }
         const F = p.length - 1;
         let $ = N(p.indexOf(S), F);
-        for (let c = 0; c < F; c += 1)
-          if ($ += m, $ < 0 ? $ = F : $ > F && ($ = 0), w(p[$]) === !0) {
-            h !== !1 && d(h === !0 ? null : h);
+        for (let l = 0; l < F; l += 1)
+          if ($ += m, $ < 0 ? $ = F : $ > F && ($ = 0), x(p[$]) === !0) {
+            h !== !1 && f(h === !0 ? null : h);
             return;
@@ -223,7 +238,7 @@ }
       refocus(n) {
-        return t.disable === !1 && v === e && t.focusTarget && t.focusTarget.closest(r.datasetNameSelector) === e ? t.focusTarget.tabIndex === r.trapTabIndex ? t.modifiers.autofocus === !0 && w(e.querySelector(r.autofocusSelector)) === !0 || w(e.querySelector(r.focusableSelector)) === !0 || w(t.focusTarget) === !0 : n === !0 ? !1 : w(t.focusTarget) === !0 || w(e.querySelector(r.focusableSelector)) === !0 : !1;
+        return t.disable === !1 && v === e && t.focusTarget && t.focusTarget.closest(r.datasetNameSelector) === e ? t.focusTarget.tabIndex === r.trapTabIndex ? t.modifiers.autofocus === !0 && x(e.querySelector(r.autofocusSelector)) === !0 || x(e.querySelector(r.focusableSelector)) === !0 || x(t.focusTarget) === !0 : n === !0 ? !1 : x(t.focusTarget) === !0 || x(e.querySelector(r.focusableSelector)) === !0 : !1;
       },
       autofocus() {
         requestAnimationFrame(() => {
-          t.disable === !1 && w(e.querySelector(r.autofocusSelector), j) === !1 && w(e.querySelector(r.focusableSelector), j);
+          t.disable === !1 && x(e.querySelector(r.autofocusSelector), j) === !1 && x(e.querySelector(r.focusableSelector), j);
         });
@@ -234,11 +249,11 @@ }
   }, L = (e, { value: b, modifiers: g }) => {
-    const t = s(e);
+    const t = c(e);
     if (t !== null) {
       const n = b === !1;
-      t.modifiers = g, f(e, n, t), v === e && (n === !0 ? d(null) : e.dataset[r.datasetNameActive] = ""), t.disable !== n && (t.disable = n, g.autofocus === !0 && t.autofocus());
+      t.modifiers = g, i(e, n, t), v === e && (n === !0 ? f(null) : e.dataset[r.datasetNameActive] = ""), t.disable !== n && (t.disable = n, g.autofocus === !0 && t.autofocus());
     } else
-      a !== void 0 ? T(e, { value: b, modifiers: g }) : v === e && d(null);
-  }, y = (e) => {
-    const b = s(e);
-    b !== null && b.unbind(), v === e && d(null);
+      a !== void 0 ? T(e, { value: b, modifiers: g }) : v === e && f(null);
+  }, _ = (e) => {
+    const b = c(e);
+    b !== null && b.unbind(), v === e && f(null);
   };
@@ -250,3 +265,3 @@ return a !== void 0 ? a({
       updated: L,
-      unmounted: y,
+      unmounted: _,
       getSSRProps() {
@@ -260,3 +275,3 @@ }
       update: L,
-      unbind: y
+      unbind: _
     }
@@ -267,4 +282,4 @@ };
   install(o, a) {
-    const { name: r, directive: d } = O(a, V);
-    o.directive(r, d);
+    const { name: r, directive: f } = O(a, V);
+    o.directive(r, f);
   }
@@ -271,0 +286,0 @@ }, X = (o) => O(o, V);

dist/index.umd.js

@@ -1,2 +0,2 @@
-(function(x,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],k):(x=typeof globalThis<"u"?globalThis:x||self,k(x.VueKeyboardTrap={},x.Vue))})(this,function(x,k){"use strict";function H(o){if(o&&o.__esModule)return o;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(a,r,u.get?u:{enumerable:!0,get:()=>o[r]})}}return a.default=o,Object.freeze(a)}const B=H(k);function G(o){const a={name:"kbd-trap",focusableSelector:[":focus",'a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"])','[class*="focusable"]: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([disabled]):not([autofocus="false"])','[data-autofocus]:not([disabled]):not([data-autofocus="false"])'].join(","),trapTabIndex:-9999,...o},r=a.name.toLocaleLowerCase().split(/[^a-z0-9]+/).filter(f=>f.length>0).map(f=>`${f[0].toLocaleUpperCase()}${f.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 u=document.createElement("span");u.dataset[a.datasetName]="";const s=u.getAttributeNames()[0];return a.datasetNameSelector=`[${s}]`,a.datasetNameSelectorRovingHorizontal=`[${s}~="roving"][${s}~="horizontal"],[${s}~="roving"]:not([${s}~="vertical"])`,a.datasetNameSelectorRovingVertical=`[${s}~="roving"][${s}~="vertical"],[${s}~="roving"]:not([${s}~="horizontal"])`,a.datasetNameRow=`${a.datasetName}Row`,a.datasetNameRowSelector=f=>`:focus,[${s}-row~="${f}"]${a.gridSkipSelector},[${s}-row~="*"]${a.gridSkipSelector}`,a.datasetNameCol=`${a.datasetName}Col`,a.datasetNameColSelector=f=>`:focus,[${s}-col~="${f}"]${a.gridSkipSelector},[${s}-col~="*"]${a.gridSkipSelector}`,a}function J(){return!0}function M(o,a=!1){const{left:r,top:u}=o.getBoundingClientRect(),s=document.elementFromPoint(r,u);if(s===null&&a!==!0&&typeof o.scrollIntoView=="function"){const f=[];let S=o.parentElement;for(;S!==null;)f.push([S,S.scrollLeft,S.scrollTop]),S=S.parentElement;o.scrollIntoView();const q=M(o,!0);for(let h=f.length-1;h>=0;h-=1){const[e,m,g]=f[h];e.scrollLeft=m,e.scrollTop=g}return q}return s===null||o.contains(s)===!0}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 z(o,a){const r=(o&&o!==a&&o.parentElement||a).closest('[dir="rtl"],[dir="ltr"]');return r&&r.matches('[dir="rtl"]')}let v=null;function D(o,a){const r=G(o),u=e=>{v!==e&&(e!==null&&(e.dataset[r.datasetNameActive]="",e.__vKbdTrapActiveClean=()=>{delete e.dataset[r.datasetNameActive],e.__vKbdTrapActiveClean=void 0}),v!==null&&typeof v.__vKbdTrapActiveClean=="function"&&v.__vKbdTrapActiveClean(),v=e)},s=e=>{const m=(e||{}).__vKbdTrap;return m===Object(m)?m:null},f=(e,m,g)=>{m===!0?(delete e.dataset[r.datasetName],e.tabIndex===r.trapTabIndex&&e.removeAttribute("tabindex")):(e.dataset[r.datasetName]=Object.keys(g.modifiers).filter(t=>g.modifiers[t]===!0).join(" "),e.tabIndex<0&&e.getAttribute("tabindex")===null&&(e.tabIndex=r.trapTabIndex))},S=(e,{value:m,modifiers:g})=>{const t={disable:m===!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&&f(e,t.disable,t)},unbind(){delete e.__vKbdTrap,e.removeEventListener("keydown",t.trap),e.removeEventListener("focusin",t.activate),e.removeEventListener("focusout",t.deactivate),e.removeEventListener("pointerdown",t.overwiteFocusTarget),f(e,!0,t)},activate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v!==e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(u(e),t.relatedFocusTarget=i,(i===null||i.dataset[r.datasetNamePreventRefocus]===void 0||e.contains(i)===!1)&&requestAnimationFrame(()=>{t.refocus(t.modifiers.roving!==!0)}))},deactivate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v===e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(t.focusTarget=n.target,u(null))},trap(n){if(t.disable===!0||n.__vKbdTrap===!0)return;const{code:i,shiftKey:V}=n,{activeElement:T}=document;if(i==="Escape"){if(n.__vKbdTrap=!0,v===e){if(t.focusTarget=T,t.modifiers.escexits===!0){u(e.parentElement===null?null:e.parentElement.closest(r.datasetNameSelector));const c=s(v);c!==null&&c.refocus();return}if(t.modifiers.escrefocus===!0&&w(t.relatedFocusTarget)===!0)return;u(null)}else u(e);return}if(v!==e)return;n.__vKbdTrap=!0;let b=0,_=c=>c,$=!1,y=!1;if(t.modifiers.roving===!0){const c=T.matches(r.rovingSkipSelector);if(i!=="Tab"&&c===!0)return;if(i==="Tab")c===!1&&t.modifiers.tabinside!==!0?($=!0,V===!0?(b=1,_=(l,d)=>d):(b=-1,_=()=>0)):b=V===!0?-1:1;else if(i==="Home")b=1,_=(l,d)=>d;else if(i==="End")b=-1,_=()=>0;else if(e.parentElement!==null&&(t.modifiers.vertical===!0&&t.modifiers.horizontal!==!0&&(i==="ArrowLeft"||i==="ArrowRight")||t.modifiers.horizontal===!0&&t.modifiers.vertical!==!0&&(i==="ArrowUp"||i==="ArrowDown"))){const l=e.parentElement.closest(t.modifiers.vertical===!0?r.datasetNameSelectorRovingHorizontal:r.datasetNameSelectorRovingVertical);l!==null&&($=l,n.__vKbdTrap=void 0,i===(z(T,e)===!0?"ArrowRight":"ArrowLeft")||i==="ArrowUp"?(b=1,_=(d,N)=>N):(b=-1,_=()=>0))}else(t.modifiers.vertical===!0||t.modifiers.horizontal!==!0)&&(i==="ArrowUp"?(b=-1,y="v"):i==="ArrowDown"&&(b=1,y="v")),(t.modifiers.vertical!==!0||t.modifiers.horizontal===!0)&&(i==="ArrowLeft"?(b=-1,y="h"):i==="ArrowRight"&&(b=1,y="h"),b!==0&&y==="h"&&z(T,e)===!0&&(b*=-1))}else i==="Tab"&&(b=V===!0?-1:1);if(b===0)return;$===!1?n.preventDefault():(t.focusTarget=T,t.focusTarget.dataset[r.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{t.focusTarget&&delete t.focusTarget.dataset[r.datasetNamePreventRefocus]}));let p=[];if(y!==!1){let c;if(t.modifiers.grid===!0){const l=j(T.dataset[r.datasetNameRow]),d=j(T.dataset[r.datasetNameCol]),N=y==="v"?r.datasetNameColSelector(d):r.datasetNameRowSelector(l);p=Array.from(e.querySelectorAll(N)),c=new WeakMap(p.map(C=>{const A=j(C.dataset[r.datasetNameRow]),R=j(C.dataset[r.datasetNameCol]);let E;return y==="v"?(A!==l||R===d)&&(E=1e3*A+1*R):(R!==d||A===l)&&(E=1e3*R+1*A),[C,E]}))}else if(e.matches('[role="grid"]')===!0&&T.matches('[role="row"] [role="gridcell"]')){const l=Array.from(e.querySelectorAll('[role="row"]')),d=new WeakMap,N=l.map((P,O)=>{const L=Array.from(P.querySelectorAll('[role="gridcell"]'));return L.forEach((F,ee)=>{d.set(F,[O+1,ee+1])}),L}),C=T.closest('[role="row"]'),A=l.indexOf(C)+1,R=N[A-1].indexOf(T)+1,{focusableSelector:E}=r;p=Array.from(e.querySelectorAll(E)),c=new WeakMap(p.map(P=>{const[O,L]=d.get(P)||[null,null];let F;return y==="v"?L===R&&(F=1*O):O===A&&(F=1*L),[P,F]}))}c!==void 0&&(p=p.filter(l=>c.get(l)!==void 0),p.sort((l,d)=>c.get(l)-c.get(d)))}if(p.length===0){const{focusableSelector:c}=r;if(p=Array.from(e.querySelectorAll(c)),g.indexorder===!0){const l=new WeakMap(p.map(d=>[d,Math.max(d.tabIndex||0,0)]));p.sort((d,N)=>l.get(d)-l.get(N))}e.matches(c)&&p.unshift(e)}const I=p.length-1;let K=_(p.indexOf(T),I);for(let c=0;c<I;c+=1)if(K+=b,K<0?K=I:K>I&&(K=0),w(p[K])===!0){$!==!1&&u($===!0?null:$);return}},overwiteFocusTarget(n){t.disable===!1&&n.__vKbdTrap!==!0&&(n.__vKbdTrap=!0,t.focusTarget=n.target)},refocus(n){return t.disable===!1&&v===e&&t.focusTarget&&t.focusTarget.closest(r.datasetNameSelector)===e?t.focusTarget.tabIndex===r.trapTabIndex?t.modifiers.autofocus===!0&&w(e.querySelector(r.autofocusSelector))===!0||w(e.querySelector(r.focusableSelector))===!0||w(t.focusTarget)===!0:n===!0?!1:w(t.focusTarget)===!0||w(e.querySelector(r.focusableSelector))===!0:!1},autofocus(){requestAnimationFrame(()=>{t.disable===!1&&w(e.querySelector(r.autofocusSelector),M)===!1&&w(e.querySelector(r.focusableSelector),M)})}};t.bind(),g.autofocus===!0&&t.autofocus()},q=(e,{value:m,modifiers:g})=>{const t=s(e);if(t!==null){const n=m===!1;t.modifiers=g,f(e,n,t),v===e&&(n===!0?u(null):e.dataset[r.datasetNameActive]=""),t.disable!==n&&(t.disable=n,g.autofocus===!0&&t.autofocus())}else a!==void 0?S(e,{value:m,modifiers:g}):v===e&&u(null)},h=e=>{const m=s(e);m!==null&&m.unbind(),v===e&&u(null)};return a!==void 0?a({name:r.name,directive:{beforeMount:S,updated:q,unmounted:h,getSSRProps(){}}}):{name:r.name,directive:{bind:S,update:q,unbind:h}}}const{markRaw:X,version:Y}=B,U=Y.indexOf("2.")===0?void 0:X,W={install(o,a){const{name:r,directive:u}=D(a,U);o.directive(r,u)}},Z=o=>D(o,U);x.VueKeyboardTrapDirectiveFactory=Z,x.VueKeyboardTrapDirectivePlugin=W,x.default=W,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(y,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],k):(y=typeof globalThis<"u"?globalThis:y||self,k(y.VueKeyboardTrap={},y.Vue))})(this,function(y,k){"use strict";function H(o){if(o&&o.__esModule)return o;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(a,r,u.get?u:{enumerable:!0,get:()=>o[r]})}}return a.default=o,Object.freeze(a)}const B=H(k);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 u=document.createElement("span");u.dataset[a.datasetName]="";const c=u.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 M(o,a=!1){const{left:r,top:u}=o.getBoundingClientRect(),c=document.elementFromPoint(r,u);if(o.contains(c)===!0)return!0;if(a===!0||typeof o.scrollIntoView!="function")return c===null;const s=[];let S=o.parentElement;for(;S!==null;)s.push([S,S.scrollLeft,S.scrollTop]),S=S.parentElement;o.scrollIntoView();const q=M(o,!0);for(let h=s.length-1;h>=0;h-=1){const[e,b,g]=s[h];e.scrollLeft=b,e.scrollTop=g}return q}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 z(o,a){const r=(o&&o!==a&&o.parentElement||a).closest('[dir="rtl"],[dir="ltr"]');return r&&r.matches('[dir="rtl"]')}let v=null;function D(o,a){const r=G(o),u=e=>{v!==e&&(e!==null&&(e.dataset[r.datasetNameActive]="",e.__vKbdTrapActiveClean=()=>{delete e.dataset[r.datasetNameActive],e.__vKbdTrapActiveClean=void 0}),v!==null&&typeof v.__vKbdTrapActiveClean=="function"&&v.__vKbdTrapActiveClean(),v=e)},c=e=>{const b=(e||{}).__vKbdTrap;return b===Object(b)?b:null},s=(e,b,g)=>{b===!0?(delete e.dataset[r.datasetName],e.tabIndex===r.trapTabIndex&&e.removeAttribute("tabindex")):(e.dataset[r.datasetName]=Object.keys(g.modifiers).filter(t=>g.modifiers[t]===!0).join(" "),e.tabIndex<0&&e.getAttribute("tabindex")===null&&(e.tabIndex=r.trapTabIndex))},S=(e,{value:b,modifiers:g})=>{const t={disable:b===!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&&s(e,t.disable,t)},unbind(){delete e.__vKbdTrap,e.removeEventListener("keydown",t.trap),e.removeEventListener("focusin",t.activate),e.removeEventListener("focusout",t.deactivate),e.removeEventListener("pointerdown",t.overwiteFocusTarget),s(e,!0,t)},activate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v!==e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(u(e),t.relatedFocusTarget=i,(i===null||i.dataset[r.datasetNamePreventRefocus]===void 0||e.contains(i)===!1)&&requestAnimationFrame(()=>{t.refocus(t.modifiers.roving!==!0)}))},deactivate(n){if(t.disable===!0||n.__vKbdTrap===!0)return;n.__vKbdTrap=!0;const i=n.relatedTarget;v===e&&(i===null||i.closest(r.datasetNameSelector)!==e)&&(t.focusTarget=n.target,u(null))},trap(n){if(t.disable===!0||n.__vKbdTrap===!0)return;const{code:i,shiftKey:V}=n,{activeElement:T}=document;if(i==="Escape"){if(n.__vKbdTrap=!0,v===e){if(t.focusTarget=T,t.modifiers.escexits===!0){u(e.parentElement===null?null:e.parentElement.closest(r.datasetNameSelector));const l=c(v);l!==null&&l.refocus();return}if(t.modifiers.escrefocus===!0&&w(t.relatedFocusTarget)===!0)return;u(null)}else u(e);return}if(v!==e)return;n.__vKbdTrap=!0;let m=0,N=l=>l,$=!1,_=!1;if(t.modifiers.roving===!0){const l=T.matches(r.rovingSkipSelector);if(i!=="Tab"&&l===!0)return;if(i==="Tab")l===!1&&t.modifiers.tabinside!==!0?($=!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(e.parentElement!==null&&(t.modifiers.vertical===!0&&t.modifiers.horizontal!==!0&&(i==="ArrowLeft"||i==="ArrowRight")||t.modifiers.horizontal===!0&&t.modifiers.vertical!==!0&&(i==="ArrowUp"||i==="ArrowDown"))){const d=e.parentElement.closest(t.modifiers.vertical===!0?r.datasetNameSelectorRovingHorizontal:r.datasetNameSelectorRovingVertical);d!==null&&($=d,n.__vKbdTrap=void 0,i===(z(T,e)===!0?"ArrowRight":"ArrowLeft")||i==="ArrowUp"?(m=1,N=(f,x)=>x):(m=-1,N=()=>0))}else(t.modifiers.vertical===!0||t.modifiers.horizontal!==!0)&&(i==="ArrowUp"?(m=-1,_="v"):i==="ArrowDown"&&(m=1,_="v")),(t.modifiers.vertical!==!0||t.modifiers.horizontal===!0)&&(i==="ArrowLeft"?(m=-1,_="h"):i==="ArrowRight"&&(m=1,_="h"),m!==0&&_==="h"&&z(T,e)===!0&&(m*=-1))}else i==="Tab"&&(m=V===!0?-1:1);if(m===0)return;$===!1?n.preventDefault():(t.focusTarget=T,t.focusTarget.dataset[r.datasetNamePreventRefocus]="",requestAnimationFrame(()=>{t.focusTarget&&delete t.focusTarget.dataset[r.datasetNamePreventRefocus]}));let p=[];if(_!==!1){let l;if(t.modifiers.grid===!0){const d=j(T.dataset[r.datasetNameRow]),f=j(T.dataset[r.datasetNameCol]),x=_==="v"?r.datasetNameColSelector(f):r.datasetNameRowSelector(d);p=Array.from(e.querySelectorAll(x)),l=new WeakMap(p.map(C=>{const A=j(C.dataset[r.datasetNameRow]),R=j(C.dataset[r.datasetNameCol]);let E;return _==="v"?(A!==d||R===f)&&(E=1e3*A+1*R):(R!==f||A===d)&&(E=1e3*R+1*A),[C,E]}))}else if(e.matches('[role="grid"]')===!0&&T.matches('[role="row"] [role="gridcell"]')){const d=Array.from(e.querySelectorAll('[role="row"]')),f=new WeakMap,x=d.map((P,O)=>{const L=Array.from(P.querySelectorAll('[role="gridcell"]'));return L.forEach((F,ee)=>{f.set(F,[O+1,ee+1])}),L}),C=T.closest('[role="row"]'),A=d.indexOf(C)+1,R=x[A-1].indexOf(T)+1,{focusableSelector:E}=r;p=Array.from(e.querySelectorAll(E)),l=new WeakMap(p.map(P=>{const[O,L]=f.get(P)||[null,null];let F;return _==="v"?L===R&&(F=1*O):O===A&&(F=1*L),[P,F]}))}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}=r;if(p=Array.from(e.querySelectorAll(l)),g.indexorder===!0){const d=new WeakMap(p.map(f=>[f,Math.max(f.tabIndex||0,0)]));p.sort((f,x)=>d.get(f)-d.get(x))}e.matches(l)&&p.unshift(e)}const I=p.length-1;let K=N(p.indexOf(T),I);for(let l=0;l<I;l+=1)if(K+=m,K<0?K=I:K>I&&(K=0),w(p[K])===!0){$!==!1&&u($===!0?null:$);return}},overwiteFocusTarget(n){t.disable===!1&&n.__vKbdTrap!==!0&&(n.__vKbdTrap=!0,t.focusTarget=n.target)},refocus(n){return t.disable===!1&&v===e&&t.focusTarget&&t.focusTarget.closest(r.datasetNameSelector)===e?t.focusTarget.tabIndex===r.trapTabIndex?t.modifiers.autofocus===!0&&w(e.querySelector(r.autofocusSelector))===!0||w(e.querySelector(r.focusableSelector))===!0||w(t.focusTarget)===!0:n===!0?!1:w(t.focusTarget)===!0||w(e.querySelector(r.focusableSelector))===!0:!1},autofocus(){requestAnimationFrame(()=>{t.disable===!1&&w(e.querySelector(r.autofocusSelector),M)===!1&&w(e.querySelector(r.focusableSelector),M)})}};t.bind(),g.autofocus===!0&&t.autofocus()},q=(e,{value:b,modifiers:g})=>{const t=c(e);if(t!==null){const n=b===!1;t.modifiers=g,s(e,n,t),v===e&&(n===!0?u(null):e.dataset[r.datasetNameActive]=""),t.disable!==n&&(t.disable=n,g.autofocus===!0&&t.autofocus())}else a!==void 0?S(e,{value:b,modifiers:g}):v===e&&u(null)},h=e=>{const b=c(e);b!==null&&b.unbind(),v===e&&u(null)};return a!==void 0?a({name:r.name,directive:{beforeMount:S,updated:q,unmounted:h,getSSRProps(){}}}):{name:r.name,directive:{bind:S,update:q,unbind:h}}}const{markRaw:X,version:Y}=B,U=Y.indexOf("2.")===0?void 0:X,W={install(o,a){const{name:r,directive:u}=D(a,U);o.directive(r,u)}},Z=o=>D(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.15",
+  "version": "1.0.16",
   "description": "Vue3 and Vue2 directive for keyboard navigation - roving movement and trapping inside container",
@@ -79,11 +79,11 @@ "productName": "Vue Keyboard Trap",
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.1.0",
-    "eslint": "^8.24.0",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "eslint": "^8.25.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-vue": "^9.5.1",
+    "eslint-plugin-vue": "^9.6.0",
     "sass": "^1.55.0",
-    "vite": "^3.1.4",
-    "vitepress": "^1.0.0-alpha.17",
-    "vue": "^3.2.40"
+    "vite": "^3.1.8",
+    "vitepress": "^1.0.0-alpha.21",
+    "vue": "^3.2.41"
   },
@@ -90,0 +90,0 @@ "engines": {

README.md

@@ -41,3 +41,3 @@ # VueKeyboardTrap (vue-keyboard-trap)
 Use as plugin on Vue3
-```javascript{2,7-9}
+```javascript
 import { createApp } from 'vue';
@@ -57,3 +57,3 @@ import { VueKeyboardTrapDirectivePlugin } from '@pdanpdan/vue-keyboard-trap';
 or as plugin on Vue2
-```javascript{2,5-7}
+```javascript
 import Vue from 'vue';
@@ -73,3 +73,3 @@ import { VueKeyboardTrapDirectivePlugin } from '@pdanpdan/vue-keyboard-trap';
 or included in specific components (Vue3 script)
-```html{3,5-7,10-12}
+```html
 <script>
@@ -92,3 +92,3 @@ import { defineComponent } from 'vue';
 or included in specific components (Vue3 script setup)
-```html{2,4-6}
+```html
 <script setup>
@@ -104,3 +104,3 @@ import { VueKeyboardTrapDirectiveFactory } from '@pdanpdan/vue-keyboard-trap';
 or included in specific components (Vue2)
-```html{2,4-6,9-11}
+```html
 <script>
@@ -152,3 +152,3 @@ import { VueKeyboardTrapDirectiveFactory } from '@pdanpdan/vue-keyboard-trap';
 Use as plugin on Vue3
-```javascript{2,6-8}
+```javascript
 const { createApp } = Vue;
@@ -167,3 +167,3 @@ const { VueKeyboardTrapDirectivePlugin } = VueKeyboardTrap;
 or as plugin on Vue2
-```javascript{1,3-5}
+```javascript
 const { VueKeyboardTrapDirectivePlugin } = VueKeyboardTrap;
@@ -181,3 +181,3 @@
 or as directive on Vue3
-```javascript{2,6-8,10}
+```javascript
 const { createApp } = Vue;
@@ -198,3 +198,3 @@ const { VueKeyboardTrapDirectiveFactory } = VueKeyboardTrap;
 or as directive on Vue2
-```javascript{1,3-5,7}
+```javascript
 const { VueKeyboardTrapDirectiveFactory } = VueKeyboardTrap;
@@ -229,9 +229,16 @@
 area[href]:not([tabindex^="-"]),
-input:not([disabled]):not([tabindex^="-"]),
-select:not([disabled]):not([tabindex^="-"]),
-textarea:not([disabled]):not([tabindex^="-"]),
-button:not([disabled]):not([tabindex^="-"]),
+video[controls]:not([tabindex^="-"]),
+audio[controls]:not([tabindex^="-"]),
 iframe:not([tabindex^="-"]),
-[tabindex]:not([tabindex^="-"]),
-[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"]),
+[tabindex]:not(slot):not([tabindex^="-"]),
+[contenteditable]:not([contenteditable="false"]):not([tabindex^="-"]),
+details > summary:first-of-type:not([tabindex^="-"]),
+input:not([type="hidden"]):not(fieldset[disabled] input):not([disabled]):not([tabindex^="-"]),
+select:not(fieldset[disabled] input):not([disabled]):not([tabindex^="-"]),
+textarea:not(fieldset[disabled] input):not([disabled]):not([tabindex^="-"]),
+button:not(fieldset[disabled] input):not([disabled]):not([tabindex^="-"]),
+fieldset[disabled]:not(fieldset[disabled] fieldset) > legend input:not([type="hidden"]):not([disabled]):not([tabindex^="-"]),
+fieldset[disabled]:not(fieldset[disabled] fieldset) > legend select:not([disabled]):not([tabindex^="-"]),
+fieldset[disabled]:not(fieldset[disabled] fieldset) > legend textarea:not([disabled]):not([tabindex^="-"]),
+fieldset[disabled]:not(fieldset[disabled] fieldset) > legend button:not([disabled]):not([tabindex^="-"]),
 [class*="focusable"]:not([disabled]):not([tabindex^="-"])
@@ -409,3 +416,3 @@ ```
 * Name: Dan Popescu (PDan)
-* Email: <[e-mail]>
+* Email: [[e-mail]](mailto:[e-mail])
 * Website: https://github.com/pdanpdan/
@@ -412,0 +419,0 @@ * Github: [@pdanpdan](https://github.com/pdanpdan)

src/directives/keyboard-trap/helpers.js

@@ -9,25 +9,29 @@ function defaultFocusCheckFn() {
 
-  if (elAtPos === null && scrolled !== true && typeof el.scrollIntoView === 'function') {
-    const scrollPos = [];
-    let parent = el.parentElement;
+  if (el.contains(elAtPos) === true) {
+    return true;
+  }
 
-    while (parent !== null) {
-      scrollPos.push([parent, parent.scrollLeft, parent.scrollTop]);
-      parent = parent.parentElement;
-    }
+  if (scrolled === true || typeof el.scrollIntoView !== 'function') {
+    return elAtPos === null;
+  }
 
-    el.scrollIntoView();
+  const scrollPos = [];
+  let parent = el.parentElement;
 
-    const visible = visibleFocusCheckFn(el, true);
+  while (parent !== null) {
+    scrollPos.push([parent, parent.scrollLeft, parent.scrollTop]);
+    parent = parent.parentElement;
+  }
 
-    for (let i = scrollPos.length - 1; i >= 0; i -= 1) {
-      const [scrollEl, scrollLeft, scrollTop] = scrollPos[i];
-      scrollEl.scrollLeft = scrollLeft;
-      scrollEl.scrollTop = scrollTop;
-    }
+  el.scrollIntoView();
 
-    return visible;
+  const visible = visibleFocusCheckFn(el, true);
+
+  for (let i = scrollPos.length - 1; i >= 0; i -= 1) {
+    const [scrollEl, scrollLeft, scrollTop] = scrollPos[i];
+    scrollEl.scrollLeft = scrollLeft;
+    scrollEl.scrollTop = scrollTop;
   }
 
-  return elAtPos === null || el.contains(elAtPos) === true;
+  return visible;
 }
@@ -34,0 +38,0 @@

src/directives/keyboard-trap/options.js

@@ -15,15 +15,33 @@ // options:
 
-    focusableSelector: [
-      ':focus',
-      'a[href]:not([tabindex^="-"])',
-      'area[href]:not([tabindex^="-"])',
-      'input:not([disabled]):not([tabindex^="-"])',
-      'select:not([disabled]):not([tabindex^="-"])',
-      'textarea:not([disabled]):not([tabindex^="-"])',
-      'button:not([disabled]):not([tabindex^="-"])',
-      'iframe:not([tabindex^="-"])',
-      '[tabindex]:not([tabindex^="-"])',
-      '[contenteditable]:not([tabindex^="-"]):not([contenteditable="false"])',
-      '[class*="focusable"]:not([disabled]):not([tabindex^="-"])',
-    ].join(','),
+    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(','),
 
@@ -45,5 +63,5 @@ rovingSkipSelector: [
     autofocusSelector: [
-      '[autofocus]:not([disabled]):not([autofocus="false"])',
-      '[data-autofocus]:not([disabled]):not([data-autofocus="false"])',
-    ].join(','),
+      '[autofocus]:not([autofocus="false"])',
+      '[data-autofocus]:not([data-autofocus="false"])',
+    ].map((s) => `${ s }:not([disabled])`).join(','),
 
@@ -50,0 +68,0 @@ trapTabIndex: -9999,

No alert changes

Improved metrics

Total package byte prevSize

185980

increased by2.05%

Lines of code

1240

increased by3.08%

Number of lines in readme file

415

increased by1.72%

No dependency changes