@rogieking/figui3 8.9.17 → 8.9.19

package/fig-editor.css

@@ -153,13 +153,15 @@ fig-fill-picker {
   width: 240px;
   padding: 0;
 
+  & > fig-content {
+    padding-bottom: var(--spacer-2-5);
+    padding-top: var(--spacer-2);
+  }
+
   fig-tab {
     font-size: 0.6875rem;
     padding: var(--spacer-1) var(--spacer-1);
   }
-  & > fig-content {
-    padding-bottom: var(--spacer-2-5);
-  }
 
   .fig-fill-picker-close {
     margin-left: auto;
@@ -172,8 +174,10 @@ fig-fill-picker {
       display: block;
     }
   }
-  fig-preview{
-    overflow: visible;
+  .fig-fill-picker-tab:is([data-tab="solid"], [data-tab="gradient"]) {
+    fig-preview {
+      overflow: visible;
+    }
   }
 
   .fig-fill-picker-color-area {
@@ -518,11 +522,14 @@ fig-fill-picker {
     }
 
     &.has-media {
-      fig-button {
+      /* Replace/upload only — not fig-media-controls play. */
+      fig-preview fig-button,
+      fig-input-file fig-button {
         visibility: hidden;
       }
       &:hover {
-        fig-button {
+        fig-preview fig-button,
+        fig-input-file fig-button {
           visibility: visible;
         }
       }

package/fig-editor.js

@@ -1499,8 +1499,16 @@ function normalizeGradientConfig(gradient) {
   return next;
 }
 
+function lockFillPickerGradientInterpolation(gradient) {
+  const next = normalizeGradientConfig(gradient);
+  // Interpolation UI hidden for now — lock to sRGB.
+  next.interpolationSpace = "srgb";
+  delete next.hueInterpolation;
+  return next;
+}
+
 function gradientToValueShape(gradient) {
-  const normalized = normalizeGradientConfig(gradient);
+  const normalized = lockFillPickerGradientInterpolation(gradient);
   const output = {
     ...normalized,
     interpolationSpace: normalized.interpolationSpace,
@@ -1991,7 +1999,7 @@ class FigFillPicker extends HTMLElement {
       // Gamut UI hidden for now — lock to sRGB.
       this.#gamut = "srgb";
       if (parsed.gradient) {
-        this.#gradient = normalizeGradientConfig({
+        this.#gradient = lockFillPickerGradientInterpolation({
           ...this.#gradient,
           ...parsed.gradient,
         });
@@ -2070,9 +2078,13 @@ class FigFillPicker extends HTMLElement {
           bg = "";
         }
         break;
-      default:
-        const slot = this.#customSlots[this.#fillType];
-        bg = slot?.element?.getAttribute("swatch-background") || "#D9D9D9";
+      default: {
+        const slot =
+          this.#customSlots[this.#fillType]?.element ||
+          this.querySelector(`[slot="mode-${this.#fillType}"]`);
+        bg = slot?.getAttribute("swatch-background") || "";
+        break;
+      }
     }
 
     this.#swatch.setAttribute("background", bg);
@@ -2281,6 +2293,7 @@ class FigFillPicker extends HTMLElement {
         {
           className: "fig-fill-picker-type",
           label: "Fill type",
+          variant: "ghost",
           value: this.#fillType,
         },
         options,
@@ -3212,7 +3225,6 @@ class FigFillPicker extends HTMLElement {
   // ============ GRADIENT TAB ============
   #initGradientTab() {
     const container = this.#dialog.querySelector('[data-tab="gradient"]');
-    const interpolationValue = gradientInterpolationSelectValue(this.#gradient);
     const gradientType = figEditorCreateElement(
       "fig-select",
       {
@@ -3314,70 +3326,7 @@ class FigFillPicker extends HTMLElement {
         ),
       ],
     );
-    const interpolationModes = figEditorCreateElement(
-      "fig-segmented-control",
-      {
-        className: "fig-fill-picker-gradient-interpolation-modes",
-        "aria-label": "Color interpolation",
-        value: interpolationValue,
-      },
-      FigFillPicker.#GRADIENT_INTERPOLATION_MODES.filter(
-        (mode) => !mode.advanced,
-      ).map(({ value, space, title, subtitle }) =>
-        figEditorCreateElement(
-          "fig-tooltip",
-          { text: `${title} — ${subtitle}` },
-          figEditorCreateElement(
-            "fig-segment",
-            {
-              value,
-              "data-space": space,
-              "aria-label": `${title} — ${subtitle}`,
-            },
-            figEditorCreateElement("fig-interpolation-swatch", {
-              "aria-hidden": "true",
-            }),
-          ),
-        ),
-      ),
-    );
-    const interpolationSelect = figEditorCreateElement(
-      "fig-select",
-      {
-        className: "fig-fill-picker-gradient-space",
-        label: "Color interpolation",
-        value: interpolationValue,
-      },
-      figEditorCreateElement(
-        "fig-select-options",
-        {},
-        this.#createGradientInterpolationOptions(),
-      ),
-    );
-    // The select trigger overlays the icon button so its menu anchors correctly.
-    const interpolationMore = figEditorCreateElement(
-      "div",
-      { className: "fig-fill-picker-gradient-interpolation-more" },
-      [
-        figEditorCreateElement(
-          "fig-button",
-          {
-            icon: true,
-            variant: "ghost",
-            "aria-hidden": "true",
-            tabindex: "-1",
-          },
-          figEditorCreateIcon("more"),
-        ),
-        interpolationSelect,
-      ],
-    );
-    const interpolation = figEditorCreateElement(
-      "fig-field",
-      { className: "fig-fill-picker-gradient-interpolation-field" },
-      [interpolationModes, interpolationMore],
-    );
-    container.replaceChildren(header, preview, interpolation, stops);
+    container.replaceChildren(header, preview, stops);
 
     this.#updateGradientUI();
     this.#setupGradientEvents(container);
@@ -3675,7 +3624,7 @@ class FigFillPicker extends HTMLElement {
         if (this.#syncingGradientBar) return;
         const detail = e.detail;
         if (!detail?.gradient) return;
-        this.#gradient = normalizeGradientConfig({
+        this.#gradient = lockFillPickerGradientInterpolation({
           ...this.#gradient,
           ...detail.gradient,
         });
@@ -3846,7 +3795,7 @@ class FigFillPicker extends HTMLElement {
 
     const container = this.#dialog.querySelector('[data-tab="gradient"]');
     if (!container) return;
-    this.#gradient = normalizeGradientConfig(this.#gradient);
+    this.#gradient = lockFillPickerGradientInterpolation(this.#gradient);
 
     const interpolationValue = gradientInterpolationSelectValue(this.#gradient);
     const interpolationSelect = container.querySelector(
@@ -4286,6 +4235,11 @@ class FigFillPicker extends HTMLElement {
       }
 
       element.setAttribute("src", this.#video.url);
+      if (this.#video.poster) {
+        element.setAttribute("poster", this.#video.poster);
+      } else {
+        element.removeAttribute("poster");
+      }
       element.classList.add("has-media");
 
       const fileInput = element.querySelector("fig-input-file[data-generated]");
@@ -4623,11 +4577,16 @@ class FigFillPicker extends HTMLElement {
         existing?.getTracks?.().filter((track) => track.readyState !== "ended") ??
         [];
       if (existing && liveTracks.length) {
-        const currentId = this.#webcam.deviceId;
-        if (!requested || !currentId || requested === currentId) {
+        const liveId =
+          existing.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId ||
+          this.#webcam.deviceId ||
+          null;
+        // Reuse the live stream only when it is already the requested device.
+        // An unknown liveId is not a match — otherwise the camera select cannot switch.
+        if (!requested || requested === liveId) {
           attachPreview(existing);
           this.#emitWebcamStream();
-          populateCameras(null, requested || currentId);
+          populateCameras(null, requested || liveId);
           return;
         }
       }
@@ -4688,8 +4647,7 @@ class FigFillPicker extends HTMLElement {
     cameraSelect.addEventListener("change", (e) => {
       const next =
         typeof e.detail === "string" ? e.detail : e.target?.value;
-      if (!next) return;
-      this.#webcam.deviceId = next;
+      if (!next || next === this.#webcam.deviceId) return;
       startWebcam(next);
     });
 

package/fig.js

@@ -322,7 +322,7 @@ fig-select-options > .fig-overflow-end::before,
 
 const FIG_SHADOW_ICON_CSS = `
 fig-icon {
-  contain: strict;
+  contain: size;
   --size: var(--spacer-4);
   display: inline-flex;
   width: var(--size);
@@ -8979,6 +8979,7 @@ class FigInputFill extends HTMLElement {
     scale: 50,
     opacity: 1,
   };
+  #custom = {};
 
   constructor() {
     super();
@@ -9066,6 +9067,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
@@ -9142,9 +9148,9 @@ class FigInputFill extends HTMLElement {
       case "webcam":
         return this.#webcam.snapshot
           ? figCssUrl(this.#webcam.snapshot)
-          : "#D9D9D9";
+          : "";
       default:
-        return "#D9D9D9";
+        return this.#customSwatchBackground();
     }
   }
 
@@ -9173,7 +9179,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 +9305,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 +9334,7 @@ class FigInputFill extends HTMLElement {
       alpha: this.#fillPickerSwatchAlpha(),
       disabled,
     });
+    const modeSlots = [...this.querySelectorAll("[slot^='mode-']")];
     const picker = figCreateElement(
       "fig-fill-picker",
       {
@@ -9297,7 +9342,7 @@ class FigInputFill extends HTMLElement {
         disabled,
         ...fpAttrs,
       },
-      swatch,
+      [swatch, ...modeSlots],
     );
     const combo = figCreateElement(
       "div",
@@ -9307,6 +9352,11 @@ class FigInputFill extends HTMLElement {
     this.replaceChildren(combo);
 
     this.#setupEventListeners();
+    queueMicrotask(() => {
+      this.#adoptModeSlots();
+      this.#syncSwatch();
+      this.#updateControls();
+    });
   }
 
   #setupEventListeners() {
@@ -9375,6 +9425,11 @@ class FigInputFill extends HTMLElement {
               this.#webcam.snapshot = detail.image.url;
             }
             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 +9496,9 @@ class FigInputFill extends HTMLElement {
           case "webcam":
             this.#webcam.opacity = alpha;
             break;
+          default:
+            this.#custom.opacity = alpha;
+            break;
         }
         this.#updateFillPicker();
         this.#syncSwatch();
@@ -9510,6 +9568,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 +9661,9 @@ class FigInputFill extends HTMLElement {
           case "webcam":
             this.#webcam.opacity = alpha;
             break;
+          default:
+            this.#custom.opacity = alpha;
+            break;
         }
         this.#updateFillPicker();
         this.#updateSwatchAlpha(alpha);
@@ -9703,7 +9780,7 @@ class FigInputFill extends HTMLElement {
           webcam: this.#webcamValue(),
         };
       default:
-        return { type: this.#fillType };
+        return { type: this.#fillType, ...this.#custom };
     }
   }
 
@@ -11886,7 +11963,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);
@@ -13382,13 +13476,9 @@ class FigMediaControls extends HTMLElement {
     tooltip.setAttribute("text", "Play");
     const btn = document.createElement("fig-button");
     btn.setAttribute("variant", "ghost");
-    btn.setAttribute("size", "small");
     btn.setAttribute("icon", "true");
     btn.setAttribute("aria-label", "Play");
-    const icon = createFigIcon("play", {
-      className: "fig-media-controls-play-icon",
-    });
-    btn.append(icon);
+    btn.append(createFigIcon("play"));
     tooltip.append(btn);
     btn.addEventListener("click", (e) => {
       e.preventDefault();
@@ -13478,7 +13568,7 @@ class FigMediaControls extends HTMLElement {
     const playing = this.playing;
     this.#playBtn.setAttribute("aria-label", playing ? "Pause" : "Play");
     this.#playTooltip?.setAttribute("text", playing ? "Pause" : "Play");
-    const icon = this.#playBtn.querySelector(".fig-media-controls-play-icon");
+    const icon = this.#playBtn.querySelector("fig-icon");
     if (icon) {
       icon.setAttribute("name", playing ? "pause" : "play");
     }

package/package.json

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