@rogieking/figui3 3.15.0 → 3.17.0

package/fig.js

@@ -75,24 +75,31 @@ function figUniqueId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
 
-/**
- * Gets the highest z-index currently in use on the page
- * @returns {number} The highest z-index found, minimum of 1000
- */
+let _figZCounter = 10000;
 function figGetHighestZIndex() {
-  let highest = 1000; // Baseline minimum
+  return _figZCounter++;
+}
 
-  // Check all elements with inline z-index or computed z-index
-  const elements = document.querySelectorAll("*");
-  for (const el of elements) {
-    const zIndex = parseInt(getComputedStyle(el).zIndex, 10);
-    if (!isNaN(zIndex) && zIndex > highest) {
-      highest = zIndex;
-    }
+function figSyncCssVar(el, prop, value) {
+  if (value && value.trim()) {
+    el.style.setProperty(prop, value.trim());
+  } else {
+    el.style.removeProperty(prop);
   }
+}
 
-  return highest;
+let _figSharedCanvas = null;
+let _figSharedCtx = null;
+function figGetSharedCanvas(width = 1, height = 1) {
+  if (!_figSharedCanvas) {
+    _figSharedCanvas = document.createElement("canvas");
+    _figSharedCtx = _figSharedCanvas.getContext("2d");
+  }
+  if (_figSharedCanvas.width !== width) _figSharedCanvas.width = width;
+  if (_figSharedCanvas.height !== height) _figSharedCanvas.height = height;
+  return { canvas: _figSharedCanvas, ctx: _figSharedCtx };
 }
+
 /**
  * Checks if the browser supports the native popover API
  * @returns {boolean} True if popover is supported
@@ -253,6 +260,7 @@ class FigDropdown extends HTMLElement {
   set label(value) {
     this.#label = value;
   }
+  #boundSlotChange;
   constructor() {
     super();
     this.select = document.createElement("select");
@@ -260,6 +268,7 @@ class FigDropdown extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.#boundHandleSelectInput = this.#handleSelectInput.bind(this);
     this.#boundHandleSelectChange = this.#handleSelectChange.bind(this);
+    this.#boundSlotChange = this.slotChange.bind(this);
   }
 
   #supportsSelectedContent() {
@@ -342,7 +351,7 @@ class FigDropdown extends HTMLElement {
     this.appendChild(this.select);
     this.shadowRoot.appendChild(this.optionsSlot);
 
-    this.optionsSlot.addEventListener("slotchange", this.slotChange.bind(this));
+    this.optionsSlot.addEventListener("slotchange", this.#boundSlotChange);
 
     this.#addEventListeners();
   }
@@ -478,6 +487,12 @@ class FigDropdown extends HTMLElement {
       this.select.setAttribute("aria-label", this.#label);
     }
   }
+
+  disconnectedCallback() {
+    this.optionsSlot.removeEventListener("slotchange", this.#boundSlotChange);
+    this.select.removeEventListener("input", this.#boundHandleSelectInput);
+    this.select.removeEventListener("change", this.#boundHandleSelectChange);
+  }
 }
 
 customElements.define("fig-dropdown", FigDropdown);
@@ -496,6 +511,12 @@ class FigTooltip extends HTMLElement {
 
   #boundHideOnChromeOpen;
   #boundHidePopupOutsideClick;
+  #boundShowDelayedPopup;
+  #boundHandlePointerLeave;
+  #boundHandleTouchStart;
+  #boundHandleTouchMove;
+  #boundHandleTouchEnd;
+  #boundHandleTouchCancel;
   #touchTimeout;
   #isTouching = false;
   #observer = null;
@@ -506,9 +527,14 @@ class FigTooltip extends HTMLElement {
     let delay = parseInt(this.getAttribute("delay"));
     this.delay = !isNaN(delay) ? delay : 500;
 
-    // Bind methods that will be used as event listeners
     this.#boundHideOnChromeOpen = this.#hideOnChromeOpen.bind(this);
     this.#boundHidePopupOutsideClick = this.hidePopupOutsideClick.bind(this);
+    this.#boundShowDelayedPopup = this.showDelayedPopup.bind(this);
+    this.#boundHandlePointerLeave = this.#handlePointerLeave.bind(this);
+    this.#boundHandleTouchStart = this.#handleTouchStart.bind(this);
+    this.#boundHandleTouchMove = this.#handleTouchMove.bind(this);
+    this.#boundHandleTouchEnd = this.#handleTouchEnd.bind(this);
+    this.#boundHandleTouchCancel = this.#handleTouchCancel.bind(this);
   }
   connectedCallback() {
     this.setup();
@@ -517,16 +543,13 @@ class FigTooltip extends HTMLElement {
 
   disconnectedCallback() {
     this.destroy();
-    // Remove global listeners
     document.removeEventListener(
       "mousedown",
       this.#boundHideOnChromeOpen,
       true,
     );
-    // Disconnect mutation observer
     this.#stopObserving();
 
-    // Remove click outside listener for click action
     if (this.action === "click") {
       document.body.removeEventListener(
         "click",
@@ -534,15 +557,17 @@ class FigTooltip extends HTMLElement {
       );
     }
 
-    // Clean up touch-related timers and listeners
     clearTimeout(this.#touchTimeout);
     if (this.action === "hover") {
-      this.removeEventListener("touchstart", this.#handleTouchStart);
-      this.removeEventListener("touchmove", this.#handleTouchMove);
-      this.removeEventListener("touchend", this.#handleTouchEnd);
-      this.removeEventListener("touchcancel", this.#handleTouchCancel);
+      this.removeEventListener("pointerenter", this.#boundShowDelayedPopup);
+      this.removeEventListener("pointerleave", this.#boundHandlePointerLeave);
+      this.removeEventListener("touchstart", this.#boundHandleTouchStart);
+      this.removeEventListener("touchmove", this.#boundHandleTouchMove);
+      this.removeEventListener("touchend", this.#boundHandleTouchEnd);
+      this.removeEventListener("touchcancel", this.#boundHandleTouchCancel);
     } else if (this.action === "click") {
-      this.removeEventListener("touchstart", this.showDelayedPopup);
+      this.removeEventListener("click", this.#boundShowDelayedPopup);
+      this.removeEventListener("touchstart", this.#boundShowDelayedPopup);
     }
   }
 
@@ -613,36 +638,29 @@ class FigTooltip extends HTMLElement {
     if (this.action === "manual") return;
     if (this.action === "hover") {
       if (!this.isTouchDevice()) {
-        this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
-        this.addEventListener(
-          "pointerleave",
-          this.#handlePointerLeave.bind(this),
-        );
+        this.addEventListener("pointerenter", this.#boundShowDelayedPopup);
+        this.addEventListener("pointerleave", this.#boundHandlePointerLeave);
       }
-      // Touch support for mobile hover simulation
-      this.addEventListener("touchstart", this.#handleTouchStart.bind(this), {
+      this.addEventListener("touchstart", this.#boundHandleTouchStart, {
         passive: true,
       });
-      this.addEventListener("touchmove", this.#handleTouchMove.bind(this), {
+      this.addEventListener("touchmove", this.#boundHandleTouchMove, {
         passive: true,
       });
-      this.addEventListener("touchend", this.#handleTouchEnd.bind(this), {
+      this.addEventListener("touchend", this.#boundHandleTouchEnd, {
         passive: true,
       });
-      this.addEventListener("touchcancel", this.#handleTouchCancel.bind(this), {
+      this.addEventListener("touchcancel", this.#boundHandleTouchCancel, {
         passive: true,
       });
     } else if (this.action === "click") {
-      this.addEventListener("click", this.showDelayedPopup.bind(this));
+      this.addEventListener("click", this.#boundShowDelayedPopup);
       document.body.addEventListener("click", this.#boundHidePopupOutsideClick);
-
-      // Touch support for better mobile responsiveness
-      this.addEventListener("touchstart", this.showDelayedPopup.bind(this), {
+      this.addEventListener("touchstart", this.#boundShowDelayedPopup, {
         passive: true,
       });
     }
 
-    // Add listener for chrome interactions
     document.addEventListener("mousedown", this.#boundHideOnChromeOpen, true);
   }
 
@@ -934,6 +952,7 @@ class FigDialog extends HTMLDialogElement {
   #boundPointerDown;
   #boundPointerMove;
   #boundPointerUp;
+  #boundClose;
   #offset = 16; // 1rem in pixels
   #positionInitialized = false;
   #dragThreshold = 3; // pixels before drag starts
@@ -943,6 +962,7 @@ class FigDialog extends HTMLDialogElement {
     this.#boundPointerDown = this.#handlePointerDown.bind(this);
     this.#boundPointerMove = this.#handlePointerMove.bind(this);
     this.#boundPointerUp = this.#handlePointerUp.bind(this);
+    this.#boundClose = this.close.bind(this);
   }
 
   connectedCallback() {
@@ -962,12 +982,15 @@ class FigDialog extends HTMLDialogElement {
 
   disconnectedCallback() {
     this.#removeDragListeners();
+    this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
+      button.removeEventListener("click", this.#boundClose);
+    });
   }
 
   #addCloseListeners() {
     this.querySelectorAll("fig-button[close-dialog]").forEach((button) => {
-      button.removeEventListener("click", this.close);
-      button.addEventListener("click", this.close.bind(this));
+      button.removeEventListener("click", this.#boundClose);
+      button.addEventListener("click", this.#boundClose);
     });
   }
 
@@ -2242,16 +2265,18 @@ figDefineCustomizedBuiltIn("fig-popup", FigPopup, { extends: "dialog" });
  */
 class FigTab extends HTMLElement {
   #selected;
+  #boundHandleClick;
   constructor() {
     super();
     this.content = null;
     this.#selected = false;
+    this.#boundHandleClick = this.handleClick.bind(this);
   }
   connectedCallback() {
     this.setAttribute("label", this.innerText);
     this.setAttribute("role", "tab");
     this.setAttribute("tabindex", "0");
-    this.addEventListener("click", this.handleClick.bind(this));
+    this.addEventListener("click", this.#boundHandleClick);
 
     requestAnimationFrame(() => {
       if (typeof this.getAttribute("content") === "string") {
@@ -2276,7 +2301,7 @@ class FigTab extends HTMLElement {
     this.setAttribute("selected", value ? "true" : "false");
   }
   disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("click", this.#boundHandleClick);
   }
   handleClick() {
     this.selected = true;
@@ -2305,8 +2330,12 @@ customElements.define("fig-tab", FigTab);
  * @attr {string} name - Identifier for the tabs group
  */
 class FigTabs extends HTMLElement {
+  #boundHandleClick;
+  #boundHandleKeyDown;
   constructor() {
     super();
+    this.#boundHandleClick = this.handleClick.bind(this);
+    this.#boundHandleKeyDown = this.#handleKeyDown.bind(this);
   }
 
   static get observedAttributes() {
@@ -2316,8 +2345,8 @@ class FigTabs extends HTMLElement {
   connectedCallback() {
     this.name = this.getAttribute("name") || "tabs";
     this.setAttribute("role", "tablist");
-    this.addEventListener("click", this.handleClick.bind(this));
-    this.addEventListener("keydown", this.#handleKeyDown.bind(this));
+    this.addEventListener("click", this.#boundHandleClick);
+    this.addEventListener("keydown", this.#boundHandleKeyDown);
     requestAnimationFrame(() => {
       const value = this.getAttribute("value");
       if (value) {
@@ -2345,8 +2374,8 @@ class FigTabs extends HTMLElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
-    this.removeEventListener("keydown", this.#handleKeyDown);
+    this.removeEventListener("click", this.#boundHandleClick);
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
   }
 
   #handleKeyDown(event) {
@@ -2446,14 +2475,16 @@ customElements.define("fig-tabs", FigTabs);
 class FigSegment extends HTMLElement {
   #value;
   #selected;
+  #boundHandleClick;
   constructor() {
     super();
+    this.#boundHandleClick = this.handleClick.bind(this);
   }
   connectedCallback() {
-    this.addEventListener("click", this.handleClick.bind(this));
+    this.addEventListener("click", this.#boundHandleClick);
   }
   disconnectedCallback() {
-    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("click", this.#boundHandleClick);
   }
   handleClick() {
     const parentControl = this.closest("fig-segmented-control");
@@ -4519,6 +4550,8 @@ class FigInputColor extends HTMLElement {
     const hidePicker = this.picker === "false";
     const showAlpha = this.getAttribute("alpha") === "true";
     const fpAttrs = this.#buildFillPickerAttrs();
+    const disabled = this.#disabled;
+    const disabledAttr = disabled ? " disabled" : "";
 
     let html = ``;
     const showText = this.getAttribute("text") === "true";
@@ -4526,7 +4559,7 @@ class FigInputColor extends HTMLElement {
       let label = `<fig-input-text 
         type="text"
         placeholder="000000"
-        value="${this.hexOpaque.slice(1).toUpperCase()}">
+        value="${this.hexOpaque.slice(1).toUpperCase()}"${disabledAttr}>
       </fig-input-text>`;
       if (showAlpha) {
         label += `<fig-tooltip text="Opacity">
@@ -4535,7 +4568,7 @@ class FigInputColor extends HTMLElement {
                         min="0"
                         max="100"
                         value="${this.#alphaPercent}"
-                        units="%">
+                        units="%"${disabledAttr}>
                     </fig-input-number>
                 </fig-tooltip>`;
       }
@@ -4547,8 +4580,8 @@ class FigInputColor extends HTMLElement {
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.#alphaPercent
-            }}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
+            }}'${disabledAttr}></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
       }
 
       html = `<div class="input-combo">
@@ -4564,8 +4597,8 @@ class FigInputColor extends HTMLElement {
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.#alphaPercent
-            }}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
+            }}'${disabledAttr}></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"${disabledAttr}></fig-chit>`;
       }
     }
     this.innerHTML = html;
@@ -4759,7 +4792,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental", "alpha", "text"];
+    return ["value", "style", "mode", "picker", "experimental", "alpha", "text", "disabled"];
   }
 
   get mode() {
@@ -4813,6 +4846,26 @@ class FigInputColor extends HTMLElement {
       case "text":
         if (this.isConnected) this.#buildUI();
         break;
+      case "disabled":
+        this.#syncDisabled();
+        break;
+    }
+  }
+
+  get #disabled() {
+    return this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+  }
+
+  #syncDisabled() {
+    const disabled = this.#disabled;
+    for (const child of [this.#swatch, this.#textInput, this.#alphaInput]) {
+      if (!child) continue;
+      if (disabled) child.setAttribute("disabled", "");
+      else child.removeAttribute("disabled");
+    }
+    if (this.#fillPicker) {
+      if (disabled) this.#fillPicker.setAttribute("disabled", "");
+      else this.#fillPicker.removeAttribute("disabled");
     }
   }
 
@@ -5062,6 +5115,12 @@ class FigInputFill extends HTMLElement {
     this.#render();
   }
 
+  disconnectedCallback() {
+    this.#fillPicker = null;
+    this.#opacityInput = null;
+    this.#hexInput = null;
+  }
+
   #parseValue() {
     const valueAttr = this.getAttribute("value");
     if (!valueAttr) return;
@@ -5132,6 +5191,15 @@ class FigInputFill extends HTMLElement {
       .join(" ");
   }
 
+  #syncDisabled() {
+    const disabled = this.hasAttribute("disabled");
+    for (const child of [this.#fillPicker, this.#opacityInput, this.#hexInput]) {
+      if (!child) continue;
+      if (disabled) child.setAttribute("disabled", "");
+      else child.removeAttribute("disabled");
+    }
+  }
+
   #render() {
     const disabled = this.hasAttribute("disabled");
     const fillPickerValue = JSON.stringify(this.value);
@@ -5664,10 +5732,7 @@ class FigInputFill extends HTMLElement {
         }
         break;
       case "disabled":
-        // Re-render to update disabled state
-        if (this.#fillPicker) {
-          this.#render();
-        }
+        this.#syncDisabled();
         break;
       case "mode":
       case "experimental":
@@ -5698,17 +5763,22 @@ customElements.define("fig-input-fill", FigInputFill);
  */
 class FigInputPalette extends HTMLElement {
   #colors = [];
-  #pickers = [];
+  #inlinePickers = [];
+  #expandedPickers = [];
   #renderRAF = null;
 
   static get observedAttributes() {
-    return ["value", "disabled", "min", "max", "expanded"];
+    return ["value", "disabled", "min", "max", "expanded", "add"];
   }
 
   get #expanded() {
     return this.hasAttribute("expanded") && this.getAttribute("expanded") !== "false";
   }
 
+  get #showAdd() {
+    return !this.hasAttribute("add") || this.getAttribute("add") !== "false";
+  }
+
   get #min() {
     const v = parseInt(this.getAttribute("min"));
     return isNaN(v) ? 2 : v;
@@ -5733,7 +5803,8 @@ class FigInputPalette extends HTMLElement {
       cancelAnimationFrame(this.#renderRAF);
       this.#renderRAF = null;
     }
-    this.#pickers = [];
+    this.#inlinePickers = [];
+    this.#expandedPickers = [];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -5750,6 +5821,7 @@ class FigInputPalette extends HTMLElement {
       case "min":
       case "max":
       case "expanded":
+      case "add":
         this.#render();
         break;
     }
@@ -5826,32 +5898,50 @@ class FigInputPalette extends HTMLElement {
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
 
     this.innerHTML = "";
-    this.#pickers = [];
+    this.#inlinePickers = [];
+    this.#expandedPickers = [];
+
+    const inlineWrap = document.createElement("div");
+    inlineWrap.className = "palette-colors-inline";
 
     const wrap = document.createElement("div");
     wrap.className = "palette-colors";
     this.#colors.forEach((entry, i) => {
-      wrap.appendChild(this.#createPicker(entry, i, disabled));
+      wrap.appendChild(this.#createPicker(entry, i, disabled, { inline: true }));
     });
-    this.appendChild(wrap);
+    inlineWrap.appendChild(wrap);
+
+    if (this.#showAdd) this.#createAddButton(disabled, inlineWrap);
+    this.appendChild(inlineWrap);
 
-    this.#createAddButton(disabled);
+    const expandedWrap = document.createElement("div");
+    expandedWrap.className = "palette-colors-expanded";
+    this.#colors.forEach((entry, i) => {
+      expandedWrap.appendChild(this.#createPicker(entry, i, disabled));
+    });
+    this.appendChild(expandedWrap);
   }
 
-  #createPicker(entry, index, disabled) {
+  #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 expanded = this.#expanded;
     const ic = document.createElement("fig-input-color");
     ic.setAttribute("value", hexAlpha);
-    ic.setAttribute("text", expanded ? "true" : "false");
     ic.setAttribute("picker", "figma");
-    ic.setAttribute("alpha", "true");
     ic.setAttribute("picker-anchor", "self");
-    if (expanded) ic.setAttribute("full", "");
+    if (inline) {
+      ic.setAttribute("text", "false");
+      ic.setAttribute("alpha", "true");
+    } else {
+      ic.setAttribute("text", "true");
+      ic.setAttribute("alpha", "true");
+      ic.setAttribute("full", "");
+    }
     if (disabled) ic.setAttribute("disabled", "");
 
+    const siblingList = inline ? this.#expandedPickers : this.#inlinePickers;
+
     const updateFromPicker = (e) => {
       e.stopPropagation();
       const el = e.currentTarget;
@@ -5859,6 +5949,14 @@ class FigInputPalette extends HTMLElement {
         color: el.hexOpaque || this.#colors[index].color,
         alpha: el.rgba ? el.rgba.a : this.#colors[index].alpha,
       };
+      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;
+        sibling.setAttribute("value", hex);
+      }
     };
 
     ic.addEventListener("input", (e) => {
@@ -5871,11 +5969,12 @@ class FigInputPalette extends HTMLElement {
       this.#emitChange();
     });
 
-    this.#pickers.push(ic);
+    if (inline) this.#inlinePickers.push(ic);
+    else this.#expandedPickers.push(ic);
     return ic;
   }
 
-  #createAddButton(disabled) {
+  #createAddButton(disabled, parent = this) {
     const atMax = this.#colors.length >= this.#max;
     const addBtn = document.createElement("fig-button");
     addBtn.setAttribute("variant", "ghost");
@@ -5892,19 +5991,21 @@ class FigInputPalette extends HTMLElement {
     const tooltip = document.createElement("fig-tooltip");
     tooltip.setAttribute("text", "Add color");
     tooltip.appendChild(addBtn);
-    this.appendChild(tooltip);
+    parent.appendChild(tooltip);
   }
 
   #addColor(entry) {
     this.#colors.push(entry);
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
-    const ic = this.#createPicker(entry, this.#colors.length - 1, disabled);
+    const index = this.#colors.length - 1;
+
+    const inlineIc = this.#createPicker(entry, index, disabled, { inline: true });
     const wrap = this.querySelector(".palette-colors");
-    if (wrap) {
-      wrap.appendChild(ic);
-    } else {
-      this.appendChild(ic);
-    }
+    if (wrap) wrap.appendChild(inlineIc);
+
+    const expandedIc = this.#createPicker(entry, index, disabled);
+    const expandedWrap = this.querySelector(".palette-colors-expanded");
+    if (expandedWrap) expandedWrap.appendChild(expandedIc);
 
     if (this.#colors.length >= this.#max) {
       const addBtn = this.querySelector(".palette-add-btn");
@@ -5914,17 +6015,19 @@ class FigInputPalette extends HTMLElement {
   }
 
   #updateChit(index) {
-    const ic = this.#pickers[index];
-    if (!ic) return;
     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;
-    ic.setAttribute("value", hexAlpha);
+    const inl = this.#inlinePickers[index];
+    if (inl) inl.setAttribute("value", hexAlpha);
+    const exp = this.#expandedPickers[index];
+    if (exp) exp.setAttribute("value", hexAlpha);
   }
 
   #syncPickers() {
-    if (this.#pickers.length !== this.#colors.length) {
+    if (this.#inlinePickers.length !== this.#colors.length) {
       this.#render();
       return;
     }
@@ -5935,7 +6038,7 @@ class FigInputPalette extends HTMLElement {
 
   #syncDisabled() {
     const disabled = this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
-    this.#pickers.forEach((fp) => {
+    [...this.#inlinePickers, ...this.#expandedPickers].forEach((fp) => {
       if (disabled) fp.setAttribute("disabled", "");
       else fp.removeAttribute("disabled");
     });
@@ -5975,6 +6078,7 @@ customElements.define("fig-input-palette", FigInputPalette);
  * @fires change - When the gradient value is committed
  */
 class FigInputGradient extends HTMLElement {
+  static SHIFT_SNAP = 5;
   #chit;
   #track;
   #handleDragging = false;
@@ -6007,6 +6111,16 @@ class FigInputGradient extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener("keydown", this.#onKeyDown);
+    if (this.#colorObserver) {
+      this.#colorObserver.disconnect();
+      this.#colorObserver = null;
+    }
+    clearTimeout(this.#arrowTooltipTimer);
+    this.removeEventListener("pointerenter", this.#onTrackEnter);
+    this.removeEventListener("pointermove", this.#onTrackMove);
+    this.removeEventListener("pointerleave", this.#onTrackLeave);
+    this.removeEventListener("click", this.#onTrackClick);
+    this.removeEventListener("dblclick", this.#onTrackDblClick);
   }
 
   #onKeyDown = (e) => {
@@ -6046,7 +6160,7 @@ 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 ? 10 : 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%`);
@@ -6141,10 +6255,8 @@ class FigInputGradient extends HTMLElement {
   }
 
   #sampleGradientColor(position) {
-    const canvas = document.createElement("canvas");
-    canvas.width = 256;
-    canvas.height = 1;
-    const ctx = canvas.getContext("2d");
+    const { ctx } = figGetSharedCanvas(256, 1);
+    ctx.clearRect(0, 0, 256, 1);
     const grad = ctx.createLinearGradient(0, 0, 256, 0);
     for (const stop of this.#gradient.stops) {
       try {
@@ -6242,15 +6354,15 @@ class FigInputGradient extends HTMLElement {
     this.#syncChit();
     this.#emitInput();
     this.#emitChange();
-    this.#track?.querySelectorAll("fig-handle[selected]").forEach((h) => {
-      h.removeAttribute("selected");
-    });
   }
 
   #onTrackDblClick = (e) => {
     if (!this.#track) return;
     if (!e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) return;
     this.#distributeStops();
+    this.#track.querySelectorAll("fig-handle[selected]").forEach((h) => {
+      h.removeAttribute("selected");
+    });
   };
 
   #onTrackClick = (e) => {
@@ -6258,7 +6370,15 @@ class FigInputGradient extends HTMLElement {
     if (this.#handleDragging) return;
     if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) {
       if (e.shiftKey) {
+        const clickedHandle = e.target.closest("fig-handle");
+        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();
+          });
+        }
         e.stopPropagation();
       }
       return;
@@ -6307,6 +6427,7 @@ class FigInputGradient extends HTMLElement {
     for (let i = 0; i < stops.length; i++) {
       const h = handles[i];
       const stop = stops[i];
+      h.dataset.stopIndex = i;
       h.setAttribute("value", `${stop.position}% 50%`);
       h.setAttribute("color", stop.color);
       const tip = h.closest("fig-tooltip");
@@ -6374,6 +6495,44 @@ class FigInputGradient extends HTMLElement {
   #setupEventListeners() {
     if (!this.#track) return;
 
+    this.#track.addEventListener("pointerdown", (e) => {
+      if (this.hasAttribute("disabled")) return;
+      if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) return;
+      if (e.button !== 0) return;
+      e.preventDefault();
+
+      const trackRect = this.#track.getBoundingClientRect();
+      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 });
+      this.#gradient.stops.sort((a, b) => a.position - b.position);
+      const newIndex = this.#gradient.stops.findIndex(
+        (s) => s.position === position && s.color === color,
+      );
+      this.#syncHandles();
+      this.#syncChit();
+      this.#emitInput();
+      this.#hideGhost();
+
+      const handles = this.#track.querySelectorAll(
+        "fig-handle:not(.fig-input-gradient-ghost)",
+      );
+      const newHandle = handles[newIndex];
+      if (newHandle) {
+        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,
+        }));
+      }
+    });
+
     this.#track.addEventListener("input", (e) => {
       const handle = e.target.closest("fig-handle");
       if (!handle) return;
@@ -6387,7 +6546,7 @@ class FigInputGradient extends HTMLElement {
       let position = rawPosition;
       const trackW = this.#track.getBoundingClientRect().width;
       if (e.detail?.shiftKey) {
-        position = Math.round(position / 10) * 10;
+        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++) {
@@ -6515,10 +6674,24 @@ class FigInputGradient extends HTMLElement {
         this.#syncHandles();
         break;
       case "disabled":
-        this.#render();
+        this.#syncDisabled();
         break;
     }
   }
+
+  #syncDisabled() {
+    const disabled = this.hasAttribute("disabled");
+    if (this.#chit) {
+      if (disabled) this.#chit.setAttribute("disabled", "");
+      else this.#chit.removeAttribute("disabled");
+    }
+    if (this.#track) {
+      for (const handle of this.#track.querySelectorAll("fig-handle")) {
+        if (disabled) handle.setAttribute("disabled", "");
+        else handle.removeAttribute("disabled");
+      }
+    }
+  }
 }
 customElements.define("fig-input-gradient", FigInputGradient);
 
@@ -6761,9 +6934,11 @@ customElements.define("fig-switch", FigSwitch);
 class FigToast extends HTMLDialogElement {
   _defaultOffset = 16; // 1rem in pixels
   _autoCloseTimer = null;
+  #boundHandleClose;
 
   constructor() {
     super();
+    this.#boundHandleClose = this.handleClose.bind(this);
   }
 
   getOffset() {
@@ -6813,8 +6988,8 @@ class FigToast extends HTMLDialogElement {
 
   addCloseListeners() {
     this.querySelectorAll("[close-toast]").forEach((button) => {
-      button.removeEventListener("click", this.handleClose);
-      button.addEventListener("click", this.handleClose.bind(this));
+      button.removeEventListener("click", this.#boundHandleClose);
+      button.addEventListener("click", this.#boundHandleClose);
     });
   }
 
@@ -7101,12 +7276,10 @@ class FigChit extends HTMLElement {
   }
 
   #toHex(color) {
-    // Convert color to hex for the native input
     if (!color) return "#D9D9D9";
     if (color.startsWith("#")) return color.slice(0, 7);
-    // Use canvas to convert rgba/named colors to hex
     try {
-      const ctx = document.createElement("canvas").getContext("2d");
+      const { ctx } = figGetSharedCanvas(1, 1);
       ctx.fillStyle = color;
       return ctx.fillStyle;
     } catch {
@@ -7497,11 +7670,10 @@ class FigEasingCurve extends HTMLElement {
   #bounds = null;
   #diagonal = null;
   #resizeObserver = null;
-  #bezierHandleRadius = 3.625;
+  #bezierHandleRadius = 5;
   #bezierEndpointRadius = 2;
-  #springHandleRadius = 3.625;
-  #durationBarWidth = 6;
-  #durationBarHeight = 16;
+  #durationBarWidth = 10;
+  #durationBarHeight = 10;
   #durationBarRadius = 3;
 
   static PRESETS = [
@@ -7576,7 +7748,7 @@ class FigEasingCurve extends HTMLElement {
 
   connectedCallback() {
     this.#precision = parseInt(this.getAttribute("precision") || "2");
-    this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    figSyncCssVar(this, "--aspect-ratio", this.getAttribute("aspect-ratio"));
     const val = this.getAttribute("value");
     if (val) this.#parseValue(val);
     this.#presetName = this.#matchPreset();
@@ -7592,17 +7764,9 @@ class FigEasingCurve extends HTMLElement {
     }
   }
 
-  #syncAspectRatioVar(value) {
-    if (value && value.trim()) {
-      this.style.setProperty("--aspect-ratio", value.trim());
-    } else {
-      this.style.removeProperty("--aspect-ratio");
-    }
-  }
-
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "aspect-ratio") {
-      this.#syncAspectRatioVar(newValue);
+      figSyncCssVar(this, "--aspect-ratio", newValue);
       if (this.#svg) {
         this.#syncViewportSize();
         this.#updatePaths();
@@ -7818,6 +7982,7 @@ class FigEasingCurve extends HTMLElement {
     this.#syncMetricsFromCSS();
     this.innerHTML = this.#getInnerHTML();
     this.#cacheRefs();
+    this.#syncHandleSizes();
     this.#syncViewportSize();
     this.#updatePaths();
     this.#setupEvents();
@@ -7857,8 +8022,6 @@ class FigEasingCurve extends HTMLElement {
     const size = 200;
     const dropdown = this.#getDropdownHTML();
 
-    const hs = this.#bezierHandleRadius * 2;
-
     if (this.#mode === "spring") {
       const targetY = 40;
       const startY = 180;
@@ -7867,8 +8030,8 @@ class FigEasingCurve extends HTMLElement {
         <line class="fig-easing-curve-target" x1="0" y1="${targetY}" x2="${size}" y2="${targetY}"/>
         <line class="fig-easing-curve-diagonal" x1="0" y1="${startY}" x2="0" y2="${startY}"/>
         <path class="fig-easing-curve-path"/>
-        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
-        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="${this.#durationBarWidth}" height="${this.#durationBarHeight}"><fig-handle></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle" data-handle="bounce" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+        <foreignObject class="fig-easing-curve-handle fig-easing-curve-duration-bar" data-handle="duration" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
       </svg></div>`;
     }
 
@@ -7880,8 +8043,8 @@ class FigEasingCurve extends HTMLElement {
       <path class="fig-easing-curve-path"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="start" r="${this.#bezierEndpointRadius}"/>
       <circle class="fig-easing-curve-endpoint" data-endpoint="end" r="${this.#bezierEndpointRadius}"/>
-      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
-      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="${hs}" height="${hs}"><fig-handle></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="1" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
+      <foreignObject class="fig-easing-curve-handle" data-handle="2" width="20" height="20"><fig-handle size="small"></fig-handle></foreignObject>
     </svg></div>`;
   }
 
@@ -7893,26 +8056,10 @@ class FigEasingCurve extends HTMLElement {
   }
 
   #syncMetricsFromCSS() {
-    this.#bezierHandleRadius = this.#readCssNumber(
-      "--easing-bezier-handle-radius",
-      this.#bezierHandleRadius,
-    );
     this.#bezierEndpointRadius = this.#readCssNumber(
       "--easing-bezier-endpoint-radius",
       this.#bezierEndpointRadius,
     );
-    this.#springHandleRadius = this.#readCssNumber(
-      "--easing-spring-handle-radius",
-      this.#springHandleRadius,
-    );
-    this.#durationBarWidth = this.#readCssNumber(
-      "--easing-duration-bar-width",
-      this.#durationBarWidth,
-    );
-    this.#durationBarHeight = this.#readCssNumber(
-      "--easing-duration-bar-height",
-      this.#durationBarHeight,
-    );
     this.#durationBarRadius = this.#readCssNumber(
       "--easing-duration-bar-radius",
       this.#durationBarRadius,
@@ -7938,6 +8085,28 @@ class FigEasingCurve extends HTMLElement {
     this.#diagonal = this.querySelector(".fig-easing-curve-diagonal");
   }
 
+  #syncHandleSizes() {
+    const h1El = this.#handle1?.querySelector("fig-handle");
+    const h2El = this.#handle2?.querySelector("fig-handle");
+    if (h1El) {
+      const w = h1El.offsetWidth || this.#bezierHandleRadius * 2;
+      const h = h1El.offsetHeight || this.#bezierHandleRadius * 2;
+      this.#bezierHandleRadius = Math.max(w, h) / 2;
+      this.#handle1.setAttribute("width", w);
+      this.#handle1.setAttribute("height", h);
+    }
+    if (h2El) {
+      const w = h2El.offsetWidth || this.#durationBarWidth;
+      const h = h2El.offsetHeight || this.#durationBarHeight;
+      if (this.#mode === "spring") {
+        this.#durationBarWidth = w;
+        this.#durationBarHeight = h;
+      }
+      this.#handle2.setAttribute("width", w);
+      this.#handle2.setAttribute("height", h);
+    }
+  }
+
   #setupResizeObserver() {
     if (this.#resizeObserver || !window.ResizeObserver) return;
     this.#resizeObserver = new ResizeObserver(() => {
@@ -8392,12 +8561,9 @@ class Fig3DRotate extends HTMLElement {
 
   connectedCallback() {
     this.#precision = parseInt(this.getAttribute("precision") || "1");
-    this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
-    this.#syncPerspectiveVar(this.getAttribute("perspective"));
-    this.#syncCSSVar(
-      "--perspective-origin",
-      this.getAttribute("perspective-origin"),
-    );
+    figSyncCssVar(this, "--aspect-ratio", this.getAttribute("aspect-ratio"));
+    figSyncCssVar(this, "--perspective", this.getAttribute("perspective"));
+    figSyncCssVar(this, "--perspective-origin", this.getAttribute("perspective-origin"));
     this.#syncTransformOrigin(this.getAttribute("transform-origin"));
     this.#parseFields(this.getAttribute("fields"));
     const val = this.getAttribute("value");
@@ -8415,29 +8581,7 @@ class Fig3DRotate extends HTMLElement {
     }
   }
 
-  #syncAspectRatioVar(value) {
-    if (value && value.trim()) {
-      this.style.setProperty("--aspect-ratio", value.trim());
-    } else {
-      this.style.removeProperty("--aspect-ratio");
-    }
-  }
-
-  #syncPerspectiveVar(value) {
-    if (value && value.trim()) {
-      this.style.setProperty("--perspective", value.trim());
-    } else {
-      this.style.removeProperty("--perspective");
-    }
-  }
-
-  #syncCSSVar(prop, value) {
-    if (value && value.trim()) {
-      this.style.setProperty(prop, value.trim());
-    } else {
-      this.style.removeProperty(prop);
-    }
-  }
+  
 
   #syncTransformOrigin(value) {
     if (!value || !value.trim()) {
@@ -8486,15 +8630,15 @@ class Fig3DRotate extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "aspect-ratio") {
-      this.#syncAspectRatioVar(newValue);
+      figSyncCssVar(this, "--aspect-ratio", newValue);
       return;
     }
     if (name === "perspective") {
-      this.#syncPerspectiveVar(newValue);
+      figSyncCssVar(this, "--perspective", newValue);
       return;
     }
     if (name === "perspective-origin") {
-      this.#syncCSSVar("--perspective-origin", newValue);
+      figSyncCssVar(this, "--perspective-origin", newValue);
       return;
     }
     if (name === "transform-origin") {
@@ -8744,7 +8888,7 @@ class FigOriginGrid extends HTMLElement {
 
   connectedCallback() {
     this.#precision = parseInt(this.getAttribute("precision") || "0");
-    this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    figSyncCssVar(this, "--aspect-ratio", this.getAttribute("aspect-ratio"));
     this.#applyIncomingValue(this.getAttribute("value"));
 
     this.#render();
@@ -8768,7 +8912,7 @@ class FigOriginGrid extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "aspect-ratio") {
-      this.#syncAspectRatioVar(newValue);
+      figSyncCssVar(this, "--aspect-ratio", newValue);
       return;
     }
     if (name === "drag") {
@@ -8807,14 +8951,6 @@ class FigOriginGrid extends HTMLElement {
     return attr.toLowerCase() !== "false";
   }
 
-  #syncAspectRatioVar(value) {
-    if (value && value.trim()) {
-      this.style.setProperty("--aspect-ratio", value.trim());
-    } else {
-      this.style.removeProperty("--aspect-ratio");
-    }
-  }
-
   #syncDragState() {
     if (!this.#grid) return;
     this.#grid.classList.toggle("drag-disabled", !this.#dragEnabled);
@@ -9198,6 +9334,7 @@ class FigInputJoystick extends HTMLElement {
   #boundYFocusOut = null;
   #isSyncingValueAttr = false;
   #defaultPosition = { x: 0.5, y: 0.5 };
+  #initialized = false;
 
   constructor() {
     super();
@@ -9209,7 +9346,6 @@ class FigInputJoystick extends HTMLElement {
     this.xInput = null;
     this.yInput = null;
     this.coordinates = "screen";
-    this.#initialized = false;
     this.#boundPlanePointerDown = (e) => this.#handlePlanePointerDown(e);
     this.#boundHandlePointerDown = () => {
       this.isDragging = true;
@@ -9223,8 +9359,6 @@ class FigInputJoystick extends HTMLElement {
     this.#boundYFocusOut = () => this.#handleFieldFocusOut();
   }
 
-  #initialized = false;
-
   connectedCallback() {
     // Initialize position
     requestAnimationFrame(() => {
@@ -9233,7 +9367,7 @@ class FigInputJoystick extends HTMLElement {
       this.transform = this.getAttribute("transform") || 1;
       this.transform = Number(this.transform);
       this.coordinates = this.getAttribute("coordinates") || "screen";
-      this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+      figSyncCssVar(this, "--aspect-ratio", this.getAttribute("aspect-ratio"));
       if (!this.hasAttribute("value")) {
         this.setAttribute("value", "50% 50%");
       }
@@ -9252,14 +9386,6 @@ class FigInputJoystick extends HTMLElement {
     return this.coordinates === "math" ? 1 - y : y;
   }
 
-  #syncAspectRatioVar(value) {
-    if (value && value.trim()) {
-      this.style.setProperty("--aspect-ratio", value.trim());
-    } else {
-      this.style.removeProperty("--aspect-ratio");
-    }
-  }
-
   disconnectedCallback() {
     this.#cleanupListeners();
   }
@@ -9561,7 +9687,7 @@ class FigInputJoystick extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "aspect-ratio") {
-      this.#syncAspectRatioVar(newValue);
+      figSyncCssVar(this, "--aspect-ratio", newValue);
       return;
     }
     if (name === "value") {
@@ -9611,6 +9737,11 @@ class FigInputAngle extends HTMLElement {
   #opposite;
   #prevRawAngle = null;
   #boundHandleRawChange;
+  #boundHandleMouseDown;
+  #boundHandleTouchStart;
+  #boundHandleKeyDown;
+  #boundHandleKeyUp;
+  #boundHandleAngleInput;
 
   constructor() {
     super();
@@ -9631,6 +9762,11 @@ class FigInputAngle extends HTMLElement {
     this.rotationSpan = null;
 
     this.#boundHandleRawChange = this.#handleRawChange.bind(this);
+    this.#boundHandleMouseDown = this.#handleMouseDown.bind(this);
+    this.#boundHandleTouchStart = this.#handleTouchStart.bind(this);
+    this.#boundHandleKeyDown = this.#handleKeyDown.bind(this);
+    this.#boundHandleKeyUp = this.#handleKeyUp.bind(this);
+    this.#boundHandleAngleInput = this.#handleAngleInput.bind(this);
   }
 
   connectedCallback() {
@@ -9805,30 +9941,23 @@ class FigInputAngle extends HTMLElement {
     this.angleInput = this.querySelector("fig-input-number[name='angle']");
     this.rotationSpan = this.querySelector(".fig-input-angle-rotations");
     this.#updateRotationDisplay();
-    this.plane?.addEventListener("mousedown", this.#handleMouseDown.bind(this));
-    this.plane?.addEventListener(
-      "touchstart",
-      this.#handleTouchStart.bind(this),
-    );
-    window.addEventListener("keydown", this.#handleKeyDown.bind(this));
-    window.addEventListener("keyup", this.#handleKeyUp.bind(this));
+    this.plane?.addEventListener("mousedown", this.#boundHandleMouseDown);
+    this.plane?.addEventListener("touchstart", this.#boundHandleTouchStart);
+    window.addEventListener("keydown", this.#boundHandleKeyDown);
+    window.addEventListener("keyup", this.#boundHandleKeyUp);
     if (this.text && this.angleInput) {
-      this.angleInput.addEventListener(
-        "input",
-        this.#handleAngleInput.bind(this),
-      );
+      this.angleInput.addEventListener("input", this.#boundHandleAngleInput);
     }
-    // Capture-phase listener for unit suffix parsing
     this.addEventListener("change", this.#boundHandleRawChange, true);
   }
 
   #cleanupListeners() {
-    this.plane?.removeEventListener("mousedown", this.#handleMouseDown);
-    this.plane?.removeEventListener("touchstart", this.#handleTouchStart);
-    window.removeEventListener("keydown", this.#handleKeyDown);
-    window.removeEventListener("keyup", this.#handleKeyUp);
+    this.plane?.removeEventListener("mousedown", this.#boundHandleMouseDown);
+    this.plane?.removeEventListener("touchstart", this.#boundHandleTouchStart);
+    window.removeEventListener("keydown", this.#boundHandleKeyDown);
+    window.removeEventListener("keyup", this.#boundHandleKeyUp);
     if (this.text && this.angleInput) {
-      this.angleInput.removeEventListener("input", this.#handleAngleInput);
+      this.angleInput.removeEventListener("input", this.#boundHandleAngleInput);
     }
     this.removeEventListener("change", this.#boundHandleRawChange, true);
   }
@@ -10333,6 +10462,8 @@ class FigFillPicker extends HTMLElement {
   #opacitySlider = null;
   #isDraggingColor = false;
   #teardownColorAreaEvents = null;
+  #dialogOpenObserver = null;
+  #webcamTabObserver = null;
 
   constructor() {
     super();
@@ -10358,10 +10489,26 @@ class FigFillPicker extends HTMLElement {
       this.#teardownColorAreaEvents();
       this.#teardownColorAreaEvents = null;
     }
+    if (this.#dialogOpenObserver) {
+      this.#dialogOpenObserver.disconnect();
+      this.#dialogOpenObserver = null;
+    }
+    if (this.#webcamTabObserver) {
+      this.#webcamTabObserver.disconnect();
+      this.#webcamTabObserver = null;
+    }
+    if (this.#webcam.stream) {
+      this.#webcam.stream.getTracks().forEach((track) => track.stop());
+      this.#webcam.stream = null;
+    }
+    if (this.#video.url && this.#video.url.startsWith("blob:")) {
+      URL.revokeObjectURL(this.#video.url);
+    }
     if (this.#chit) this.#chit.removeAttribute("selected");
     if (this.#dialog) {
       this.#dialog.close();
       this.#dialog.remove();
+      this.#dialog = null;
     }
   }
 
@@ -10698,11 +10845,11 @@ class FigFillPicker extends HTMLElement {
     };
     this.#dialog.addEventListener("close", onDialogClose);
 
-    const observer = new MutationObserver(() => {
+    this.#dialogOpenObserver = new MutationObserver(() => {
       const isOpen = this.#dialog.hasAttribute("open") && this.#dialog.getAttribute("open") !== "false";
       if (!isOpen) onDialogClose();
     });
-    observer.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 = {
@@ -11624,10 +11771,15 @@ class FigFillPicker extends HTMLElement {
     }
   }
 
+  static #gradientSupportCache = new Map();
   #testGradientSupport(css) {
+    const cached = FigFillPicker.#gradientSupportCache.get(css);
+    if (cached !== undefined) return cached;
     const el = document.createElement("div");
     el.style.background = css;
-    return !!el.style.background;
+    const result = !!el.style.background;
+    FigFillPicker.#gradientSupportCache.set(css, result);
+    return result;
   }
 
   #getGradientCSS() {
@@ -11972,13 +12124,12 @@ class FigFillPicker extends HTMLElement {
       }
     };
 
-    // Start webcam when tab is shown
-    const observer = new MutationObserver(() => {
+    this.#webcamTabObserver = new MutationObserver(() => {
       if (container.style.display !== "none" && !this.#webcam.stream) {
         startWebcam();
       }
     });
-    observer.observe(container, {
+    this.#webcamTabObserver.observe(container, {
       attributes: true,
       attributeFilter: ["style"],
     });
@@ -12497,8 +12648,8 @@ class FigColorTip extends HTMLElement {
     }
 
     try {
-      const ctx = document.createElement("canvas").getContext("2d");
-      if (!ctx) return "#D9D9D9";
+      const { ctx } = figGetSharedCanvas(1, 1);
+      ctx.fillStyle = "#000000";
       ctx.fillStyle = value;
       const resolved = ctx.fillStyle;
       if (resolved.startsWith("#")) {
@@ -12703,7 +12854,7 @@ class FigChooser extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "choice-element", "drag", "overflow", "loop"];
+    return ["value", "disabled", "choice-element", "drag", "overflow", "loop", "padding"];
   }
 
   get #overflowMode() {
@@ -13339,8 +13490,8 @@ class FigHandle extends HTMLElement {
     };
 
     const axes = this.#axes;
-    if (axes.x) this.style.left = `${resolve(xToken, rect.width, hw)}px`;
-    if (axes.y) this.style.top = `${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() {
@@ -13370,7 +13521,7 @@ class FigHandle extends HTMLElement {
   select() {
     if (this.hasAttribute("disabled")) return;
     this.setAttribute("selected", "");
-    if (this.getAttribute("type") === "color") this.#showColorTip();
+    if (this.getAttribute("type") === "color" && !this.#isDragging) this.#showColorTip();
   }
 
   deselect() {
@@ -13410,6 +13561,9 @@ class FigHandle extends HTMLElement {
       } else {
         this.style.setProperty("--fill", value);
       }
+      if (this.#colorTip && value) {
+        this.#colorTip.setAttribute("value", value);
+      }
     }
     if (name === "drag") this.#syncDrag();
     if (name === "value" && !this.#applyingValue && !this.#isDragging) {
@@ -13450,12 +13604,13 @@ class FigHandle extends HTMLElement {
 
     this.#isDragging = true;
     const axes = this.#axes;
-    const containerRect = container.getBoundingClientRect();
     const handleW = this.offsetWidth;
     const handleH = this.offsetHeight;
+    let lastRect = null;
 
     const clampAndApply = (clientX, clientY, shiftKey = false) => {
       const rect = container.getBoundingClientRect();
+      lastRect = rect;
       const currentLeft = parseFloat(this.style.left) || 0;
       const currentTop = parseFloat(this.style.top) || 0;
       const rawX = clientX - rect.left - handleW / 2;
@@ -13491,11 +13646,11 @@ class FigHandle extends HTMLElement {
 
       if (axes.x) {
         const left = centerX * rect.width - handleW / 2;
-        this.style.left = `${Math.max(-handleW / 2, Math.min(rect.width - handleW / 2, left))}px`;
+        this.style.left = `${Math.round(Math.max(-handleW / 2, Math.min(rect.width - handleW / 2, left)))}px`;
       }
       if (axes.y) {
         const top = centerY * rect.height - handleH / 2;
-        this.style.top = `${Math.max(-handleH / 2, Math.min(rect.height - handleH / 2, top))}px`;
+        this.style.top = `${Math.round(Math.max(-handleH / 2, Math.min(rect.height - handleH / 2, top)))}px`;
       }
     };
 
@@ -13512,7 +13667,7 @@ class FigHandle extends HTMLElement {
         new CustomEvent("input", {
           bubbles: true,
           detail: {
-            ...this.#positionDetail(container.getBoundingClientRect()),
+            ...this.#positionDetail(lastRect),
             shiftKey: e.shiftKey,
           },
         }),
@@ -13531,7 +13686,7 @@ class FigHandle extends HTMLElement {
         this.dispatchEvent(
           new CustomEvent("change", {
             bubbles: true,
-            detail: this.#positionDetail(container.getBoundingClientRect()),
+            detail: this.#positionDetail(lastRect),
           }),
         );
         const swallowClick = (evt) => {