locize 4.0.14 → 4.0.16

package/dist/cjs/ui/elements/highlightBox.js

@@ -6,7 +6,7 @@ function HighlightBox(ele, borderColor, shadowColor) {
   var rect = ele.getBoundingClientRect();
   var box = document.createElement('div');
   box.classList.add('i18next-editor-highlight');
-  box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: 1px solid ").concat(borderColor, "; border-radius: 2px; ").concat(shadowColor ? "box-shadow: 0 0 20px 0 ".concat(shadowColor, ";") : '');
+  box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: ").concat(borderColor === 'none' ? 'none' : "1px solid ".concat(borderColor), "; border-radius: 15px; ").concat(shadowColor ? "box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.1), inset -1px -1px 5px rgba(61, 67, 69, 0.3), 0 0 20px 0 ".concat(shadowColor, ";") : '');
   box.setAttribute('data-i18next-editor-element', 'true');
   return box;
 }

package/dist/cjs/ui/elements/popup.js

@@ -46,7 +46,7 @@ function Popup(url, cb) {
   var popup = document.createElement('div');
   popup.setAttribute('id', popupId);
   popup.classList.add('i18next-editor-popup');
-  popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 99999;\n  ";
+  popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 100000;\n  ";
   popup.setAttribute('data-i18next-editor-element', 'true');
   var header = document.createElement('div');
   header.classList.add('i18next-editor-popup-header');

package/dist/cjs/ui/elements/ribbonBox.js

@@ -48,7 +48,11 @@ function RibbonBox() {
   btnbox.style = 'display: flex; flex-direction: column; align-items: flex-start; margin-left: 2px; margin-top: 1px';
   Object.keys(keys).forEach(function (k) {
     var data = keys[k];
-    var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function () {
+    var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function (e) {
+      if (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
       postMessage.api.selectKey(data);
     });
     btn.style.marginBottom = '2px';

package/dist/cjs/ui/highlightNode.js

@@ -17,7 +17,7 @@ var selected = {};
 function highlight(item, node, keys) {
   var rectEle = utils.getOptimizedBoundingRectEle(node);
   if (!item.highlightBox) {
-    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight);
+    var box = highlightBox.HighlightBox(rectEle, 'none', 'rgba(0,0,0,0.1)');
     document.body.appendChild(box);
     item.highlightBox = box;
   }
@@ -84,7 +84,7 @@ function selectedHighlight(item, node, keys) {
   var id = item.id;
   var rectEle = utils.getOptimizedBoundingRectEle(node);
   if (!item.highlightBox) {
-    var box = highlightBox.HighlightBox(rectEle, vars.colors.highlight, vars.colors.gray);
+    var box = highlightBox.HighlightBox(rectEle, 'none', vars.colors.gray);
     document.body.appendChild(box);
     item.highlightBox = box;
   }

package/dist/cjs/ui/popup.js

@@ -12,7 +12,7 @@ function initDragElement() {
   var popups = document.getElementsByClassName('i18next-editor-popup');
   var elmnt = null;
   var overlay = null;
-  var currentZIndex = 100;
+  var currentZIndex = 100000;
   for (var i = 0; i < popups.length; i++) {
     var popup = popups[i];
     var header = getHeader(popup);

package/dist/cjs/utils.js

@@ -88,7 +88,7 @@ function getI18nMetaFromNode(el) {
 }
 function getElementNamespace(el) {
   var found;
-  var find = function find(ele) {
+  var _find = function find(ele) {
     var opts = getAttribute(ele, 'i18next-options');
     if (!opts) opts = getAttribute(ele, 'data-i18next-options');
     if (!opts) opts = getAttribute(ele, 'i18n-options');
@@ -104,9 +104,9 @@ function getElementNamespace(el) {
     if (!found) found = getAttribute(ele, 'data-i18next-ns');
     if (!found) found = getAttribute(ele, 'i18n-ns');
     if (!found) found = getAttribute(ele, 'data-i18n-ns');
-    if (!found && ele.parentElement) find(ele.parentElement);
+    if (!found && ele.parentElement) _find(ele.parentElement);
   };
-  find(el);
+  _find(el);
   return found;
 }
 function getQsParameterByName(name, url) {

package/dist/esm/ui/elements/highlightBox.js

@@ -2,7 +2,7 @@ function HighlightBox(ele, borderColor, shadowColor) {
   var rect = ele.getBoundingClientRect();
   var box = document.createElement('div');
   box.classList.add('i18next-editor-highlight');
-  box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: 1px solid ").concat(borderColor, "; border-radius: 2px; ").concat(shadowColor ? "box-shadow: 0 0 20px 0 ".concat(shadowColor, ";") : '');
+  box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: ").concat(borderColor === 'none' ? 'none' : "1px solid ".concat(borderColor), "; border-radius: 15px; ").concat(shadowColor ? "box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.1), inset -1px -1px 5px rgba(61, 67, 69, 0.3), 0 0 20px 0 ".concat(shadowColor, ";") : '');
   box.setAttribute('data-i18next-editor-element', 'true');
   return box;
 }

package/dist/esm/ui/elements/popup.js

@@ -42,7 +42,7 @@ function Popup(url, cb) {
   var popup = document.createElement('div');
   popup.setAttribute('id', popupId);
   popup.classList.add('i18next-editor-popup');
-  popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 99999;\n  ";
+  popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 100000;\n  ";
   popup.setAttribute('data-i18next-editor-element', 'true');
   var header = document.createElement('div');
   header.classList.add('i18next-editor-popup-header');

package/dist/esm/ui/elements/ribbonBox.js

@@ -44,7 +44,11 @@ function RibbonBox() {
   btnbox.style = 'display: flex; flex-direction: column; align-items: flex-start; margin-left: 2px; margin-top: 1px';
   Object.keys(keys).forEach(function (k) {
     var data = keys[k];
-    var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function () {
+    var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function (e) {
+      if (e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
       api.selectKey(data);
     });
     btn.style.marginBottom = '2px';

package/dist/esm/ui/highlightNode.js

@@ -9,7 +9,7 @@ var selected = {};
 function highlight(item, node, keys) {
   var rectEle = getOptimizedBoundingRectEle(node);
   if (!item.highlightBox) {
-    var box = HighlightBox(rectEle, colors.highlight);
+    var box = HighlightBox(rectEle, 'none', 'rgba(0,0,0,0.1)');
     document.body.appendChild(box);
     item.highlightBox = box;
   }
@@ -76,7 +76,7 @@ function selectedHighlight(item, node, keys) {
   var id = item.id;
   var rectEle = getOptimizedBoundingRectEle(node);
   if (!item.highlightBox) {
-    var box = HighlightBox(rectEle, colors.highlight, colors.gray);
+    var box = HighlightBox(rectEle, 'none', colors.gray);
     document.body.appendChild(box);
     item.highlightBox = box;
   }

package/dist/esm/ui/popup.js

@@ -8,7 +8,7 @@ function initDragElement() {
   var popups = document.getElementsByClassName('i18next-editor-popup');
   var elmnt = null;
   var overlay = null;
-  var currentZIndex = 100;
+  var currentZIndex = 100000;
   for (var i = 0; i < popups.length; i++) {
     var popup = popups[i];
     var header = getHeader(popup);

package/dist/esm/utils.js

@@ -80,7 +80,7 @@ function getI18nMetaFromNode(el) {
 }
 function getElementNamespace(el) {
   var found;
-  var find = function find(ele) {
+  var _find = function find(ele) {
     var opts = getAttribute(ele, 'i18next-options');
     if (!opts) opts = getAttribute(ele, 'data-i18next-options');
     if (!opts) opts = getAttribute(ele, 'i18n-options');
@@ -96,9 +96,9 @@ function getElementNamespace(el) {
     if (!found) found = getAttribute(ele, 'data-i18next-ns');
     if (!found) found = getAttribute(ele, 'i18n-ns');
     if (!found) found = getAttribute(ele, 'data-i18n-ns');
-    if (!found && ele.parentElement) find(ele.parentElement);
+    if (!found && ele.parentElement) _find(ele.parentElement);
   };
-  find(el);
+  _find(el);
   return found;
 }
 function getQsParameterByName(name, url) {

package/dist/umd/locize.js

@@ -396,7 +396,7 @@
   }
   function getElementNamespace(el) {
     var found;
-    var find = function find(ele) {
+    var _find = function find(ele) {
       var opts = getAttribute(ele, 'i18next-options');
       if (!opts) opts = getAttribute(ele, 'data-i18next-options');
       if (!opts) opts = getAttribute(ele, 'i18n-options');
@@ -412,9 +412,9 @@
       if (!found) found = getAttribute(ele, 'data-i18next-ns');
       if (!found) found = getAttribute(ele, 'i18n-ns');
       if (!found) found = getAttribute(ele, 'data-i18n-ns');
-      if (!found && ele.parentElement) find(ele.parentElement);
+      if (!found && ele.parentElement) _find(ele.parentElement);
     };
-    find(el);
+    _find(el);
     return found;
   }
   function getQsParameterByName(name, url) {
@@ -853,7 +853,7 @@
     var popup = document.createElement('div');
     popup.setAttribute('id', popupId);
     popup.classList.add('i18next-editor-popup');
-    popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 99999;\n  ";
+    popup.style = "\n  background-color: transparent;\n  border: 1px solid rgba(200, 200, 200, 0.9);\n  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  --i18next-editor-popup-height: 200px;\n  height: var(--i18next-editor-popup-height);\n  min-height: 150px;\n  min-width: 300px;\n  --i18next-editor-popup-width: 400px;\n  width: var(--i18next-editor-popup-width);\n  max-height: 800px;\n  max-width: 1000px;\n\n  position: fixed;\n  --i18next-editor-popup-position-top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  top: calc(100vh - var(--i18next-editor-popup-height) - 10px);\n  --i18next-editor-popup-position-left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n  left: calc(100vw - var(--i18next-editor-popup-width) - 10px);\n\n  overflow: visible;\n  z-index: 100000;\n  ";
     popup.setAttribute('data-i18next-editor-element', 'true');
     var header = document.createElement('div');
     header.classList.add('i18next-editor-popup-header');
@@ -1036,7 +1036,11 @@
     btnbox.style = 'display: flex; flex-direction: column; align-items: flex-start; margin-left: 2px; margin-top: 1px';
     Object.keys(keys).forEach(function (k) {
       var data = keys[k];
-      var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function () {
+      var btn = RibbonButton(k.replace('attr:', ''), "".concat(data.ns, ":").concat(data.key), function (e) {
+        if (e) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
         api.selectKey(data);
       });
       btn.style.marginBottom = '2px';
@@ -1053,7 +1057,7 @@
     var rect = ele.getBoundingClientRect();
     var box = document.createElement('div');
     box.classList.add('i18next-editor-highlight');
-    box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: 1px solid ").concat(borderColor, "; border-radius: 2px; ").concat(shadowColor ? "box-shadow: 0 0 20px 0 ".concat(shadowColor, ";") : '');
+    box.style = "position: absolute; z-index: 99999; pointer-events: none; top: ".concat(rect.top - 2 + window.scrollY, "px; left: ").concat(rect.left - 2 + window.scrollX, "px; height: ").concat(rect.height + 4, "px; width: ").concat(rect.width + 4, "px; border: ").concat(borderColor === 'none' ? 'none' : "1px solid ".concat(borderColor), "; border-radius: 15px; ").concat(shadowColor ? "box-shadow: inset 1px 1px 5px rgba(255, 255, 255, 0.1), inset -1px -1px 5px rgba(61, 67, 69, 0.3), 0 0 20px 0 ".concat(shadowColor, ";") : '');
     box.setAttribute('data-i18next-editor-element', 'true');
     return box;
   }
@@ -1101,8 +1105,9 @@
   function getAxisLength(axis) {
     return axis === 'y' ? 'height' : 'width';
   }
+  const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
   function getSideAxis(placement) {
-    return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
+    return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
   }
   function getAlignmentAxis(placement) {
     return getOppositeAxis(getSideAxis(placement));
@@ -1127,19 +1132,19 @@
   function getOppositeAlignmentPlacement(placement) {
     return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
   }
+  const lrPlacement = ['left', 'right'];
+  const rlPlacement = ['right', 'left'];
+  const tbPlacement = ['top', 'bottom'];
+  const btPlacement = ['bottom', 'top'];
   function getSideList(side, isStart, rtl) {
-    const lr = ['left', 'right'];
-    const rl = ['right', 'left'];
-    const tb = ['top', 'bottom'];
-    const bt = ['bottom', 'top'];
     switch (side) {
       case 'top':
       case 'bottom':
-        if (rtl) return isStart ? rl : lr;
-        return isStart ? lr : rl;
+        if (rtl) return isStart ? rlPlacement : lrPlacement;
+        return isStart ? lrPlacement : rlPlacement;
       case 'left':
       case 'right':
-        return isStart ? tb : bt;
+        return isStart ? tbPlacement : btPlacement;
       default:
         return [];
     }
@@ -1662,16 +1667,22 @@
           const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
           const nextPlacement = placements[nextIndex];
           if (nextPlacement) {
-            // Try next placement and re-run the lifecycle.
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
+            const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+            if (!ignoreCrossAxisOverflow ||
+            // We leave the current main axis only if every placement on that axis
+            // overflows the main axis.
+            overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+              // Try next placement and re-run the lifecycle.
+              return {
+                data: {
+                  index: nextIndex,
+                  overflows: overflowsData
+                },
+                reset: {
+                  placement: nextPlacement
+                }
+              };
+            }
           }
 
           // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1917,6 +1928,8 @@
     };
   };
 
+  const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
   // For type backwards-compatibility, the `OffsetOptions` type was also
   // Derivable.
 
@@ -1930,7 +1943,7 @@
     const side = getSide(placement);
     const alignment = getAlignment(placement);
     const isVertical = getSideAxis(placement) === 'y';
-    const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+    const mainAxisMulti = originSides.has(side) ? -1 : 1;
     const crossAxisMulti = rtl && isVertical ? -1 : 1;
     const rawValue = evaluate(options, state);
 
@@ -2130,7 +2143,7 @@
         if (checkCrossAxis) {
           var _middlewareData$offse, _middlewareData$offse2;
           const len = mainAxis === 'y' ? 'width' : 'height';
-          const isOriginSide = ['top', 'left'].includes(getSide(placement));
+          const isOriginSide = originSides.has(getSide(placement));
           const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
           const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
           if (crossAxisCoord < limitMin) {
@@ -2275,34 +2288,40 @@
     }
     return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
   }
+  const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
   function isOverflowElement(element) {
     const {
       overflow,
       overflowX,
       overflowY,
       display
-    } = getComputedStyle(element);
-    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
+    } = getComputedStyle$1(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
   }
+  const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
   function isTableElement(element) {
-    return ['table', 'td', 'th'].includes(getNodeName(element));
+    return tableElements.has(getNodeName(element));
   }
+  const topLayerSelectors = [':popover-open', ':modal'];
   function isTopLayer(element) {
-    return [':popover-open', ':modal'].some(selector => {
+    return topLayerSelectors.some(selector => {
       try {
         return element.matches(selector);
-      } catch (e) {
+      } catch (_e) {
         return false;
       }
     });
   }
+  const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+  const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+  const containValues = ['paint', 'layout', 'strict', 'content'];
   function isContainingBlock(elementOrCss) {
     const webkit = isWebKit();
-    const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+    const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
     // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-    return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+    return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
   }
   function getContainingBlock(element) {
     let currentNode = getParentNode(element);
@@ -2320,10 +2339,11 @@
     if (typeof CSS === 'undefined' || !CSS.supports) return false;
     return CSS.supports('-webkit-backdrop-filter', 'none');
   }
+  const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
   function isLastTraversableNode(node) {
-    return ['html', 'body', '#document'].includes(getNodeName(node));
+    return lastTraversableNodeNames.has(getNodeName(node));
   }
-  function getComputedStyle(element) {
+  function getComputedStyle$1(element) {
     return getWindow(element).getComputedStyle(element);
   }
   function getNodeScroll(element) {
@@ -2385,7 +2405,7 @@
   }
 
   function getCssDimensions(element) {
-    const css = getComputedStyle(element);
+    const css = getComputedStyle$1(element);
     // In testing environments, the `width` and `height` properties are empty
     // strings for SVG elements, returning NaN. Fallback to `0` in this case.
     let width = parseFloat(css.width) || 0;
@@ -2490,7 +2510,7 @@
       while (currentIFrame && offsetParent && offsetWin !== currentWin) {
         const iframeScale = getScale(currentIFrame);
         const iframeRect = currentIFrame.getBoundingClientRect();
-        const css = getComputedStyle(currentIFrame);
+        const css = getComputedStyle$1(currentIFrame);
         const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
         const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
         x *= iframeScale.x;
@@ -2521,14 +2541,9 @@
     return rect.left + leftScroll;
   }
 
-  function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-    if (ignoreScrollbarX === void 0) {
-      ignoreScrollbarX = false;
-    }
+  function getHTMLOffset(documentElement, scroll) {
     const htmlRect = documentElement.getBoundingClientRect();
-    const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect));
+    const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
     const y = htmlRect.top + scroll.scrollTop;
     return {
       x,
@@ -2567,7 +2582,7 @@
         offsets.y = offsetRect.y + offsetParent.clientTop;
       }
     }
-    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
     return {
       width: rect.width * scale.x,
       height: rect.height * scale.y,
@@ -2590,7 +2605,7 @@
     const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
     let x = -scroll.scrollLeft + getWindowScrollBarX(element);
     const y = -scroll.scrollTop;
-    if (getComputedStyle(body).direction === 'rtl') {
+    if (getComputedStyle$1(body).direction === 'rtl') {
       x += max(html.clientWidth, body.clientWidth) - width;
     }
     return {
@@ -2601,6 +2616,10 @@
     };
   }
 
+  // Safety check: ensure the scrollbar space is reasonable in case this
+  // calculation is affected by unusual styles.
+  // Most scrollbars leave 15-18px of space.
+  const SCROLLBAR_MAX = 25;
   function getViewportRect(element, strategy) {
     const win = getWindow(element);
     const html = getDocumentElement(element);
@@ -2618,6 +2637,24 @@
         y = visualViewport.offsetTop;
       }
     }
+    const windowScrollbarX = getWindowScrollBarX(html);
+    // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+    // visual width of the <html> but this is not considered in the size
+    // of `html.clientWidth`.
+    if (windowScrollbarX <= 0) {
+      const doc = html.ownerDocument;
+      const body = doc.body;
+      const bodyStyles = getComputedStyle(body);
+      const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+      const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+      if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+        width -= clippingStableScrollbarWidth;
+      }
+    } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+      // If the <body> scrollbar is on the left, the width needs to be extended
+      // by the scrollbar amount so there isn't extra space on the right.
+      width += windowScrollbarX;
+    }
     return {
       width,
       height,
@@ -2626,6 +2663,7 @@
     };
   }
 
+  const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
   // Returns the inner client rect, subtracting scrollbars if present.
   function getInnerBoundingClientRect(element, strategy) {
     const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -2667,7 +2705,7 @@
     if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
       return false;
     }
-    return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+    return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
   }
 
   // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -2680,17 +2718,17 @@
     }
     let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
     let currentContainingBlockComputedStyle = null;
-    const elementIsFixed = getComputedStyle(element).position === 'fixed';
+    const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
     let currentNode = elementIsFixed ? getParentNode(element) : element;
 
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
     while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-      const computedStyle = getComputedStyle(currentNode);
+      const computedStyle = getComputedStyle$1(currentNode);
       const currentNodeIsContaining = isContainingBlock(currentNode);
       if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
         currentContainingBlockComputedStyle = null;
       }
-      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
       if (shouldDropCurrentNode) {
         // Drop non-containing blocks.
         result = result.filter(ancestor => ancestor !== currentNode);
@@ -2753,6 +2791,12 @@
       scrollTop: 0
     };
     const offsets = createCoords(0);
+
+    // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+    // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+    function setLeftRTLScrollbarOffset() {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
     if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
       if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
@@ -2762,11 +2806,12 @@
         offsets.x = offsetRect.x + offsetParent.clientLeft;
         offsets.y = offsetRect.y + offsetParent.clientTop;
       } else if (documentElement) {
-        // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-        // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-        offsets.x = getWindowScrollBarX(documentElement);
+        setLeftRTLScrollbarOffset();
       }
     }
+    if (isFixed && !isOffsetParentAnElement && documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
     const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
     const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
     const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -2779,11 +2824,11 @@
   }
 
   function isStaticPositioned(element) {
-    return getComputedStyle(element).position === 'static';
+    return getComputedStyle$1(element).position === 'static';
   }
 
   function getTrueOffsetParent(element, polyfill) {
-    if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+    if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
       return null;
     }
     if (polyfill) {
@@ -2844,7 +2889,7 @@
   };
 
   function isRTL(element) {
-    return getComputedStyle(element).direction === 'rtl';
+    return getComputedStyle$1(element).direction === 'rtl';
   }
 
   const platform = {
@@ -2953,7 +2998,7 @@
   function highlight(item, node, keys) {
     var rectEle = getOptimizedBoundingRectEle(node);
     if (!item.highlightBox) {
-      var box = HighlightBox(rectEle, colors.highlight);
+      var box = HighlightBox(rectEle, 'none', 'rgba(0,0,0,0.1)');
       document.body.appendChild(box);
       item.highlightBox = box;
     }
@@ -3020,7 +3065,7 @@
     var id = item.id;
     var rectEle = getOptimizedBoundingRectEle(node);
     if (!item.highlightBox) {
-      var box = HighlightBox(rectEle, colors.highlight, colors.gray);
+      var box = HighlightBox(rectEle, 'none', colors.gray);
       document.body.appendChild(box);
       item.highlightBox = box;
     }
@@ -3412,7 +3457,7 @@
     var popups = document.getElementsByClassName('i18next-editor-popup');
     var elmnt = null;
     var overlay = null;
-    var currentZIndex = 100;
+    var currentZIndex = 100000;
     for (var i = 0; i < popups.length; i++) {
       var popup = popups[i];
       var header = getHeader(popup);