@rogieking/figui3 8.9.22 → 8.9.24

package/fig-editor.css

@@ -1,3 +1,4 @@
+/* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
 @import url("fig-layer.css");
 
 :root,

package/fig-editor.js

@@ -1,3 +1,4 @@
+/* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
 import "./fig.js";
 import "./fig-lab.js";
 
@@ -4475,7 +4476,7 @@ class FigFillPicker extends HTMLElement {
   #applyDefaultVideo({ emit = true } = {}) {
     if (this.#video.url) {
       this.#video.missing = false;
-      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url, { emit });
+      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url);
       return;
     }
     const fallback = this.getAttribute("default-video");
@@ -4489,14 +4490,15 @@ class FigFillPicker extends HTMLElement {
       ".fig-fill-picker-video-preview",
     );
     if (preview) this.#updateVideoPreviewStyle(preview);
-    this.#captureVideoPoster(fallback, { emit });
+    this.#captureVideoPoster(fallback);
+    if (emit) this.#emitInput();
   }
 
-  #ensureVideoPoster({ emit = true } = {}) {
+  #ensureVideoPoster() {
     if (this.#fillType !== "video") return;
     const src = this.#video.url;
     if (!src || this.#video.poster) return;
-    this.#captureVideoPoster(src, { emit });
+    this.#captureVideoPoster(src);
   }
 
   async #videoFrameBitmap(video) {
@@ -4550,7 +4552,7 @@ class FigFillPicker extends HTMLElement {
       : new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.85));
   }
 
-  async #captureVideoPoster(src, { emit = true } = {}) {
+  async #captureVideoPoster(src, { emit = false } = {}) {
     if (!src || this.#videoPosterCapturing === src) return;
     this.#videoPosterCapturing = src;
     const video = document.createElement("video");

package/fig-lab.css

@@ -1,5 +1,6 @@
 /**
  * FigUI3 Lab — Experimental component styles
+ * Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE.
  *
  * Depends on base.css and components.css tokens.
  * Import alongside components.css for opt-in access:

package/fig-lab.js

@@ -1,5 +1,6 @@
 /**
  * FigUI3 Lab — Experimental components
+ * Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE.
  *
  * These components are unstable and may change or be removed without notice.
  * Import alongside fig.js for opt-in access:

package/fig.js

@@ -10648,8 +10648,17 @@ class FigInputGradient extends HTMLElement {
       .join(", ");
     const interp = gradientInterpolationClause(gradient);
     const interpolation = interp ? ` ${interp}` : "";
-    // Compact swatch always previews L→R, regardless of linear angle /
-    // radial / angular type (stop handles also use this axis when editing).
+    if (this.#editMode === "picker") {
+      switch (gradient.type) {
+        case "radial":
+          return `radial-gradient(circle at ${gradient.centerX}% ${gradient.centerY}%${interpolation}, ${stops})`;
+        case "angular":
+          return `conic-gradient(from ${gradient.angle}deg${interpolation}, ${stops})`;
+        default:
+          return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
+      }
+    }
+    // Inline editor swatch previews L→R so stop handles share that axis.
     return `linear-gradient(to right${interpolation}, ${stops})`;
   }
 
@@ -10761,6 +10770,11 @@ class FigInputGradient extends HTMLElement {
         ...this.#gradient,
         ...detail.gradient,
       });
+      if (this.#editMode === "picker" && typeof detail.css === "string" && detail.css) {
+        this.#swatch?.setAttribute("background", detail.css);
+        this.#syncSwatchSize();
+        return;
+      }
       this.#syncSwatch();
     };
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.9.22",
+  "version": "8.9.24",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "type": "module",
   "main": "dist/fig.js",
   "module": "dist/fig.js",