@rogieking/figui3 4.15.1 → 4.15.3

package/fig.js

@@ -1784,6 +1784,10 @@ class FigPopup extends HTMLDialogElement {
       this.hasAttribute("popover") &&
       typeof this.showPopover === "function" &&
       !this.matches?.(":popover-open");
+    const positionBeforeReveal = this.shouldAutoReposition();
+    if (positionBeforeReveal) {
+      this.style.visibility = "hidden";
+    }
     if (usePopover) {
       try {
         this.showPopover();
@@ -1798,6 +1802,10 @@ class FigPopup extends HTMLDialogElement {
         // Ignore when dialog cannot be shown yet.
       }
     }
+    if (positionBeforeReveal && (this.matches?.(":open") || this.matches?.(":popover-open"))) {
+      this.positionPopup();
+      this.style.visibility = "";
+    }
 
     this.setupObservers();
     document.addEventListener(
@@ -1817,6 +1825,7 @@ class FigPopup extends HTMLDialogElement {
     const anchor = this.resolveAnchor();
     if (anchor?.classList) anchor.classList.remove("has-popup-open");
 
+    this.style.visibility = "";
     this._isPopupActive = false;
     this._wasDragged = false;
     this.teardownObservers();
@@ -1837,7 +1846,10 @@ class FigPopup extends HTMLDialogElement {
         // Ignore.
       }
     }
-    if (super.open) {
+  // Use :open, not super.open — the custom open getter reads the attribute
+  // removed just before hidePopup(), so super.open can be false while the
+  // native dialog is still open and no "close" event fires.
+    if (this.matches?.(":open")) {
       try {
         this.close();
       } catch (e) {
@@ -2484,7 +2496,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   positionPopup() {
-    if (!this.open || !super.open) return;
+    if (!this.open || !this.matches?.(":open")) return;
 
     const popupRect = this.getBoundingClientRect();
     const offset = this.parseOffset();
@@ -5123,6 +5135,14 @@ class FigInputColor extends HTMLElement {
       // Setup swatch (native picker)
       if (this.#swatch) {
         this.#swatch.disabled = this.hasAttribute("disabled");
+        const swatchInput = this.#swatch.querySelector('input[type="color"]');
+        if (this.#textInput || this.hasAttribute("swatch-disabled")) {
+          swatchInput?.setAttribute("tabindex", "-1");
+        }
+        if (this.hasAttribute("swatch-disabled")) {
+          swatchInput?.setAttribute("disabled", "");
+          if (swatchInput) swatchInput.style.pointerEvents = "none";
+        }
         this.#swatch.addEventListener("input", this.#handleInput.bind(this));
       }
 
@@ -5240,7 +5260,11 @@ class FigInputColor extends HTMLElement {
   }
 
   focus() {
-    this.#swatch.focus();
+    if (this.#textInput) {
+      this.#textInput.focus();
+      return;
+    }
+    this.#swatch?.focus();
   }
 
   #handleInput(event) {
@@ -6618,6 +6642,14 @@ class FigInputPalette extends HTMLElement {
 
     const inlineWrap = document.createElement("div");
     inlineWrap.className = "palette-colors-inline";
+    inlineWrap.addEventListener("click", () => {
+      if (
+        this.hasAttribute("disabled") &&
+        this.getAttribute("disabled") !== "false"
+      )
+        return;
+      this.open = true;
+    });
 
     const wrap = document.createElement("div");
     wrap.className = "palette-colors";
@@ -6655,6 +6687,7 @@ class FigInputPalette extends HTMLElement {
     if (inline) {
       ic.setAttribute("text", "false");
       ic.setAttribute("alpha", "true");
+      ic.setAttribute("swatch-disabled", "");
     } else {
       ic.setAttribute("text", "true");
       ic.setAttribute("alpha", this.#isFixed ? "true" : "false");
@@ -6712,7 +6745,10 @@ class FigInputPalette extends HTMLElement {
       if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
       this.#removeColor(index);
     });
-    return btn;
+    const tooltip = document.createElement("fig-tooltip");
+    tooltip.setAttribute("text", "Remove color");
+    tooltip.appendChild(btn);
+    return tooltip;
   }
 
   #removeColor(index) {
@@ -6742,6 +6778,7 @@ class FigInputPalette extends HTMLElement {
       )
         return;
       if (this.#colors.length >= this.#max) return;
+      this.open = true;
       this.#addColor({ color: "#D9D9D9", alpha: 1 });
     });
     const tooltip = document.createElement("fig-tooltip");
@@ -6775,6 +6812,7 @@ class FigInputPalette extends HTMLElement {
       const addBtn = this.querySelector(".palette-add-btn");
       if (addBtn) addBtn.setAttribute("disabled", "");
     }
+    this.#syncRemoveButtons(disabled);
     this.#emitChange();
   }
 
@@ -6814,9 +6852,18 @@ class FigInputPalette extends HTMLElement {
     });
     const addBtn = this.querySelector(".palette-add-btn");
     if (addBtn) {
-      if (disabled) addBtn.setAttribute("disabled", "");
+      if (disabled || this.#colors.length >= this.#max) addBtn.setAttribute("disabled", "");
       else addBtn.removeAttribute("disabled");
     }
+    this.#syncRemoveButtons(disabled);
+  }
+
+  #syncRemoveButtons(disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") {
+    const shouldDisable = disabled || this.#colors.length <= this.#min;
+    this.querySelectorAll(".palette-remove-btn").forEach((btn) => {
+      if (shouldDisable) btn.setAttribute("disabled", "");
+      else btn.removeAttribute("disabled");
+    });
   }
 
   #emitInput() {
@@ -7038,7 +7085,7 @@ class FigInputGradient extends HTMLElement {
     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="${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" color-tip color="${this.#stopColorCSS(stop)}" value="${stop.position}% 50%" hit-area="4" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle></fig-tooltip>`,
       )
       .join("");
   }
@@ -7119,6 +7166,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");
     ghost.style.position = "absolute";
     ghost.style.top = "50%";
@@ -12123,6 +12171,14 @@ class FigFillPicker extends HTMLElement {
     });
   }
 
+  open() {
+    this.#openDialog();
+  }
+
+  close() {
+    if (this.#dialog) this.#dialog.open = false;
+  }
+
   #createDialog() {
     // Collect slotted custom mode content before any DOM changes
     this.#customSlots = {};
@@ -12270,6 +12326,7 @@ class FigFillPicker extends HTMLElement {
     const onDialogClose = () => {
       if (this.#chit) this.#chit.removeAttribute("selected");
       this.#emitChange();
+      this.dispatchEvent(new CustomEvent("close"));
     };
     this.#dialog.addEventListener("close", onDialogClose);
 
@@ -14936,6 +14993,7 @@ class FigHandle extends HTMLElement {
     "value",
     "type",
     "control",
+    "color-tip",
     "hit-area",
     "hit-area-mode",
   ];
@@ -14945,6 +15003,7 @@ class FigHandle extends HTMLElement {
   #boundPointerDown = null;
   #applyingValue = false;
   #colorTip = null;
+  #directColorPicker = null;
   #hitAreaEl = null;
 
   get #controlMode() {
@@ -14955,6 +15014,14 @@ class FigHandle extends HTMLElement {
     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");
   }
@@ -15174,6 +15241,7 @@ class FigHandle extends HTMLElement {
   disconnectedCallback() {
     this.#teardownDrag();
     this.#hideColorTip();
+    this.#removeDirectColorPicker();
     if (this.#hitAreaEl) {
       this.#hitAreaEl.remove();
       this.#hitAreaEl = null;
@@ -15186,7 +15254,7 @@ class FigHandle extends HTMLElement {
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color" && !this.#isDragging)
+    if (this.getAttribute("type") === "color" && !this.#isDragging && this.#usesColorTip)
       this.#showColorTip();
   }
 
@@ -15201,23 +15269,30 @@ class FigHandle extends HTMLElement {
       this.#didDrag = false;
       return;
     }
+    if (this.getAttribute("type") === "color" && !this.#usesColorTip) {
+      this.#openDirectColorPicker();
+      return;
+    }
     this.select();
   };
 
   #handleDeselect = (e) => {
     if (this.#hasControlMode) return;
     if (this.contains(e.target)) return;
-    if (this.#colorTip && e.target.closest?.("dialog, [popover]")) return;
+    if ((this.#colorTip || this.#directColorPicker) && e.target.closest?.("dialog, [popover]")) return;
     this.deselect();
   };
 
   #handleKeyDown = (e) => {
-    if (e.key !== "Enter") return;
+    if (e.key !== "Enter" && e.key !== " ") return;
     if (!this.hasAttribute("selected")) return;
     if (this.getAttribute("type") !== "color") return;
-    if (this.#colorTip) return;
     e.preventDefault();
-    this.#showColorTip();
+    if (this.#usesColorTip) {
+      if (!this.#colorTip) this.#showColorTip();
+    } else {
+      this.#openDirectColorPicker();
+    }
   };
 
   attributeChangedCallback(name, _old, value) {
@@ -15230,6 +15305,7 @@ class FigHandle extends HTMLElement {
       if (this.#colorTip && value) {
         this.#colorTip.setAttribute("value", value);
       }
+      this.#syncDirectColorPickerValue();
     }
     if (name === "drag") this.#syncDrag();
     if (name === "hit-area") this.#syncHitArea();
@@ -15238,12 +15314,20 @@ class FigHandle extends HTMLElement {
     }
     if (name === "control") {
       if (this.#hasControlMode) {
+        this.#removeDirectColorPicker();
         this.#hideColorTip();
         this.#showColorTip();
       } else {
         this.#hideColorTip();
       }
     }
+    if (name === "color-tip") {
+      if (this.#usesColorTip) {
+        this.#removeDirectColorPicker();
+      } else {
+        this.#hideColorTip();
+      }
+    }
   }
 
   #syncDrag() {
@@ -15400,6 +15484,117 @@ class FigHandle extends HTMLElement {
     this.#colorTip.style.display = "none";
   }
 
+  #normalizeColorForPicker(rawValue = this.getAttribute("color")) {
+    const fallback = { color: "#D9D9D9", opacity: 100 };
+    const value = String(rawValue || "").trim();
+    if (!value) return fallback;
+
+    const normalizeHex = (hex) => {
+      const raw = hex.replace("#", "").trim();
+      if (raw.length === 3 || raw.length === 4) {
+        const [r, g, b, a] = raw;
+        return {
+          color: `#${r}${r}${g}${g}${b}${b}`.toUpperCase(),
+          opacity: a ? Math.round((parseInt(`${a}${a}`, 16) / 255) * 100) : 100,
+        };
+      }
+      if (raw.length === 6 || raw.length === 8) {
+        return {
+          color: `#${raw.slice(0, 6)}`.toUpperCase(),
+          opacity:
+            raw.length === 8
+              ? Math.round((parseInt(raw.slice(6, 8), 16) / 255) * 100)
+              : 100,
+        };
+      }
+      return fallback;
+    };
+
+    const rgbToHex = (r, g, b) => {
+      const toHex = (v) =>
+        Math.max(0, Math.min(255, Math.round(Number(v))))
+          .toString(16)
+          .padStart(2, "0");
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+    };
+
+    if (value.startsWith("#")) return normalizeHex(value);
+
+    try {
+      const { ctx } = figGetSharedCanvas(1, 1);
+      ctx.fillStyle = "#000000";
+      ctx.fillStyle = value;
+      const resolved = ctx.fillStyle;
+      if (resolved.startsWith("#")) return normalizeHex(resolved);
+      const rgb = resolved.match(
+        /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?/i,
+      );
+      if (rgb) {
+        return {
+          color: rgbToHex(rgb[1], rgb[2], rgb[3]),
+          opacity: rgb[4] !== undefined ? Math.round(parseFloat(rgb[4]) * 100) : 100,
+        };
+      }
+    } catch {
+      // Fall through to fallback.
+    }
+
+    return fallback;
+  }
+
+  #directColorPickerValue() {
+    const { color, opacity } = this.#normalizeColorForPicker();
+    return JSON.stringify(
+      opacity < 100 ? { type: "solid", color, opacity } : { type: "solid", color },
+    );
+  }
+
+  #syncDirectColorPickerValue() {
+    if (!this.#directColorPicker) return;
+    this.#directColorPicker.setAttribute("value", this.#directColorPickerValue());
+  }
+
+  #ensureDirectColorPicker() {
+    if (this.#directColorPicker) return this.#directColorPicker;
+
+    const picker = document.createElement("fig-fill-picker");
+    picker.setAttribute("mode", "solid");
+    picker.setAttribute("alpha", "true");
+    picker.setAttribute("value", this.#directColorPickerValue());
+    picker.anchorElement = this;
+
+    const trigger = document.createElement("span");
+    trigger.hidden = true;
+    picker.appendChild(trigger);
+
+    picker.addEventListener("input", this.#handleDirectColorPickerInput);
+    picker.addEventListener("change", this.#handleDirectColorPickerChange);
+    picker.addEventListener("close", this.#handleDirectColorPickerClose);
+    this.appendChild(picker);
+    this.#directColorPicker = picker;
+    return picker;
+  }
+
+  #openDirectColorPicker() {
+    if (this.hasAttribute("disabled")) return;
+    this.#hideColorTip();
+    const picker = this.#ensureDirectColorPicker();
+    this.setAttribute("selected", "");
+    this.#syncDirectColorPickerValue();
+    picker.open();
+  }
+
+  #removeDirectColorPicker() {
+    if (!this.#directColorPicker) return;
+    this.#directColorPicker.removeEventListener("input", this.#handleDirectColorPickerInput);
+    this.#directColorPicker.removeEventListener("change", this.#handleDirectColorPickerChange);
+    this.#directColorPicker.removeEventListener("close", this.#handleDirectColorPickerClose);
+    this.#directColorPicker.close();
+    this.#directColorPicker.remove();
+    this.#directColorPicker = null;
+    this.removeAttribute("selected");
+  }
+
   #showColorTip() {
     if (this.#colorTip) return;
     const tip = document.createElement("fig-color-tip");
@@ -15434,6 +15629,47 @@ class FigHandle extends HTMLElement {
     return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
   }
 
+  #detailFromPicker(detail) {
+    if (!detail?.color) return null;
+    const opacity =
+      detail.opacity !== undefined
+        ? detail.opacity
+        : detail.alpha !== undefined
+          ? Math.round(detail.alpha * 100)
+          : undefined;
+    return { color: detail.color, opacity };
+  }
+
+  #handleDirectColorPickerInput = (e) => {
+    e.stopPropagation();
+    const detail = this.#detailFromPicker(e.detail);
+    if (!detail) return;
+    this.setAttribute("color", this.#colorWithOpacity(detail.color, detail.opacity));
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        detail,
+      }),
+    );
+  };
+
+  #handleDirectColorPickerChange = (e) => {
+    e.stopPropagation();
+    const detail = this.#detailFromPicker(e.detail);
+    if (!detail) return;
+    this.setAttribute("color", this.#colorWithOpacity(detail.color, detail.opacity));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        detail,
+      }),
+    );
+  };
+
+  #handleDirectColorPickerClose = () => {
+    this.removeAttribute("selected");
+  };
+
   #handleColorTipInput = (e) => {
     e.stopPropagation();
     if (e.detail?.color) {
@@ -15528,7 +15764,7 @@ class FigMenu extends HTMLElement {
   #observer = null;
   #boundTriggerClick;
   #boundPopupClick;
-  #boundPopupKeydown;
+  #boundMenuKeydown;
   #boundPopupClose;
   #focusedIndex = -1;
 
@@ -15540,7 +15776,7 @@ class FigMenu extends HTMLElement {
     super();
     this.#boundTriggerClick = this.#handleTriggerClick.bind(this);
     this.#boundPopupClick = this.#handlePopupClick.bind(this);
-    this.#boundPopupKeydown = this.#handlePopupKeydown.bind(this);
+    this.#boundMenuKeydown = this.#handleMenuKeydown.bind(this);
     this.#boundPopupClose = this.#handlePopupClose.bind(this);
   }
 
@@ -15661,6 +15897,7 @@ class FigMenu extends HTMLElement {
   }
 
   #setupListeners() {
+    this.addEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.addEventListener("click", this.#boundTriggerClick);
       this.#trigger.setAttribute("aria-haspopup", "menu");
@@ -15668,17 +15905,16 @@ class FigMenu extends HTMLElement {
     }
     if (this.#popup) {
       this.#popup.addEventListener("click", this.#boundPopupClick);
-      this.#popup.addEventListener("keydown", this.#boundPopupKeydown);
     }
   }
 
   #teardownListeners() {
+    this.removeEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.removeEventListener("click", this.#boundTriggerClick);
     }
     if (this.#popup) {
       this.#popup.removeEventListener("click", this.#boundPopupClick);
-      this.#popup.removeEventListener("keydown", this.#boundPopupKeydown);
     }
   }
 
@@ -15713,6 +15949,27 @@ class FigMenu extends HTMLElement {
     return Array.from(this.#popup.querySelectorAll("fig-menu-item:not([disabled]):not([disabled='true'])"));
   }
 
+  #syncFocusedIndex() {
+    const items = this.#getItems();
+    if (!items.length) {
+      this.#focusedIndex = -1;
+      return;
+    }
+    const active = document.activeElement;
+    const idx = items.findIndex(
+      (item) => item === active || item.contains(active),
+    );
+    this.#focusedIndex = idx >= 0 ? idx : -1;
+  }
+
+  #focusItemAt(index) {
+    const items = this.#getItems();
+    if (!items.length) return;
+    const clamped = Math.max(0, Math.min(index, items.length - 1));
+    this.#focusedIndex = clamped;
+    items[clamped].focus();
+  }
+
   #syncDisabled() {
     if (!this.#trigger) return;
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
@@ -15726,7 +15983,12 @@ class FigMenu extends HTMLElement {
   #handleTriggerClick(e) {
     if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
     e.stopPropagation();
-    if (this.open) {
+    const popupShowing = this.#popup?.matches?.(":open") ?? false;
+    if (this.open && !popupShowing) {
+      this.removeAttribute("open");
+    }
+    const effectiveOpen = this.open && popupShowing;
+    if (effectiveOpen) {
       this.open = false;
     } else {
       this.open = true;
@@ -15741,40 +16003,42 @@ class FigMenu extends HTMLElement {
     this.#selectItem(item);
   }
 
-  #handlePopupKeydown(e) {
+  #handleMenuKeydown(e) {
+    if (!this.open || !this.#popup?.matches?.(":open")) return;
+
     const items = this.#getItems();
     if (!items.length) return;
 
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        this.#focusedIndex = Math.min(this.#focusedIndex + 1, items.length - 1);
-        items[this.#focusedIndex]?.focus();
+        this.#syncFocusedIndex();
+        this.#focusItemAt(this.#focusedIndex + 1);
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        this.#focusedIndex = Math.max(this.#focusedIndex - 1, 0);
-        items[this.#focusedIndex]?.focus();
+        this.#syncFocusedIndex();
+        this.#focusItemAt(this.#focusedIndex - 1);
         break;
       }
       case "Home": {
         e.preventDefault();
-        this.#focusedIndex = 0;
-        items[0]?.focus();
+        this.#focusItemAt(0);
         break;
       }
       case "End": {
         e.preventDefault();
-        this.#focusedIndex = items.length - 1;
-        items[this.#focusedIndex]?.focus();
+        this.#focusItemAt(items.length - 1);
         break;
       }
       case "Enter":
       case " ": {
-        e.preventDefault();
+        this.#syncFocusedIndex();
         const focused = items[this.#focusedIndex];
-        if (focused) this.#selectItem(focused);
+        if (!focused) return;
+        e.preventDefault();
+        this.#selectItem(focused);
         break;
       }
     }
@@ -15809,10 +16073,10 @@ class FigMenu extends HTMLElement {
     if (this.#trigger) {
       this.#trigger.setAttribute("aria-expanded", "true");
     }
-    this.#focusedIndex = 0;
+    this.#focusedIndex = -1;
     requestAnimationFrame(() => {
-      const items = this.#getItems();
-      if (items.length) items[0].focus();
+      if (!this.#trigger?.matches?.(":focus-visible")) return;
+      this.#focusItemAt(0);
     });
   }
 

package/package.json

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