@rogieking/figui3 3.21.2 → 3.23.0

package/fig.js

@@ -947,10 +947,161 @@ 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);
 
+/* Text Truncation */
+class FigTruncate extends HTMLElement {
+  static observedAttributes = ["position", "tail"];
+
+  #originalText = null;
+  #boundEnter = null;
+  #boundLeave = null;
+
+  connectedCallback() {
+    this.#originalText = this.textContent;
+    requestAnimationFrame(() => {
+      this.#render();
+      this.#setupTooltip();
+    });
+  }
+
+  disconnectedCallback() {
+    this.#teardownTooltip();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (this.#originalText === null) return;
+    this.#render();
+  }
+
+  #render() {
+    const position = this.getAttribute("position") || "right";
+    const text = this.#originalText || "";
+    if (position === "middle") {
+      const tail = this.getAttribute("tail");
+      let splitIndex;
+      if (tail) {
+        const idx = text.lastIndexOf(tail);
+        splitIndex = idx > 0 ? idx : Math.ceil(text.length / 2);
+      } else {
+        splitIndex = Math.ceil(text.length / 2);
+      }
+      this.innerHTML = "";
+      const startSpan = document.createElement("span");
+      startSpan.className = "start";
+      startSpan.textContent = text.slice(0, splitIndex);
+      const endSpan = document.createElement("span");
+      endSpan.className = "end";
+      endSpan.textContent = text.slice(splitIndex);
+      this.appendChild(startSpan);
+      this.appendChild(endSpan);
+    } else {
+      this.textContent = text;
+    }
+  }
+
+  #setupTooltip() {
+    if (
+      !this.hasAttribute("tooltip") ||
+      this.getAttribute("tooltip") === "false"
+    )
+      return;
+    this.#boundEnter = () => {
+      if (this.scrollWidth <= this.clientWidth) return;
+      FigTooltip.show(this, this.#originalText);
+    };
+    this.#boundLeave = () => {
+      FigTooltip.hide(this);
+    };
+    this.addEventListener("pointerenter", this.#boundEnter);
+    this.addEventListener("pointerleave", this.#boundLeave);
+  }
+
+  #teardownTooltip() {
+    if (this.#boundEnter)
+      this.removeEventListener("pointerenter", this.#boundEnter);
+    if (this.#boundLeave)
+      this.removeEventListener("pointerleave", this.#boundLeave);
+    FigTooltip.hide(this);
+  }
+}
+customElements.define("fig-truncate", FigTruncate);
+
 /* Dialog */
 /**
  * A custom dialog element for modal and non-modal dialogs.
@@ -3533,8 +3684,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 +4178,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 +4368,10 @@ customElements.define("fig-avatar", FigAvatar);
 
 /* Form Field */
 class FigField extends HTMLElement {
+  #toggleable = false;
+  #chevron = null;
+  #boundToggle = null;
+
   constructor() {
     super();
   }
@@ -4223,15 +4386,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 +4456,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 +4802,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 +5025,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 +5114,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 +5315,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 +5346,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 +5379,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 +5409,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 +5425,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 +5443,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 +5615,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 +6183,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 open() {
+    return this.hasAttribute("open") && this.getAttribute("open") !== "false";
   }
 
-  get #expanded() {
-    return this.hasAttribute("expanded") && this.getAttribute("expanded") !== "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 +6222,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 +6253,7 @@ class FigInputPalette extends HTMLElement {
         break;
       case "min":
       case "max":
-      case "expanded":
+      case "open":
       case "add":
         this.#render();
         break;
@@ -5985,12 +6275,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 +6314,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 +6340,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 +6354,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 +6372,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 +6405,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 +6434,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 +6457,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 +6482,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 +6506,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 +6642,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%`);
@@ -6582,10 +6912,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();
       }
@@ -6724,7 +7056,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 });
@@ -6743,19 +7078,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,
+          }),
+        );
       }
     });
 
@@ -6770,7 +7109,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();
         }
@@ -6785,7 +7127,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++) {
@@ -6825,7 +7169,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();
         }
@@ -7578,13 +7925,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) {
@@ -7594,8 +7941,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) {
@@ -7622,8 +7975,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();
@@ -7645,9 +8004,7 @@ class FigChit extends HTMLElement {
   }
 }
 customElements.define("fig-chit", FigChit);
-class FigSwatch extends FigChit{
-
-}
+class FigSwatch extends FigChit {}
 customElements.define("fig-swatch", FigSwatch);
 
 /* Upload */
@@ -7905,6 +8262,220 @@ class FigImage extends HTMLElement {
 }
 customElements.define("fig-image", FigImage);
 
+/* File Upload Input */
+class FigInputFile extends HTMLElement {
+  static observedAttributes = ["accepts", "label", "disabled", "multiple"];
+
+  #fileInput = null;
+  #filenameEl = null;
+  #clearBtn = null;
+  #tooltipEl = null;
+  #uploadBtn = null;
+  #files = null;
+
+  get files() {
+    return this.#files;
+  }
+
+  get value() {
+    if (!this.#files || this.#files.length === 0) return "";
+    if (this.#files.length === 1) return this.#files[0].name;
+    return `${this.#files.length} files`;
+  }
+
+  connectedCallback() {
+    this.#render();
+    this.addEventListener("dragover", this.#onDragOver);
+    this.addEventListener("dragleave", this.#onDragLeave);
+    this.addEventListener("drop", this.#onDrop);
+  }
+
+  disconnectedCallback() {
+    this.#fileInput?.removeEventListener("change", this.#onFileChange);
+    this.#clearBtn?.removeEventListener("click", this.#onClear);
+    this.removeEventListener("dragover", this.#onDragOver);
+    this.removeEventListener("dragleave", this.#onDragLeave);
+    this.removeEventListener("drop", this.#onDrop);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#render();
+  }
+
+  clear() {
+    this.#files = null;
+    if (this.#fileInput) this.#fileInput.value = "";
+    this.#render();
+    this.#emitEvents();
+  }
+
+  #emitEvents() {
+    const detail = { files: this.#files };
+    this.dispatchEvent(new CustomEvent("input", { detail, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
+  }
+
+  #onFileChange = () => {
+    if (this.#fileInput.files.length > 0) {
+      this.#files = this.#fileInput.files;
+      this.#render();
+      this.#emitEvents();
+    }
+  };
+
+  #onClear = (e) => {
+    e.stopPropagation();
+    this.clear();
+  };
+
+  #onDragOver = (e) => {
+    e.preventDefault();
+    this.setAttribute("dragover", "");
+  };
+
+  #onDragLeave = () => {
+    this.removeAttribute("dragover");
+  };
+
+  #onDrop = (e) => {
+    e.preventDefault();
+    this.removeAttribute("dragover");
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    )
+      return;
+
+    const accepts = this.getAttribute("accepts");
+    let dropped = Array.from(e.dataTransfer.files);
+    if (accepts) {
+      const allowed = accepts.split(",").map((s) => s.trim().toLowerCase());
+      dropped = dropped.filter((file) => {
+        const ext = "." + file.name.split(".").pop().toLowerCase();
+        const mime = file.type.toLowerCase();
+        return allowed.some(
+          (a) =>
+            a === ext ||
+            a === mime ||
+            (a.endsWith("/*") && mime.startsWith(a.slice(0, -1))),
+        );
+      });
+    }
+    if (!this.hasAttribute("multiple")) {
+      dropped = dropped.slice(0, 1);
+    }
+    if (dropped.length === 0) return;
+
+    const dt = new DataTransfer();
+    dropped.forEach((f) => dt.items.add(f));
+    this.#files = dt.files;
+    if (this.#fileInput) {
+      this.#fileInput.files = dt.files;
+    }
+    this.#render();
+    this.#emitEvents();
+  };
+
+  #render() {
+    const accepts = this.getAttribute("accepts") || "";
+    const label = this.getAttribute("label") || "Upload";
+    const disabled =
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false";
+    const multiple = this.hasAttribute("multiple");
+    const hasFile = this.#files && this.#files.length > 0;
+
+    this.innerHTML = "";
+
+    if (hasFile) {
+      const tooltipText = accepts
+        ? `Accepts ${accepts
+            .split(",")
+            .map((s) => s.trim())
+            .join(", ")}`
+        : "";
+
+      this.#uploadBtn = document.createElement("fig-button");
+      this.#uploadBtn.setAttribute("variant", "input");
+      this.#uploadBtn.setAttribute("type", "upload");
+      this.#uploadBtn.className = "fig-input-file-filename";
+      if (disabled) this.#uploadBtn.setAttribute("disabled", "");
+      const truncEl = document.createElement("fig-truncate");
+      truncEl.setAttribute("position", "middle");
+      truncEl.setAttribute("tooltip", "");
+      const filename = this.value;
+      const dotIdx = filename.lastIndexOf(".");
+      if (dotIdx > 0) truncEl.setAttribute("tail", filename.slice(dotIdx));
+      truncEl.textContent = filename;
+      this.#uploadBtn.appendChild(truncEl);
+
+      this.#fileInput = document.createElement("input");
+      this.#fileInput.type = "file";
+      this.#fileInput.title = "";
+      if (accepts) this.#fileInput.setAttribute("accept", accepts);
+      if (multiple) this.#fileInput.setAttribute("multiple", "");
+      this.#fileInput.addEventListener("change", this.#onFileChange);
+      this.#uploadBtn.appendChild(this.#fileInput);
+
+      if (tooltipText) {
+        this.#tooltipEl = document.createElement("fig-tooltip");
+        this.#tooltipEl.setAttribute("text", tooltipText);
+        this.#tooltipEl.appendChild(this.#uploadBtn);
+        this.appendChild(this.#tooltipEl);
+      } else {
+        this.appendChild(this.#uploadBtn);
+      }
+
+      const clearTooltip = document.createElement("fig-tooltip");
+      clearTooltip.setAttribute("text", "Remove");
+      this.#clearBtn = document.createElement("fig-button");
+      this.#clearBtn.setAttribute("variant", "ghost");
+      this.#clearBtn.setAttribute("icon", "true");
+      this.#clearBtn.className = "fig-input-file-clear";
+      if (disabled) this.#clearBtn.setAttribute("disabled", "");
+      this.#clearBtn.innerHTML = `<span class="fig-mask-icon" style="--icon: var(--icon-minus);"></span>`;
+      this.#clearBtn.addEventListener("click", this.#onClear);
+      clearTooltip.appendChild(this.#clearBtn);
+      this.appendChild(clearTooltip);
+    } else {
+      const tooltipText = accepts
+        ? `Accepts ${accepts
+            .split(",")
+            .map((s) => s.trim())
+            .join(", ")}`
+        : "";
+
+      if (tooltipText) {
+        this.#tooltipEl = document.createElement("fig-tooltip");
+        this.#tooltipEl.setAttribute("text", tooltipText);
+      }
+
+      this.#uploadBtn = document.createElement("fig-button");
+      this.#uploadBtn.setAttribute("variant", "input");
+      this.#uploadBtn.setAttribute("type", "upload");
+      this.#uploadBtn.textContent = label;
+      if (disabled) this.#uploadBtn.setAttribute("disabled", "");
+
+      this.#fileInput = document.createElement("input");
+      this.#fileInput.type = "file";
+      this.#fileInput.title = "";
+      if (accepts) this.#fileInput.setAttribute("accept", accepts);
+      if (multiple) this.#fileInput.setAttribute("multiple", "");
+      this.#fileInput.addEventListener("change", this.#onFileChange);
+      this.#uploadBtn.appendChild(this.#fileInput);
+
+      if (this.#tooltipEl) {
+        this.#tooltipEl.appendChild(this.#uploadBtn);
+        this.appendChild(this.#tooltipEl);
+      } else {
+        this.appendChild(this.#uploadBtn);
+      }
+    }
+  }
+}
+customElements.define("fig-input-file", FigInputFile);
+
 /**
  * A bezier / spring easing curve editor with draggable control points.
  * @attr {string} value - Bezier: "0.42, 0, 0.58, 1" or Spring: "spring(200, 15, 1)"
@@ -8828,7 +9399,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");
@@ -8846,8 +9421,6 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
-  
-
   #syncTransformOrigin(value) {
     if (!value || !value.trim()) {
       this.style.removeProperty("--transform-origin");
@@ -10682,6 +11255,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.
@@ -11114,10 +11798,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 = {
@@ -11213,6 +11902,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"
@@ -11875,7 +12566,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();
@@ -11948,7 +12641,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),
+        }),
       );
     }
 
@@ -11977,7 +12673,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");
         }
       });
@@ -12910,9 +13607,14 @@ class FigColorTip extends HTMLElement {
     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 });
+    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='${pickerValue}'>
         <fig-chit background="${color}"></fig-chit>
@@ -12955,7 +13657,9 @@ class FigColorTip extends HTMLElement {
     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);
+    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;
   }
@@ -13012,9 +13716,10 @@ class FigColorTip extends HTMLElement {
     }
 
     if (this.#fillPicker) {
-      const pickerVal = alpha < 1
-        ? { type: "solid", color, opacity: Math.round(alpha * 100) }
-        : { 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");
@@ -13192,7 +13897,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() {
@@ -13818,7 +14531,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();
@@ -13839,11 +14558,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);
     }
   }
 
@@ -13868,13 +14590,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) {
@@ -14175,11 +14900,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() {
@@ -14211,7 +14940,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();
     });
@@ -14227,14 +14958,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) {
@@ -14251,8 +14985,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;
@@ -14277,7 +15011,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?.();
         }
@@ -14292,7 +15029,9 @@ class FigCanvasControl extends HTMLElement {
         this.#syncPositions();
         this.#syncValueAttribute();
         this.#emitChange();
-        requestAnimationFrame(() => { this.#isAngleDragging = false; });
+        requestAnimationFrame(() => {
+          this.#isAngleDragging = false;
+        });
       });
 
       this.#angleHandle.addEventListener("hitareadown", (e) => {
@@ -14325,7 +15064,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) {
@@ -14368,7 +15111,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();
       });
 
@@ -14379,7 +15124,9 @@ class FigCanvasControl extends HTMLElement {
         this.#syncPositions();
         this.#syncValueAttribute();
         this.#emitChange();
-        requestAnimationFrame(() => { this.#isSecondDragging = false; });
+        requestAnimationFrame(() => {
+          this.#isSecondDragging = false;
+        });
       });
 
       this.#setupPointPointHitArea(this.#pointHandle, true);
@@ -14443,7 +15190,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);
@@ -14475,7 +15224,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) => {
@@ -14497,7 +15249,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);
 
@@ -14528,7 +15283,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();
       };
@@ -14549,7 +15305,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() {
@@ -14711,8 +15468,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() {
@@ -14729,16 +15488,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 };
   }
 
@@ -14759,7 +15527,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 {
@@ -14773,10 +15544,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);
     }
@@ -14796,7 +15569,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);
@@ -14805,7 +15581,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() {
@@ -14908,8 +15685,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,
@@ -15055,16 +15832,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 },
+        }),
+      );
     }
   };