@rogieking/figui3 11.2.0 → 11.2.2

package/fig-editor.css

@@ -144,6 +144,10 @@ dialog[is="fig-toast"] {
   width: 15rem;
   padding: 0;
   pointer-events: auto;
+
+  & > fig-content {
+    padding-top: 0;
+  }
 }
 
 fig-palette-editor {
@@ -326,7 +330,7 @@ fig-fill-picker {
     aspect-ratio: auto;
     width: calc(100% - var(--spacer-3) * 2);
     margin: var(--spacer-2) var(--spacer-3);
-    margin-top: calc(var(--spacer-4) + var(--spacer-1));
+    margin-top: var(--spacer-4);
     margin-bottom:0;
     background: transparent;
     &::after{

package/fig-editor.js

@@ -4283,13 +4283,10 @@ class FigFillPicker extends HTMLElement {
       if (!gradientBarInput) return;
       this.#syncingGradientBar = true;
       try {
-        gradientBarInput.setAttribute(
-          "value",
-          JSON.stringify({
-            type: "gradient",
-            gradient: gradientToValueShape(gradient),
-          }),
-        );
+        gradientBarInput.value = {
+          type: "gradient",
+          gradient: gradientToValueShape(gradient),
+        };
       } finally {
         this.#syncingGradientBar = false;
       }
@@ -4772,13 +4769,10 @@ class FigFillPicker extends HTMLElement {
     );
     if (barInput) {
       this.#syncingGradientBar = true;
-      barInput.setAttribute(
-        "value",
-        JSON.stringify({
-          type: "gradient",
-          gradient: gradientToValueShape(this.#gradient),
-        }),
-      );
+      barInput.value = {
+        type: "gradient",
+        gradient: gradientToValueShape(this.#gradient),
+      };
       this.#syncingGradientBar = false;
     }
 

package/fig.js

@@ -11067,8 +11067,8 @@ class FigInputPalette extends HTMLElement {
     const popup = document.createElement("dialog", { is: "fig-popup" });
     popup.setAttribute("is", "fig-popup");
     popup.setAttribute("title", "Edit palette");
-    popup.setAttribute("position", "bottom left");
-    popup.setAttribute("offset", "0 8");
+    popup.setAttribute("position", "center left");
+    popup.setAttribute("offset", "8 0");
     popup.setAttribute("viewport-margin", "8");
     popup.setAttribute("popover", "manual");
     popup.className = "fig-palette-editor-popup";
@@ -11109,6 +11109,9 @@ class FigInputPalette extends HTMLElement {
     popup.addEventListener("toggle", this.#boundPickerClosed);
 
     (figGetOverlayRoot() ?? document.body).append(popup);
+    popup
+      .querySelector(":scope > fig-header")
+      ?.setAttribute("borderless", "");
     this.#pickerPopup = popup;
     this.#pickerEditor = editor;
     this.querySelector(".palette-colors-inline")?.setAttribute(
@@ -12339,11 +12342,14 @@ class FigInputGradient extends HTMLElement {
   }
 
   set value(val) {
-    if (typeof val === "string") {
-      this.setAttribute("value", val);
-    } else {
-      this.setAttribute("value", JSON.stringify(val));
+    const serialized = typeof val === "string" ? val : JSON.stringify(val);
+    if (this.getAttribute("value") === serialized) {
+      this.#parseValue();
+      this.#syncSwatch();
+      this.#syncHandles();
+      return;
     }
+    this.setAttribute("value", serialized);
   }
 
   focus(options) {

package/package.json

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