uidex 0.2.0 → 0.2.1

package/dist/core/index.d.cts

@@ -359,6 +359,8 @@ declare class Overlay {
     private updateLabel;
     private applyLabelPosition;
     private updatePosition;
+    /** Move the label inside the overlay when there is no room outside. */
+    private clampLabel;
     private addListeners;
     private removeListeners;
 }

package/dist/core/index.d.ts

@@ -359,6 +359,8 @@ declare class Overlay {
     private updateLabel;
     private applyLabelPosition;
     private updatePosition;
+    /** Move the label inside the overlay when there is no room outside. */
+    private clampLabel;
     private addListeners;
     private removeListeners;
 }

package/dist/core/index.global.js

@@ -277,7 +277,7 @@ var UidexCore = (() => {
   }
 
   // src/core/overlay.ts
-  var DEFAULT_COLOR = "#e5e5e5";
+  var DEFAULT_COLOR = "#3b82f6";
   var DEFAULT_BORDER_STYLE = "solid";
   var DEFAULT_BORDER_WIDTH = 2;
   var DEFAULT_LABEL_POSITION = "top-left";
@@ -428,6 +428,23 @@ var UidexCore = (() => {
       this.element.style.left = `${rect.left}px`;
       this.element.style.width = `${rect.width}px`;
       this.element.style.height = `${rect.height}px`;
+      this.clampLabel(rect);
+    }
+    /** Move the label inside the overlay when there is no room outside. */
+    clampLabel(rect) {
+      if (!this.labelElement || this.labelElement.style.display === "none") return;
+      const {
+        labelPosition = DEFAULT_LABEL_POSITION
+      } = this.options;
+      const isTop = labelPosition === "top-left" || labelPosition === "top-right";
+      const labelHeight = 20;
+      if (isTop && rect.top < labelHeight) {
+        this.labelElement.style.top = "4px";
+        this.labelElement.style.transform = "";
+      } else if (!isTop && window.innerHeight - rect.bottom < labelHeight) {
+        this.labelElement.style.bottom = "4px";
+        this.labelElement.style.transform = "";
+      }
     }
     addListeners() {
       window.addEventListener("resize", this.boundUpdatePosition);
@@ -3242,6 +3259,7 @@ body.uidex-inspecting * {
       this.shadowHost.style.width = "0";
       this.shadowHost.style.height = "0";
       this.shadowHost.style.pointerEvents = "none";
+      this.shadowHost.style.zIndex = "2147483646";
       this.shadowRoot = this.shadowHost.attachShadow({ mode: "open" });
       injectStyles(this.shadowRoot);
       const presentIds = this.scanPresentIds(componentIds);