@rogieking/figui3 3.21.1 → 3.22.0

package/fig.js

@@ -947,6 +947,78 @@ class FigTooltip extends HTMLElement {
       this.hidePopup();
     }
   }
+
+  static #programmatic = new WeakMap();
+
+  static show(anchor, text, options = {}) {
+    FigTooltip.hide(anchor);
+    const delay = options.delay ?? 500;
+    const warm =
+      Date.now() - FigTooltip.#lastShownAt < FigTooltip.#warmupWindow;
+    const effectiveDelay = warm ? 0 : delay;
+
+    const state = { timeout: null, popup: null };
+    FigTooltip.#programmatic.set(anchor, state);
+
+    state.timeout = setTimeout(() => {
+      const popup = document.createElement("span");
+      popup.setAttribute("class", "fig-tooltip");
+      popup.setAttribute("role", "tooltip");
+      popup.style.position = "fixed";
+      popup.style.pointerEvents = "none";
+      const content = document.createElement("span");
+      content.innerText = text;
+      popup.append(content);
+
+      const parentDialog = anchor.closest("dialog");
+      if (parentDialog && parentDialog.open) {
+        parentDialog.append(popup);
+      } else {
+        document.body.append(popup);
+      }
+
+      const rect = anchor.getBoundingClientRect();
+      const popupRect = popup.getBoundingClientRect();
+      const container = popup.parentElement;
+      const containerRect =
+        container && container !== document.body
+          ? container.getBoundingClientRect()
+          : { left: 0, top: 0 };
+
+      let top = rect.top - popupRect.height - 4 - containerRect.top;
+      let left =
+        rect.left + (rect.width - popupRect.width) / 2 - containerRect.left;
+      popup.setAttribute("position", "top");
+
+      if (top + containerRect.top < 0) {
+        popup.setAttribute("position", "bottom");
+        top = rect.bottom + 4 - containerRect.top;
+      }
+      if (left + containerRect.left < 8) {
+        left = 8 - containerRect.left;
+      }
+      if (left + popupRect.width + containerRect.left > window.innerWidth - 8) {
+        left = window.innerWidth - popupRect.width - 8 - containerRect.left;
+      }
+
+      const targetCenter = rect.left - containerRect.left + rect.width / 2;
+      popup.style.setProperty("--beak-offset", `${targetCenter - left}px`);
+      popup.style.top = `${top}px`;
+      popup.style.left = `${left}px`;
+      popup.style.zIndex = figGetHighestZIndex() + 1;
+
+      state.popup = popup;
+      FigTooltip.#lastShownAt = Date.now();
+    }, effectiveDelay);
+  }
+
+  static hide(anchor) {
+    const state = FigTooltip.#programmatic.get(anchor);
+    if (!state) return;
+    clearTimeout(state.timeout);
+    if (state.popup) state.popup.remove();
+    FigTooltip.#programmatic.delete(anchor);
+  }
 }
 
 customElements.define("fig-tooltip", FigTooltip);
@@ -3533,8 +3605,12 @@ class FigInputText extends HTMLElement {
     valueTransformed = this.#formatNumber(valueTransformed);
     this.value = value;
     this.input.value = valueTransformed;
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true }),
+    );
   }
   #handleMouseDown(e) {
     if (this.type !== "number") return;
@@ -4023,8 +4099,12 @@ class FigInputNumber extends HTMLElement {
     value = this.#sanitizeInput(value, false);
     this.value = value;
     this.input.value = this.#formatWithUnit(this.value);
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true }),
+    );
   }
 
   #handleMouseDown(e) {
@@ -4209,6 +4289,10 @@ customElements.define("fig-avatar", FigAvatar);
 
 /* Form Field */
 class FigField extends HTMLElement {
+  #toggleable = false;
+  #chevron = null;
+  #boundToggle = null;
+
   constructor() {
     super();
   }
@@ -4223,15 +4307,65 @@ class FigField extends HTMLElement {
       this.input = Array.from(this.childNodes).find((node) =>
         node.nodeName.toLowerCase().startsWith("fig-"),
       );
-      if (this.input && this.label) {
+
+      this.#toggleable = !!(this.input && "open" in this.input);
+
+      if (this.#toggleable && this.label) {
+        this.#chevron = document.createElement("span");
+        this.#chevron.className = "fig-mask-icon fig-field-chevron";
+        this.insertBefore(this.#chevron, this.label);
+
+        this.#boundToggle = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.input && typeof this.input.open !== "undefined") {
+            this.input.open = !this.input.open;
+          }
+        };
+        this.#chevron.addEventListener("click", this.#boundToggle);
+        this.label.addEventListener("click", this.#boundToggle);
+      } else if (this.input && this.label) {
         this.label.addEventListener("click", this.focus.bind(this));
+      }
+
+      if (this.input && this.label && !this.#toggleable) {
         let inputId = this.input.getAttribute("id") || figUniqueId();
         this.input.setAttribute("id", inputId);
         this.label.setAttribute("for", inputId);
       }
+
+      if (this.label) {
+        this.label.addEventListener(
+          "pointerenter",
+          this.#onLabelEnter.bind(this),
+        );
+        this.label.addEventListener(
+          "pointerleave",
+          this.#onLabelLeave.bind(this),
+        );
+      }
     });
   }
 
+  disconnectedCallback() {
+    if (this.label) FigTooltip.hide(this.label);
+    if (this.label && this.#boundToggle) {
+      this.label.removeEventListener("click", this.#boundToggle);
+    }
+    if (this.#chevron && this.#boundToggle) {
+      this.#chevron.removeEventListener("click", this.#boundToggle);
+    }
+  }
+
+  #onLabelEnter() {
+    if (!this.label || this.label.scrollWidth <= this.label.clientWidth) return;
+    FigTooltip.show(this.label, this.label.textContent.trim());
+  }
+
+  #onLabelLeave() {
+    if (this.label) FigTooltip.hide(this.label);
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "label":
@@ -4243,7 +4377,18 @@ class FigField extends HTMLElement {
   }
 
   focus() {
-    this.input.focus();
+    if (!this.input) return;
+    if (this.input.contains(document.activeElement)) return;
+    const nativeInputs = this.input.querySelectorAll("input, select, textarea");
+    if (nativeInputs.length === 1) {
+      nativeInputs[0].focus();
+      nativeInputs[0].click();
+    } else {
+      this.input.focus();
+      if (nativeInputs.length === 0) {
+        this.input.click();
+      }
+    }
   }
 }
 customElements.define("fig-field", FigField);
@@ -4578,7 +4723,7 @@ class FigInputColor extends HTMLElement {
     const disabledAttr = disabled ? " disabled" : "";
 
     let html = ``;
-    const showText = this.getAttribute("text") === "true";
+    const showText = this.getAttribute("text") !== "false";
     if (showText) {
       let label = `<fig-input-text 
         type="text"
@@ -4801,22 +4946,35 @@ class FigInputColor extends HTMLElement {
   }
 
   #emitInputEvent() {
-    this.dispatchEvent(new CustomEvent("input", {
-      bubbles: true,
-      cancelable: true,
-      detail: { value: this.value, hex: this.hex, rgba: this.rgba },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        cancelable: true,
+        detail: { value: this.value, hex: this.hex, rgba: this.rgba },
+      }),
+    );
   }
   #emitChangeEvent() {
-    this.dispatchEvent(new CustomEvent("change", {
-      bubbles: true,
-      cancelable: true,
-      detail: { value: this.value, hex: this.hex, rgba: this.rgba },
-    }));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+        detail: { value: this.value, hex: this.hex, rgba: this.rgba },
+      }),
+    );
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental", "alpha", "text", "disabled"];
+    return [
+      "value",
+      "style",
+      "mode",
+      "picker",
+      "experimental",
+      "alpha",
+      "text",
+      "disabled",
+    ];
   }
 
   get mode() {
@@ -4877,7 +5035,9 @@ class FigInputColor extends HTMLElement {
   }
 
   get #disabled() {
-    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    return (
+      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false"
+    );
   }
 
   #syncDisabled() {
@@ -5076,9 +5236,15 @@ function figRGBToOklab(r, g, b) {
   const lr = figRGBToLinear(r);
   const lg = figRGBToLinear(g);
   const lb = figRGBToLinear(b);
-  const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-  const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-  const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const l_ = Math.cbrt(
+    0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb,
+  );
+  const m_ = Math.cbrt(
+    0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb,
+  );
+  const s_ = Math.cbrt(
+    0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb,
+  );
   return {
     l: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
     a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
@@ -5101,7 +5267,11 @@ function figOklabToRGB(L, a, b) {
 }
 
 function figOklabToOklch(L, a, b) {
-  return { l: L, c: Math.sqrt(a * a + b * b), h: (Math.atan2(b, a) * 180) / Math.PI };
+  return {
+    l: L,
+    c: Math.sqrt(a * a + b * b),
+    h: (Math.atan2(b, a) * 180) / Math.PI,
+  };
 }
 
 function figOklchToOklab(l, c, h) {
@@ -5130,15 +5300,21 @@ function figInterpolateHue(h1, h2, t, mode) {
       else if (diff < -180) diff += 360;
       break;
   }
-  return ((a + diff * t) % 360 + 360) % 360;
+  return (((a + diff * t) % 360) + 360) % 360;
 }
 
-function figSampleGradientAt(stops, position, interpolationSpace, hueInterpolation) {
+function figSampleGradientAt(
+  stops,
+  position,
+  interpolationSpace,
+  hueInterpolation,
+) {
   const sorted = [...stops].sort((a, b) => a.position - b.position);
   const pos = position * 100;
   if (sorted.length === 0) return "#888888";
   if (pos <= sorted[0].position) return sorted[0].color;
-  if (pos >= sorted[sorted.length - 1].position) return sorted[sorted.length - 1].color;
+  if (pos >= sorted[sorted.length - 1].position)
+    return sorted[sorted.length - 1].color;
 
   let i = 0;
   while (i < sorted.length - 1 && sorted[i + 1].position < pos) i++;
@@ -5154,8 +5330,12 @@ function figSampleGradientAt(stops, position, interpolationSpace, hueInterpolati
   const space = interpolationSpace || "oklab";
 
   if (space === "srgb-linear") {
-    const lr1 = figRGBToLinear(c1.r), lg1 = figRGBToLinear(c1.g), lb1 = figRGBToLinear(c1.b);
-    const lr2 = figRGBToLinear(c2.r), lg2 = figRGBToLinear(c2.g), lb2 = figRGBToLinear(c2.b);
+    const lr1 = figRGBToLinear(c1.r),
+      lg1 = figRGBToLinear(c1.g),
+      lb1 = figRGBToLinear(c1.b);
+    const lr2 = figRGBToLinear(c2.r),
+      lg2 = figRGBToLinear(c2.g),
+      lb2 = figRGBToLinear(c2.b);
     r = figLinearToSRGB(lr1 + (lr2 - lr1) * t);
     g = figLinearToSRGB(lg1 + (lg2 - lg1) * t);
     b = figLinearToSRGB(lb1 + (lb2 - lb1) * t);
@@ -5166,10 +5346,17 @@ function figSampleGradientAt(stops, position, interpolationSpace, hueInterpolati
     const lch2 = figOklabToOklch(lab2.l, lab2.a, lab2.b);
     const L = lch1.l + (lch2.l - lch1.l) * t;
     const C = lch1.c + (lch2.c - lch1.c) * t;
-    const H = figInterpolateHue(lch1.h, lch2.h, t, hueInterpolation || "shorter");
+    const H = figInterpolateHue(
+      lch1.h,
+      lch2.h,
+      t,
+      hueInterpolation || "shorter",
+    );
     const lab = figOklchToOklab(L, C, H);
     const rgb = figOklabToRGB(lab.l, lab.a, lab.b);
-    r = rgb.r; g = rgb.g; b = rgb.b;
+    r = rgb.r;
+    g = rgb.g;
+    b = rgb.b;
   } else {
     const lab1 = figRGBToOklab(c1.r, c1.g, c1.b);
     const lab2 = figRGBToOklab(c2.r, c2.g, c2.b);
@@ -5177,7 +5364,9 @@ function figSampleGradientAt(stops, position, interpolationSpace, hueInterpolati
     const a = lab1.a + (lab2.a - lab1.a) * t;
     const bv = lab1.b + (lab2.b - lab1.b) * t;
     const rgb = figOklabToRGB(L, a, bv);
-    r = rgb.r; g = rgb.g; b = rgb.b;
+    r = rgb.r;
+    g = rgb.g;
+    b = rgb.b;
   }
 
   return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
@@ -5347,7 +5536,11 @@ class FigInputFill extends HTMLElement {
 
   #syncDisabled() {
     const disabled = this.hasAttribute("disabled");
-    for (const child of [this.#fillPicker, this.#opacityInput, this.#hexInput]) {
+    for (const child of [
+      this.#fillPicker,
+      this.#opacityInput,
+      this.#hexInput,
+    ]) {
       if (!child) continue;
       if (disabled) child.setAttribute("disabled", "");
       else child.removeAttribute("disabled");
@@ -5911,11 +6104,28 @@ class FigInputPalette extends HTMLElement {
   #renderRAF = null;
 
   static get observedAttributes() {
-    return ["value", "disabled", "min", "max", "expanded", "add"];
+    return ["value", "disabled", "min", "max", "open", "add"];
   }
 
-  get #expanded() {
-    return this.hasAttribute("expanded") && this.getAttribute("expanded") !== "false";
+  get open() {
+    return this.hasAttribute("open") && this.getAttribute("open") !== "false";
+  }
+
+  set open(value) {
+    const was = this.open;
+    if (value) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
+    }
+    if (was !== !!value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: !!value },
+          bubbles: true,
+        }),
+      );
+    }
   }
 
   get #showAdd() {
@@ -5933,6 +6143,7 @@ class FigInputPalette extends HTMLElement {
   }
 
   connectedCallback() {
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
     if (this.#renderRAF) cancelAnimationFrame(this.#renderRAF);
     this.#renderRAF = requestAnimationFrame(() => {
       this.#renderRAF = null;
@@ -5963,7 +6174,7 @@ class FigInputPalette extends HTMLElement {
         break;
       case "min":
       case "max":
-      case "expanded":
+      case "open":
       case "add":
         this.#render();
         break;
@@ -5985,12 +6196,21 @@ class FigInputPalette extends HTMLElement {
       if (Array.isArray(parsed)) {
         this.#colors = parsed.map((entry) => {
           if (typeof entry === "string") {
-            return { color: entry.slice(0, 7), alpha: entry.length > 7 ? parseInt(entry.slice(7, 9), 16) / 255 : 1 };
+            return {
+              color: entry.slice(0, 7),
+              alpha:
+                entry.length > 7 ? parseInt(entry.slice(7, 9), 16) / 255 : 1,
+            };
           }
           if (entry && typeof entry === "object") {
             return {
               color: entry.color || "#D9D9D9",
-              alpha: entry.alpha !== undefined ? entry.alpha : (entry.opacity !== undefined ? entry.opacity / 100 : 1),
+              alpha:
+                entry.alpha !== undefined
+                  ? entry.alpha
+                  : entry.opacity !== undefined
+                    ? entry.opacity / 100
+                    : 1,
             };
           }
           return { color: "#D9D9D9", alpha: 1 };
@@ -6015,10 +6235,13 @@ class FigInputPalette extends HTMLElement {
 
     // Single hex
     if (trimmed.startsWith("#")) {
-      this.#colors = [{
-        color: trimmed.slice(0, 7),
-        alpha: trimmed.length > 7 ? parseInt(trimmed.slice(7, 9), 16) / 255 : 1,
-      }];
+      this.#colors = [
+        {
+          color: trimmed.slice(0, 7),
+          alpha:
+            trimmed.length > 7 ? parseInt(trimmed.slice(7, 9), 16) / 255 : 1,
+        },
+      ];
       return;
     }
 
@@ -6038,7 +6261,9 @@ class FigInputPalette extends HTMLElement {
   }
 
   #render() {
-    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const disabled =
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false";
 
     this.innerHTML = "";
     this.#inlinePickers = [];
@@ -6050,7 +6275,9 @@ class FigInputPalette extends HTMLElement {
     const wrap = document.createElement("div");
     wrap.className = "palette-colors";
     this.#colors.forEach((entry, i) => {
-      wrap.appendChild(this.#createPicker(entry, i, disabled, { inline: true }));
+      wrap.appendChild(
+        this.#createPicker(entry, i, disabled, { inline: true }),
+      );
     });
     inlineWrap.appendChild(wrap);
 
@@ -6066,9 +6293,13 @@ class FigInputPalette extends HTMLElement {
   }
 
   #createPicker(entry, index, disabled, { inline = false } = {}) {
-    const hexAlpha = entry.alpha < 1
-      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
-      : entry.color;
+    const hexAlpha =
+      entry.alpha < 1
+        ? entry.color +
+          Math.round(entry.alpha * 255)
+            .toString(16)
+            .padStart(2, "0")
+        : entry.color;
     const ic = document.createElement("fig-input-color");
     ic.setAttribute("value", hexAlpha);
     ic.setAttribute("picker", "figma");
@@ -6095,9 +6326,13 @@ class FigInputPalette extends HTMLElement {
       const sibling = siblingList[index];
       if (sibling) {
         const entry = this.#colors[index];
-        const hex = entry.alpha < 1
-          ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
-          : entry.color;
+        const hex =
+          entry.alpha < 1
+            ? entry.color +
+              Math.round(entry.alpha * 255)
+                .toString(16)
+                .padStart(2, "0")
+            : entry.color;
         sibling.setAttribute("value", hex);
       }
     };
@@ -6120,14 +6355,18 @@ class FigInputPalette extends HTMLElement {
   #createAddButton(disabled, parent = this) {
     const atMax = this.#colors.length >= this.#max;
     const addBtn = document.createElement("fig-button");
-    addBtn.setAttribute("variant", "ghost");
+    addBtn.setAttribute("variant", "input");
     addBtn.setAttribute("icon", "true");
     addBtn.setAttribute("aria-label", "Add color");
     addBtn.className = "palette-add-btn";
     if (disabled || atMax) addBtn.setAttribute("disabled", "");
     addBtn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>`;
     addBtn.addEventListener("click", () => {
-      if (this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false") return;
+      if (
+        this.hasAttribute("disabled") &&
+        this.getAttribute("disabled") !== "false"
+      )
+        return;
       if (this.#colors.length >= this.#max) return;
       this.#addColor({ color: "#D9D9D9", alpha: 1 });
     });
@@ -6139,10 +6378,14 @@ class FigInputPalette extends HTMLElement {
 
   #addColor(entry) {
     this.#colors.push(entry);
-    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const disabled =
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false";
     const index = this.#colors.length - 1;
 
-    const inlineIc = this.#createPicker(entry, index, disabled, { inline: true });
+    const inlineIc = this.#createPicker(entry, index, disabled, {
+      inline: true,
+    });
     const wrap = this.querySelector(".palette-colors");
     if (wrap) wrap.appendChild(inlineIc);
 
@@ -6160,9 +6403,13 @@ class FigInputPalette extends HTMLElement {
   #updateChit(index) {
     const entry = this.#colors[index];
     if (!entry) return;
-    const hexAlpha = entry.alpha < 1
-      ? entry.color + Math.round(entry.alpha * 255).toString(16).padStart(2, "0")
-      : entry.color;
+    const hexAlpha =
+      entry.alpha < 1
+        ? entry.color +
+          Math.round(entry.alpha * 255)
+            .toString(16)
+            .padStart(2, "0")
+        : entry.color;
     const inl = this.#inlinePickers[index];
     if (inl) inl.setAttribute("value", hexAlpha);
     const exp = this.#expandedPickers[index];
@@ -6180,7 +6427,9 @@ class FigInputPalette extends HTMLElement {
   }
 
   #syncDisabled() {
-    const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+    const disabled =
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false";
     [...this.#inlinePickers, ...this.#expandedPickers].forEach((fp) => {
       if (disabled) fp.setAttribute("disabled", "");
       else fp.removeAttribute("disabled");
@@ -6314,7 +6563,9 @@ class FigInputGradient extends HTMLElement {
       const idx = parseInt(selected.dataset.stopIndex, 10);
       if (isNaN(idx) || !this.#gradient.stops[idx]) return;
       e.preventDefault();
-      const delta = (e.key === "ArrowRight" ? 1 : -1) * (e.shiftKey ? FigInputGradient.SHIFT_SNAP : 1);
+      const delta =
+        (e.key === "ArrowRight" ? 1 : -1) *
+        (e.shiftKey ? FigInputGradient.SHIFT_SNAP : 1);
       const stop = this.#gradient.stops[idx];
       stop.position = Math.max(0, Math.min(100, stop.position + delta));
       selected.setAttribute("value", `${stop.position}% 50%`);
@@ -6364,6 +6615,8 @@ class FigInputGradient extends HTMLElement {
           ...this.#gradient,
           ...parsed.gradient,
         });
+        this.#gradient.type = "linear";
+        this.#gradient.angle = 90;
         return;
       }
       if (parsed?.gradient) {
@@ -6371,6 +6624,8 @@ class FigInputGradient extends HTMLElement {
           ...this.#gradient,
           ...parsed.gradient,
         });
+        this.#gradient.type = "linear";
+        this.#gradient.angle = 90;
       }
     } catch (e) {
       // Ignore invalid JSON and keep current/default gradient.
@@ -6578,10 +6833,12 @@ class FigInputGradient extends HTMLElement {
         const stopIdx = parseInt(clickedHandle?.dataset.stopIndex, 10);
         this.#distributeStops();
         if (!isNaN(stopIdx)) {
-          this.#track.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((h) => {
-            if (parseInt(h.dataset.stopIndex, 10) === stopIdx) h.select();
-            else h.deselect();
-          });
+          this.#track
+            .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+            .forEach((h) => {
+              if (parseInt(h.dataset.stopIndex, 10) === stopIdx) h.select();
+              else h.deselect();
+            });
         }
         e.stopPropagation();
       }
@@ -6720,7 +6977,10 @@ class FigInputGradient extends HTMLElement {
       e.stopPropagation();
 
       const trackRect = this.#track.getBoundingClientRect();
-      const pct = Math.max(0, Math.min(1, (e.clientX - trackRect.left) / trackRect.width));
+      const pct = Math.max(
+        0,
+        Math.min(1, (e.clientX - trackRect.left) / trackRect.width),
+      );
       const position = Math.round(pct * 100);
       const color = this.#sampleGradientColor(pct);
       this.#gradient.stops.push({ position, color, opacity: 100 });
@@ -6739,19 +6999,23 @@ class FigInputGradient extends HTMLElement {
       );
       const newHandle = handles[newIndex];
       if (newHandle) {
-        this.#track.querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)").forEach((h) => {
-          if (h !== newHandle) h.deselect();
-        });
+        this.#track
+          .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+          .forEach((h) => {
+            if (h !== newHandle) h.deselect();
+          });
         newHandle.select();
-        newHandle.dispatchEvent(new PointerEvent("pointerdown", {
-          bubbles: true,
-          clientX: e.clientX,
-          clientY: e.clientY,
-          pointerId: e.pointerId,
-          pointerType: e.pointerType,
-          button: e.button,
-          buttons: e.buttons,
-        }));
+        newHandle.dispatchEvent(
+          new PointerEvent("pointerdown", {
+            bubbles: true,
+            clientX: e.clientX,
+            clientY: e.clientY,
+            pointerId: e.pointerId,
+            pointerType: e.pointerType,
+            button: e.button,
+            buttons: e.buttons,
+          }),
+        );
       }
     });
 
@@ -6766,7 +7030,10 @@ class FigInputGradient extends HTMLElement {
           if (e.detail.opacity !== undefined) {
             this.#gradient.stops[idx].opacity = e.detail.opacity;
           }
-          handle.setAttribute("color", this.#stopColorCSS(this.#gradient.stops[idx]));
+          handle.setAttribute(
+            "color",
+            this.#stopColorCSS(this.#gradient.stops[idx]),
+          );
           this.#syncChit();
           this.#emitInput();
         }
@@ -6781,7 +7048,9 @@ class FigInputGradient extends HTMLElement {
       let position = rawPosition;
       const trackW = this.#track.getBoundingClientRect().width;
       if (e.detail?.shiftKey) {
-        position = Math.round(position / FigInputGradient.SHIFT_SNAP) * FigInputGradient.SHIFT_SNAP;
+        position =
+          Math.round(position / FigInputGradient.SHIFT_SNAP) *
+          FigInputGradient.SHIFT_SNAP;
       } else {
         const snapPct = trackW > 0 ? (5 / trackW) * 100 : 0;
         for (let i = 0; i < this.#gradient.stops.length; i++) {
@@ -6821,7 +7090,10 @@ class FigInputGradient extends HTMLElement {
           if (e.detail.opacity !== undefined) {
             this.#gradient.stops[idx].opacity = e.detail.opacity;
           }
-          handle.setAttribute("color", this.#stopColorCSS(this.#gradient.stops[idx]));
+          handle.setAttribute(
+            "color",
+            this.#stopColorCSS(this.#gradient.stops[idx]),
+          );
           this.#syncChit();
           this.#emitChange();
         }
@@ -7574,13 +7846,13 @@ class FigChit extends HTMLElement {
 
       if (this.#type === "color") {
         const hex = this.#toHex(bg);
-        this.innerHTML = `<input type="color" value="${hex}" />`;
+        this.innerHTML = `<div></div><input type="color" value="${hex}" />`;
         this.input = this.querySelector("input");
         if (!isVar) {
           this.input.addEventListener("input", this.#boundHandleInput);
         }
       } else {
-        this.innerHTML = "";
+        this.innerHTML = "<div></div>";
         this.input = null;
       }
     } else if (this.#type === "color" && this.input) {
@@ -7590,8 +7862,14 @@ class FigChit extends HTMLElement {
       }
     }
 
-    const isImage = /^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(rawBg);
-    this.style.setProperty("--chit-background", isImage ? rawBg : `linear-gradient(${rawBg}, ${rawBg})`);
+    const isImage =
+      /^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(
+        rawBg,
+      );
+    this.style.setProperty(
+      "--chit-background",
+      isImage ? rawBg : `linear-gradient(${rawBg}, ${rawBg})`,
+    );
   }
 
   #handleInput(e) {
@@ -7618,8 +7896,14 @@ class FigChit extends HTMLElement {
     if (oldValue === newValue) return;
     if (name === "background") {
       if (this.#internalUpdate) {
-        const isImg = /^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(newValue);
-        this.style.setProperty("--chit-background", isImg ? newValue : `linear-gradient(${newValue}, ${newValue})`);
+        const isImg =
+          /^(linear-gradient|radial-gradient|conic-gradient|repeating-|url)\s*\(/i.test(
+            newValue,
+          );
+        this.style.setProperty(
+          "--chit-background",
+          isImg ? newValue : `linear-gradient(${newValue}, ${newValue})`,
+        );
         return;
       }
       this.#render();
@@ -7641,9 +7925,7 @@ class FigChit extends HTMLElement {
   }
 }
 customElements.define("fig-chit", FigChit);
-class FigSwatch extends FigChit{
-
-}
+class FigSwatch extends FigChit {}
 customElements.define("fig-swatch", FigSwatch);
 
 /* Upload */
@@ -8824,7 +9106,11 @@ class Fig3DRotate extends HTMLElement {
     this.#precision = parseInt(this.getAttribute("precision") || "1");
     figSyncCssVar(this, "--aspect-ratio", this.getAttribute("aspect-ratio"));
     figSyncCssVar(this, "--perspective", this.getAttribute("perspective"));
-    figSyncCssVar(this, "--perspective-origin", this.getAttribute("perspective-origin"));
+    figSyncCssVar(
+      this,
+      "--perspective-origin",
+      this.getAttribute("perspective-origin"),
+    );
     this.#syncTransformOrigin(this.getAttribute("transform-origin"));
     this.#parseFields(this.getAttribute("fields"));
     const val = this.getAttribute("value");
@@ -8842,8 +9128,6 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
-  
-
   #syncTransformOrigin(value) {
     if (!value || !value.trim()) {
       this.style.removeProperty("--transform-origin");
@@ -10678,6 +10962,117 @@ class FigLayer extends HTMLElement {
 }
 customElements.define("fig-layer", FigLayer);
 
+// FigGroup
+class FigGroup extends HTMLElement {
+  static observedAttributes = ["name", "collapsible"];
+
+  #header = null;
+  #chevron = null;
+
+  connectedCallback() {
+    requestAnimationFrame(() => this.#render());
+  }
+
+  disconnectedCallback() {
+    if (this.#chevron) {
+      this.#chevron.removeEventListener("click", this.#handleToggle);
+    }
+    if (this.#header) {
+      this.#header.removeEventListener("click", this.#handleToggle);
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#render();
+  }
+
+  get open() {
+    const attr = this.getAttribute("open");
+    return attr !== null && attr !== "false";
+  }
+
+  set open(value) {
+    const was = this.open;
+    if (value) {
+      this.setAttribute("open", "true");
+    } else {
+      this.setAttribute("open", "false");
+    }
+    if (was !== !!value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: !!value },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  #handleToggle = (e) => {
+    e.stopPropagation();
+    this.open = !this.open;
+  };
+
+  #render() {
+    const isCollapsible = this.hasAttribute("collapsible");
+    const nameAttr = this.getAttribute("name");
+    const label = nameAttr || (isCollapsible ? "Group" : null);
+
+    // Check if user supplied their own fig-header
+    const userHeader = this.querySelector(":scope > fig-header");
+
+    if (!label && !isCollapsible && !userHeader) {
+      if (this.#header && this.#header.dataset.generated) {
+        this.#header.remove();
+        this.#header = null;
+        this.#chevron = null;
+      }
+      return;
+    }
+
+    if (userHeader) {
+      this.#header = userHeader;
+    } else if (!this.#header || !this.#header.dataset.generated) {
+      this.#header = document.createElement("fig-header");
+      this.#header.setAttribute("borderless", "");
+      this.#header.dataset.generated = "true";
+      this.prepend(this.#header);
+    }
+
+    // Ensure h3 exists inside header
+    let h3 = this.#header.querySelector("h3");
+    if (!h3) {
+      h3 = document.createElement("h3");
+      this.#header.prepend(h3);
+    }
+    if (this.#header.dataset.generated) {
+      h3.textContent = label;
+    }
+
+    if (isCollapsible) {
+      if (!h3.querySelector(".fig-group-chevron")) {
+        const chevron = document.createElement("span");
+        chevron.className = "fig-mask-icon fig-group-chevron";
+        h3.prepend(chevron);
+      }
+      this.#chevron = h3.querySelector(".fig-group-chevron");
+      h3.addEventListener("click", this.#handleToggle);
+
+      if (!this.hasAttribute("open")) {
+        this.setAttribute("open", "false");
+      }
+    } else {
+      if (this.#chevron) {
+        this.#chevron.remove();
+        this.#chevron = null;
+      }
+      this.removeAttribute("open");
+    }
+  }
+}
+customElements.define("fig-group", FigGroup);
+
 // FigFillPicker
 /**
  * A comprehensive fill picker component supporting solid colors, gradients, images, video, and webcam.
@@ -11110,10 +11505,15 @@ class FigFillPicker extends HTMLElement {
     this.#dialog.addEventListener("close", onDialogClose);
 
     this.#dialogOpenObserver = new MutationObserver(() => {
-      const isOpen = this.#dialog.hasAttribute("open") && this.#dialog.getAttribute("open") !== "false";
+      const isOpen =
+        this.#dialog.hasAttribute("open") &&
+        this.#dialog.getAttribute("open") !== "false";
       if (!isOpen) onDialogClose();
     });
-    this.#dialogOpenObserver.observe(this.#dialog, { attributes: true, attributeFilter: ["open"] });
+    this.#dialogOpenObserver.observe(this.#dialog, {
+      attributes: true,
+      attributeFilter: ["open"],
+    });
 
     // Initialize built-in tabs (skip any overridden by custom slots)
     const builtinInits = {
@@ -11209,6 +11609,8 @@ class FigFillPicker extends HTMLElement {
       <fig-preview class="fig-fill-picker-color-area">
         <canvas width="200" height="200"></canvas>
         <fig-handle
+          type="color"
+          color="${this.#hsvToHex({ ...this.#color, a: 1 })}"
           drag
           drag-surface=".fig-fill-picker-color-area"
           drag-axes="x,y"
@@ -11871,7 +12273,9 @@ class FigFillPicker extends HTMLElement {
       });
 
     // Embedded gradient bar input
-    const gradientBarInput = container.querySelector(".fig-fill-picker-gradient-bar-input");
+    const gradientBarInput = container.querySelector(
+      ".fig-fill-picker-gradient-bar-input",
+    );
     if (gradientBarInput) {
       const syncFromBarInput = (e) => {
         e.stopPropagation();
@@ -11944,7 +12348,10 @@ class FigFillPicker extends HTMLElement {
     if (barInput) {
       barInput.setAttribute(
         "value",
-        JSON.stringify({ type: "gradient", gradient: gradientToValueShape(this.#gradient) }),
+        JSON.stringify({
+          type: "gradient",
+          gradient: gradientToValueShape(this.#gradient),
+        }),
       );
     }
 
@@ -11973,7 +12380,8 @@ class FigFillPicker extends HTMLElement {
         if (colorInput) colorInput.setAttribute("value", stop.color);
         const removeBtn = row.querySelector(".fig-fill-picker-stop-remove");
         if (removeBtn) {
-          if (this.#gradient.stops.length <= 2) removeBtn.setAttribute("disabled", "");
+          if (this.#gradient.stops.length <= 2)
+            removeBtn.setAttribute("disabled", "");
           else removeBtn.removeAttribute("disabled");
         }
       });
@@ -12902,10 +13310,20 @@ class FigColorTip extends HTMLElement {
     }
     this.removeEventListener("click", this.#handleControlClick);
 
-    const color = this.#normalizeColor(this.getAttribute("value"));
+    const rawValue = (this.getAttribute("value") || "").trim();
+    const color = this.#normalizeColor(rawValue);
+    const alpha = this.#extractAlpha(rawValue);
     const alphaAttr = this.#alphaEnabled ? "" : 'alpha="false"';
+    const pickerValue =
+      alpha < 1
+        ? JSON.stringify({
+            type: "solid",
+            color,
+            opacity: Math.round(alpha * 100),
+          })
+        : JSON.stringify({ type: "solid", color });
     this.innerHTML = `
-      <fig-fill-picker mode="solid" ${alphaAttr} value='${JSON.stringify({ type: "solid", color })}'>
+      <fig-fill-picker mode="solid" ${alphaAttr} value='${pickerValue}'>
         <fig-chit background="${color}"></fig-chit>
       </fig-fill-picker>`;
 
@@ -12940,6 +13358,19 @@ class FigColorTip extends HTMLElement {
     return "#D9D9D9";
   }
 
+  #extractAlpha(colorValue) {
+    if (!colorValue) return 1;
+    const v = String(colorValue).trim();
+    if (v.startsWith("#") && v.length === 9) {
+      return parseInt(v.slice(7, 9), 16) / 255;
+    }
+    const rgbaMatch = v.match(
+      /rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/i,
+    );
+    if (rgbaMatch) return parseFloat(rgbaMatch[1]);
+    return 1;
+  }
+
   #normalizeColor(colorValue) {
     if (!colorValue) return "#D9D9D9";
     const value = String(colorValue).trim();
@@ -12983,17 +13414,20 @@ class FigColorTip extends HTMLElement {
   }
 
   #syncFromAttributes() {
-    const color = this.#normalizeColor(this.getAttribute("value"));
-    if (this.getAttribute("value") !== color) {
+    const rawAttr = this.getAttribute("value");
+    const color = this.#normalizeColor(rawAttr);
+    const alpha = this.#extractAlpha(rawAttr);
+    if (rawAttr !== color && alpha >= 1) {
       this.setAttribute("value", color);
       return;
     }
 
     if (this.#fillPicker) {
-      this.#fillPicker.setAttribute(
-        "value",
-        JSON.stringify({ type: "solid", color }),
-      );
+      const pickerVal =
+        alpha < 1
+          ? { type: "solid", color, opacity: Math.round(alpha * 100) }
+          : { type: "solid", color };
+      this.#fillPicker.setAttribute("value", JSON.stringify(pickerVal));
       if (this.#alphaEnabled) {
         this.#fillPicker.removeAttribute("alpha");
       } else {
@@ -13170,7 +13604,15 @@ class FigChooser extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "choice-element", "drag", "overflow", "loop", "padding"];
+    return [
+      "value",
+      "disabled",
+      "choice-element",
+      "drag",
+      "overflow",
+      "loop",
+      "padding",
+    ];
   }
 
   get #overflowMode() {
@@ -13796,7 +14238,13 @@ class FigCanvasControl extends HTMLElement {
 
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) return;
-    if (name === "value" && !this.#isDragging && !this.#isSecondDragging && !this.#isRadiusDragging && !this.#isAngleDragging) {
+    if (
+      name === "value" &&
+      !this.#isDragging &&
+      !this.#isSecondDragging &&
+      !this.#isRadiusDragging &&
+      !this.#isAngleDragging
+    ) {
       this.#parseValue();
       if (this.#pointHandle) this.#syncPositions();
       else this.#render();
@@ -13817,11 +14265,14 @@ class FigCanvasControl extends HTMLElement {
     }
     if (name === "snapping" && this.#pointHandle) {
       this.#pointHandle.setAttribute("drag-snapping", newVal || "false");
-      if (this.#secondHandle) this.#secondHandle.setAttribute("drag-snapping", newVal || "false");
+      if (this.#secondHandle)
+        this.#secondHandle.setAttribute("drag-snapping", newVal || "false");
     }
     if (name === "name") {
-      if (this.#pointTooltip) this.#pointTooltip.setAttribute("text", this.#pointTipText);
-      if (this.#secondTooltip) this.#secondTooltip.setAttribute("text", this.#secondTipText);
+      if (this.#pointTooltip)
+        this.#pointTooltip.setAttribute("text", this.#pointTipText);
+      if (this.#secondTooltip)
+        this.#secondTooltip.setAttribute("text", this.#secondTipText);
     }
   }
 
@@ -13846,13 +14297,16 @@ class FigCanvasControl extends HTMLElement {
       if (typeof v.angle === "number") this.#angle = v.angle;
       if (typeof v.x2 === "number") this.#x2 = v.x2;
       if (typeof v.y2 === "number") this.#y2 = v.y2;
-    } catch { /* ignore */ }
+    } catch {
+      /* ignore */
+    }
   }
 
   get value() {
     const v = { x: this.#x, y: this.#y };
     if (this.#type === "color") {
-      const color = this.getAttribute("color") || this.#pointHandle?.getAttribute("color");
+      const color =
+        this.getAttribute("color") || this.#pointHandle?.getAttribute("color");
       if (color) v.color = color;
     }
     if (this.#hasRadius) {
@@ -14153,11 +14607,15 @@ class FigCanvasControl extends HTMLElement {
   }
 
   #emitInput() {
-    this.dispatchEvent(new CustomEvent("input", { bubbles: true, detail: this.value }));
+    this.dispatchEvent(
+      new CustomEvent("input", { bubbles: true, detail: this.value }),
+    );
   }
 
   #emitChange() {
-    this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: this.value }));
+    this.dispatchEvent(
+      new CustomEvent("change", { bubbles: true, detail: this.value }),
+    );
   }
 
   #syncValueAttribute() {
@@ -14189,7 +14647,9 @@ class FigCanvasControl extends HTMLElement {
       }
       this.#syncPositions();
       if (this.#hasSecondPoint) {
-        document.body.style.cursor = this.#resizeCursorSvg(this.#pointPointLineDeg());
+        document.body.style.cursor = this.#resizeCursorSvg(
+          this.#pointPointLineDeg(),
+        );
       }
       this.#emitInput();
     });
@@ -14205,14 +14665,17 @@ class FigCanvasControl extends HTMLElement {
       const py = e.detail?.py ?? this.#y / 100;
       this.#x = Math.round(Math.max(0, Math.min(100, px * 100)));
       this.#y = Math.round(Math.max(0, Math.min(100, py * 100)));
-      if (this.#pointTooltip && this.#type !== "color") this.#pointTooltip.removeAttribute("show");
+      if (this.#pointTooltip && this.#type !== "color")
+        this.#pointTooltip.removeAttribute("show");
       if (this.#hasSecondPoint) {
         document.body.style.cursor = this.#prevBodyCursor ?? "";
       }
       this.#syncPositions();
       this.#syncValueAttribute();
       this.#emitChange();
-      requestAnimationFrame(() => { this.#isDragging = false; });
+      requestAnimationFrame(() => {
+        this.#isDragging = false;
+      });
     });
 
     if (this.#angleHandle) {
@@ -14229,8 +14692,8 @@ class FigCanvasControl extends HTMLElement {
         const hy = e.detail?.y ?? 0;
         const hw = this.#angleHandle.offsetWidth / 2;
         const hh = this.#angleHandle.offsetHeight / 2;
-        const dx = (hx + hw) - cx;
-        const dy = (hy + hh) - cy;
+        const dx = hx + hw - cx;
+        const dy = hy + hh - cy;
         let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
         if (this.#shouldSnap(e.detail?.shiftKey)) {
           angle = Math.round(angle / 15) * 15;
@@ -14255,7 +14718,10 @@ class FigCanvasControl extends HTMLElement {
         }
 
         if (this.#angleTooltip) {
-          this.#angleTooltip.setAttribute("text", `Angle ${Math.round(this.#angle)}°`);
+          this.#angleTooltip.setAttribute(
+            "text",
+            `Angle ${Math.round(this.#angle)}°`,
+          );
           this.#angleTooltip.setAttribute("show", "true");
           this.#angleTooltip.showPopup?.();
         }
@@ -14270,7 +14736,9 @@ class FigCanvasControl extends HTMLElement {
         this.#syncPositions();
         this.#syncValueAttribute();
         this.#emitChange();
-        requestAnimationFrame(() => { this.#isAngleDragging = false; });
+        requestAnimationFrame(() => {
+          this.#isAngleDragging = false;
+        });
       });
 
       this.#angleHandle.addEventListener("hitareadown", (e) => {
@@ -14303,7 +14771,11 @@ class FigCanvasControl extends HTMLElement {
             angle = Math.round(angle / 15) * 15;
           }
           this.#angle = angle;
-          if (this.#angleTooltip) this.#angleTooltip.setAttribute("text", `Angle ${Math.round(angle)}°`);
+          if (this.#angleTooltip)
+            this.#angleTooltip.setAttribute(
+              "text",
+              `Angle ${Math.round(angle)}°`,
+            );
           this.#syncPositions();
           const curDeg = Math.round(angle);
           if (curDeg !== lastCursorDeg) {
@@ -14346,7 +14818,9 @@ class FigCanvasControl extends HTMLElement {
           this.#secondTooltip.showPopup?.();
         }
         this.#syncPositions();
-        document.body.style.cursor = this.#resizeCursorSvg(this.#pointPointLineDeg());
+        document.body.style.cursor = this.#resizeCursorSvg(
+          this.#pointPointLineDeg(),
+        );
         this.#emitInput();
       });
 
@@ -14357,7 +14831,9 @@ class FigCanvasControl extends HTMLElement {
         this.#syncPositions();
         this.#syncValueAttribute();
         this.#emitChange();
-        requestAnimationFrame(() => { this.#isSecondDragging = false; });
+        requestAnimationFrame(() => {
+          this.#isSecondDragging = false;
+        });
       });
 
       this.#setupPointPointHitArea(this.#pointHandle, true);
@@ -14421,7 +14897,9 @@ class FigCanvasControl extends HTMLElement {
           this.#y2 = newPctY;
         }
         this.#syncPositions();
-        const curDeg = Math.round(isFirst ? this.#pointPointLineDeg() + 180 : this.#pointPointLineDeg());
+        const curDeg = Math.round(
+          isFirst ? this.#pointPointLineDeg() + 180 : this.#pointPointLineDeg(),
+        );
         if (curDeg !== lastCursorDeg) {
           lastCursorDeg = curDeg;
           document.body.style.cursor = this.#rotateCursorSvg(curDeg);
@@ -14453,7 +14931,10 @@ class FigCanvasControl extends HTMLElement {
       const rect = container.getBoundingClientRect();
       const cx = (this.#x / 100) * rect.width;
       const cy = (this.#y / 100) * rect.height;
-      const deg = (Math.atan2(e.clientY - rect.top - cy, e.clientX - rect.left - cx) * 180) / Math.PI;
+      const deg =
+        (Math.atan2(e.clientY - rect.top - cy, e.clientX - rect.left - cx) *
+          180) /
+        Math.PI;
       circle.style.cursor = this.#resizeCursorSvg(deg);
     });
     const onDown = (e) => {
@@ -14475,7 +14956,10 @@ class FigCanvasControl extends HTMLElement {
       const rect0 = container.getBoundingClientRect();
       const cx0 = (this.#x / 100) * rect0.width;
       const cy0 = (this.#y / 100) * rect0.height;
-      const initDeg = (Math.atan2(e.clientY - rect0.top - cy0, e.clientX - rect0.left - cx0) * 180) / Math.PI;
+      const initDeg =
+        (Math.atan2(e.clientY - rect0.top - cy0, e.clientX - rect0.left - cx0) *
+          180) /
+        Math.PI;
       let lastCursorDeg = Math.round(initDeg);
       document.body.style.cursor = this.#resizeCursorSvg(lastCursorDeg);
 
@@ -14506,7 +14990,8 @@ class FigCanvasControl extends HTMLElement {
         } else {
           this.#radius = Math.max(0, dist);
         }
-        if (this.#radiusTooltip) this.#radiusTooltip.setAttribute("text", this.#formatRadius());
+        if (this.#radiusTooltip)
+          this.#radiusTooltip.setAttribute("text", this.#formatRadius());
         this.#syncPositions();
         this.#emitInput();
       };
@@ -14527,7 +15012,8 @@ class FigCanvasControl extends HTMLElement {
       window.addEventListener("pointerup", onUp);
     };
     circle.addEventListener("pointerdown", onDown);
-    this._radiusDragCleanup = () => circle.removeEventListener("pointerdown", onDown);
+    this._radiusDragCleanup = () =>
+      circle.removeEventListener("pointerdown", onDown);
   }
 
   #teardownRadiusDrag() {
@@ -14689,8 +15175,10 @@ class FigHandle extends HTMLElement {
     };
 
     const axes = this.#axes;
-    if (axes.x) this.style.left = `${Math.round(resolve(xToken, rect.width, hw))}px`;
-    if (axes.y) this.style.top = `${Math.round(resolve(yToken, rect.height, hh))}px`;
+    if (axes.x)
+      this.style.left = `${Math.round(resolve(xToken, rect.width, hw))}px`;
+    if (axes.y)
+      this.style.top = `${Math.round(resolve(yToken, rect.height, hh))}px`;
   }
 
   #syncValueAttribute() {
@@ -14707,16 +15195,25 @@ class FigHandle extends HTMLElement {
     const raw = this.getAttribute("hit-area");
     if (!raw) return null;
     const tokens = raw.trim().split(/\s+/);
-    let vPad = 0, hPad = 0, circle = false;
+    let vPad = 0,
+      hPad = 0,
+      circle = false;
     const nums = [];
     for (const t of tokens) {
-      if (t === "circle") { circle = true; continue; }
+      if (t === "circle") {
+        circle = true;
+        continue;
+      }
       const n = parseFloat(t);
       if (Number.isFinite(n)) nums.push(n);
     }
-    if (nums.length >= 2) { vPad = nums[0]; hPad = nums[1]; }
-    else if (nums.length === 1) { vPad = nums[0]; hPad = nums[0]; }
-    else return null;
+    if (nums.length >= 2) {
+      vPad = nums[0];
+      hPad = nums[1];
+    } else if (nums.length === 1) {
+      vPad = nums[0];
+      hPad = nums[0];
+    } else return null;
     return { vPad, hPad, circle };
   }
 
@@ -14737,7 +15234,10 @@ class FigHandle extends HTMLElement {
       this.prepend(el);
       this.#hitAreaEl = el;
     }
-    this.style.setProperty("--fig-handle-hit-area-size", String(parsed.hPad * 2));
+    this.style.setProperty(
+      "--fig-handle-hit-area-size",
+      String(parsed.hPad * 2),
+    );
     if (parsed.circle) {
       this.#hitAreaEl.style.borderRadius = "50%";
     } else {
@@ -14751,10 +15251,12 @@ class FigHandle extends HTMLElement {
     if (this.#hitAreaMode === "delegate") {
       e.preventDefault();
       e.stopPropagation();
-      this.dispatchEvent(new CustomEvent("hitareadown", {
-        bubbles: true,
-        detail: { originalEvent: e },
-      }));
+      this.dispatchEvent(
+        new CustomEvent("hitareadown", {
+          bubbles: true,
+          detail: { originalEvent: e },
+        }),
+      );
     } else {
       this.#onPointerDown(e);
     }
@@ -14774,7 +15276,10 @@ class FigHandle extends HTMLElement {
   disconnectedCallback() {
     this.#teardownDrag();
     this.#hideColorTip();
-    if (this.#hitAreaEl) { this.#hitAreaEl.remove(); this.#hitAreaEl = null; }
+    if (this.#hitAreaEl) {
+      this.#hitAreaEl.remove();
+      this.#hitAreaEl = null;
+    }
     this.removeEventListener("click", this.#handleSelect);
     document.removeEventListener("pointerdown", this.#handleDeselect);
     document.removeEventListener("keydown", this.#handleKeyDown);
@@ -14783,7 +15288,8 @@ class FigHandle extends HTMLElement {
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color" && !this.#isDragging) this.#showColorTip();
+    if (this.getAttribute("type") === "color" && !this.#isDragging)
+      this.#showColorTip();
   }
 
   deselect() {
@@ -14886,8 +15392,8 @@ class FigHandle extends HTMLElement {
       lastRect = rect;
       const currentLeft = parseFloat(this.style.left) || 0;
       const currentTop = parseFloat(this.style.top) || 0;
-      const rawX = (clientX - offsetX) - rect.left - handleW / 2;
-      const rawY = (clientY - offsetY) - rect.top - handleH / 2;
+      const rawX = clientX - offsetX - rect.left - handleW / 2;
+      const rawY = clientY - offsetY - rect.top - handleH / 2;
 
       const clampedX = Math.max(
         -handleW / 2,
@@ -15033,16 +15539,32 @@ class FigHandle extends HTMLElement {
   #handleColorTipInput = (e) => {
     e.stopPropagation();
     if (e.detail?.color) {
-      this.setAttribute("color", this.#colorWithOpacity(e.detail.color, e.detail.opacity));
-      this.dispatchEvent(new CustomEvent("input", { bubbles: true, detail: { color: e.detail.color, opacity: e.detail.opacity } }));
+      this.setAttribute(
+        "color",
+        this.#colorWithOpacity(e.detail.color, e.detail.opacity),
+      );
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          bubbles: true,
+          detail: { color: e.detail.color, opacity: e.detail.opacity },
+        }),
+      );
     }
   };
 
   #handleColorTipChange = (e) => {
     e.stopPropagation();
     if (e.detail?.color) {
-      this.setAttribute("color", this.#colorWithOpacity(e.detail.color, e.detail.opacity));
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: { color: e.detail.color, opacity: e.detail.opacity } }));
+      this.setAttribute(
+        "color",
+        this.#colorWithOpacity(e.detail.color, e.detail.opacity),
+      );
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          detail: { color: e.detail.color, opacity: e.detail.opacity },
+        }),
+      );
     }
   };