@rogieking/figui3 2.20.0 → 2.22.0

package/components.css

@@ -1412,7 +1412,8 @@ input[type="checkbox"]:not(.switch) {
 /* Light theme checkbox hover (black checkmark preview) */
 /* @media is a no-JS fallback — ignored when setTheme() sets classes */
 @media (prefers-color-scheme: light) {
-  :root:not(.figma-dark):not(.figma-light) input[type="checkbox"]:not(.switch):not(:disabled):hover {
+  :root:not(.figma-dark):not(.figma-light)
+    input[type="checkbox"]:not(.switch):not(:disabled):hover {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
   }
 }
@@ -2030,12 +2031,15 @@ dialog[is="fig-popup"] {
   position: fixed;
   margin: 0;
   min-width: 0;
-  width: max-content;
-  max-width: calc(100vw - var(--spacer-4));
-  max-height: calc(100vh - var(--spacer-4));
-  padding: var(--spacer-2);
+  padding: 0;
   overflow: auto;
 
+  &[autoresize]:not([autoresize="false"]) {
+    width: max-content;
+    max-width: calc(100vw - var(--spacer-4));
+    max-height: calc(100vh - var(--spacer-4));
+  }
+
   &[open] {
     display: block;
   }

package/fig.js

@@ -863,13 +863,12 @@ class FigDialog extends HTMLDialogElement {
   #setupDragListeners() {
     if (this.drag) {
       this.addEventListener("pointerdown", this.#boundPointerDown);
-      // Set move cursor on handle element (or fig-header by default)
       const handleSelector = this.getAttribute("handle");
       const handleEl = handleSelector
         ? this.querySelector(handleSelector)
         : this.querySelector("fig-header, header");
       if (handleEl) {
-        handleEl.style.cursor = "move";
+        handleEl.style.cursor = "grab";
       }
     }
   }
@@ -977,16 +976,12 @@ class FigDialog extends HTMLDialogElement {
       const dy = Math.abs(e.clientY - this.#dragStartPos.y);
 
       if (dx > this.#dragThreshold || dy > this.#dragThreshold) {
-        // Start actual drag
         this.#isDragging = true;
         this.#dragPending = false;
         this.setPointerCapture(e.pointerId);
+        this.style.cursor = "grabbing";
 
-        // Get current position from computed style
         const rect = this.getBoundingClientRect();
-
-        // Convert to pixel-based top/left positioning for dragging
-        // (clears margin: auto centering)
         this.style.top = `${rect.top}px`;
         this.style.left = `${rect.left}px`;
         this.style.bottom = "auto";
@@ -997,21 +992,15 @@ class FigDialog extends HTMLDialogElement {
 
     if (!this.#isDragging) return;
 
-    // Calculate new position based on pointer position minus offset
-    const newLeft = e.clientX - this.#dragOffset.x;
-    const newTop = e.clientY - this.#dragOffset.y;
-
-    // Apply position directly with pixels
-    this.style.left = `${newLeft}px`;
-    this.style.top = `${newTop}px`;
-
+    this.style.left = `${e.clientX - this.#dragOffset.x}px`;
+    this.style.top = `${e.clientY - this.#dragOffset.y}px`;
     e.preventDefault();
   }
 
   #handlePointerUp(e) {
-    // Clean up pending or active drag
     if (this.#isDragging) {
       this.releasePointerCapture(e.pointerId);
+      this.style.cursor = "";
     }
 
     this.#isDragging = false;
@@ -1035,7 +1024,6 @@ class FigDialog extends HTMLDialogElement {
         this.#setupDragListeners();
       } else {
         this.#removeDragListeners();
-        // Remove move cursor from header
         const header = this.querySelector("fig-header, header");
         if (header) {
           header.style.cursor = "";
@@ -1070,16 +1058,29 @@ class FigPopup extends HTMLDialogElement {
   #boundScroll;
   #boundOutsidePointerDown;
   #rafId = null;
+  #anchorRef = null;
+
+  #isDragging = false;
+  #dragPending = false;
+  #dragStartPos = { x: 0, y: 0 };
+  #dragOffset = { x: 0, y: 0 };
+  #dragThreshold = 3;
+  #boundPointerDown;
+  #boundPointerMove;
+  #boundPointerUp;
 
   constructor() {
     super();
     this.#boundReposition = this.#queueReposition.bind(this);
     this.#boundScroll = this.#queueReposition.bind(this);
     this.#boundOutsidePointerDown = this.#handleOutsidePointerDown.bind(this);
+    this.#boundPointerDown = this.#handlePointerDown.bind(this);
+    this.#boundPointerMove = this.#handlePointerMove.bind(this);
+    this.#boundPointerUp = this.#handlePointerUp.bind(this);
   }
 
   static get observedAttributes() {
-    return ["open", "anchor", "position", "offset", "variant", "theme"];
+    return ["open", "anchor", "position", "offset", "variant", "theme", "drag", "handle", "autoresize"];
   }
 
   get open() {
@@ -1096,6 +1097,22 @@ class FigPopup extends HTMLDialogElement {
     this.setAttribute("open", "true");
   }
 
+  get anchor() {
+    return this.#anchorRef ?? this.getAttribute("anchor");
+  }
+
+  set anchor(value) {
+    if (value instanceof Element) {
+      this.#anchorRef = value;
+    } else if (typeof value === "string") {
+      this.#anchorRef = null;
+      this.setAttribute("anchor", value);
+    } else {
+      this.#anchorRef = null;
+    }
+    if (this.open) this.#queueReposition();
+  }
+
   connectedCallback() {
     if (!this.hasAttribute("position")) {
       this.setAttribute("position", "top center");
@@ -1103,11 +1120,13 @@ class FigPopup extends HTMLDialogElement {
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "dialog");
     }
-    // Default dialog outside-close behavior.
     if (!this.hasAttribute("closedby")) {
       this.setAttribute("closedby", "any");
     }
 
+    this.drag =
+      this.hasAttribute("drag") && this.getAttribute("drag") !== "false";
+
     this.addEventListener("close", () => {
       this.#teardownObservers();
       if (this.hasAttribute("open")) {
@@ -1115,6 +1134,10 @@ class FigPopup extends HTMLDialogElement {
       }
     });
 
+    requestAnimationFrame(() => {
+      this.#setupDragListeners();
+    });
+
     if (this.open) {
       this.#showPopup();
     } else {
@@ -1124,6 +1147,7 @@ class FigPopup extends HTMLDialogElement {
 
   disconnectedCallback() {
     this.#teardownObservers();
+    this.#removeDragListeners();
     document.removeEventListener(
       "pointerdown",
       this.#boundOutsidePointerDown,
@@ -1147,6 +1171,16 @@ class FigPopup extends HTMLDialogElement {
       return;
     }
 
+    if (name === "drag") {
+      this.drag = newValue !== null && newValue !== "false";
+      if (this.drag) {
+        this.#setupDragListeners();
+      } else {
+        this.#removeDragListeners();
+      }
+      return;
+    }
+
     if (this.open) {
       this.#queueReposition();
       this.#setupObservers();
@@ -1176,9 +1210,15 @@ class FigPopup extends HTMLDialogElement {
     document.addEventListener("pointerdown", this.#boundOutsidePointerDown, true);
     this.#queueReposition();
     this.#isPopupActive = true;
+
+    const anchor = this.#resolveAnchor();
+    if (anchor) anchor.classList.add("has-popup-open");
   }
 
   #hidePopup() {
+    const anchor = this.#resolveAnchor();
+    if (anchor) anchor.classList.remove("has-popup-open");
+
     this.#isPopupActive = false;
     this.#teardownObservers();
     document.removeEventListener(
@@ -1196,6 +1236,11 @@ class FigPopup extends HTMLDialogElement {
     }
   }
 
+  get autoresize() {
+    const val = this.getAttribute("autoresize");
+    return val === null || val !== "false";
+  }
+
   #setupObservers() {
     this.#teardownObservers();
 
@@ -1205,17 +1250,19 @@ class FigPopup extends HTMLDialogElement {
       this.#anchorObserver.observe(anchor);
     }
 
-    if ("ResizeObserver" in window) {
-      this.#contentObserver = new ResizeObserver(this.#boundReposition);
-      this.#contentObserver.observe(this);
-    }
+    if (this.autoresize) {
+      if ("ResizeObserver" in window) {
+        this.#contentObserver = new ResizeObserver(this.#boundReposition);
+        this.#contentObserver.observe(this);
+      }
 
-    this.#mutationObserver = new MutationObserver(this.#boundReposition);
-    this.#mutationObserver.observe(this, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
+      this.#mutationObserver = new MutationObserver(this.#boundReposition);
+      this.#mutationObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    }
 
     window.addEventListener("resize", this.#boundReposition);
     window.addEventListener("scroll", this.#boundScroll, true);
@@ -1246,10 +1293,141 @@ class FigPopup extends HTMLDialogElement {
     if (!(target instanceof Node)) return;
     if (this.contains(target)) return;
 
+    const anchor = this.#resolveAnchor();
+    if (anchor && anchor.contains(target)) return;
+
+    if (this.#isInsideDescendantPopup(target)) return;
+
     this.open = false;
   }
 
+  #isInsideDescendantPopup(target) {
+    const targetDialog = target.closest?.('dialog[is="fig-popup"]');
+    if (!targetDialog || targetDialog === this) return false;
+
+    let current = targetDialog;
+    const visited = new Set();
+    while (current && !visited.has(current)) {
+      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"]');
+    }
+    return false;
+  }
+
+  // ---- Drag support ----
+
+  #setupDragListeners() {
+    if (this.drag) {
+      this.addEventListener("pointerdown", this.#boundPointerDown);
+    }
+  }
+
+  #removeDragListeners() {
+    this.removeEventListener("pointerdown", this.#boundPointerDown);
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+  }
+
+  #isInteractiveElement(element) {
+    const interactiveSelectors = [
+      "input", "button", "select", "textarea", "a",
+      "label", "details", "summary",
+      '[contenteditable="true"]', "[tabindex]",
+    ];
+
+    const nonInteractiveFigElements = [
+      "FIG-HEADER", "FIG-DIALOG", "FIG-POPUP", "FIG-FIELD",
+      "FIG-TOOLTIP", "FIG-CONTENT", "FIG-TABS", "FIG-TAB",
+      "FIG-POPOVER", "FIG-SHIMMER", "FIG-LAYER", "FIG-FILL-PICKER",
+    ];
+
+    const isInteractive = (el) =>
+      interactiveSelectors.some((s) => el.matches?.(s)) ||
+      (el.tagName?.startsWith("FIG-") &&
+        !nonInteractiveFigElements.includes(el.tagName));
+
+    if (isInteractive(element)) return true;
+
+    let parent = element.parentElement;
+    while (parent && parent !== this) {
+      if (isInteractive(parent)) return true;
+      parent = parent.parentElement;
+    }
+
+    return false;
+  }
+
+  #handlePointerDown(e) {
+    if (!this.drag) return;
+    if (this.#isInteractiveElement(e.target)) return;
+
+    const handleSelector = this.getAttribute("handle");
+    if (handleSelector && handleSelector.trim()) {
+      const handleEl = this.querySelector(handleSelector);
+      if (!handleEl || !handleEl.contains(e.target)) return;
+    }
+
+    this.#dragPending = true;
+    this.#dragStartPos.x = e.clientX;
+    this.#dragStartPos.y = e.clientY;
+
+    const rect = this.getBoundingClientRect();
+    this.#dragOffset.x = e.clientX - rect.left;
+    this.#dragOffset.y = e.clientY - rect.top;
+
+    document.addEventListener("pointermove", this.#boundPointerMove);
+    document.addEventListener("pointerup", this.#boundPointerUp);
+  }
+
+  #handlePointerMove(e) {
+    if (this.#dragPending && !this.#isDragging) {
+      const dx = Math.abs(e.clientX - this.#dragStartPos.x);
+      const dy = Math.abs(e.clientY - this.#dragStartPos.y);
+
+      if (dx > this.#dragThreshold || dy > this.#dragThreshold) {
+        this.#isDragging = true;
+        this.#dragPending = false;
+        this.setPointerCapture(e.pointerId);
+        this.style.cursor = "grabbing";
+
+        const rect = this.getBoundingClientRect();
+        this.style.top = `${rect.top}px`;
+        this.style.left = `${rect.left}px`;
+        this.style.bottom = "auto";
+        this.style.right = "auto";
+        this.style.margin = "0";
+      }
+    }
+
+    if (!this.#isDragging) return;
+
+    this.style.left = `${e.clientX - this.#dragOffset.x}px`;
+    this.style.top = `${e.clientY - this.#dragOffset.y}px`;
+    e.preventDefault();
+  }
+
+  #handlePointerUp(e) {
+    if (this.#isDragging) {
+      this.releasePointerCapture(e.pointerId);
+      this.style.cursor = "";
+    }
+
+    this.#isDragging = false;
+    this.#dragPending = false;
+
+    document.removeEventListener("pointermove", this.#boundPointerMove);
+    document.removeEventListener("pointerup", this.#boundPointerUp);
+    e.preventDefault();
+  }
+
+  // ---- Anchor resolution ----
+
   #resolveAnchor() {
+    if (this.#anchorRef) return this.#anchorRef;
+
     const selector = this.getAttribute("anchor");
     if (!selector) return null;
 
@@ -1360,21 +1538,49 @@ class FigPopup extends HTMLDialogElement {
     };
   }
 
-  #getOrder(preferred, axis) {
-    const verticalMap = {
-      top: ["top", "bottom", "center"],
-      center: ["center", "top", "bottom"],
-      bottom: ["bottom", "top", "center"],
-    };
-    const horizontalMap = {
-      left: ["left", "right", "center"],
-      center: ["center", "left", "right"],
-      right: ["right", "left", "center"],
-    };
+  #getPlacementCandidates(vertical, horizontal, shorthand) {
+    const opp = { top: "bottom", bottom: "top", left: "right", right: "left", center: "center" };
+
+    if (shorthand) {
+      const perp = (shorthand === "left" || shorthand === "right")
+        ? ["top", "bottom"]
+        : ["left", "right"];
+      return [
+        { v: vertical, h: horizontal, s: shorthand },
+        { v: vertical, h: horizontal, s: opp[shorthand] },
+        { v: vertical, h: horizontal, s: perp[0] },
+        { v: vertical, h: horizontal, s: perp[1] },
+      ];
+    }
+
+    if (vertical === "center") {
+      return [
+        { v: "center", h: horizontal, s: null },
+        { v: "center", h: opp[horizontal], s: null },
+        { v: "top", h: horizontal, s: null },
+        { v: "bottom", h: horizontal, s: null },
+        { v: "top", h: opp[horizontal], s: null },
+        { v: "bottom", h: opp[horizontal], s: null },
+      ];
+    }
+
+    if (horizontal === "center") {
+      return [
+        { v: vertical, h: "center", s: null },
+        { v: opp[vertical], h: "center", s: null },
+        { v: vertical, h: "left", s: null },
+        { v: vertical, h: "right", s: null },
+        { v: opp[vertical], h: "left", s: null },
+        { v: opp[vertical], h: "right", s: null },
+      ];
+    }
 
-    return axis === "vertical"
-      ? verticalMap[preferred] || verticalMap.top
-      : horizontalMap[preferred] || horizontalMap.center;
+    return [
+      { v: vertical, h: horizontal, s: null },
+      { v: opp[vertical], h: horizontal, s: null },
+      { v: vertical, h: opp[horizontal], s: null },
+      { v: opp[vertical], h: opp[horizontal], s: null },
+    ];
   }
 
   #computeCoords(anchorRect, popupRect, vertical, horizontal, offset, shorthand) {
@@ -1417,12 +1623,24 @@ class FigPopup extends HTMLDialogElement {
       top = anchorRect.top + (anchorRect.height - popupRect.height) / 2;
     }
 
-    if (horizontal === "left") {
-      left = anchorRect.left - popupRect.width - offset.xPx;
-    } else if (horizontal === "right") {
-      left = anchorRect.right + offset.xPx;
+    if (vertical === "center") {
+      // Side placement: popup beside the anchor
+      if (horizontal === "left") {
+        left = anchorRect.left - popupRect.width - offset.xPx;
+      } else if (horizontal === "right") {
+        left = anchorRect.right + offset.xPx;
+      } else {
+        left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      }
     } else {
-      left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      // Edge alignment: popup above/below, aligned to anchor edge
+      if (horizontal === "left") {
+        left = anchorRect.left + offset.xPx;
+      } else if (horizontal === "right") {
+        left = anchorRect.right - popupRect.width - offset.xPx;
+      } else {
+        left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      }
     }
 
     return { top, left };
@@ -1516,8 +1734,6 @@ class FigPopup extends HTMLDialogElement {
     const popupRect = this.getBoundingClientRect();
     const offset = this.#parseOffset();
     const { vertical, horizontal, shorthand } = this.#parsePosition();
-    const verticalOrder = this.#getOrder(vertical, "vertical");
-    const horizontalOrder = this.#getOrder(horizontal, "horizontal");
     const anchor = this.#resolveAnchor();
 
     if (!anchor) {
@@ -1533,52 +1749,32 @@ class FigPopup extends HTMLDialogElement {
     }
 
     const anchorRect = anchor.getBoundingClientRect();
+    const candidates = this.#getPlacementCandidates(vertical, horizontal, shorthand);
     let best = null;
     let bestSide = "top";
     let bestScore = Number.POSITIVE_INFINITY;
 
-    for (const v of verticalOrder) {
-      for (const h of horizontalOrder) {
-        const coords = this.#computeCoords(
-          anchorRect,
-          popupRect,
-          v,
-          h,
-          offset,
-          shorthand
-        );
-        const placementSide = this.#getPlacementSide(v, h, shorthand);
-        if (this.#fits(coords, popupRect)) {
-          this.style.left = `${coords.left}px`;
-          this.style.top = `${coords.top}px`;
-          this.#updatePopoverBeak(
-            anchorRect,
-            popupRect,
-            coords.left,
-            coords.top,
-            placementSide
-          );
-          return;
-        }
-        const score = this.#overflowScore(coords, popupRect);
-        if (score < bestScore) {
-          bestScore = score;
-          best = coords;
-          bestSide = placementSide;
-        }
+    for (const { v, h, s } of candidates) {
+      const coords = this.#computeCoords(anchorRect, popupRect, v, h, offset, s);
+      const placementSide = this.#getPlacementSide(v, h, s);
+      if (this.#fits(coords, popupRect)) {
+        this.style.left = `${coords.left}px`;
+        this.style.top = `${coords.top}px`;
+        this.#updatePopoverBeak(anchorRect, popupRect, coords.left, coords.top, placementSide);
+        return;
+      }
+      const score = this.#overflowScore(coords, popupRect);
+      if (score < bestScore) {
+        bestScore = score;
+        best = coords;
+        bestSide = placementSide;
       }
     }
 
     const clamped = this.#clamp(best || { left: 0, top: 0 }, popupRect);
     this.style.left = `${clamped.left}px`;
     this.style.top = `${clamped.top}px`;
-    this.#updatePopoverBeak(
-      anchorRect,
-      popupRect,
-      clamped.left,
-      clamped.top,
-      bestSide
-    );
+    this.#updatePopoverBeak(anchorRect, popupRect, clamped.left, clamped.top, bestSide);
   }
 
   #queueReposition() {
@@ -3173,6 +3369,8 @@ class FigInputColor extends HTMLElement {
     const showAlpha = this.getAttribute("alpha") === "true";
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const dialogPos = this.getAttribute("dialog-position") || "left";
+    const dialogPosAttr = `dialog-position="${dialogPos}"`;
 
     let html = ``;
     if (this.getAttribute("text")) {
@@ -3197,7 +3395,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3215,7 +3413,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" ${dialogPosAttr} ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3407,7 +3605,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental"];
+    return ["value", "style", "mode", "picker", "experimental", "dialog-position"];
   }
 
   get mode() {
@@ -3743,7 +3941,7 @@ class FigInputFill extends HTMLElement {
     const experimentalAttr = this.getAttribute("experimental");
     this.innerHTML = `
       <div class="input-combo">
-        <fig-fill-picker value='${fillPickerValue}' ${
+        <fig-fill-picker dialog-position="left" value='${fillPickerValue}' ${
       disabled ? "disabled" : ""
     } ${modeAttr ? `mode="${modeAttr}"` : ""} ${experimentalAttr ? `experimental="${experimentalAttr}"` : ""}></fig-fill-picker>
         ${controlsHtml}
@@ -6007,7 +6205,7 @@ customElements.define("fig-layer", FigLayer);
  * @attr {string} value - JSON-encoded fill value
  * @attr {boolean} disabled - Whether the picker is disabled
  * @attr {boolean} alpha - Whether to show alpha/opacity controls (default: true)
- * @attr {string} dialog-position - Position of the dialog (passed to fig-dialog)
+ * @attr {string} dialog-position - Position of the popup (default: "left")
  */
 class FigFillPicker extends HTMLElement {
   #trigger = null;
@@ -6213,21 +6411,10 @@ class FigFillPicker extends HTMLElement {
       this.#createDialog();
     }
 
-    // Position off-screen first to prevent scroll jump
-    this.#dialog.style.position = "fixed";
-    this.#dialog.style.top = "-9999px";
-    this.#dialog.style.left = "-9999px";
-
-    this.#dialog.show();
     this.#switchTab(this.#fillType);
+    this.#dialog.open = true;
 
-    // Position after dialog has rendered and has dimensions
-    // Use nested RAF to ensure canvas is fully ready for drawing
     requestAnimationFrame(() => {
-      this.#positionDialog();
-      this.#dialog.setAttribute("closedby", "any");
-
-      // Second RAF ensures the dialog is visible and canvas is ready
       requestAnimationFrame(() => {
         this.#drawColorArea();
         this.#updateHandlePosition();
@@ -6235,72 +6422,17 @@ class FigFillPicker extends HTMLElement {
     });
   }
 
-  #positionDialog() {
-    const triggerRect = this.#trigger.getBoundingClientRect();
-    const dialogRect = this.#dialog.getBoundingClientRect();
-    const padding = 8; // Gap between trigger and dialog
-    const viewportPadding = 16; // Min distance from viewport edges
-
-    // Calculate available space in each direction
-    const spaceBelow =
-      window.innerHeight - triggerRect.bottom - viewportPadding;
-    const spaceAbove = triggerRect.top - viewportPadding;
-    const spaceRight = window.innerWidth - triggerRect.left - viewportPadding;
-    const spaceLeft = triggerRect.right - viewportPadding;
-
-    let top, left;
-
-    // Vertical positioning: prefer below, fallback to above
-    if (spaceBelow >= dialogRect.height || spaceBelow >= spaceAbove) {
-      // Position below trigger
-      top = triggerRect.bottom + padding;
-    } else {
-      // Position above trigger
-      top = triggerRect.top - dialogRect.height - padding;
-    }
-
-    // Horizontal positioning: align left edge with trigger, adjust if needed
-    left = triggerRect.left;
-
-    // Adjust if dialog would go off right edge
-    if (left + dialogRect.width > window.innerWidth - viewportPadding) {
-      left = window.innerWidth - dialogRect.width - viewportPadding;
-    }
-
-    // Adjust if dialog would go off left edge
-    if (left < viewportPadding) {
-      left = viewportPadding;
-    }
-
-    // Clamp vertical position to viewport
-    if (top < viewportPadding) {
-      top = viewportPadding;
-    }
-    if (top + dialogRect.height > window.innerHeight - viewportPadding) {
-      top = window.innerHeight - dialogRect.height - viewportPadding;
-    }
-
-    // Apply position (override fig-dialog's default positioning)
-    this.#dialog.style.position = "fixed";
-    this.#dialog.style.top = `${top}px`;
-    this.#dialog.style.left = `${left}px`;
-    this.#dialog.style.bottom = "auto";
-    this.#dialog.style.right = "auto";
-    this.#dialog.style.margin = "0";
-  }
-
   #createDialog() {
-    this.#dialog = document.createElement("dialog", { is: "fig-dialog" });
-    this.#dialog.setAttribute("is", "fig-dialog");
+    this.#dialog = document.createElement("dialog", { is: "fig-popup" });
+    this.#dialog.setAttribute("is", "fig-popup");
     this.#dialog.setAttribute("drag", "true");
     this.#dialog.setAttribute("handle", "fig-header");
+    this.#dialog.setAttribute("autoresize", "false");
     this.#dialog.classList.add("fig-fill-picker-dialog");
 
-    // Forward dialog attributes
-    const dialogPosition = this.getAttribute("dialog-position");
-    if (dialogPosition) {
-      this.#dialog.setAttribute("position", dialogPosition);
-    }
+    this.#dialog.anchor = this.#trigger;
+    const dialogPosition = this.getAttribute("dialog-position") || "left";
+    this.#dialog.setAttribute("position", dialogPosition);
 
     // Check for allowed modes (supports comma-separated values like "solid,gradient")
     const mode = this.getAttribute("mode");
@@ -6333,7 +6465,7 @@ class FigFillPicker extends HTMLElement {
     
     let headerContent;
     if (allowedModes.length === 1) {
-      headerContent = `<span class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</span>`;
+      headerContent = `<h3 class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</h3>`;
     } else {
       const options = allowedModes
         .map((m) => `<option value="${m}">${modeLabels[m]}</option>`)
@@ -6346,7 +6478,7 @@ class FigFillPicker extends HTMLElement {
     this.#dialog.innerHTML = `
       <fig-header>
         ${headerContent}
-        <fig-button icon variant="ghost" close-dialog>
+        <fig-button icon variant="ghost" class="fig-fill-picker-close">
           <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
         </fig-button>
       </fig-header>
@@ -6369,11 +6501,10 @@ class FigFillPicker extends HTMLElement {
       });
     }
 
-    // Close button
     this.#dialog
-      .querySelector("fig-button[close-dialog]")
+      .querySelector(".fig-fill-picker-close")
       .addEventListener("click", () => {
-        this.#dialog.close();
+        this.#dialog.open = false;
       });
 
     // Emit change on close
@@ -6845,7 +6976,7 @@ class FigFillPicker extends HTMLElement {
         <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${
           stop.position
         }" units="%"></fig-input-number>
-        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" value="${
+        <fig-input-color class="fig-fill-picker-stop-color" text="true" alpha="true" picker="figma" dialog-position="right" value="${
           stop.color
         }"></fig-input-color>
         <fig-button icon variant="ghost" class="fig-fill-picker-stop-remove" ${

package/index.html

@@ -24,7 +24,7 @@
 
         nav {
             position: fixed;
-            width: 180px;
+            width: 240px;
             height: 100vh;
             overflow-y: auto;
             background: var(--figma-color-bg-secondary);
@@ -105,7 +105,7 @@
         }
 
         main {
-            margin-left: 180px;
+            margin-left: 240px;
             padding: 24px 32px;
             max-width: 800px;
             min-height: 100vh;
@@ -1806,6 +1806,13 @@
                              alpha="true"
                              picker="figma"></fig-input-color>
 
+            <h4>Figma Picker (Experimental Modern)</h4>
+            <fig-input-color value="#E84393"
+                             text="true"
+                             alpha="true"
+                             picker="figma"
+                             experimental="modern"></fig-input-color>
+
             <h4>No Picker (text input only)</h4>
             <fig-input-color value="#9747FF"
                              text="true"
@@ -1995,6 +2002,10 @@
             <h3>Webcam Fill</h3>
             <fig-input-fill value='{"type":"webcam","webcam":{"opacity":1}}'></fig-input-fill>
 
+            <h3>Experimental Modern</h3>
+            <fig-input-fill experimental="modern"
+                            value='{"type":"solid","color":"#E84393","alpha":1}'></fig-input-fill>
+
             <h3>Disabled</h3>
             <fig-input-fill disabled
                             value='{"type":"solid","color":"#AA96DA","alpha":1}'></fig-input-fill>
@@ -3109,6 +3120,28 @@
 &lt;dialog is="fig-popup" anchor="#popup-open-right-single" position="right" offset="12 8"&gt;
   ...
 &lt;/dialog&gt;</code></pre>
+
+            <h4>Left (top edges aligned)</h4>
+            <hstack>
+                <fig-button id="popup-open-left-single">Open Left (single)</fig-button>
+                <fig-button id="popup-close-left-single"
+                            variant="secondary">Close</fig-button>
+            </hstack>
+            <dialog id="popup-left-single"
+                    is="fig-popup"
+                    anchor="#popup-open-left-single"
+                    position="left"
+                    offset="12 8">
+                <vstack style="min-width: 11rem;">
+                    <strong style="padding: 0 var(--spacer-1);">Left Shorthand</strong>
+                    <fig-input-text placeholder="position='left'"></fig-input-text>
+                </vstack>
+            </dialog>
+            <pre><code>&lt;fig-button id="popup-open-left-single"&gt;Open Left (single)&lt;/fig-button&gt;
+&lt;dialog is="fig-popup" anchor="#popup-open-left-single" position="left" offset="12 8"&gt;
+  ...
+&lt;/dialog&gt;</code></pre>
+
         </section>
         <hr>
 
@@ -4452,6 +4485,7 @@ button.addEventListener('click', () => {
             ['popup-open-center-left', 'popup-close-center-left', 'popup-center-left'],
             ['popup-open-top-single', 'popup-close-top-single', 'popup-top-single'],
             ['popup-open-right-single', 'popup-close-right-single', 'popup-right-single'],
+            ['popup-open-left-single', 'popup-close-left-single', 'popup-left-single'],
         ];
 
         popupExamples.forEach(([openId, closeId, popupId]) => {

package/package.json

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