@rogieking/figui3 8.9.17 → 8.9.18

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;
@@ -518,11 +520,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,
         });
@@ -2281,6 +2289,7 @@ class FigFillPicker extends HTMLElement {
         {
           className: "fig-fill-picker-type",
           label: "Fill type",
+          variant: "ghost",
           value: this.#fillType,
         },
         options,
@@ -3212,7 +3221,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 +3322,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 +3620,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 +3791,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 +4231,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]");

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);
@@ -13382,13 +13382,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 +13474,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.18",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",