@rogieking/figui3 2.33.4 → 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

@@ -6462,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);
@@ -6490,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 = [];
@@ -6507,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();
@@ -6669,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.33.4",
+  "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",