@rogieking/figui3 5.1.0 → 5.1.1

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.

package/fig.js

@@ -3632,6 +3632,7 @@ customElements.define("fig-options", FigOptions);
 class FigSlider extends HTMLElement {
   #isInteracting = false;
   #showEmptyTextValue = false;
+  #value = "";
   // Private fields declarations
   #typeDefaults = {
     range: { min: 0, max: 100, step: 1 },
@@ -3826,6 +3827,29 @@ 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 normalized = String(this.#normalizeSliderValue(value));
+    this.#value = normalized;
+    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);
@@ -5815,7 +5839,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 +5861,7 @@ export function normalizeGradientConfig(gradient) {
   return next;
 }
 
-export function gradientToValueShape(gradient) {
+function gradientToValueShape(gradient) {
   const normalized = normalizeGradientConfig(gradient);
   const output = {
     ...normalized,
@@ -5851,7 +5875,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`;

package/package.json

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