@rogieking/figui3 8.9.18 → 8.9.20

package/fig.js

@@ -8979,6 +8979,7 @@ class FigInputFill extends HTMLElement {
     scale: 50,
     opacity: 1,
   };
+  #custom = {};
 
   constructor() {
     super();
@@ -9054,8 +9055,11 @@ class FigInputFill extends HTMLElement {
           break;
         case "webcam":
           if (parsed.webcam && typeof parsed.webcam === "object") {
-            const { stream: _ignored, ...rest } = parsed.webcam;
+            const { stream: _ignored, snapshot, ...rest } = parsed.webcam;
             this.#webcam = { ...this.#webcam, ...rest };
+            if (typeof snapshot === "string" && snapshot) {
+              this.#webcam.snapshot = snapshot;
+            }
           } else if (parsed.image?.url) {
             this.#webcam.snapshot = parsed.image.url;
             if (parsed.image.scaleMode)
@@ -9066,6 +9070,11 @@ class FigInputFill extends HTMLElement {
           if (parsed.opacity !== undefined)
             this.#webcam.opacity = parsed.opacity;
           break;
+        default: {
+          const { type: _type, ...rest } = parsed;
+          this.#custom = rest;
+          break;
+        }
       }
     } catch (e) {
       // If not JSON, treat as hex color
@@ -9139,12 +9148,14 @@ class FigInputFill extends HTMLElement {
         return this.#image.url ? figCssUrl(this.#image.url) : "#D9D9D9";
       case "video":
         return this.#video.poster ? figCssUrl(this.#video.poster) : "#D9D9D9";
-      case "webcam":
-        return this.#webcam.snapshot
-          ? figCssUrl(this.#webcam.snapshot)
-          : "#D9D9D9";
+      case "webcam": {
+        const snapshot =
+          this.#webcam.snapshot ||
+          this.#fillPicker?.value?.webcam?.snapshot;
+        return snapshot ? figCssUrl(snapshot) : "";
+      }
       default:
-        return "#D9D9D9";
+        return this.#customSwatchBackground();
     }
   }
 
@@ -9173,7 +9184,38 @@ class FigInputFill extends HTMLElement {
       case "webcam":
         return this.#webcam.opacity ?? 1;
       default:
-        return 1;
+        return this.#normalizeFillOpacity(
+          this.#custom.opacity ?? this.#custom.alpha,
+          1,
+        );
+    }
+  }
+
+  #customModeSlot() {
+    return this.querySelector(`[slot="mode-${this.#fillType}"]`);
+  }
+
+  #customTypeLabel() {
+    const slotLabel = this.#customModeSlot()?.getAttribute("label");
+    if (slotLabel) return slotLabel;
+    if (!this.#fillType) return "Fill";
+    return this.#fillType.charAt(0).toUpperCase() + this.#fillType.slice(1);
+  }
+
+  #customSwatchBackground() {
+    return (
+      this.#custom.swatchBackground ||
+      this.#custom.background ||
+      this.#custom.css ||
+      this.#customModeSlot()?.getAttribute("swatch-background") ||
+      ""
+    );
+  }
+
+  #adoptModeSlots() {
+    if (!this.#fillPicker) return;
+    for (const slot of [...this.querySelectorAll(":scope > [slot^='mode-']")]) {
+      this.#fillPicker.append(slot);
     }
   }
 
@@ -9268,6 +9310,13 @@ class FigInputFill extends HTMLElement {
         label = "Webcam";
         opacity = this.#webcam.opacity ?? 1;
         break;
+      default:
+        label = this.#customTypeLabel();
+        opacity = this.#normalizeFillOpacity(
+          this.#custom.opacity ?? this.#custom.alpha,
+          1,
+        );
+        break;
     }
 
     return [
@@ -9290,6 +9339,7 @@ class FigInputFill extends HTMLElement {
       alpha: this.#fillPickerSwatchAlpha(),
       disabled,
     });
+    const modeSlots = [...this.querySelectorAll("[slot^='mode-']")];
     const picker = figCreateElement(
       "fig-fill-picker",
       {
@@ -9297,7 +9347,7 @@ class FigInputFill extends HTMLElement {
         disabled,
         ...fpAttrs,
       },
-      swatch,
+      [swatch, ...modeSlots],
     );
     const combo = figCreateElement(
       "div",
@@ -9307,6 +9357,11 @@ class FigInputFill extends HTMLElement {
     this.replaceChildren(combo);
 
     this.#setupEventListeners();
+    queueMicrotask(() => {
+      this.#adoptModeSlots();
+      this.#syncSwatch();
+      this.#updateControls();
+    });
   }
 
   #setupEventListeners() {
@@ -9369,12 +9424,24 @@ class FigInputFill extends HTMLElement {
             break;
           case "webcam":
             if (detail.webcam) {
-              const { stream: _ignored, ...rest } = detail.webcam;
+              const { stream: _ignored, snapshot, ...rest } = detail.webcam;
               this.#webcam = { ...this.#webcam, ...rest };
+              if (typeof snapshot === "string" && snapshot) {
+                this.#webcam.snapshot = snapshot;
+              }
             } else if (detail.image?.url) {
               this.#webcam.snapshot = detail.image.url;
             }
+            if (!this.#webcam.snapshot) {
+              const fromPicker = this.#fillPicker?.value?.webcam?.snapshot;
+              if (fromPicker) this.#webcam.snapshot = fromPicker;
+            }
+            break;
+          default: {
+            const { type: _type, colorSpace: _colorSpace, ...rest } = detail;
+            this.#custom = rest;
             break;
+          }
         }
         // Update controls (don't re-render to keep dialog open)
         if (typeChanged) {
@@ -9441,6 +9508,9 @@ class FigInputFill extends HTMLElement {
           case "webcam":
             this.#webcam.opacity = alpha;
             break;
+          default:
+            this.#custom.opacity = alpha;
+            break;
         }
         this.#updateFillPicker();
         this.#syncSwatch();
@@ -9510,6 +9580,22 @@ class FigInputFill extends HTMLElement {
           );
         }
         break;
+      default: {
+        const label = this.querySelector(".fig-input-fill-label");
+        if (label) label.textContent = this.#customTypeLabel();
+        if (this.#opacityInput) {
+          this.#opacityInput.setAttribute(
+            "value",
+            Math.round(
+              this.#normalizeFillOpacity(
+                this.#custom.opacity ?? this.#custom.alpha,
+                1,
+              ) * 100,
+            ),
+          );
+        }
+        break;
+      }
     }
   }
 
@@ -9587,6 +9673,9 @@ class FigInputFill extends HTMLElement {
           case "webcam":
             this.#webcam.opacity = alpha;
             break;
+          default:
+            this.#custom.opacity = alpha;
+            break;
         }
         this.#updateFillPicker();
         this.#updateSwatchAlpha(alpha);
@@ -9609,7 +9698,15 @@ class FigInputFill extends HTMLElement {
   #syncSwatch() {
     const swatch = this.#fillPicker?.querySelector("fig-swatch");
     if (!swatch) return;
-    swatch.setAttribute("background", this.#fillPickerSwatchBackground());
+    const background = this.#fillPickerSwatchBackground();
+    if (this.#fillType === "webcam" && !background) {
+      const current = swatch.getAttribute("background") || "";
+      if (current.startsWith("url(")) {
+        swatch.setAttribute("alpha", this.#fillPickerSwatchAlpha());
+        return;
+      }
+    }
+    swatch.setAttribute("background", background);
     swatch.setAttribute("alpha", this.#fillPickerSwatchAlpha());
   }
 
@@ -9703,7 +9800,7 @@ class FigInputFill extends HTMLElement {
           webcam: this.#webcamValue(),
         };
       default:
-        return { type: this.#fillType };
+        return { type: this.#fillType, ...this.#custom };
     }
   }
 
@@ -11886,7 +11983,24 @@ class FigSwatch extends HTMLElement {
   }
 
   #render() {
-    const rawBg = this.getAttribute("background") || "#D9D9D9";
+    const rawAttr = this.getAttribute("background");
+    const emptyMedia = this.hasAttribute("background") && !rawAttr?.trim();
+    if (emptyMedia) {
+      if (this.#type !== "image" || this.input) {
+        this.#type = "image";
+        this.setAttribute("data-type", "image");
+        if (this.input) {
+          this.input.removeEventListener("input", this.#boundHandleInput);
+        }
+        this.replaceChildren(document.createElement("div"));
+        this.input = null;
+        this.#syncA11y();
+      }
+      this.style.setProperty("--swatch-background", "none");
+      return;
+    }
+
+    const rawBg = rawAttr || "#D9D9D9";
     const isVar = rawBg.includes("var(");
     const bg = isVar ? this.#resolveBackground(rawBg) : rawBg;
     const newType = this.#detectType(bg);

package/package.json

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