@rogieking/figui3 6.9.3 → 6.9.5

package/fig.js

@@ -4887,6 +4887,7 @@ class FigSlider extends HTMLElement {
   #boundRangePointerUp;
   #lastSliderComplete = null;
   #lastSliderDefault = null;
+  #lastSliderDeltaDirection = null;
   #lastSliderUnchanged = null;
 
   constructor() {
@@ -5259,6 +5260,7 @@ class FigSlider extends HTMLElement {
   #syncProperties() {
     const complete = this.#calculateNormal(this.value);
     const defaultValue = this.#calculateNormal(this.default);
+    const deltaDirection = complete < defaultValue ? -1 : 1;
     const unchanged = complete === defaultValue ? 1 : 0;
 
     if (this.#lastSliderComplete !== complete) {
@@ -5269,6 +5271,10 @@ class FigSlider extends HTMLElement {
       this.style.setProperty("--default", defaultValue);
       this.#lastSliderDefault = defaultValue;
     }
+    if (this.#lastSliderDeltaDirection !== deltaDirection) {
+      this.style.setProperty("--slider-delta-direction", deltaDirection);
+      this.#lastSliderDeltaDirection = deltaDirection;
+    }
     if (this.#lastSliderUnchanged !== unchanged) {
       this.style.setProperty("--unchanged", unchanged);
       this.#lastSliderUnchanged = unchanged;
@@ -7040,12 +7046,12 @@ class FigInputColor extends HTMLElement {
     const showText = this.getAttribute("text") !== "false";
     return showText
       ? !!this.querySelector(":scope > .input-combo")
-      : !!this.querySelector(":scope > fig-chit");
+      : !!this.querySelector(":scope > fig-swatch");
   }
 
   #refreshUI() {
     this.#setValues(this.getAttribute("value"));
-    this.#swatch = this.querySelector("fig-chit");
+    this.#swatch = this.querySelector("fig-swatch");
     this.#fillPicker = this.querySelector("fig-fill-picker");
     this.#textInput = this.querySelector("fig-input-text:not([type=number])");
     this.#alphaInput = this.querySelector("fig-input-number");
@@ -7152,18 +7158,18 @@ class FigInputColor extends HTMLElement {
       }
 
       let swatchElement = "";
-      swatchElement = `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
+      swatchElement = `<fig-swatch background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-swatch>`;
 
       html = `<div class="input-combo">
                 ${swatchElement}
                 ${label}
             </div>`;
     } else {
-      html = `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
+      html = `<fig-swatch background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-swatch>`;
     }
     this.innerHTML = html;
 
-    this.#swatch = this.querySelector("fig-chit");
+    this.#swatch = this.querySelector("fig-swatch");
     this.#fillPicker = this.querySelector("fig-fill-picker");
     this.#textInput = this.querySelector("fig-input-text:not([type=number])");
     this.#alphaInput = this.querySelector("fig-input-number");
@@ -8041,7 +8047,7 @@ class FigInputFill extends HTMLElement {
       .join(" ");
   }
 
-  #fillPickerChitBackground() {
+  #fillPickerSwatchBackground() {
     switch (this.#fillType) {
       case "solid":
         return this.#solid.color;
@@ -8066,7 +8072,7 @@ class FigInputFill extends HTMLElement {
     }
   }
 
-  #fillPickerChitAlpha() {
+  #fillPickerSwatchAlpha() {
     switch (this.#fillType) {
       case "solid":
         return this.#solid.alpha;
@@ -8187,7 +8193,7 @@ class FigInputFill extends HTMLElement {
         <fig-fill-picker ${fpAttrs} value='${fillPickerValue}' ${
           disabled ? "disabled" : ""
         }>
-          <fig-chit background="${this.#fillPickerChitBackground()}" alpha="${this.#fillPickerChitAlpha()}"${disabled ? " disabled" : ""}></fig-chit>
+          <fig-swatch background="${this.#fillPickerSwatchBackground()}" alpha="${this.#fillPickerSwatchAlpha()}"${disabled ? " disabled" : ""}></fig-swatch>
         </fig-fill-picker>
         ${controlsHtml}
       </div>`;
@@ -8205,9 +8211,9 @@ class FigInputFill extends HTMLElement {
     // Label click triggers fill picker
     if (label && this.#fillPicker) {
       label.addEventListener("click", () => {
-        const chit = this.#fillPicker.querySelector("fig-chit");
-        if (chit) {
-          chit.click();
+        const swatch = this.#fillPicker.querySelector("fig-swatch");
+        if (swatch) {
+          swatch.click();
         }
       });
     }
@@ -8307,8 +8313,8 @@ class FigInputFill extends HTMLElement {
             break;
         }
         this.#updateFillPicker();
-        // Update the chit's alpha
-        this.#updateChitAlpha(alpha);
+        // Update the swatch's alpha
+        this.#updateSwatchAlpha(alpha);
         this.#emitInput();
       });
       this.#opacityInput.addEventListener("change", (e) => {
@@ -8490,9 +8496,9 @@ class FigInputFill extends HTMLElement {
     // Label click triggers fill picker
     if (label && this.#fillPicker) {
       label.addEventListener("click", () => {
-        const chit = this.#fillPicker.querySelector("fig-chit");
-        if (chit) {
-          chit.click();
+        const swatch = this.#fillPicker.querySelector("fig-swatch");
+        if (swatch) {
+          swatch.click();
         }
       });
     }
@@ -8536,7 +8542,7 @@ class FigInputFill extends HTMLElement {
             break;
         }
         this.#updateFillPicker();
-        this.#updateChitAlpha(alpha);
+        this.#updateSwatchAlpha(alpha);
         this.#emitInput();
       });
       this.#opacityInput.addEventListener("change", (e) => {
@@ -8552,11 +8558,11 @@ class FigInputFill extends HTMLElement {
     }
   }
 
-  #updateChitAlpha(alpha) {
+  #updateSwatchAlpha(alpha) {
     if (this.#fillPicker) {
-      const chit = this.#fillPicker.querySelector("fig-chit");
-      if (chit) {
-        chit.setAttribute("alpha", alpha);
+      const swatch = this.#fillPicker.querySelector("fig-swatch");
+      if (swatch) {
+        swatch.setAttribute("alpha", alpha);
       }
     }
   }
@@ -9132,7 +9138,7 @@ customElements.define("fig-input-palette", FigInputPalette);
  */
 class FigInputGradient extends HTMLElement {
   static SHIFT_SNAP = 5;
-  #chit;
+  #swatch;
   #track;
   #handleDragging = false;
   #arrowTooltipTimer = null;
@@ -9278,7 +9284,7 @@ class FigInputGradient extends HTMLElement {
           selected.showColorTip();
         }, 600);
       }
-      this.#syncChit();
+      this.#syncSwatch();
       this.#emitInput();
       this.#emitChange();
       return;
@@ -9297,7 +9303,7 @@ class FigInputGradient extends HTMLElement {
     selected.removeAttribute("selected");
     this.#gradient.stops.splice(idx, 1);
     this.#syncHandles();
-    this.#syncChit();
+    this.#syncSwatch();
     this.#emitInput();
     this.#emitChange();
   };
@@ -9385,9 +9391,9 @@ class FigInputGradient extends HTMLElement {
       const gradientValue = JSON.stringify(this.value);
       this.innerHTML = `
         <fig-fill-picker mode="gradient"${expAttr} value='${gradientValue}'${disabled ? " disabled" : ""}>
-          <fig-chit background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
+          <fig-swatch background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-swatch>
         </fig-fill-picker>`;
-      this.#chit = this.querySelector("fig-chit");
+      this.#swatch = this.querySelector("fig-swatch");
       this.#track = null;
       this.#setupPickerEvents();
       this.#syncFocusTarget();
@@ -9395,9 +9401,9 @@ class FigInputGradient extends HTMLElement {
     }
 
     this.innerHTML = `
-      <fig-chit background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-chit>
+      <fig-swatch background="${this.#buildGradientCSS()}"${disabled ? " disabled" : ""}></fig-swatch>
       ${mode === "true" || mode === "picker" ? `<div class="fig-input-gradient-track">${this.#buildStopHandles()}</div>` : ""}`;
-    this.#chit = this.querySelector("fig-chit");
+    this.#swatch = this.querySelector("fig-swatch");
     this.#track = this.querySelector(".fig-input-gradient-track");
 
     if (mode === "true" || mode === "picker") {
@@ -9420,7 +9426,7 @@ class FigInputGradient extends HTMLElement {
         ...this.#gradient,
         ...detail.gradient,
       });
-      this.#syncChit();
+      this.#syncSwatch();
     };
 
     picker.addEventListener("input", (e) => {
@@ -9514,7 +9520,7 @@ class FigInputGradient extends HTMLElement {
       this.#gradient.stops[i].position = Math.round((i / (count - 1)) * 100);
     }
     this.#syncHandles();
-    this.#syncChit();
+    this.#syncSwatch();
     this.#emitInput();
     this.#emitChange();
   }
@@ -9565,7 +9571,7 @@ class FigInputGradient extends HTMLElement {
       (s) => s.position === position && s.color === color,
     );
     this.#syncHandles();
-    this.#syncChit();
+    this.#syncSwatch();
     this.#emitInput();
     this.#emitChange();
 
@@ -9702,9 +9708,9 @@ class FigInputGradient extends HTMLElement {
     });
   }
 
-  #syncChit() {
-    if (!this.#chit) return;
-    this.#chit.setAttribute("background", this.#buildGradientCSS());
+  #syncSwatch() {
+    if (!this.#swatch) return;
+    this.#swatch.setAttribute("background", this.#buildGradientCSS());
   }
 
   #setupEventListeners() {
@@ -9731,7 +9737,7 @@ class FigInputGradient extends HTMLElement {
       );
       this.#addedOnPointerDown = true;
       this.#syncHandles();
-      this.#syncChit();
+      this.#syncSwatch();
       this.#emitInput();
       this.#hideGhost();
 
@@ -9775,7 +9781,7 @@ class FigInputGradient extends HTMLElement {
             "color",
             this.#stopColorCSS(this.#gradient.stops[idx]),
           );
-          this.#syncChit();
+          this.#syncSwatch();
           this.#emitInput();
         }
         return;
@@ -9816,7 +9822,7 @@ class FigInputGradient extends HTMLElement {
           handle.hideColorTip();
         }
       }
-      this.#syncChit();
+      this.#syncSwatch();
       this.#emitInput();
     });
 
@@ -9835,7 +9841,7 @@ class FigInputGradient extends HTMLElement {
             "color",
             this.#stopColorCSS(this.#gradient.stops[idx]),
           );
-          this.#syncChit();
+          this.#syncSwatch();
           this.#emitChange();
         }
         return;
@@ -9861,7 +9867,7 @@ class FigInputGradient extends HTMLElement {
       handle.style.left = `${(position / 100) * trackW}px`;
       this.#gradient.stops.sort((a, b) => a.position - b.position);
       this.#syncStopIndices();
-      this.#syncChit();
+      this.#syncSwatch();
       this.#emitChange();
       requestAnimationFrame(() => {
         this.#handleDragging = false;
@@ -9879,7 +9885,7 @@ class FigInputGradient extends HTMLElement {
         if (!newColor || !newColor.startsWith("#")) continue;
         if (newColor !== this.#gradient.stops[idx].color) {
           this.#gradient.stops[idx].color = newColor;
-          this.#syncChit();
+          this.#syncSwatch();
           this.#emitInput();
         }
       }
@@ -9944,7 +9950,7 @@ class FigInputGradient extends HTMLElement {
     switch (name) {
       case "value":
         this.#parseValue();
-        this.#syncChit();
+        this.#syncSwatch();
         this.#syncHandles();
         break;
       case "disabled":
@@ -9967,9 +9973,9 @@ class FigInputGradient extends HTMLElement {
   #syncDisabled() {
     const disabled = this.hasAttribute("disabled");
     this.#syncFocusTarget();
-    if (this.#chit) {
-      if (disabled) this.#chit.setAttribute("disabled", "");
-      else this.#chit.removeAttribute("disabled");
+    if (this.#swatch) {
+      if (disabled) this.#swatch.setAttribute("disabled", "");
+      else this.#swatch.removeAttribute("disabled");
     }
     if (this.#track) {
       for (const handle of this.#track.querySelectorAll("fig-handle")) {
@@ -10507,7 +10513,7 @@ class FigComboInput extends HTMLElement {
 }
 customElements.define("fig-combo-input", FigComboInput);
 
-/* Chit */
+/* Swatch */
 /**
  * A color/gradient/image swatch element.
  * @attr {string} background - Any CSS background value: color (#FF0000, rgba(...)), gradient (linear-gradient(...)), or image (url(...))
@@ -10516,7 +10522,7 @@ customElements.define("fig-combo-input", FigComboInput);
  * @attr {boolean} disabled - Whether the chip is disabled
  * @attr {number} alpha - Opacity value (0-1) to display the color with transparency
  */
-class FigChit extends HTMLElement {
+class FigSwatch extends HTMLElement {
   #type = "color"; // 'color', 'gradient', 'image'
   #boundHandleInput = null;
   #internalUpdate = false; // Flag to prevent re-render during internal input
@@ -10627,7 +10633,7 @@ class FigChit extends HTMLElement {
         rawBg,
       );
     this.style.setProperty(
-      "--chit-background",
+      "--swatch-background",
       isImage ? rawBg : `linear-gradient(${rawBg}, ${rawBg})`,
     );
   }
@@ -10691,7 +10697,7 @@ class FigChit extends HTMLElement {
             newValue,
           );
         this.style.setProperty(
-          "--chit-background",
+          "--swatch-background",
           isImg ? newValue : `linear-gradient(${newValue}, ${newValue})`,
         );
         return;
@@ -10721,8 +10727,6 @@ class FigChit extends HTMLElement {
     }
   }
 }
-customElements.define("fig-chit", FigChit);
-class FigSwatch extends FigChit {}
 customElements.define("fig-swatch", FigSwatch);
 
 /* Media */
@@ -10860,7 +10864,7 @@ class FigMedia extends HTMLElement {
       this.style.setProperty("--fig-media-fit", fit);
     }
 
-    this.querySelectorAll("fig-chit[data-generated]").forEach((el) => el.remove());
+    this.querySelectorAll("fig-swatch[data-generated]").forEach((el) => el.remove());
     this.#ensurePreviewElement();
     this.#ensureMediaElement();
     this.#syncGeneratedMediaElement();
@@ -14707,8 +14711,8 @@ customElements.define("fig-input-combo", FigInputCombo);
  */
 class FigColorTip extends HTMLElement {
   #fillPicker = null;
-  #chit = null;
-  #chitSelectedObserver = null;
+  #swatch = null;
+  #swatchSelectedObserver = null;
   #boundHandleInput = this.#handlePickerInput.bind(this);
   #boundHandleChange = this.#handlePickerChange.bind(this);
 
@@ -14744,33 +14748,33 @@ class FigColorTip extends HTMLElement {
       this.#fillPicker.removeEventListener("input", this.#boundHandleInput);
       this.#fillPicker.removeEventListener("change", this.#boundHandleChange);
     }
-    if (this.#chit) {
-      this.#chit.removeEventListener("input", this.#boundHandleInput);
-      this.#chit.removeEventListener("change", this.#boundHandleChange);
+    if (this.#swatch) {
+      this.#swatch.removeEventListener("input", this.#boundHandleInput);
+      this.#swatch.removeEventListener("change", this.#boundHandleChange);
     }
-    if (this.#chitSelectedObserver) {
-      this.#chitSelectedObserver.disconnect();
-      this.#chitSelectedObserver = null;
+    if (this.#swatchSelectedObserver) {
+      this.#swatchSelectedObserver.disconnect();
+      this.#swatchSelectedObserver = null;
     }
   }
 
-  #observeChitSelected() {
-    if (this.#chitSelectedObserver) {
-      this.#chitSelectedObserver.disconnect();
-      this.#chitSelectedObserver = null;
+  #observeSwatchSelected() {
+    if (this.#swatchSelectedObserver) {
+      this.#swatchSelectedObserver.disconnect();
+      this.#swatchSelectedObserver = null;
     }
-    if (!this.#chit) return;
-    this.#chitSelectedObserver = new MutationObserver(() => {
-      const chitSelected =
-        this.#chit?.hasAttribute("selected") &&
-        this.#chit.getAttribute("selected") !== "false";
-      if (chitSelected) {
+    if (!this.#swatch) return;
+    this.#swatchSelectedObserver = new MutationObserver(() => {
+      const swatchSelected =
+        this.#swatch?.hasAttribute("selected") &&
+        this.#swatch.getAttribute("selected") !== "false";
+      if (swatchSelected) {
         if (!this.hasAttribute("selected")) this.setAttribute("selected", "");
       } else if (this.hasAttribute("selected")) {
         this.removeAttribute("selected");
       }
     });
-    this.#chitSelectedObserver.observe(this.#chit, {
+    this.#swatchSelectedObserver.observe(this.#swatch, {
       attributes: true,
       attributeFilter: ["selected"],
     });
@@ -14788,7 +14792,7 @@ class FigColorTip extends HTMLElement {
       const label = this.getAttribute("aria-label") || (mode === "add" ? "Add color stop" : "Remove color stop");
       this.innerHTML = `<fig-button icon variant="ghost" aria-label="${label}"><fig-icon name="${iconName}"></fig-icon></fig-button>`;
       this.#fillPicker = null;
-      this.#chit = null;
+      this.#swatch = null;
       this.addEventListener("click", this.#handleControlClick);
       this.#syncA11y();
       return;
@@ -14807,23 +14811,23 @@ class FigColorTip extends HTMLElement {
             opacity: Math.round(alpha * 100),
           })
         : JSON.stringify({ type: "solid", color });
-    const chitAlphaAttr = alpha < 1 ? ` alpha="${alpha}"` : "";
+    const swatchAlphaAttr = alpha < 1 ? ` alpha="${alpha}"` : "";
     this.innerHTML = hasFigFillPicker()
       ? `<fig-fill-picker mode="solid" ${alphaAttr} value='${pickerValue}'>
-          <fig-chit background="${color}"${chitAlphaAttr}></fig-chit>
+          <fig-swatch background="${color}"${swatchAlphaAttr}></fig-swatch>
         </fig-fill-picker>`
-      : `<fig-chit background="${color}"${chitAlphaAttr}></fig-chit>`;
+      : `<fig-swatch background="${color}"${swatchAlphaAttr}></fig-swatch>`;
 
     this.#fillPicker = this.querySelector("fig-fill-picker");
-    this.#chit = this.querySelector("fig-chit");
+    this.#swatch = this.querySelector("fig-swatch");
     this.#teardownListeners();
     this.#fillPicker?.addEventListener("input", this.#boundHandleInput);
     this.#fillPicker?.addEventListener("change", this.#boundHandleChange);
     if (!this.#fillPicker) {
-      this.#chit?.addEventListener("input", this.#boundHandleInput);
-      this.#chit?.addEventListener("change", this.#boundHandleChange);
+      this.#swatch?.addEventListener("input", this.#boundHandleInput);
+      this.#swatch?.addEventListener("change", this.#boundHandleChange);
     }
-    this.#observeChitSelected();
+    this.#observeSwatchSelected();
     this.#syncA11y();
   }
 
@@ -14938,18 +14942,18 @@ class FigColorTip extends HTMLElement {
       }
     }
 
-    if (this.#chit) {
+    if (this.#swatch) {
       this.#syncA11y();
-      this.#chit.setAttribute("background", color);
+      this.#swatch.setAttribute("background", color);
       if (alpha < 1) {
-        this.#chit.setAttribute("alpha", String(alpha));
+        this.#swatch.setAttribute("alpha", String(alpha));
       } else {
-        this.#chit.removeAttribute("alpha");
+        this.#swatch.removeAttribute("alpha");
       }
       if (this.hasAttribute("disabled")) {
-        this.#chit.setAttribute("disabled", "");
+        this.#swatch.setAttribute("disabled", "");
       } else {
-        this.#chit.removeAttribute("disabled");
+        this.#swatch.removeAttribute("disabled");
       }
     }
   }
@@ -14971,7 +14975,7 @@ class FigColorTip extends HTMLElement {
       return;
     }
 
-    const target = this.#fillPicker || this.#chit;
+    const target = this.#fillPicker || this.#swatch;
     if (!target) return;
     const label = this.getAttribute("aria-label") || "Color stop";
     const labelledBy = this.getAttribute("aria-labelledby");
@@ -16706,20 +16710,23 @@ customElements.define("fig-menu-separator", FigMenuSeparator);
 class FigMenu extends HTMLElement {
   #popup = null;
   #trigger = null;
+  #virtualAnchor = null;
   #observer = null;
   #boundTriggerClick;
+  #boundTriggerContextMenu;
   #boundPopupClick;
   #boundMenuKeydown;
   #boundPopupClose;
   #focusedIndex = -1;
 
   static get observedAttributes() {
-    return ["position", "offset", "closedby", "disabled", "open"];
+    return ["position", "offset", "closedby", "disabled", "open", "trigger"];
   }
 
   constructor() {
     super();
     this.#boundTriggerClick = this.#handleTriggerClick.bind(this);
+    this.#boundTriggerContextMenu = this.#handleTriggerContextMenu.bind(this);
     this.#boundPopupClick = this.#handlePopupClick.bind(this);
     this.#boundMenuKeydown = this.#handleMenuKeydown.bind(this);
     this.#boundPopupClose = this.#handlePopupClose.bind(this);
@@ -16810,6 +16817,11 @@ class FigMenu extends HTMLElement {
       this.querySelector(":scope > :not(fig-menu-item):not(fig-menu-separator)");
   }
 
+  #usesContextMenuTrigger() {
+    const trigger = (this.getAttribute("trigger") || "").toLowerCase();
+    return trigger === "contextmenu" || this.hasAttribute("contextmenu");
+  }
+
   #createPopup() {
     this.#popup = document.createElement("dialog", { is: "fig-popup" });
     this.#popup.setAttribute("is", "fig-popup");
@@ -16847,6 +16859,7 @@ class FigMenu extends HTMLElement {
     this.addEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.addEventListener("click", this.#boundTriggerClick);
+      this.#trigger.addEventListener("contextmenu", this.#boundTriggerContextMenu);
       this.#trigger.setAttribute("aria-haspopup", "menu");
       this.#trigger.setAttribute("aria-expanded", "false");
       this.#trigger.setAttribute("aria-controls", this.#popup.getAttribute("id"));
@@ -16861,6 +16874,7 @@ class FigMenu extends HTMLElement {
     this.removeEventListener("keydown", this.#boundMenuKeydown);
     if (this.#trigger) {
       this.#trigger.removeEventListener("click", this.#boundTriggerClick);
+      this.#trigger.removeEventListener("contextmenu", this.#boundTriggerContextMenu);
     }
     if (this.#popup) {
       this.#popup.removeEventListener("click", this.#boundPopupClick);
@@ -16882,6 +16896,7 @@ class FigMenu extends HTMLElement {
             this.#detectTrigger();
             if (this.#trigger) {
               this.#trigger.addEventListener("click", this.#boundTriggerClick);
+              this.#trigger.addEventListener("contextmenu", this.#boundTriggerContextMenu);
               this.#trigger.setAttribute("aria-haspopup", "menu");
               this.#trigger.setAttribute("aria-expanded", "false");
               this.#trigger.setAttribute("aria-controls", this.#popup.getAttribute("id"));
@@ -16938,6 +16953,7 @@ class FigMenu extends HTMLElement {
   }
 
   #handleTriggerClick(e) {
+    if (this.#usesContextMenuTrigger()) return;
     if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
     e.stopPropagation();
     const popupShowing = this.#popup?.matches?.(":open") ?? false;
@@ -16948,10 +16964,40 @@ class FigMenu extends HTMLElement {
     if (effectiveOpen) {
       this.open = false;
     } else {
+      if (this.#popup && this.#trigger) {
+        this.#popup.anchor = this.#trigger;
+      }
       this.open = true;
     }
   }
 
+  #handleTriggerContextMenu(e) {
+    if (!this.#usesContextMenuTrigger()) return;
+    if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.#showAtAfterPointerRelease(e.clientX, e.clientY);
+  }
+
+  #showAtAfterPointerRelease(x, y) {
+    let opened = false;
+    let fallbackTimer = 0;
+    const openMenu = () => {
+      if (opened) return;
+      opened = true;
+      window.clearTimeout(fallbackTimer);
+      window.removeEventListener("pointerup", openMenu, true);
+      window.removeEventListener("pointercancel", openMenu, true);
+      requestAnimationFrame(() => this.showAt(x, y));
+    };
+    window.addEventListener("pointerup", openMenu, { once: true, capture: true });
+    window.addEventListener("pointercancel", openMenu, {
+      once: true,
+      capture: true,
+    });
+    fallbackTimer = window.setTimeout(openMenu, 180);
+  }
+
   #handlePopupClick(e) {
     const item = e.target.closest("fig-menu-item");
     if (!item) return;
@@ -16969,6 +17015,9 @@ class FigMenu extends HTMLElement {
         (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")
       ) {
         e.preventDefault();
+        if (this.#popup && this.#trigger) {
+          this.#popup.anchor = this.#trigger;
+        }
         this.open = true;
         requestAnimationFrame(() => this.#focusItemAt(0));
       }
@@ -17042,6 +17091,28 @@ class FigMenu extends HTMLElement {
     this.open = false;
   }
 
+  showAt(x, y) {
+    this.#virtualAnchor = {
+      getBoundingClientRect: () => ({
+        width: 0,
+        height: 0,
+        top: y,
+        right: x,
+        bottom: y,
+        left: x,
+        x,
+        y,
+      }),
+    };
+    if (this.#popup) {
+      this.#popup.anchor = this.#virtualAnchor;
+    }
+    if (this.open) this.open = false;
+    requestAnimationFrame(() => {
+      this.open = true;
+    });
+  }
+
   #openMenu() {
     if (!this.#popup) return;
     this.#popup.open = true;

package/package.json

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