@rogieking/figui3 2.19.1 → 2.21.0

package/components.css

@@ -305,73 +305,37 @@
   --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
   --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
 
-  /* Elevations - light theme defaults */
-  --figma-elevation-500-modal-window:
-    0 0 0.5px 0 rgba(0, 0, 0, 0.08), 0 10px 24px 0 rgba(0, 0, 0, 0.18),
-    0 2px 5px 0 rgba(0, 0, 0, 0.15);
-
+  /* Elevations — light-dark() handles theme switching inline */
   --figma-elevation-100:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
+
   --figma-elevation-200:
-    0 0 0.5px 0 rgba(0, 0, 0, 0.18), 0 3px 8px 0 rgba(0, 0, 0, 0.1),
-    0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
+    0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
+    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
+    inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));
+
   --figma-elevation-400-menu-panel:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
-    0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
+    0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
+    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
+    inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
+
   --figma-elevation-500-modal-window:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
-    0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
-  --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
-}
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
+    0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
+    0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
+    0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
-/* Dark theme overrides for non-color values (shadows, elevations) */
-/* light-dark() only works for colors, so these use class-based switching */
-/* The @media block is a no-JS fallback — ignored when setTheme() sets classes */
-@media (prefers-color-scheme: dark) {
-  :root:not(.figma-dark):not(.figma-light) {
-    --handle-shadow:
-      0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-      0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-    --figma-elevation-100:
-      0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
-      0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
-      0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-    --figma-elevation-200:
-      0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
-      inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
-      inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-    --figma-elevation-400-menu-panel:
-      0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
-      0px 10px 16px 0px rgba(0, 0, 0, 0.35),
-      inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
-      0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-    --figma-elevation-500-modal-window:
-      0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
-      inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
-  }
-}
-
-/* Class-based dark theme override (primary mechanism via setTheme()) */
-:root.figma-dark {
   --handle-shadow:
-    0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-    0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-  --figma-elevation-100:
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
-    0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
-    0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-  --figma-elevation-200:
-    0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
-    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
-    inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-  --figma-elevation-400-menu-panel:
-    0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
-    0px 10px 16px 0px rgba(0, 0, 0, 0.35),
-    inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
-    0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-  --figma-elevation-500-modal-window:
-    0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
-    inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
+    0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
+    0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
+    0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
 }
 
 button,
@@ -1448,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");
   }
 }
@@ -2066,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,18 @@ class FigPopup extends HTMLDialogElement {
       return;
     }
 
+    if (name === "drag") {
+      this.drag = newValue !== null && newValue !== "false";
+      if (this.drag) {
+        this.#setupDragListeners();
+      } else {
+        this.#removeDragListeners();
+        const header = this.querySelector("fig-header, header");
+        if (header) header.style.cursor = "";
+      }
+      return;
+    }
+
     if (this.open) {
       this.#queueReposition();
       this.#setupObservers();
@@ -1176,9 +1212,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 +1238,11 @@ class FigPopup extends HTMLDialogElement {
     }
   }
 
+  get autoresize() {
+    const val = this.getAttribute("autoresize");
+    return val === null || val !== "false";
+  }
+
   #setupObservers() {
     this.#teardownObservers();
 
@@ -1205,17 +1252,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);
@@ -1240,15 +1289,134 @@ class FigPopup extends HTMLDialogElement {
 
   #handleOutsidePointerDown(event) {
     if (!this.open || !super.open) return;
+    const closedby = this.getAttribute("closedby");
+    if (closedby === "none" || closedby === "closerequest") return;
     const target = event.target;
     if (!(target instanceof Node)) return;
     if (this.contains(target)) return;
 
-    // Fallback for browsers that do not honor dialog closedby consistently.
+    const anchor = this.#resolveAnchor();
+    if (anchor && anchor.contains(target)) return;
+
     this.open = false;
   }
 
+  // ---- Drag support ----
+
+  #setupDragListeners() {
+    if (this.drag) {
+      this.addEventListener("pointerdown", this.#boundPointerDown);
+      const handleSelector = this.getAttribute("handle");
+      const handleEl = handleSelector
+        ? this.querySelector(handleSelector)
+        : this.querySelector("fig-header, header");
+      if (handleEl) handleEl.style.cursor = "grab";
+    }
+  }
+
+  #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;
 
@@ -1416,12 +1584,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 };
@@ -3196,7 +3376,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" dialog-position="left" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3214,7 +3394,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${expAttr} ${
+          ? `<fig-fill-picker mode="solid" dialog-position="left" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -3742,7 +3922,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}
@@ -6006,7 +6186,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;
@@ -6212,21 +6392,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();
@@ -6234,72 +6403,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");
@@ -6332,7 +6446,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>`)
@@ -6345,7 +6459,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>
@@ -6368,11 +6482,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

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;
@@ -158,6 +158,36 @@
             border-radius: 4px;
             color: var(--figma-color-text);
         }
+
+        .toolbelt {
+            position: fixed;
+            bottom: 0.75rem;
+            left: 0;
+            right: 0;
+            width: fit-content;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            gap: var(--spacer-2);
+            padding: var(--spacer-2);
+            background-color: var(--figma-color-bg);
+            border-radius: var(--radius-large);
+            box-shadow: var(--figma-elevation-200);
+            z-index: 100;
+
+            &>section {
+                display: flex;
+                padding: 0;
+                align-items: center;
+                margin: 0;
+                gap: var(--spacer-2);
+
+                &:not(:first-child):not(:only-child) {
+                    border-left: 1px solid var(--figma-color-border);
+                    padding-left: var(--spacer-2);
+                }
+            }
+        }
     </style>
 </head>
 
@@ -296,7 +326,8 @@
                 <label>Input (with icon)</label>
                 <fig-button variant="input">
                     Options
-                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
                 </fig-button>
             </fig-field>
 
@@ -392,7 +423,8 @@
                 <label>Icon (input)</label>
                 <fig-button variant="input"
                             icon="true">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
                 </fig-button>
             </fig-field>
             <fig-field direction="horizontal">
@@ -863,6 +895,115 @@
                     <fig-button close-dialog>Close</fig-button>
                 </footer>
             </dialog>
+
+            <h3>Non-Modal Dialog</h3>
+            <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
+                Use <code>.show()</code> instead of <code>.showModal()</code> to open a non-modal dialog.
+                It won't create a backdrop or trap focus, and the rest of the page remains interactive.
+            </p>
+            <pre><code>&lt;dialog id="my-dialog" is="fig-dialog" drag="true"&gt;
+  ...
+&lt;/dialog&gt;
+
+&lt;script&gt;
+  // Non-modal — no backdrop, page stays interactive
+  document.getElementById('my-dialog').show();
+
+  // Modal — backdrop + focus trap
+  document.getElementById('my-dialog').showModal();
+&lt;/script&gt;</code></pre>
+            <fig-button onclick="document.getElementById('non-modal-dialog').show()">Open Non-Modal Dialog</fig-button>
+
+            <dialog id="non-modal-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    position="center center">
+                <fig-header>
+                    <h3>Non-Modal Dialog</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>This dialog is non-modal — you can still interact with the page behind it.</p>
+                    <fig-field direction="horizontal">
+                        <label>Opacity</label>
+                        <fig-slider value="75"
+                                    min="0"
+                                    max="100"></fig-slider>
+                    </fig-field>
+                </fig-content>
+                <footer>
+                    <fig-button close-dialog>Done</fig-button>
+                </footer>
+            </dialog>
+
+            <h3>closedby Attribute</h3>
+            <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
+                The <code>closedby</code> attribute controls how the dialog can be dismissed.
+                <code>fig-dialog</code> defaults to <code>closedby="any"</code> (light dismiss).
+            </p>
+            <pre><code>&lt;!-- Click outside, Esc key, or close button all dismiss --&gt;
+&lt;dialog is="fig-dialog" closedby="any"&gt;...&lt;/dialog&gt;
+
+&lt;!-- Only Esc key or close button dismiss (no click-outside) --&gt;
+&lt;dialog is="fig-dialog" closedby="closerequest"&gt;...&lt;/dialog&gt;
+
+&lt;!-- Only explicit close button dismisses --&gt;
+&lt;dialog is="fig-dialog" closedby="none"&gt;...&lt;/dialog&gt;</code></pre>
+            <hstack>
+                <fig-button variant="secondary"
+                            onclick="document.getElementById('closedby-any-dialog').show()">closedby="any"</fig-button>
+                <fig-button variant="secondary"
+                            onclick="document.getElementById('closedby-none-dialog').show()">closedby="none"</fig-button>
+            </hstack>
+
+            <dialog id="closedby-any-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    closedby="any"
+                    position="center center">
+                <fig-header>
+                    <h3>Light Dismiss</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>Click anywhere outside this dialog to close it.</p>
+                </fig-content>
+            </dialog>
+
+            <dialog id="closedby-none-dialog"
+                    is="fig-dialog"
+                    drag="true"
+                    closedby="none"
+                    position="center center">
+                <fig-header>
+                    <h3>No Light Dismiss</h3>
+                    <fig-tooltip text="Close">
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
+                        </fig-button>
+                    </fig-tooltip>
+                </fig-header>
+                <fig-content>
+                    <p>This dialog can only be closed with the close button.</p>
+                </fig-content>
+            </dialog>
         </section>
         <hr>
 
@@ -2968,6 +3109,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>
 
@@ -4113,6 +4276,50 @@ button.addEventListener('click', () => {
         </fig-footer>
     </main>
 
+    <div class="toolbelt">
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-back)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-forward)"></span>
+            </fig-button>
+        </section>
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-minus)"></span>
+            </fig-button>
+        </section>
+        <section>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-swap)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-rotate)"></span>
+            </fig-button>
+            <fig-button variant="ghost"
+                        icon="true">
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-eyedropper)"></span>
+            </fig-button>
+        </section>
+    </div>
+
     <script>
         // Highlight nav item based on hash
         function updateActiveNav() {
@@ -4180,8 +4387,7 @@ button.addEventListener('click', () => {
 
         function setTheme(isDark) {
             document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-            document.documentElement.classList.toggle('figma-dark', isDark);
-            document.documentElement.classList.toggle('figma-light', !isDark);
+
             localStorage.setItem('theme', isDark ? 'dark' : 'light');
             // Sync switch state
             if (isDark) {
@@ -4268,6 +4474,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.19.1",
+  "version": "2.21.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",