@rogieking/figui3 2.33.3 → 2.34.0

package/components.css

@@ -1439,10 +1439,18 @@ fig-3d-rotate {
   gap: var(--spacer-2);
   width: 100%;
   --aspect-ratio: 1 / 1;
+  --perspective: 20rem;
   --gradient-start-color: light-dark(
     rgba(0, 0, 0, 0.05),
     rgba(255, 255, 255, 0.05)
   );
+  --border-width: 1px;
+  --border-start-color: light-dark(
+    rgba(0, 0, 0, 0.15),
+    rgba(255, 255, 255, 0.15)
+  );
+  --border-end-color: transparent;
+  --border-end-color: transparent;
   --gradient-end-color: transparent;
   --figma-3d-rotate-handle-size: 6px;
   --front-face-bg: light-dark(var(--figma-color-bg), #555);
@@ -1484,7 +1492,8 @@ fig-3d-rotate {
     aspect-ratio: 1 / 1;
     max-height: max(3.5rem, 50%);
     max-width: max(3.5rem, 50%);
-    perspective: 20rem;
+    perspective: var(--perspective, 20rem);
+    container-type: inline-size;
   }
 
   .fig-3d-rotate-cube {
@@ -1493,6 +1502,7 @@ fig-3d-rotate {
     position: relative;
     aspect-ratio: 1 / 1;
     transform-style: preserve-3d;
+    transform-origin: 50% 50% -50cqi;
   }
 
   .fig-3d-rotate-face {
@@ -1531,8 +1541,8 @@ fig-3d-rotate {
         rotateY(-0.25turn);
       background: linear-gradient(
         to bottom,
-        var(--gradient-start-color),
-        var(--gradient-start-color)
+        var(--border-start-color),
+        var(--border-end-color)
       );
       border-radius: var(--radius-medium);
     }
@@ -1544,6 +1554,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: var(--border-width) 0;
+      border-style: solid;
+      border-image: linear-gradient(
+          to right,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.left {
       transform-origin: 100% 50%;
@@ -1553,6 +1571,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: var(--border-width) 0;
+      border-style: solid;
+      border-image: linear-gradient(
+          to left,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.top {
       translate: 0 -100%;
@@ -1563,6 +1589,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: 0 var(--border-width);
+      border-style: solid;
+      border-image: linear-gradient(
+          to top,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
     &.bottom {
       top: 100%;
@@ -1574,6 +1608,14 @@ fig-3d-rotate {
         var(--gradient-start-color),
         var(--gradient-end-color)
       );
+      border-width: 0 var(--border-width);
+      border-style: solid;
+      border-image: linear-gradient(
+          to bottom,
+          var(--border-start-color),
+          var(--border-end-color)
+        )
+        1;
     }
   }
 }

package/fig.js

@@ -2726,6 +2726,7 @@ class FigInputText extends HTMLElement {
   #isInteracting = false;
   #boundMouseMove;
   #boundMouseUp;
+  #boundWindowBlur;
   #boundMouseDown;
   #boundInputChange;
 
@@ -2734,6 +2735,7 @@ class FigInputText extends HTMLElement {
     // Pre-bind the event handlers once
     this.#boundMouseMove = this.#handleMouseMove.bind(this);
     this.#boundMouseUp = this.#handleMouseUp.bind(this);
+    this.#boundWindowBlur = this.#handleMouseUp.bind(this);
     this.#boundMouseDown = this.#handleMouseDown.bind(this);
     this.#boundInputChange = (e) => {
       e.stopPropagation();
@@ -2831,6 +2833,7 @@ class FigInputText extends HTMLElement {
     this.removeEventListener("pointerdown", this.#boundMouseDown);
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
+    window.removeEventListener("blur", this.#boundWindowBlur);
   }
 
   focus() {
@@ -2862,6 +2865,10 @@ class FigInputText extends HTMLElement {
   }
   #handleMouseMove(e) {
     if (this.type !== "number") return;
+    if (e.buttons === 0) {
+      this.#handleMouseUp();
+      return;
+    }
     let step = (this.step || 1) * e.movementX;
     let value = Number(this.input.value);
     value = value / (this.transform || 1) + step;
@@ -2885,6 +2892,7 @@ class FigInputText extends HTMLElement {
       this.style.userSelect = "none";
       window.addEventListener("pointermove", this.#boundMouseMove);
       window.addEventListener("pointerup", this.#boundMouseUp);
+      window.addEventListener("blur", this.#boundWindowBlur);
     }
   }
   #handleMouseUp(e) {
@@ -2897,6 +2905,7 @@ class FigInputText extends HTMLElement {
     this.style.userSelect = "all";
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
+    window.removeEventListener("blur", this.#boundWindowBlur);
   }
   #sanitizeInput(value, transform = true) {
     let sanitized = value;
@@ -3018,6 +3027,7 @@ customElements.define("fig-input-text", FigInputText);
 class FigInputNumber extends HTMLElement {
   #boundMouseMove;
   #boundMouseUp;
+  #boundWindowBlur;
   #boundMouseDown;
   #boundInputChange;
   #boundInput;
@@ -3049,6 +3059,7 @@ class FigInputNumber extends HTMLElement {
     // Pre-bind the event handlers once
     this.#boundMouseMove = this.#handleMouseMove.bind(this);
     this.#boundMouseUp = this.#handleMouseUp.bind(this);
+    this.#boundWindowBlur = this.#handleMouseUp.bind(this);
     this.#boundMouseDown = this.#handleMouseDown.bind(this);
     this.#boundInputChange = (e) => {
       e.stopPropagation();
@@ -3170,6 +3181,7 @@ class FigInputNumber extends HTMLElement {
     this.removeEventListener("pointerdown", this.#boundMouseDown);
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
+    window.removeEventListener("blur", this.#boundWindowBlur);
   }
 
   focus() {
@@ -3322,6 +3334,10 @@ class FigInputNumber extends HTMLElement {
 
   #handleMouseMove(e) {
     if (this.disabled) return;
+    if (e.buttons === 0) {
+      this.#handleMouseUp();
+      return;
+    }
     let step = (this.step || 1) * e.movementX;
     let numericValue = this.#getNumericValue(this.input.value);
     let value = Number(numericValue) / (this.transform || 1) + step;
@@ -3343,6 +3359,7 @@ class FigInputNumber extends HTMLElement {
       this.style.userSelect = "none";
       window.addEventListener("pointermove", this.#boundMouseMove);
       window.addEventListener("pointerup", this.#boundMouseUp);
+      window.addEventListener("blur", this.#boundWindowBlur);
     }
   }
 
@@ -3355,6 +3372,7 @@ class FigInputNumber extends HTMLElement {
     this.style.userSelect = "all";
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
+    window.removeEventListener("blur", this.#boundWindowBlur);
   }
 
   #sanitizeInput(value, transform = true) {
@@ -6444,12 +6462,13 @@ class Fig3DRotate extends HTMLElement {
   #fieldInputs = {};
 
   static get observedAttributes() {
-    return ["value", "precision", "aspect-ratio", "fields"];
+    return ["value", "precision", "aspect-ratio", "fields", "perspective"];
   }
 
   connectedCallback() {
     this.#precision = parseInt(this.getAttribute("precision") || "1");
     this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    this.#syncPerspectiveVar(this.getAttribute("perspective"));
     this.#parseFields(this.getAttribute("fields"));
     const val = this.getAttribute("value");
     if (val) this.#parseValue(val);
@@ -6472,6 +6491,14 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
+  #syncPerspectiveVar(value) {
+    if (value && value.trim()) {
+      this.style.setProperty("--perspective", value.trim());
+    } else {
+      this.style.removeProperty("--perspective");
+    }
+  }
+
   #parseFields(str) {
     if (!str || !str.trim()) {
       this.#fields = [];
@@ -6489,6 +6516,10 @@ class Fig3DRotate extends HTMLElement {
       this.#syncAspectRatioVar(newValue);
       return;
     }
+    if (name === "perspective") {
+      this.#syncPerspectiveVar(newValue);
+      return;
+    }
     if (name === "fields") {
       this.#parseFields(newValue);
       if (this.#cube) this.#render();
@@ -6651,10 +6682,12 @@ class Fig3DRotate extends HTMLElement {
       this.#rx = this.#snapToIncrement(startRx - dy * 0.5);
       this.#updateCube();
       this.#syncFieldInputs();
+      this.setAttribute("value", this.value);
       this.#emit("input");
     };
 
     const onUp = () => {
+      this.setAttribute("value", this.value);
       this.#isDragging = false;
       this.#container.classList.remove("dragging");
       document.removeEventListener("pointermove", onMove);
@@ -8240,6 +8273,12 @@ class FigFillPicker extends HTMLElement {
   #setupColorAreaEvents() {
     if (!this.#colorArea || !this.#colorAreaHandle) return;
 
+    const endColorDrag = () => {
+      if (!this.#isDraggingColor) return;
+      this.#isDraggingColor = false;
+      this.#emitChange();
+    };
+
     const updateFromEvent = (e) => {
       const rect = this.#colorArea.getBoundingClientRect();
       const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
@@ -8261,15 +8300,17 @@ class FigFillPicker extends HTMLElement {
     });
 
     this.#colorArea.addEventListener("pointermove", (e) => {
-      if (this.#isDraggingColor) {
-        updateFromEvent(e);
+      if (!this.#isDraggingColor) return;
+      if (e.buttons === 0) {
+        endColorDrag();
+        return;
       }
+      updateFromEvent(e);
     });
 
-    this.#colorArea.addEventListener("pointerup", () => {
-      this.#isDraggingColor = false;
-      this.#emitChange();
-    });
+    this.#colorArea.addEventListener("pointerup", endColorDrag);
+    this.#colorArea.addEventListener("pointercancel", endColorDrag);
+    this.#colorArea.addEventListener("lostpointercapture", endColorDrag);
 
     // Handle drag (for when handle is at corners)
     this.#colorAreaHandle.addEventListener("pointerdown", (e) => {
@@ -8279,15 +8320,17 @@ class FigFillPicker extends HTMLElement {
     });
 
     this.#colorAreaHandle.addEventListener("pointermove", (e) => {
-      if (this.#isDraggingColor) {
-        updateFromEvent(e);
+      if (!this.#isDraggingColor) return;
+      if (e.buttons === 0) {
+        endColorDrag();
+        return;
       }
+      updateFromEvent(e);
     });
 
-    this.#colorAreaHandle.addEventListener("pointerup", () => {
-      this.#isDraggingColor = false;
-      this.#emitChange();
-    });
+    this.#colorAreaHandle.addEventListener("pointerup", endColorDrag);
+    this.#colorAreaHandle.addEventListener("pointercancel", endColorDrag);
+    this.#colorAreaHandle.addEventListener("lostpointercapture", endColorDrag);
   }
 
   #updateColorInputs() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.33.3",
+  "version": "2.34.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",