@rogieking/figui3 5.1.0 → 6.0.0

package/fig-editor.js

@@ -1,6 +1,62 @@
-import { gradientToValueShape, gradientInterpolationClause, normalizeGradientConfig } from "./fig.js";
-
 // FigFillPicker
+const GRADIENT_INTERPOLATION_SPACES = [
+  "srgb",
+  "srgb-linear",
+  "display-p3",
+  "oklab",
+  "oklch",
+];
+const GRADIENT_HUE_INTERPOLATIONS = [
+  "shorter",
+  "longer",
+  "increasing",
+  "decreasing",
+];
+
+function normalizeGradientConfig(gradient) {
+  const next = { ...(gradient ?? {}) };
+  let interpolationSpace = String(
+    next.interpolationSpace ?? "oklab",
+  ).toLowerCase();
+  if (!GRADIENT_INTERPOLATION_SPACES.includes(interpolationSpace)) {
+    interpolationSpace = "oklab";
+  }
+  if (interpolationSpace === "srgb" || interpolationSpace === "display-p3") {
+    interpolationSpace = "oklab";
+  }
+  next.interpolationSpace = interpolationSpace;
+
+  const hueInterpolation = String(
+    next.hueInterpolation ?? "shorter",
+  ).toLowerCase();
+  next.hueInterpolation = GRADIENT_HUE_INTERPOLATIONS.includes(hueInterpolation)
+    ? hueInterpolation
+    : "shorter";
+  return next;
+}
+
+function gradientToValueShape(gradient) {
+  const normalized = normalizeGradientConfig(gradient);
+  const output = {
+    ...normalized,
+    interpolationSpace: normalized.interpolationSpace,
+  };
+  if (normalized.interpolationSpace === "oklch") {
+    output.hueInterpolation = normalized.hueInterpolation;
+  } else {
+    delete output.hueInterpolation;
+  }
+  return output;
+}
+
+function gradientInterpolationClause(gradient) {
+  const normalized = normalizeGradientConfig(gradient);
+  if (normalized.interpolationSpace === "oklch") {
+    return `in oklch ${normalized.hueInterpolation} hue`;
+  }
+  return `in ${normalized.interpolationSpace}`;
+}
+
 /**
  * A comprehensive fill picker component supporting solid colors, gradients, images, video, and webcam.
  * Uses display: contents and wraps a trigger element that opens a dialog picker.
@@ -1079,7 +1135,7 @@ class FigFillPicker extends HTMLElement {
         </fig-tooltip>
       </fig-field>
       <fig-preview class="fig-fill-picker-gradient-preview">
-        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" edit="true" size="large" value='${JSON.stringify({ type: "gradient", gradient: gradientToValueShape(this.#gradient) })}'></fig-input-gradient>
+        <fig-input-gradient class="fig-fill-picker-gradient-bar-input" edit="true" mode="tip" size="large" value='${JSON.stringify({ type: "gradient", gradient: gradientToValueShape(this.#gradient) })}'></fig-input-gradient>
       </fig-preview>
       <fig-field class="fig-fill-picker-gradient-interpolation">
         <label>Mixing</label>

package/fig.js

@@ -3632,6 +3632,8 @@ customElements.define("fig-options", FigOptions);
 class FigSlider extends HTMLElement {
   #isInteracting = false;
   #showEmptyTextValue = false;
+  #isSyncingValueAttribute = false;
+  #value = "";
   // Private fields declarations
   #typeDefaults = {
     range: { min: 0, max: 100, step: 1 },
@@ -3826,6 +3828,38 @@ class FigSlider extends HTMLElement {
     this.#regenerateInnerHTML();
   }
 
+  get value() {
+    if (this.#value !== "") return this.#value;
+    const rawValue = this.getAttribute("value");
+    if (rawValue !== null) return String(this.#normalizeSliderValue(rawValue));
+    return "";
+  }
+
+  set value(value) {
+    const rawValue = value === null || value === undefined ? "" : String(value);
+    const hasParsedBounds = this.min !== undefined || this.max !== undefined;
+    const normalized = hasParsedBounds
+      ? String(this.#normalizeSliderValue(rawValue))
+      : rawValue;
+    this.#value = normalized;
+    if (this.getAttribute("value") !== normalized) {
+      this.#isSyncingValueAttribute = true;
+      this.setAttribute("value", normalized);
+      this.#isSyncingValueAttribute = false;
+    }
+    if (this.input && this.input.value !== normalized) {
+      this.input.value = normalized;
+      this.input.setAttribute("aria-valuenow", normalized);
+    }
+    if (this.figInputNumber) {
+      this.figInputNumber.setAttribute(
+        "value",
+        this.#showEmptyTextValue ? "" : normalized,
+      );
+    }
+    if (this.input) this.#syncProperties();
+  }
+
   disconnectedCallback() {
     if (this.input) {
       this.input.removeEventListener("input", this.#boundHandleInput);
@@ -3978,6 +4012,7 @@ class FigSlider extends HTMLElement {
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value" && this.#isSyncingValueAttribute) return;
     if (this.input) {
       switch (name) {
         case "color":
@@ -5815,7 +5850,7 @@ const GRADIENT_HUE_INTERPOLATIONS = [
 
 const GRADIENT_PICKER_SPACES = ["srgb-linear", "oklab", "oklch"];
 
-export function normalizeGradientConfig(gradient) {
+function normalizeGradientConfig(gradient) {
   const next = { ...(gradient ?? {}) };
   let interpolationSpace = String(
     next.interpolationSpace ?? "oklab",
@@ -5837,7 +5872,7 @@ export function normalizeGradientConfig(gradient) {
   return next;
 }
 
-export function gradientToValueShape(gradient) {
+function gradientToValueShape(gradient) {
   const normalized = normalizeGradientConfig(gradient);
   const output = {
     ...normalized,
@@ -5851,7 +5886,7 @@ export function gradientToValueShape(gradient) {
   return output;
 }
 
-export function gradientInterpolationClause(gradient) {
+function gradientInterpolationClause(gradient) {
   const normalized = normalizeGradientConfig(gradient);
   if (normalized.interpolationSpace === "oklch") {
     return `in oklch ${normalized.hueInterpolation} hue`;
@@ -7239,7 +7274,7 @@ class FigInputGradient extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "edit"];
+    return ["value", "disabled", "edit", "mode"];
   }
 
   get #editMode() {
@@ -7253,6 +7288,10 @@ class FigInputGradient extends HTMLElement {
     return this.#editMode === "true";
   }
 
+  get #stopHandleMode() {
+    return this.getAttribute("mode") === "tip" ? "tip" : "handle";
+  }
+
   connectedCallback() {
     this.#parseValue();
     this.#render();
@@ -7404,10 +7443,11 @@ class FigInputGradient extends HTMLElement {
 
   #buildStopHandles() {
     const disabled = this.hasAttribute("disabled");
+    const tipAttr = this.#stopHandleMode === "tip" ? ' tip="color"' : "";
     return this.#gradient.stops
       .map(
         (stop, i) =>
-          `<fig-tooltip action="manual" text="${Math.round(stop.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color" color-tip color="${this.#stopColorCSS(stop)}" value="${stop.position}% 50%" hit-area="4" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle></fig-tooltip>`,
+          `<fig-tooltip action="manual" text="${Math.round(stop.position)}%"><fig-handle drag drag-axes="x" drag-surface=".fig-input-gradient-track" type="color"${tipAttr} color="${this.#stopColorCSS(stop)}" value="${stop.position}% 50%" hit-area="4" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle></fig-tooltip>`,
       )
       .join("");
   }
@@ -7488,8 +7528,7 @@ class FigInputGradient extends HTMLElement {
     const ghost = document.createElement("fig-handle");
     ghost.classList.add("fig-input-gradient-ghost");
     ghost.setAttribute("type", "color");
-    ghost.setAttribute("color-tip", "");
-    ghost.setAttribute("control", "add");
+    if (this.#stopHandleMode === "tip") ghost.setAttribute("tip", "add");
     ghost.style.position = "absolute";
     ghost.style.top = "50%";
     ghost.style.transform = "translate(-50%, -50%)";
@@ -7645,6 +7684,7 @@ class FigInputGradient extends HTMLElement {
       const ghost = this.#ghostHandle;
       this.#track.innerHTML = this.#buildStopHandles();
       if (ghost) this.#track.appendChild(ghost);
+      this.#syncHandleMode();
       this.#reobserveHandleColors();
       requestAnimationFrame(() => this.#repositionHandles());
       return;
@@ -7656,9 +7696,30 @@ class FigInputGradient extends HTMLElement {
       h.dataset.stopIndex = i;
       h.setAttribute("value", `${stop.position}% 50%`);
       h.setAttribute("color", this.#stopColorCSS(stop));
+      if (this.#stopHandleMode === "tip") {
+        h.setAttribute("tip", "color");
+      } else {
+        h.removeAttribute("tip");
+      }
       const tip = h.closest("fig-tooltip");
       if (tip) tip.setAttribute("text", `${Math.round(stop.position)}%`);
     }
+    this.#syncHandleMode();
+  }
+
+  #syncHandleMode() {
+    if (!this.#track) return;
+    const useTip = this.#stopHandleMode === "tip";
+    this.#track
+      .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+      .forEach((handle) => {
+        if (useTip) handle.setAttribute("tip", "color");
+        else handle.removeAttribute("tip");
+      });
+    if (this.#ghostHandle) {
+      if (useTip) this.#ghostHandle.setAttribute("tip", "add");
+      else this.#ghostHandle.removeAttribute("tip");
+    }
   }
 
   #reobserveHandleColors() {
@@ -7957,6 +8018,9 @@ class FigInputGradient extends HTMLElement {
           document.removeEventListener("keydown", this.#onKeyDown);
         }
         break;
+      case "mode":
+        this.#syncHandleMode();
+        break;
     }
   }
 
@@ -11994,10 +12058,16 @@ customElements.define("fig-joystick", FigInputJoystick);
 // FigInputAngle moved to fig-lab.js
 // FigShimmer
 class FigShimmer extends HTMLElement {
+  get durationPropertyName() {
+    return this.localName === "fig-skeleton"
+      ? "--fig-skeleton-duration"
+      : "--fig-shimmer-duration";
+  }
+
   connectedCallback() {
     const duration = this.getAttribute("duration");
     if (duration) {
-      this.style.setProperty("--shimmer-duration", duration);
+      this.style.setProperty(this.durationPropertyName, duration);
     }
   }
 
@@ -12019,7 +12089,7 @@ class FigShimmer extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "duration") {
-      this.style.setProperty("--shimmer-duration", newValue || "1.5s");
+      this.style.setProperty(this.durationPropertyName, newValue || "1.5s");
     }
     // playing is handled purely by CSS attribute selectors
   }
@@ -13353,8 +13423,7 @@ class FigHandle extends HTMLElement {
     "drag-snapping",
     "value",
     "type",
-    "control",
-    "color-tip",
+    "tip",
     "hit-area",
     "hit-area-mode",
   ];
@@ -13368,24 +13437,11 @@ class FigHandle extends HTMLElement {
   #nativeColorInput = null;
   #hitAreaEl = null;
 
-  get #controlMode() {
-    return this.getAttribute("control") || null;
-  }
-
-  get #hasControlMode() {
-    return this.#controlMode === "add" || this.#controlMode === "remove";
-  }
-
-  get #usesColorTip() {
-    return (
-      this.#hasControlMode ||
-      (this.hasAttribute("color-tip") &&
-        this.getAttribute("color-tip") !== "false")
-    );
-  }
-
-  get #isGhost() {
-    return this.classList.contains("fig-input-gradient-ghost");
+  get #tipMode() {
+    const mode = (this.getAttribute("tip") || "").trim().toLowerCase();
+    return mode === "color" || mode === "add" || mode === "remove"
+      ? mode
+      : null;
   }
 
   get #canOpenColorPicker() {
@@ -13601,7 +13657,7 @@ class FigHandle extends HTMLElement {
     document.addEventListener("keydown", this.#handleKeyDown);
     const initial = this.getAttribute("value");
     if (initial) this.#applyValue(initial);
-    if (this.#hasControlMode) this.#showColorTip();
+    if (this.#tipMode) this.#showColorTip();
   }
 
   disconnectedCallback() {
@@ -13621,22 +13677,13 @@ class FigHandle extends HTMLElement {
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (
-      this.getAttribute("type") === "color" &&
-      this.#canOpenColorPicker &&
-      !this.#isDragging &&
-      this.#usesColorTip
-    )
-      this.#showColorTip();
   }
 
   deselect() {
     this.removeAttribute("selected");
-    this.#hideColorTip();
   }
 
   #handleSelect = (e) => {
-    if (this.#hasControlMode) return;
     if (this.#didDrag) {
       this.#didDrag = false;
       return;
@@ -13644,7 +13691,7 @@ class FigHandle extends HTMLElement {
     if (
       this.getAttribute("type") === "color" &&
       this.#canOpenColorPicker &&
-      !this.#usesColorTip
+      !this.#tipMode
     ) {
       this.#openDirectColorPicker();
       return;
@@ -13653,7 +13700,6 @@ class FigHandle extends HTMLElement {
   };
 
   #handleDeselect = (e) => {
-    if (this.#hasControlMode) return;
     if (this.contains(e.target)) return;
     if ((this.#colorTip || this.#directColorPicker) && e.target.closest?.("dialog, [popover]")) return;
     this.deselect();
@@ -13665,9 +13711,7 @@ class FigHandle extends HTMLElement {
     if (this.getAttribute("type") !== "color") return;
     if (!this.#canOpenColorPicker) return;
     e.preventDefault();
-    if (this.#usesColorTip) {
-      if (!this.#colorTip) this.#showColorTip();
-    } else {
+    if (!this.#tipMode) {
       this.#openDirectColorPicker();
     }
   };
@@ -13679,30 +13723,22 @@ class FigHandle extends HTMLElement {
       } else {
         this.style.setProperty("--fill", value);
       }
-      if (this.#colorTip && value) {
+      if (this.#colorTip && this.#tipMode === "color" && value) {
         this.#colorTip.setAttribute("value", value);
       }
       this.#syncDirectColorPickerValue();
     }
     if (name === "drag") this.#syncDrag();
     if (name === "hit-area") this.#syncHitArea();
+    if (name === "selected") this.#syncColorTipSelected();
     if (name === "value" && !this.#applyingValue && !this.#isDragging) {
       this.#applyValue(value);
     }
-    if (name === "control") {
-      if (this.#hasControlMode) {
+    if (name === "tip") {
+      this.#hideColorTip();
+      if (this.#tipMode) {
         this.#removeDirectColorPicker();
-        this.#hideColorTip();
         this.#showColorTip();
-      } else {
-        this.#hideColorTip();
-      }
-    }
-    if (name === "color-tip") {
-      if (this.#usesColorTip) {
-        this.#removeDirectColorPicker();
-      } else {
-        this.#hideColorTip();
       }
     }
   }
@@ -13852,6 +13888,7 @@ class FigHandle extends HTMLElement {
   }
 
   showColorTip() {
+    if (!this.#tipMode) return;
     if (this.#colorTip) {
       this.#colorTip.style.display = "";
       return;
@@ -13959,7 +13996,6 @@ class FigHandle extends HTMLElement {
 
   #openDirectColorPicker() {
     if (this.hasAttribute("disabled")) return;
-    this.#hideColorTip();
     const picker = this.#ensureDirectColorPicker();
     if (!picker) {
       this.#openNativeColorPicker();
@@ -14017,19 +14053,19 @@ class FigHandle extends HTMLElement {
 
   #closeColorPickerForDrag() {
     if (this.getAttribute("type") !== "color") return;
-    this.#hideColorTip();
     this.#directColorPicker?.close();
   }
 
   #showColorTip() {
+    const mode = this.#tipMode;
+    if (!mode) return;
     if (this.#colorTip) return;
     const tip = document.createElement("fig-color-tip");
-    if (this.#hasControlMode) {
-      tip.setAttribute("control", this.#controlMode);
+    if (mode === "add" || mode === "remove") {
+      tip.setAttribute("control", mode);
     } else {
       tip.setAttribute("value", this.getAttribute("color") || "#D9D9D9");
       tip.setAttribute("alpha", "true");
-      tip.setAttribute("selected", "");
     }
     tip.addEventListener("input", this.#handleColorTipInput);
     tip.addEventListener("change", this.#handleColorTipChange);
@@ -14037,6 +14073,7 @@ class FigHandle extends HTMLElement {
     tip.addEventListener("remove", this.#handleColorTipControl);
     this.appendChild(tip);
     this.#colorTip = tip;
+    this.#syncColorTipSelected();
   }
 
   #hideColorTip() {
@@ -14049,6 +14086,13 @@ class FigHandle extends HTMLElement {
     this.#colorTip = null;
   }
 
+  #syncColorTipSelected() {
+    if (!this.#colorTip || this.#tipMode !== "color") return;
+    const selected =
+      this.hasAttribute("selected") && this.getAttribute("selected") !== "false";
+    this.#colorTip.toggleAttribute("selected", selected);
+  }
+
   #colorWithOpacity(hex, opacity) {
     if (opacity === undefined || opacity >= 100) return hex;
     const { r, g, b } = figHexToRGB(hex);

package/package.json

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