@serendie/ui 2.0.0 → 2.1.0

package/dist/node_modules/@zag-js/focus-trap/dist/index.js

@@ -0,0 +1,307 @@
+import { raf as O, getDocument as w, getTabbables as x, getFocusables as I, isTabbable as b, getTabIndex as v, addDomEvent as p, getEventTarget as N, isDocument as C, isFocusable as y, getActiveElement as D } from "../../dom-query/dist/index.js";
+var k = Object.defineProperty, E = (e, a, n) => a in e ? k(e, a, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[a] = n, u = (e, a, n) => E(e, typeof a != "symbol" ? a + "" : a, n), m = {
+  activateTrap(e, a) {
+    if (e.length > 0) {
+      const t = e[e.length - 1];
+      t !== a && t.pause();
+    }
+    const n = e.indexOf(a);
+    n === -1 || e.splice(n, 1), e.push(a);
+  },
+  deactivateTrap(e, a) {
+    const n = e.indexOf(a);
+    n !== -1 && e.splice(n, 1), e.length > 0 && e[e.length - 1].unpause();
+  }
+}, R = [], G = class {
+  constructor(e, a) {
+    u(this, "trapStack"), u(this, "config"), u(this, "doc"), u(this, "state", {
+      containers: [],
+      containerGroups: [],
+      tabbableGroups: [],
+      nodeFocusedBeforeActivation: null,
+      mostRecentlyFocusedNode: null,
+      active: !1,
+      paused: !1,
+      delayInitialFocusTimer: void 0,
+      recentNavEvent: void 0
+    }), u(this, "listenerCleanups", []), u(this, "handleFocus", (t) => {
+      const s = N(t), r = this.findContainerIndex(s, t) >= 0;
+      if (r || C(s))
+        r && (this.state.mostRecentlyFocusedNode = s);
+      else {
+        t.stopImmediatePropagation();
+        let i, c = !0;
+        if (this.state.mostRecentlyFocusedNode)
+          if (v(this.state.mostRecentlyFocusedNode) > 0) {
+            const h = this.findContainerIndex(this.state.mostRecentlyFocusedNode), { tabbableNodes: o } = this.state.containerGroups[h];
+            if (o.length > 0) {
+              const d = o.findIndex((l) => l === this.state.mostRecentlyFocusedNode);
+              d >= 0 && (this.config.isKeyForward(this.state.recentNavEvent) ? d + 1 < o.length && (i = o[d + 1], c = !1) : d - 1 >= 0 && (i = o[d - 1], c = !1));
+            }
+          } else
+            this.state.containerGroups.some((h) => h.tabbableNodes.some((o) => v(o) > 0)) || (c = !1);
+        else
+          c = !1;
+        c && (i = this.findNextNavNode({
+          // move FROM the MRU node, not event-related node (which will be the node that is
+          //  outside the trap causing the focus escape we're trying to fix)
+          target: this.state.mostRecentlyFocusedNode,
+          isBackward: this.config.isKeyBackward(this.state.recentNavEvent)
+        })), i ? this.tryFocus(i) : this.tryFocus(this.state.mostRecentlyFocusedNode || this.getInitialFocusNode());
+      }
+      this.state.recentNavEvent = void 0;
+    }), u(this, "handlePointerDown", (t) => {
+      const s = N(t);
+      if (!(this.findContainerIndex(s, t) >= 0)) {
+        if (F(this.config.clickOutsideDeactivates, t)) {
+          this.deactivate({ returnFocus: this.config.returnFocusOnDeactivate });
+          return;
+        }
+        F(this.config.allowOutsideClick, t) || t.preventDefault();
+      }
+    }), u(this, "handleClick", (t) => {
+      const s = N(t);
+      this.findContainerIndex(s, t) >= 0 || F(this.config.clickOutsideDeactivates, t) || F(this.config.allowOutsideClick, t) || (t.preventDefault(), t.stopImmediatePropagation());
+    }), u(this, "handleTabKey", (t) => {
+      if (this.config.isKeyForward(t) || this.config.isKeyBackward(t)) {
+        this.state.recentNavEvent = t;
+        const s = this.config.isKeyBackward(t), r = this.findNextNavNode({ event: t, isBackward: s });
+        if (!r) return;
+        g(t) && t.preventDefault(), this.tryFocus(r);
+      }
+    }), u(this, "handleEscapeKey", (t) => {
+      B(t) && F(this.config.escapeDeactivates, t) !== !1 && (t.preventDefault(), this.deactivate());
+    }), u(this, "_mutationObserver"), u(this, "setupMutationObserver", () => {
+      const t = this.doc.defaultView || window;
+      this._mutationObserver = new t.MutationObserver((s) => {
+        s.some((i) => Array.from(i.removedNodes).some((h) => h === this.state.mostRecentlyFocusedNode)) && this.tryFocus(this.getInitialFocusNode());
+      });
+    }), u(this, "updateObservedNodes", () => {
+      var t;
+      (t = this._mutationObserver) == null || t.disconnect(), this.state.active && !this.state.paused && this.state.containers.map((s) => {
+        var r;
+        (r = this._mutationObserver) == null || r.observe(s, { subtree: !0, childList: !0 });
+      });
+    }), u(this, "getInitialFocusNode", () => {
+      let t = this.getNodeForOption("initialFocus", { hasFallback: !0 });
+      if (t === !1)
+        return !1;
+      if (t === void 0 || t && !y(t))
+        if (this.findContainerIndex(this.doc.activeElement) >= 0)
+          t = this.doc.activeElement;
+        else {
+          const s = this.state.tabbableGroups[0];
+          t = s && s.firstTabbableNode || this.getNodeForOption("fallbackFocus");
+        }
+      else t === null && (t = this.getNodeForOption("fallbackFocus"));
+      if (!t)
+        throw new Error("Your focus-trap needs to have at least one focusable element");
+      return t.isConnected || (t = this.getNodeForOption("fallbackFocus")), t;
+    }), u(this, "tryFocus", (t) => {
+      if (t !== !1 && t !== D(this.doc)) {
+        if (!t || !t.focus) {
+          this.tryFocus(this.getInitialFocusNode());
+          return;
+        }
+        t.focus({ preventScroll: !!this.config.preventScroll }), this.state.mostRecentlyFocusedNode = t, K(t) && t.select();
+      }
+    }), u(this, "deactivate", (t) => {
+      if (!this.state.active) return this;
+      const s = {
+        onDeactivate: this.config.onDeactivate,
+        onPostDeactivate: this.config.onPostDeactivate,
+        checkCanReturnFocus: this.config.checkCanReturnFocus,
+        ...t
+      };
+      clearTimeout(this.state.delayInitialFocusTimer), this.state.delayInitialFocusTimer = void 0, this.removeListeners(), this.state.active = !1, this.state.paused = !1, this.updateObservedNodes(), m.deactivateTrap(this.trapStack, this);
+      const r = this.getOption(s, "onDeactivate"), i = this.getOption(s, "onPostDeactivate"), c = this.getOption(s, "checkCanReturnFocus"), h = this.getOption(s, "returnFocus", "returnFocusOnDeactivate");
+      r == null || r();
+      const o = () => {
+        T(() => {
+          if (h) {
+            const d = this.getReturnFocusNode(this.state.nodeFocusedBeforeActivation);
+            this.tryFocus(d);
+          }
+          i == null || i();
+        });
+      };
+      if (h && c) {
+        const d = this.getReturnFocusNode(this.state.nodeFocusedBeforeActivation);
+        return c(d).then(o, o), this;
+      }
+      return o(), this;
+    }), u(this, "pause", (t) => {
+      if (this.state.paused || !this.state.active)
+        return this;
+      const s = this.getOption(t, "onPause"), r = this.getOption(t, "onPostPause");
+      return this.state.paused = !0, s == null || s(), this.removeListeners(), this.updateObservedNodes(), r == null || r(), this;
+    }), u(this, "unpause", (t) => {
+      if (!this.state.paused || !this.state.active)
+        return this;
+      const s = this.getOption(t, "onUnpause"), r = this.getOption(t, "onPostUnpause");
+      return this.state.paused = !1, s == null || s(), this.updateTabbableNodes(), this.addListeners(), this.updateObservedNodes(), r == null || r(), this;
+    }), u(this, "updateContainerElements", (t) => (this.state.containers = Array.isArray(t) ? t.filter(Boolean) : [t].filter(Boolean), this.state.active && this.updateTabbableNodes(), this.updateObservedNodes(), this)), u(this, "getReturnFocusNode", (t) => {
+      const s = this.getNodeForOption("setReturnFocus", {
+        params: [t]
+      });
+      return s || (s === !1 ? !1 : t);
+    }), u(this, "getOption", (t, s, r) => t && t[s] !== void 0 ? t[s] : (
+      // @ts-expect-error
+      this.config[r || s]
+    )), u(this, "getNodeForOption", (t, { hasFallback: s = !1, params: r = [] } = {}) => {
+      let i = this.config[t];
+      if (typeof i == "function" && (i = i(...r)), i === !0 && (i = void 0), !i) {
+        if (i === void 0 || i === !1)
+          return i;
+        throw new Error(`\`${t}\` was specified but was not a node, or did not return a node`);
+      }
+      let c = i;
+      if (typeof i == "string") {
+        try {
+          c = this.doc.querySelector(i);
+        } catch (h) {
+          throw new Error(`\`${t}\` appears to be an invalid selector; error="${h.message}"`);
+        }
+        if (!c && !s)
+          throw new Error(`\`${t}\` as selector refers to no known node`);
+      }
+      return c;
+    }), u(this, "findNextNavNode", (t) => {
+      const { event: s, isBackward: r = !1 } = t, i = t.target || N(s);
+      this.updateTabbableNodes();
+      let c = null;
+      if (this.state.tabbableGroups.length > 0) {
+        const h = this.findContainerIndex(i, s), o = h >= 0 ? this.state.containerGroups[h] : void 0;
+        if (h < 0)
+          r ? c = this.state.tabbableGroups[this.state.tabbableGroups.length - 1].lastTabbableNode : c = this.state.tabbableGroups[0].firstTabbableNode;
+        else if (r) {
+          let d = this.state.tabbableGroups.findIndex(
+            ({ firstTabbableNode: l }) => i === l
+          );
+          if (d < 0 && ((o == null ? void 0 : o.container) === i || y(i) && !b(i) && !(o != null && o.nextTabbableNode(i, !1))) && (d = h), d >= 0) {
+            const l = d === 0 ? this.state.tabbableGroups.length - 1 : d - 1, f = this.state.tabbableGroups[l];
+            c = v(i) >= 0 ? f.lastTabbableNode : f.lastDomTabbableNode;
+          } else g(s) || (c = o == null ? void 0 : o.nextTabbableNode(i, !1));
+        } else {
+          let d = this.state.tabbableGroups.findIndex(
+            ({ lastTabbableNode: l }) => i === l
+          );
+          if (d < 0 && ((o == null ? void 0 : o.container) === i || y(i) && !b(i) && !(o != null && o.nextTabbableNode(i))) && (d = h), d >= 0) {
+            const l = d === this.state.tabbableGroups.length - 1 ? 0 : d + 1, f = this.state.tabbableGroups[l];
+            c = v(i) >= 0 ? f.firstTabbableNode : f.firstDomTabbableNode;
+          } else g(s) || (c = o == null ? void 0 : o.nextTabbableNode(i));
+        }
+      } else
+        c = this.getNodeForOption("fallbackFocus");
+      return c;
+    }), this.trapStack = a.trapStack || R;
+    const n = {
+      returnFocusOnDeactivate: !0,
+      escapeDeactivates: !0,
+      delayInitialFocus: !0,
+      isKeyForward(t) {
+        return g(t) && !t.shiftKey;
+      },
+      isKeyBackward(t) {
+        return g(t) && t.shiftKey;
+      },
+      ...a
+    };
+    this.doc = n.document || w(Array.isArray(e) ? e[0] : e), this.config = n, this.updateContainerElements(e), this.setupMutationObserver();
+  }
+  get active() {
+    return this.state.active;
+  }
+  get paused() {
+    return this.state.paused;
+  }
+  findContainerIndex(e, a) {
+    const n = typeof (a == null ? void 0 : a.composedPath) == "function" ? a.composedPath() : void 0;
+    return this.state.containerGroups.findIndex(
+      ({ container: t, tabbableNodes: s }) => t.contains(e) || (n == null ? void 0 : n.includes(t)) || s.find((r) => r === e)
+    );
+  }
+  updateTabbableNodes() {
+    if (this.state.containerGroups = this.state.containers.map((e) => {
+      const a = x(e), n = I(e), t = a.length > 0 ? a[0] : void 0, s = a.length > 0 ? a[a.length - 1] : void 0, r = n.find((o) => b(o)), i = n.slice().reverse().find((o) => b(o)), c = !!a.find((o) => v(o) > 0);
+      function h(o, d = !0) {
+        const l = a.indexOf(o);
+        return l < 0 ? d ? n.slice(n.indexOf(o) + 1).find((f) => b(f)) : n.slice(0, n.indexOf(o)).reverse().find((f) => b(f)) : a[l + (d ? 1 : -1)];
+      }
+      return {
+        container: e,
+        tabbableNodes: a,
+        focusableNodes: n,
+        posTabIndexesFound: c,
+        firstTabbableNode: t,
+        lastTabbableNode: s,
+        firstDomTabbableNode: r,
+        lastDomTabbableNode: i,
+        nextTabbableNode: h
+      };
+    }), this.state.tabbableGroups = this.state.containerGroups.filter((e) => e.tabbableNodes.length > 0), this.state.tabbableGroups.length <= 0 && !this.getNodeForOption("fallbackFocus"))
+      throw new Error(
+        "Your focus-trap must have at least one container with at least one tabbable node in it at all times"
+      );
+    if (this.state.containerGroups.find((e) => e.posTabIndexesFound) && this.state.containerGroups.length > 1)
+      throw new Error(
+        "At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps."
+      );
+  }
+  addListeners() {
+    if (this.state.active)
+      return m.activateTrap(this.trapStack, this), this.state.delayInitialFocusTimer = this.config.delayInitialFocus ? T(() => {
+        this.tryFocus(this.getInitialFocusNode());
+      }) : this.tryFocus(this.getInitialFocusNode()), this.listenerCleanups.push(
+        p(this.doc, "focusin", this.handleFocus, !0),
+        p(this.doc, "mousedown", this.handlePointerDown, { capture: !0, passive: !1 }),
+        p(this.doc, "touchstart", this.handlePointerDown, { capture: !0, passive: !1 }),
+        p(this.doc, "click", this.handleClick, { capture: !0, passive: !1 }),
+        p(this.doc, "keydown", this.handleTabKey, { capture: !0, passive: !1 }),
+        p(this.doc, "keydown", this.handleEscapeKey)
+      ), this;
+  }
+  removeListeners() {
+    if (this.state.active)
+      return this.listenerCleanups.forEach((e) => e()), this.listenerCleanups = [], this;
+  }
+  activate(e) {
+    if (this.state.active)
+      return this;
+    const a = this.getOption(e, "onActivate"), n = this.getOption(e, "onPostActivate"), t = this.getOption(e, "checkCanFocusTrap");
+    t || this.updateTabbableNodes(), this.state.active = !0, this.state.paused = !1, this.state.nodeFocusedBeforeActivation = this.doc.activeElement || null, a == null || a();
+    const s = () => {
+      t && this.updateTabbableNodes(), this.addListeners(), this.updateObservedNodes(), n == null || n();
+    };
+    return t ? (t(this.state.containers.concat()).then(s, s), this) : (s(), this);
+  }
+}, g = (e) => e.key === "Tab", F = (e, ...a) => typeof e == "function" ? e(...a) : e, B = (e) => !e.isComposing && e.key === "Escape", T = (e) => setTimeout(e, 0), K = (e) => e.localName === "input" && "select" in e && typeof e.select == "function";
+function P(e, a = {}) {
+  let n;
+  const t = O(() => {
+    const s = typeof e == "function" ? e() : e;
+    if (s) {
+      n = new G(s, {
+        escapeDeactivates: !1,
+        allowOutsideClick: !0,
+        preventScroll: !0,
+        returnFocusOnDeactivate: !0,
+        delayInitialFocus: !1,
+        fallbackFocus: s,
+        ...a,
+        document: w(s)
+      });
+      try {
+        n.activate();
+      } catch {
+      }
+    }
+  });
+  return function() {
+    n == null || n.deactivate(), t();
+  };
+}
+export {
+  G as FocusTrap,
+  P as trapFocus
+};

package/dist/node_modules/@zag-js/focus-visible/dist/index.js

@@ -1,73 +1,74 @@
-import { getWindow as i, getDocument as y, isMac as T } from "../../dom-query/dist/index.js";
-function k(t) {
-  return t.mozInputSource === 0 && t.isTrusted ? !0 : t.detail === 0 && !t.pointerType;
+import { getWindow as d, getDocument as E, isVirtualClick as g, getEventTarget as L, isMac as F } from "../../dom-query/dist/index.js";
+function T(e) {
+  return !(e.metaKey || !F() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
 }
-function M(t) {
-  return !(t.metaKey || !T() && t.altKey || t.ctrlKey || t.key === "Control" || t.key === "Shift" || t.key === "Meta");
+var M = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
+function H(e, r, n) {
+  const t = n ? L(n) : null, i = d(t);
+  return e = e || t instanceof i.HTMLInputElement && !M.has(t == null ? void 0 : t.type) || t instanceof i.HTMLTextAreaElement || t instanceof i.HTMLElement && t.isContentEditable, !(e && r === "keyboard" && n instanceof i.KeyboardEvent && !Reflect.has(K, n.key));
 }
-var h = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
-function H(t, r, e) {
-  var c;
-  const n = typeof window < "u" ? i(e == null ? void 0 : e.target).HTMLInputElement : HTMLInputElement, E = typeof window < "u" ? i(e == null ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement, d = typeof window < "u" ? i(e == null ? void 0 : e.target).HTMLElement : HTMLElement, l = typeof window < "u" ? i(e == null ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
-  return t = t || (e == null ? void 0 : e.target) instanceof n && !h.has((c = e == null ? void 0 : e.target) == null ? void 0 : c.type) || (e == null ? void 0 : e.target) instanceof E || (e == null ? void 0 : e.target) instanceof d && (e == null ? void 0 : e.target.isContentEditable), !(t && r === "keyboard" && e instanceof l && !Reflect.has(F, e.key));
-}
-var s = null, p = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map(), u = !1, m = !1, F = {
+var s = null, v = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map(), u = !1, f = !1, K = {
   Tab: !0,
   Escape: !0
 };
-function v(t, r) {
-  for (let e of p)
-    e(t, r);
+function c(e, r) {
+  for (let n of v)
+    n(e, r);
 }
-function f(t) {
-  u = !0, M(t) && (s = "keyboard", v("keyboard", t));
+function l(e) {
+  u = !0, T(e) && (s = "keyboard", c("keyboard", e));
 }
-function o(t) {
-  s = "pointer", (t.type === "mousedown" || t.type === "pointerdown") && (u = !0, v("pointer", t));
+function o(e) {
+  s = "pointer", (e.type === "mousedown" || e.type === "pointerdown") && (u = !0, c("pointer", e));
 }
-function w(t) {
-  k(t) && (u = !0, s = "virtual");
+function b(e) {
+  g(e) && (u = !0, s = "virtual");
 }
-function b(t) {
-  t.target === i(t.target) || t.target === y(t.target) || (!u && !m && (s = "virtual", v("virtual", t)), u = !1, m = !1);
+function w(e) {
+  const r = L(e);
+  r === d(r) || r === E(r) || (!u && !f && (s = "virtual", c("virtual", e)), u = !1, f = !1);
 }
-function g() {
-  u = !1, m = !0;
+function k() {
+  u = !1, f = !0;
 }
-function I(t) {
-  if (typeof window > "u" || a.get(i(t)))
+function V(e) {
+  if (typeof window > "u" || a.get(d(e)))
     return;
-  const r = i(t), e = y(t);
-  let n = r.HTMLElement.prototype.focus;
-  r.HTMLElement.prototype.focus = function() {
-    s = "virtual", v("virtual", null), u = !0, n.apply(this, arguments);
-  }, e.addEventListener("keydown", f, !0), e.addEventListener("keyup", f, !0), e.addEventListener("click", w, !0), r.addEventListener("focus", b, !0), r.addEventListener("blur", g, !1), typeof r.PointerEvent < "u" ? (e.addEventListener("pointerdown", o, !0), e.addEventListener("pointermove", o, !0), e.addEventListener("pointerup", o, !0)) : (e.addEventListener("mousedown", o, !0), e.addEventListener("mousemove", o, !0), e.addEventListener("mouseup", o, !0)), r.addEventListener(
+  const r = d(e), n = E(e);
+  let t = r.HTMLElement.prototype.focus;
+  function i() {
+    s = "virtual", c("virtual", null), u = !0, t.apply(this, arguments);
+  }
+  Object.defineProperty(r.HTMLElement.prototype, "focus", {
+    configurable: !0,
+    value: i
+  }), n.addEventListener("keydown", l, !0), n.addEventListener("keyup", l, !0), n.addEventListener("click", b, !0), r.addEventListener("focus", w, !0), r.addEventListener("blur", k, !1), typeof r.PointerEvent < "u" ? (n.addEventListener("pointerdown", o, !0), n.addEventListener("pointermove", o, !0), n.addEventListener("pointerup", o, !0)) : (n.addEventListener("mousedown", o, !0), n.addEventListener("mousemove", o, !0), n.addEventListener("mouseup", o, !0)), r.addEventListener(
     "beforeunload",
     () => {
-      K(t);
+      S(e);
     },
     { once: !0 }
-  ), a.set(r, { focus: n });
+  ), a.set(r, { focus: t });
 }
-var K = (t, r) => {
-  const e = i(t), n = y(t);
-  a.has(e) && (e.HTMLElement.prototype.focus = a.get(e).focus, n.removeEventListener("keydown", f, !0), n.removeEventListener("keyup", f, !0), n.removeEventListener("click", w, !0), e.removeEventListener("focus", b, !0), e.removeEventListener("blur", g, !1), typeof e.PointerEvent < "u" ? (n.removeEventListener("pointerdown", o, !0), n.removeEventListener("pointermove", o, !0), n.removeEventListener("pointerup", o, !0)) : (n.removeEventListener("mousedown", o, !0), n.removeEventListener("mousemove", o, !0), n.removeEventListener("mouseup", o, !0)), a.delete(e));
+var S = (e, r) => {
+  const n = d(e), t = E(e);
+  a.has(n) && (n.HTMLElement.prototype.focus = a.get(n).focus, t.removeEventListener("keydown", l, !0), t.removeEventListener("keyup", l, !0), t.removeEventListener("click", b, !0), n.removeEventListener("focus", w, !0), n.removeEventListener("blur", k, !1), typeof n.PointerEvent < "u" ? (t.removeEventListener("pointerdown", o, !0), t.removeEventListener("pointermove", o, !0), t.removeEventListener("pointerup", o, !0)) : (t.removeEventListener("mousedown", o, !0), t.removeEventListener("mousemove", o, !0), t.removeEventListener("mouseup", o, !0)), a.delete(n));
 };
-function L() {
+function y() {
   return s === "keyboard";
 }
-function V(t = {}) {
-  const { isTextInput: r, autoFocus: e, onChange: n, root: E } = t;
-  I(E), n == null || n({ isFocusVisible: e || L(), modality: s });
-  const d = (l, c) => {
-    H(!!r, l, c) && (n == null || n({ isFocusVisible: L(), modality: l }));
+function B(e = {}) {
+  const { isTextInput: r, autoFocus: n, onChange: t, root: i } = e;
+  V(i), t == null || t({ isFocusVisible: n || y(), modality: s });
+  const p = (m, h) => {
+    H(!!r, m, h) && (t == null || t({ isFocusVisible: y(), modality: m }));
   };
-  return p.add(d), () => {
-    p.delete(d);
+  return v.add(p), () => {
+    v.delete(p);
   };
 }
 export {
-  L as isFocusVisible,
+  y as isFocusVisible,
   a as listenerMap,
-  V as trackFocusVisible
+  B as trackFocusVisible
 };