@rogieking/figui3 11.6.0 → 11.6.2

package/fig-popup-gradient.js

@@ -2,7 +2,13 @@
 import "./fig.js";
 import "./fig-gradient-editor.js";
 
-const GRADIENT_ATTRIBUTES = ["value", "color-space", "disabled"];
+const GRADIENT_ATTRIBUTES = [
+  "value",
+  "color-space",
+  "disabled",
+  "overflow",
+  "show-rows",
+];
 
 customElements.whenDefined("fig-popup").then(() => {
   if (customElements.get("fig-popup-gradient")) return;
@@ -16,6 +22,8 @@ customElements.whenDefined("fig-popup").then(() => {
    * @attr {string} value - JSON gradient config or full gradient fill value
    * @attr {string} color-space - `srgb` or `display-p3`
    * @attr {boolean} disabled - Disables gradient editing
+   * @attr {"fade"|"visible"} overflow - Stop-list overflow mode
+   * @attr {number} show-rows - Visible stop rows before overflow
    * @fires input - During gradient edits
    * @fires change - On committed gradient edits
    */

package/fig-popup-palette.js

@@ -1,7 +1,16 @@
 /* Copyright (c) 2026 Rogie King. PolyForm Shield 1.0.0. See LICENSE. */
 import "./fig.js";
-
-const PALETTE_ATTRIBUTES = ["value", "min", "max", "fixed", "disabled"];
+import "./fig-palette-editor.js";
+
+const PALETTE_ATTRIBUTES = [
+  "value",
+  "min",
+  "max",
+  "fixed",
+  "disabled",
+  "overflow",
+  "show-rows",
+];
 
 function normalizePaletteValue(value) {
   let entries = value;
@@ -56,6 +65,8 @@ customElements.whenDefined("fig-popup").then(() => {
    * @attr {number} max - Maximum number of colors
    * @attr {boolean} fixed - Locks the palette length
    * @attr {boolean} disabled - Disables palette editing
+   * @attr {"fade"|"visible"} overflow - Vertical overflow mode
+   * @attr {number} show-rows - Visible rows before overflow
    * @fires input - During editing with the normalized color array in detail
    * @fires change - On committed edits with the normalized color array in detail
    */

package/fig-property.css

@@ -29,6 +29,10 @@ fig-property {
   padding: var(--fig-property-top-padding) 0
     var(--fig-property-bottom-padding);
 
+  &[selected]:not([selected="false"]) {
+    background-color: var(--figma-color-bg-selected);
+  }
+
   &[show-trailing]:not([show-trailing="hover"]):has(> fig-button[slot="trailing"][variant="ghost"]),
   &[show-trailing]:not([show-trailing="hover"]):has(> [slot="trailing"] fig-button[variant="ghost"]) {
     --fig-property-right-padding: var(--spacer-2);

package/fig.js

@@ -1,4 +1,16 @@
 import "./fig-layer.js";
+import {
+  figHexToRGB,
+  figHslToRGB,
+  figInterpolateHue,
+  figLinearToSRGB,
+  figOklabToOklch,
+  figOklabToRGB,
+  figOklchToOklab,
+  figRGBToHsl as figRgbToHsl,
+  figRGBToLinear,
+  figRGBToOklab,
+} from "./fig-color.js";
 
 /**
  * Generates a unique ID string using timestamp and random values
@@ -2907,7 +2919,11 @@ class FigPopup extends HTMLDialogElement {
   _wasDragged = false;
   _previousFocus = null;
   _boundDocumentKeydown;
+  _boundDocumentPointerUp;
   _boundNativeClose;
+  _boundNativeCancel;
+  _suppressNativeCancel = false;
+  _nativeCancelResetTimer = null;
 
   constructor() {
     super();
@@ -2929,7 +2945,10 @@ class FigPopup extends HTMLDialogElement {
     this._boundPointerMove = this.handlePointerMove.bind(this);
     this._boundPointerUp = this.handlePointerUp.bind(this);
     this._boundDocumentKeydown = this.handleDocumentKeydown.bind(this);
+    this._boundDocumentPointerUp =
+      this.handleDocumentPointerUp.bind(this);
     this._boundNativeClose = this.handleNativeClose.bind(this);
+    this._boundNativeCancel = this.handleNativeCancel.bind(this);
     this._boundAutoClose = () => {
       this.open = false;
     };
@@ -2960,6 +2979,10 @@ class FigPopup extends HTMLDialogElement {
     if (typeof this._dragThreshold !== "number") this._dragThreshold = 3;
     if (typeof this._wasDragged === "undefined") this._wasDragged = false;
     if (typeof this._previousFocus === "undefined") this._previousFocus = null;
+    if (typeof this._suppressNativeCancel === "undefined")
+      this._suppressNativeCancel = false;
+    if (typeof this._nativeCancelResetTimer === "undefined")
+      this._nativeCancelResetTimer = null;
 
     if (typeof this._boundReposition !== "function") {
       this._boundReposition = () => this.queueReposition();
@@ -2995,9 +3018,16 @@ class FigPopup extends HTMLDialogElement {
     if (typeof this._boundDocumentKeydown !== "function") {
       this._boundDocumentKeydown = this.handleDocumentKeydown.bind(this);
     }
+    if (typeof this._boundDocumentPointerUp !== "function") {
+      this._boundDocumentPointerUp =
+        this.handleDocumentPointerUp.bind(this);
+    }
     if (typeof this._boundNativeClose !== "function") {
       this._boundNativeClose = this.handleNativeClose.bind(this);
     }
+    if (typeof this._boundNativeCancel !== "function") {
+      this._boundNativeCancel = this.handleNativeCancel.bind(this);
+    }
     if (typeof this._boundAutoClose !== "function") {
       this._boundAutoClose = () => {
         this.open = false;
@@ -3092,6 +3122,8 @@ class FigPopup extends HTMLDialogElement {
 
     this.removeEventListener("close", this._boundNativeClose);
     this.addEventListener("close", this._boundNativeClose);
+    this.removeEventListener("cancel", this._boundNativeCancel);
+    this.addEventListener("cancel", this._boundNativeCancel);
 
     requestAnimationFrame(() => {
       this.setupDragListeners();
@@ -3114,7 +3146,22 @@ class FigPopup extends HTMLDialogElement {
       true,
     );
     document.removeEventListener("keydown", this._boundDocumentKeydown, true);
+    document.removeEventListener(
+      "pointerup",
+      this._boundDocumentPointerUp,
+      true,
+    );
+    document.removeEventListener(
+      "pointercancel",
+      this._boundDocumentPointerUp,
+      true,
+    );
     this.removeEventListener("close", this._boundNativeClose);
+    this.removeEventListener("cancel", this._boundNativeCancel);
+    if (this._nativeCancelResetTimer !== null) {
+      clearTimeout(this._nativeCancelResetTimer);
+      this._nativeCancelResetTimer = null;
+    }
     if (this._rafId !== null) {
       cancelAnimationFrame(this._rafId);
       this._rafId = null;
@@ -3210,6 +3257,16 @@ class FigPopup extends HTMLDialogElement {
       true,
     );
     document.addEventListener("keydown", this._boundDocumentKeydown, true);
+    document.addEventListener(
+      "pointerup",
+      this._boundDocumentPointerUp,
+      true,
+    );
+    document.addEventListener(
+      "pointercancel",
+      this._boundDocumentPointerUp,
+      true,
+    );
     this._wasDragged = false;
     this.queueReposition();
     this._isPopupActive = true;
@@ -3241,6 +3298,21 @@ class FigPopup extends HTMLDialogElement {
       true,
     );
     document.removeEventListener("keydown", this._boundDocumentKeydown, true);
+    document.removeEventListener(
+      "pointerup",
+      this._boundDocumentPointerUp,
+      true,
+    );
+    document.removeEventListener(
+      "pointercancel",
+      this._boundDocumentPointerUp,
+      true,
+    );
+    this._suppressNativeCancel = false;
+    if (this._nativeCancelResetTimer !== null) {
+      clearTimeout(this._nativeCancelResetTimer);
+      this._nativeCancelResetTimer = null;
+    }
 
     if (
       this.hasAttribute("popover") &&
@@ -3317,6 +3389,15 @@ class FigPopup extends HTMLDialogElement {
     if (this.hasAttribute("open")) this.removeAttribute("open");
   }
 
+  handleNativeCancel(event) {
+    if (
+      this._suppressNativeCancel &&
+      this.getAttribute("closedby") === "any"
+    ) {
+      event.preventDefault();
+    }
+  }
+
   setupObservers() {
     this.teardownObservers();
 
@@ -3462,26 +3543,55 @@ class FigPopup extends HTMLDialogElement {
     // counts as inside — Node.contains() is false for slotted nodes.
     const path =
       typeof event.composedPath === "function" ? event.composedPath() : [];
-    if (path.includes(this)) return;
-    if (this.contains(target)) return;
+    if (path.includes(this) || this.contains(target)) {
+      this.markOwnedPointerInteraction();
+      return;
+    }
 
     const anchor = this.resolveAnchor();
-    if (anchor && (path.includes(anchor) || anchor.contains?.(target))) return;
+    if (anchor && (path.includes(anchor) || anchor.contains?.(target))) {
+      this.markOwnedPointerInteraction();
+      return;
+    }
 
-    if (this.isInsideDescendantPopup(target)) return;
+    if (this.isInsideDescendantPopup(target, path)) {
+      this.markOwnedPointerInteraction();
+      return;
+    }
 
+    this._suppressNativeCancel = false;
     this.open = false;
   }
 
+  markOwnedPointerInteraction() {
+    this._suppressNativeCancel = true;
+    if (this._nativeCancelResetTimer !== null) {
+      clearTimeout(this._nativeCancelResetTimer);
+      this._nativeCancelResetTimer = null;
+    }
+  }
+
+  handleDocumentPointerUp() {
+    if (!this._suppressNativeCancel) return;
+    if (this._nativeCancelResetTimer !== null) {
+      clearTimeout(this._nativeCancelResetTimer);
+    }
+    // Native dialog light-dismiss runs after pointer dispatch. Keep the guard
+    // through that algorithm, then allow later requestClose() calls normally.
+    this._nativeCancelResetTimer = setTimeout(() => {
+      this._suppressNativeCancel = false;
+      this._nativeCancelResetTimer = null;
+    }, 0);
+  }
+
   handleDocumentKeydown(event) {
     if (event.key !== "Escape" || event.defaultPrevented) return;
     if (!this.open) return;
     if (this.getAttribute("role") === "menu") return;
     const closedby = this.getAttribute("closedby");
     if (closedby === "none") return;
-    const openPopups = Array.from(
-      document.querySelectorAll('dialog[is="fig-popup"][open]'),
-    ).filter((popup) => popup.open);
+    const openPopups = Array.from(document.querySelectorAll("dialog[open]"))
+      .filter((popup) => popup instanceof FigPopup && popup.open);
     const topPopup = openPopups
       .map((popup) => ({
         popup,
@@ -3494,8 +3604,40 @@ class FigPopup extends HTMLDialogElement {
     this.open = false;
   }
 
-  isInsideDescendantPopup(target) {
-    const targetDialog = target.closest?.('dialog[is="fig-popup"]');
+  getContainingPopup(node) {
+    let current = node;
+    const visited = new Set();
+    while (current && !visited.has(current)) {
+      visited.add(current);
+      if (current instanceof FigPopup) return current;
+      current =
+        current.parentNode ??
+        (current.getRootNode?.() instanceof ShadowRoot
+          ? current.getRootNode().host
+          : null);
+    }
+    return null;
+  }
+
+  composedContains(node) {
+    let current = node;
+    const visited = new Set();
+    while (current && !visited.has(current)) {
+      if (current === this) return true;
+      visited.add(current);
+      current =
+        current.parentNode ??
+        (current.getRootNode?.() instanceof ShadowRoot
+          ? current.getRootNode().host
+          : null);
+    }
+    return false;
+  }
+
+  isInsideDescendantPopup(target, path = []) {
+    const targetDialog =
+      path.find((node) => node instanceof FigPopup) ??
+      this.getContainingPopup(target);
     if (!targetDialog || targetDialog === this) return false;
 
     let current = targetDialog;
@@ -3504,8 +3646,8 @@ class FigPopup extends HTMLDialogElement {
       visited.add(current);
       const popupAnchor = current.anchor;
       if (!(popupAnchor instanceof Element)) break;
-      if (this.contains(popupAnchor)) return true;
-      current = popupAnchor.closest?.('dialog[is="fig-popup"]');
+      if (this.composedContains(popupAnchor)) return true;
+      current = this.getContainingPopup(popupAnchor);
     }
     return false;
   }
@@ -9679,96 +9821,6 @@ function figLooksLikeVideoUrl(raw) {
   }
 }
 
-function figHexToRGB(hex) {
-  const h = hex.replace(/^#/, "");
-  return {
-    r: parseInt(h.substring(0, 2), 16),
-    g: parseInt(h.substring(2, 4), 16),
-    b: parseInt(h.substring(4, 6), 16),
-  };
-}
-
-function figRGBToLinear(c) {
-  const s = c / 255;
-  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-}
-
-function figLinearToSRGB(c) {
-  const v = c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-  return Math.round(Math.max(0, Math.min(1, v)) * 255);
-}
-
-function figRGBToOklab(r, g, b) {
-  const lr = figRGBToLinear(r);
-  const lg = figRGBToLinear(g);
-  const lb = figRGBToLinear(b);
-  const l_ = Math.cbrt(
-    0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb,
-  );
-  const m_ = Math.cbrt(
-    0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb,
-  );
-  const s_ = Math.cbrt(
-    0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb,
-  );
-  return {
-    l: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
-    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
-    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
-  };
-}
-
-function figOklabToRGB(L, a, b) {
-  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
-  const l = l_ * l_ * l_;
-  const m = m_ * m_ * m_;
-  const s = s_ * s_ * s_;
-  return {
-    r: figLinearToSRGB(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
-    g: figLinearToSRGB(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
-    b: figLinearToSRGB(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
-  };
-}
-
-function figOklabToOklch(L, a, b) {
-  return {
-    l: L,
-    c: Math.sqrt(a * a + b * b),
-    h: (Math.atan2(b, a) * 180) / Math.PI,
-  };
-}
-
-function figOklchToOklab(l, c, h) {
-  const hRad = (h * Math.PI) / 180;
-  return { l, a: c * Math.cos(hRad), b: c * Math.sin(hRad) };
-}
-
-function figInterpolateHue(h1, h2, t, mode) {
-  let a = ((h1 % 360) + 360) % 360;
-  let b = ((h2 % 360) + 360) % 360;
-  let diff = b - a;
-  switch (mode) {
-    case "longer":
-      if (diff > 0 && diff < 180) diff -= 360;
-      else if (diff < 0 && diff > -180) diff += 360;
-      else if (diff === 0) diff = 0;
-      break;
-    case "increasing":
-      if (diff < 0) diff += 360;
-      break;
-    case "decreasing":
-      if (diff > 0) diff -= 360;
-      break;
-    default:
-      if (diff > 180) diff -= 360;
-      else if (diff < -180) diff += 360;
-      break;
-  }
-  return (((a + diff * t) % 360) + 360) % 360;
-}
-
 function figSampleGradientAt(
   stops,
   position,
@@ -9834,10 +9886,10 @@ function figSampleGradientAt(
     );
     const S = hsl1.s + (hsl2.s - hsl1.s) * t;
     const L = hsl1.l + (hsl2.l - hsl1.l) * t;
-    const rgb = hslToSRGB(H, S, L);
-    r = rgb[0];
-    g = rgb[1];
-    b = rgb[2];
+    const rgb = figHslToRGB(H, S, L);
+    r = rgb.r;
+    g = rgb.g;
+    b = rgb.b;
   } else if (space === "srgb") {
     r = Math.round(c1.r + (c2.r - c1.r) * t);
     g = Math.round(c1.g + (c2.g - c1.g) * t);
@@ -9857,77 +9909,6 @@ function figSampleGradientAt(
   return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
 }
 
-function figRgbToHsl(r, g, b) {
-  const R = r / 255;
-  const G = g / 255;
-  const B = b / 255;
-  const max = Math.max(R, G, B);
-  const min = Math.min(R, G, B);
-  const l = (max + min) / 2;
-  if (max === min) {
-    return { h: 0, s: 0, l: l * 100 };
-  }
-  const d = max - min;
-  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-  let h;
-  switch (max) {
-    case R:
-      h = ((G - B) / d + (G < B ? 6 : 0)) / 6;
-      break;
-    case G:
-      h = ((B - R) / d + 2) / 6;
-      break;
-    default:
-      h = ((R - G) / d + 4) / 6;
-      break;
-  }
-  return { h: h * 360, s: s * 100, l: l * 100 };
-}
-
-function hslToP3(h, s, l) {
-  const sRGB = hslToSRGB(h, s, l);
-  return sRGB.map((c) => +(c / 255).toFixed(4));
-}
-
-function hslToSRGB(h, s, l) {
-  s /= 100;
-  l /= 100;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-  const m = l - c / 2;
-  let r, g, b;
-  if (h < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  return [
-    Math.round((r + m) * 255),
-    Math.round((g + m) * 255),
-    Math.round((b + m) * 255),
-  ];
-}
-
 /**
  * A fill input that supports solid colors, gradients, images, videos, and webcam.
  * @attr {string} value - JSON string with fill data
@@ -12307,7 +12288,13 @@ class FigInputGradient extends HTMLElement {
 
     this.#track.addEventListener("pointerdown", (e) => {
       if (figBooleanAttribute(this, "disabled")) return;
-      if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) return;
+      const handle = e.target.closest(
+        "fig-handle:not(.fig-input-gradient-ghost)",
+      );
+      if (handle) {
+        this.#activateStopHandle(handle);
+        return;
+      }
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "11.6.0",
+  "version": "11.6.2",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "SEE LICENSE IN LICENSE",
@@ -10,6 +10,7 @@
   "exports": {
     ".": "./dist/fig.js",
     "./fig.js": "./dist/fig.js",
+    "./fig-color.js": "./dist/fig-color.js",
     "./fig-layer.js": "./dist/fig-layer.js",
     "./fig-property.js": "./dist/fig-property.js",
     "./fig-editor.js": "./dist/fig-editor.js",
@@ -22,6 +23,7 @@
     "./base.css": "./dist/base.css",
     "./components.css": "./dist/components.css",
     "./src/fig.js": "./fig.js",
+    "./src/fig-color.js": "./fig-color.js",
     "./src/fig-layer.js": "./fig-layer.js",
     "./src/fig-property.js": "./fig-property.js",
     "./src/fig-editor.js": "./fig-editor.js",
@@ -36,9 +38,11 @@
   },
   "files": [
     "fig.js",
+    "fig-color.js",
     "fig-layer.js",
     "fig-property.js",
     "fig-gradient-editor.js",
+    "fig-palette-editor.js",
     "fig-popup-easing.js",
     "fig-popup-gradient.js",
     "fig-popup-palette.js",
@@ -48,6 +52,7 @@
     "fig-layer.css",
     "fig-property.css",
     "fig-gradient-editor.css",
+    "fig-palette-editor.css",
     "fig-popup-easing.css",
     "fig-popup-gradient.css",
     "fig-popup-palette.css",
@@ -71,7 +76,7 @@
   ],
   "scripts": {
     "dev": "bun --hot server.ts",
-    "build": "bun build fig.js --minify --outdir dist && bun build fig-layer.js --minify --outdir dist && bun build fig-property.js --minify --outdir dist --external ./fig.js && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-property.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && npm run build:css",
+    "build": "bun build fig-color.js --minify --outdir dist && bun build fig.js --minify --outdir dist --external ./fig-color.js && bun build fig-layer.js --minify --outdir dist && bun build fig-property.js --minify --outdir dist --external ./fig.js && bun build fig-editor.js --minify --outdir dist --external ./fig.js --external ./fig-color.js --external ./fig-property.js --external ./fig-lab.js && bun build fig-lab.js --minify --outdir dist --external ./fig.js --external ./fig-editor.js && npm run build:css",
     "build:css": "node scripts/build-css.mjs",
     "dev:playground": "node playground/dev.mjs",
     "build:playground": "cd playground && npm run build",