@rogieking/figui3 3.9.2 → 3.13.0

package/fig.js

@@ -609,6 +609,7 @@ class FigTooltip extends HTMLElement {
   }
 
   setupEventListeners() {
+    if (this.action === "manual") return;
     if (this.action === "hover") {
       if (!this.isTouchDevice()) {
         this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
@@ -687,26 +688,34 @@ class FigTooltip extends HTMLElement {
     const popupRect = this.popup.getBoundingClientRect();
     const offset = this.getOffset();
 
+    const container = this.popup.parentElement;
+    const containerRect =
+      container && container !== document.body
+        ? container.getBoundingClientRect()
+        : { left: 0, top: 0 };
+
     // Position the tooltip above the element
-    let top = rect.top - popupRect.height - offset.top;
-    let left = rect.left + (rect.width - popupRect.width) / 2;
+    let top = rect.top - popupRect.height - offset.top - containerRect.top;
+    let left =
+      rect.left + (rect.width - popupRect.width) / 2 - containerRect.left;
     this.popup.setAttribute("position", "top");
 
     // Adjust if tooltip would go off-screen
-    if (top < 0) {
+    if (top + containerRect.top < 0) {
       this.popup.setAttribute("position", "bottom");
-      top = rect.bottom + offset.bottom; // Position below instead
+      top = rect.bottom + offset.bottom - containerRect.top;
     }
-    if (left < offset.left) {
-      left = offset.left;
-    } else if (left + popupRect.width > window.innerWidth - offset.right) {
-      left = window.innerWidth - popupRect.width - offset.right;
+    const absLeft = left + containerRect.left;
+    if (absLeft < offset.left) {
+      left = offset.left - containerRect.left;
+    } else if (absLeft + popupRect.width > window.innerWidth - offset.right) {
+      left =
+        window.innerWidth - popupRect.width - offset.right - containerRect.left;
     }
 
     // Calculate the center of the target element relative to the tooltip
-    const targetCenter = rect.left + rect.width / 2;
-    const tooltipLeft = left;
-    const beakOffset = targetCenter - tooltipLeft;
+    const targetCenter = rect.left - containerRect.left + rect.width / 2;
+    const beakOffset = targetCenter - left;
 
     // Set the beak offset as a CSS custom property
     this.popup.style.setProperty("--beak-offset", `${beakOffset}px`);
@@ -1438,6 +1447,13 @@ class FigPopup extends HTMLDialogElement {
     const val = this.getAttribute("autoresize");
     return val === null || val !== "false";
   }
+  set autoresize(value) {
+    if (value || value === "") {
+      this.setAttribute("autoresize", value === true ? "" : value);
+    } else {
+      this.removeAttribute("autoresize");
+    }
+  }
 
   setupObservers() {
     this.teardownObservers();
@@ -2600,7 +2616,8 @@ class FigSegmentedControl extends HTMLElement {
 
   #syncIndicator({ forceInstant = false } = {}) {
     const isDisabled =
-      this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false";
     const isAnimated = this.#isAnimatedEnabled();
     const activeSegment =
       this.#selectedSegment && this.contains(this.#selectedSegment)
@@ -4248,7 +4265,7 @@ class FigFieldSlider extends HTMLElement {
         this.#label.remove();
       }
     } else {
-      this.#label.textContent = hasLabelAttr ? rawLabel ?? "" : "Label";
+      this.#label.textContent = hasLabelAttr ? (rawLabel ?? "") : "Label";
       if (this.#label.parentElement !== this.#field) {
         this.#field.prepend(this.#label);
       }
@@ -4401,7 +4418,7 @@ customElements.define("fig-field-slider", FigFieldSlider);
 class FigInputColor extends HTMLElement {
   rgba;
   hex;
-  alpha = 100;
+  #alphaPercent = 100;
   #swatch;
   #fillPicker;
   #textInput;
@@ -4413,6 +4430,20 @@ class FigInputColor extends HTMLElement {
   get picker() {
     return this.getAttribute("picker") || "native";
   }
+  set picker(value) {
+    this.setAttribute("picker", value);
+  }
+
+  get alpha() {
+    return this.getAttribute("alpha");
+  }
+  set alpha(value) {
+    if (value === null || value === undefined || value === false) {
+      this.removeAttribute("alpha");
+    } else {
+      this.setAttribute("alpha", String(value));
+    }
+  }
 
   #buildFillPickerAttrs() {
     const attrs = {};
@@ -4431,6 +4462,16 @@ class FigInputColor extends HTMLElement {
   }
 
   connectedCallback() {
+    if (this.#renderRAF) cancelAnimationFrame(this.#renderRAF);
+    this.#renderRAF = requestAnimationFrame(() => {
+      this.#renderRAF = null;
+      this.#buildUI();
+    });
+  }
+
+  #renderRAF = null;
+
+  #buildUI() {
     this.#setValues(this.getAttribute("value"));
 
     const useFigmaPicker = this.picker === "figma";
@@ -4440,7 +4481,6 @@ class FigInputColor extends HTMLElement {
 
     let html = ``;
     if (this.getAttribute("text")) {
-      // Display without # prefix
       let label = `<fig-input-text 
         type="text"
         placeholder="000000"
@@ -4452,7 +4492,7 @@ class FigInputColor extends HTMLElement {
                         placeholder="##" 
                         min="0"
                         max="100"
-                        value="${this.alpha}"
+                        value="${this.#alphaPercent}"
                         units="%">
                     </fig-input-number>
                 </fig-tooltip>`;
@@ -4464,7 +4504,7 @@ class FigInputColor extends HTMLElement {
           ? `<fig-fill-picker mode="solid" ${fpAttrs} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
-              this.alpha
+              this.#alphaPercent
             }}'></fig-fill-picker>`
           : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
       }
@@ -4474,7 +4514,6 @@ class FigInputColor extends HTMLElement {
                 ${label}
             </div>`;
     } else {
-      // Without text, if picker is hidden, show nothing
       if (hidePicker) {
         html = ``;
       } else {
@@ -4482,7 +4521,7 @@ class FigInputColor extends HTMLElement {
           ? `<fig-fill-picker mode="solid" ${fpAttrs} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
-              this.alpha
+              this.#alphaPercent
             }}'></fig-fill-picker>`
           : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
       }
@@ -4565,7 +4604,7 @@ class FigInputColor extends HTMLElement {
     this.hexWithAlpha = this.value.toUpperCase();
     this.hexOpaque = this.hexWithAlpha.slice(0, 7);
     if (hexValue.length > 7) {
-      this.alpha = (this.rgba.a * 100).toFixed(0);
+      this.#alphaPercent = (this.rgba.a * 100).toFixed(0);
     }
     this.style.setProperty("--alpha", this.rgba.a);
   }
@@ -4577,7 +4616,7 @@ class FigInputColor extends HTMLElement {
     let inputValue = event.target.value.replace("#", "");
     this.#setValues("#" + inputValue);
     if (this.#alphaInput) {
-      this.#alphaInput.setAttribute("value", this.alpha);
+      this.#alphaInput.setAttribute("value", this.#alphaPercent);
     }
     if (this.#swatch) {
       this.#swatch.setAttribute("background", this.hexOpaque);
@@ -4602,7 +4641,7 @@ class FigInputColor extends HTMLElement {
         JSON.stringify({
           type: "solid",
           color: this.hexOpaque,
-          opacity: this.alpha,
+          opacity: this.#alphaPercent,
         }),
       );
     }
@@ -4678,12 +4717,15 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker", "experimental"];
+    return ["value", "style", "mode", "picker", "experimental", "alpha"];
   }
 
   get mode() {
     return this.getAttribute("mode");
   }
+  set mode(value) {
+    this.setAttribute("mode", value);
+  }
 
   attributeChangedCallback(name, oldValue, newValue) {
     // Skip if value hasn't actually changed
@@ -4705,12 +4747,12 @@ class FigInputColor extends HTMLElement {
             JSON.stringify({
               type: "solid",
               color: this.hexOpaque,
-              opacity: this.alpha,
+              opacity: this.#alphaPercent,
             }),
           );
         }
         if (this.#alphaInput) {
-          this.#alphaInput.setAttribute("value", this.alpha);
+          this.#alphaInput.setAttribute("value", this.#alphaPercent);
         }
         // NOTE: Do NOT emit input events here!
         // Input events should only fire from user interactions, not programmatic changes.
@@ -4725,6 +4767,9 @@ class FigInputColor extends HTMLElement {
       case "picker":
         // Picker type change requires re-render
         break;
+      case "alpha":
+        if (this.isConnected) this.#buildUI();
+        break;
     }
   }
 
@@ -4828,6 +4873,110 @@ class FigInputColor extends HTMLElement {
 customElements.define("fig-input-color", FigInputColor);
 
 /* Input Fill */
+const GRADIENT_INTERPOLATION_SPACES = [
+  "srgb",
+  "srgb-linear",
+  "display-p3",
+  "oklab",
+  "oklch",
+];
+const GRADIENT_HUE_INTERPOLATIONS = [
+  "shorter",
+  "longer",
+  "increasing",
+  "decreasing",
+];
+
+const GRADIENT_PICKER_SPACES = ["srgb-linear", "oklab", "oklch"];
+
+function normalizeGradientConfig(gradient) {
+  const next = { ...(gradient ?? {}) };
+  let interpolationSpace = String(
+    next.interpolationSpace ?? "oklab",
+  ).toLowerCase();
+  if (!GRADIENT_INTERPOLATION_SPACES.includes(interpolationSpace)) {
+    interpolationSpace = "oklab";
+  }
+  if (interpolationSpace === "srgb" || interpolationSpace === "display-p3") {
+    interpolationSpace = "oklab";
+  }
+  next.interpolationSpace = interpolationSpace;
+
+  const hueInterpolation = String(
+    next.hueInterpolation ?? "shorter",
+  ).toLowerCase();
+  next.hueInterpolation = GRADIENT_HUE_INTERPOLATIONS.includes(hueInterpolation)
+    ? hueInterpolation
+    : "shorter";
+  return next;
+}
+
+function gradientToValueShape(gradient) {
+  const normalized = normalizeGradientConfig(gradient);
+  const output = {
+    ...normalized,
+    interpolationSpace: normalized.interpolationSpace,
+  };
+  if (normalized.interpolationSpace === "oklch") {
+    output.hueInterpolation = normalized.hueInterpolation;
+  } else {
+    delete output.hueInterpolation;
+  }
+  return output;
+}
+
+function gradientInterpolationClause(gradient) {
+  const normalized = normalizeGradientConfig(gradient);
+  if (normalized.interpolationSpace === "oklch") {
+    return `in oklch ${normalized.hueInterpolation} hue`;
+  }
+  return `in ${normalized.interpolationSpace}`;
+}
+
+function hslToP3(h, s, l) {
+  const sRGB = hslToSRGB(h, s, l);
+  return sRGB.map((c) => +(c / 255).toFixed(4));
+}
+
+function hslToSRGB(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r, g, b;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return [
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255),
+  ];
+}
+
 /**
  * A fill input that supports solid colors, gradients, images, and videos.
  * @attr {string} value - JSON string with fill data
@@ -4846,6 +4995,8 @@ class FigInputFill extends HTMLElement {
   #gradient = {
     type: "linear",
     angle: 180,
+    interpolationSpace: "oklab",
+    hueInterpolation: "shorter",
     stops: [
       { position: 0, color: "#D9D9D9", opacity: 100 },
       { position: 100, color: "#737373", opacity: 100 },
@@ -4884,8 +5035,12 @@ class FigInputFill extends HTMLElement {
             this.#solid.alpha = parsed.opacity / 100;
           break;
         case "gradient":
-          if (parsed.gradient)
-            this.#gradient = { ...this.#gradient, ...parsed.gradient };
+          if (parsed.gradient) {
+            this.#gradient = normalizeGradientConfig({
+              ...this.#gradient,
+              ...parsed.gradient,
+            });
+          }
           break;
         case "image":
           if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
@@ -5051,7 +5206,12 @@ class FigInputFill extends HTMLElement {
               this.#solid.alpha = detail.alpha;
               break;
             case "gradient":
-              if (detail.gradient) this.#gradient = detail.gradient;
+              if (detail.gradient) {
+                this.#gradient = normalizeGradientConfig({
+                  ...this.#gradient,
+                  ...detail.gradient,
+                });
+              }
               break;
             case "image":
               if (detail.image) this.#image = detail.image;
@@ -5414,7 +5574,7 @@ class FigInputFill extends HTMLElement {
       case "gradient":
         return {
           type: "gradient",
-          gradient: { ...this.#gradient },
+          gradient: gradientToValueShape(this.#gradient),
         };
       case "image":
         return {
@@ -5482,6 +5642,388 @@ class FigInputFill extends HTMLElement {
 }
 customElements.define("fig-input-fill", FigInputFill);
 
+/* Input Gradient */
+/**
+ * A gradient-only fill input built on top of fig-fill-picker.
+ * @attr {string} value - JSON string with gradient fill data
+ * @attr {boolean} disabled - Whether the input is disabled
+ * @fires input - When the gradient value changes
+ * @fires change - When the gradient value is committed
+ */
+class FigInputGradient extends HTMLElement {
+  #fillPicker;
+  #track;
+  #colorObserver = null;
+  #gradient = {
+    type: "linear",
+    angle: 180,
+    interpolationSpace: "oklab",
+    hueInterpolation: "shorter",
+    stops: [
+      { position: 0, color: "#D9D9D9", opacity: 100 },
+      { position: 100, color: "#737373", opacity: 100 },
+    ],
+  };
+
+  constructor() {
+    super();
+  }
+
+  static get observedAttributes() {
+    return ["value", "disabled", "experimental", "picker-anchor"];
+  }
+
+  connectedCallback() {
+    this.#parseValue();
+    this.#render();
+  }
+
+  #parseValue() {
+    const valueAttr = this.getAttribute("value");
+    if (!valueAttr) return;
+    try {
+      const parsed = JSON.parse(valueAttr);
+      if (parsed?.type === "gradient" && parsed.gradient) {
+        this.#gradient = normalizeGradientConfig({
+          ...this.#gradient,
+          ...parsed.gradient,
+        });
+        return;
+      }
+      if (parsed?.gradient) {
+        this.#gradient = normalizeGradientConfig({
+          ...this.#gradient,
+          ...parsed.gradient,
+        });
+      }
+    } catch (e) {
+      // Ignore invalid JSON and keep current/default gradient.
+    }
+  }
+
+  #buildFillPickerAttrs() {
+    const attrs = {};
+    const experimental = this.getAttribute("experimental");
+    if (experimental) attrs["experimental"] = experimental;
+    for (const { name, value } of this.attributes) {
+      if (name.startsWith("picker-") && name !== "picker-anchor") {
+        attrs[name.slice(7)] = value;
+      }
+    }
+    if (!attrs["dialog-position"]) attrs["dialog-position"] = "left";
+    return Object.entries(attrs)
+      .map(([k, v]) => `${k}="${v}"`)
+      .join(" ");
+  }
+
+  #buildStopHandles() {
+    const disabled = this.hasAttribute("disabled");
+    return this.#gradient.stops
+      .map(
+        (stop, i) =>
+          `<fig-handle drag drag-axes="x" type="color" color="${stop.color}" value="${stop.position}% 50%" data-stop-index="${i}"${disabled ? " disabled" : ""}></fig-handle>`,
+      )
+      .join("");
+  }
+
+  #ghostHandle = null;
+  #ghostTooltip = null;
+
+  #render() {
+    const disabled = this.hasAttribute("disabled");
+    const fillPickerValue = JSON.stringify(this.value);
+    const fpAttrs = this.#buildFillPickerAttrs();
+    this.innerHTML = `
+      <fig-fill-picker mode="gradient" ${fpAttrs} value='${fillPickerValue}' ${
+        disabled ? "disabled" : ""
+      }></fig-fill-picker>
+      <div class="fig-input-gradient-track">${this.#buildStopHandles()}</div>`;
+    this.#track = this.querySelector(".fig-input-gradient-track");
+    this.#setupGhostHandle();
+    this.#setupEventListeners();
+  }
+
+  #sampleGradientColor(position) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 256;
+    canvas.height = 1;
+    const ctx = canvas.getContext("2d");
+    const grad = ctx.createLinearGradient(0, 0, 256, 0);
+    for (const stop of this.#gradient.stops) {
+      try {
+        grad.addColorStop(stop.position / 100, stop.color);
+      } catch {
+        /* skip invalid */
+      }
+    }
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, 256, 1);
+    const px = Math.round(Math.max(0, Math.min(255, position * 255)));
+    const [r, g, b] = ctx.getImageData(px, 0, 1, 1).data;
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
+  }
+
+  #setupGhostHandle() {
+    if (!this.#track || this.hasAttribute("disabled")) return;
+    const tooltip = document.createElement("fig-tooltip");
+    tooltip.setAttribute("text", "Add color stop");
+    tooltip.setAttribute("action", "manual");
+
+    const ghost = document.createElement("fig-handle");
+    ghost.classList.add("fig-input-gradient-ghost");
+    ghost.style.position = "absolute";
+    ghost.style.top = "50%";
+    ghost.style.transform = "translate(-50%, -50%)";
+    ghost.style.pointerEvents = "none";
+    ghost.style.opacity = "0";
+    ghost.style.transition = "opacity 0.15s";
+
+    tooltip.appendChild(ghost);
+    this.#track.appendChild(tooltip);
+    this.#ghostHandle = ghost;
+    this.#ghostTooltip = tooltip;
+
+    this.addEventListener("pointerenter", this.#onTrackEnter);
+    this.addEventListener("pointermove", this.#onTrackMove);
+    this.addEventListener("pointerleave", this.#onTrackLeave);
+    this.addEventListener("click", this.#onTrackClick);
+  }
+
+  #showGhost() {
+    if (!this.#ghostHandle) return;
+    this.#ghostHandle.style.opacity = "0.5";
+    if (this.#ghostTooltip) {
+      this.#ghostTooltip.render();
+      this.#ghostTooltip.showPopup();
+    }
+  }
+
+  #hideGhost() {
+    if (!this.#ghostHandle) return;
+    this.#ghostHandle.style.opacity = "0";
+    if (this.#ghostTooltip) this.#ghostTooltip.hidePopup();
+  }
+
+  #onTrackEnter = () => {
+    this.#showGhost();
+  };
+
+  #onTrackLeave = () => {
+    this.#hideGhost();
+  };
+
+  #onTrackMove = (e) => {
+    if (!this.#ghostHandle || !this.#track) return;
+    if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) {
+      this.#hideGhost();
+      return;
+    }
+    const trackRect = this.#track.getBoundingClientRect();
+    const pct = Math.max(
+      0,
+      Math.min(1, (e.clientX - trackRect.left) / trackRect.width),
+    );
+    this.#ghostHandle.style.left = `${pct * 100}%`;
+    const color = this.#sampleGradientColor(pct);
+    this.#ghostHandle.setAttribute("color", color);
+    this.#showGhost();
+  };
+
+  #onTrackClick = (e) => {
+    if (!this.#track) return;
+    if (e.target.closest("fig-handle:not(.fig-input-gradient-ghost)")) return;
+    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);
+    this.#syncHandles();
+    this.#syncFillPicker();
+    this.#emitInput();
+    this.#emitChange();
+  };
+
+  #syncHandles() {
+    if (!this.#track) return;
+    const handles = this.#track.querySelectorAll(
+      "fig-handle:not(.fig-input-gradient-ghost)",
+    );
+    const stops = this.#gradient.stops;
+
+    if (handles.length !== stops.length) {
+      const wrapper = this.#ghostTooltip;
+      this.#track.innerHTML = this.#buildStopHandles();
+      if (wrapper) this.#track.appendChild(wrapper);
+      this.#reobserveHandleColors();
+      return;
+    }
+
+    for (let i = 0; i < stops.length; i++) {
+      const h = handles[i];
+      const stop = stops[i];
+      h.setAttribute("value", `${stop.position}% 50%`);
+      h.setAttribute("color", stop.color);
+    }
+  }
+
+  #reobserveHandleColors() {
+    if (!this.#colorObserver || !this.#track) return;
+    this.#colorObserver.disconnect();
+    this.#track
+      .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+      .forEach((h) => {
+        this.#colorObserver.observe(h, {
+          attributes: true,
+          attributeFilter: ["color"],
+        });
+      });
+  }
+
+  #syncFillPicker() {
+    if (!this.#fillPicker) return;
+    this.#fillPicker.setAttribute("value", JSON.stringify(this.value));
+  }
+
+  #setupEventListeners() {
+    requestAnimationFrame(() => {
+      this.#fillPicker = this.querySelector("fig-fill-picker");
+      if (!this.#fillPicker) return;
+
+      const anchor = this.getAttribute("picker-anchor");
+      if (!anchor || anchor === "self") {
+        this.#fillPicker.anchorElement = this;
+      } else {
+        const el = document.querySelector(anchor);
+        if (el) this.#fillPicker.anchorElement = el;
+      }
+
+      this.#fillPicker.addEventListener("input", (e) => {
+        e.stopPropagation();
+        const detail = e.detail;
+        if (detail?.gradient) {
+          this.#gradient = normalizeGradientConfig({
+            ...this.#gradient,
+            ...detail.gradient,
+          });
+          this.#syncHandles();
+          this.#emitInput();
+        }
+      });
+
+      this.#fillPicker.addEventListener("change", (e) => {
+        e.stopPropagation();
+        this.#emitChange();
+      });
+
+      if (this.#track) {
+        this.#track.addEventListener("input", (e) => {
+          const handle = e.target.closest("fig-handle");
+          if (!handle) return;
+          e.stopPropagation();
+          const idx = parseInt(handle.dataset.stopIndex, 10);
+          if (isNaN(idx) || !this.#gradient.stops[idx]) return;
+          const px = e.detail?.px ?? 0;
+          this.#gradient.stops[idx].position = Math.round(px * 100);
+          this.#syncFillPicker();
+          this.#emitInput();
+        });
+
+        this.#track.addEventListener("change", (e) => {
+          const handle = e.target.closest("fig-handle");
+          if (!handle) return;
+          e.stopPropagation();
+          const idx = parseInt(handle.dataset.stopIndex, 10);
+          if (isNaN(idx) || !this.#gradient.stops[idx]) return;
+          const px = e.detail?.px ?? 0;
+          this.#gradient.stops[idx].position = Math.round(px * 100);
+          this.#syncFillPicker();
+          this.#emitChange();
+        });
+
+        this.#colorObserver = new MutationObserver((mutations) => {
+          for (const m of mutations) {
+            if (m.attributeName !== "color") continue;
+            const handle = m.target;
+            if (handle.classList.contains("fig-input-gradient-ghost")) continue;
+            const idx = parseInt(handle.dataset.stopIndex, 10);
+            if (isNaN(idx) || !this.#gradient.stops[idx]) continue;
+            const newColor = handle.getAttribute("color");
+            if (newColor && newColor !== this.#gradient.stops[idx].color) {
+              this.#gradient.stops[idx].color = newColor;
+              this.#syncFillPicker();
+              this.#emitInput();
+            }
+          }
+        });
+        this.#track
+          .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+          .forEach((h) => {
+            this.#colorObserver.observe(h, {
+              attributes: true,
+              attributeFilter: ["color"],
+            });
+          });
+      }
+    });
+  }
+
+  #emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        detail: this.value,
+      }),
+    );
+  }
+
+  #emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        detail: this.value,
+      }),
+    );
+  }
+
+  get value() {
+    return {
+      type: "gradient",
+      gradient: gradientToValueShape(this.#gradient),
+    };
+  }
+
+  set value(val) {
+    if (typeof val === "string") {
+      this.setAttribute("value", val);
+    } else {
+      this.setAttribute("value", JSON.stringify(val));
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "value":
+        this.#parseValue();
+        if (this.#fillPicker) {
+          this.#syncFillPicker();
+        }
+        this.#syncHandles();
+        break;
+      case "disabled":
+      case "experimental":
+      case "picker-anchor":
+        if (this.#fillPicker) this.#render();
+        break;
+    }
+  }
+}
+customElements.define("fig-input-gradient", FigInputGradient);
+
 /* Checkbox */
 /**
  * A custom checkbox input element.
@@ -7150,7 +7692,8 @@ class FigEasingCurve extends HTMLElement {
       );
       if (bezierSurface) {
         bezierSurface.addEventListener("pointerdown", (e) => {
-          if (e.target?.closest?.(".fig-easing-curve-handle, fig-handle")) return;
+          if (e.target?.closest?.(".fig-easing-curve-handle, fig-handle"))
+            return;
           this.#startBezierDrag(e, this.#bezierHandleForClientHalf(e));
         });
       }
@@ -7169,7 +7712,8 @@ class FigEasingCurve extends HTMLElement {
       );
       if (springSurface) {
         springSurface.addEventListener("pointerdown", (e) => {
-          if (e.target?.closest?.(".fig-easing-curve-handle, fig-handle")) return;
+          if (e.target?.closest?.(".fig-easing-curve-handle, fig-handle"))
+            return;
           this.#startSpringDrag(e, "duration");
         });
       }
@@ -8146,10 +8690,10 @@ customElements.define("fig-origin-grid", FigOriginGrid);
  * @attr {string} axis-labels - Space-delimited labels. 1 token: top. 2 tokens: x y. 4 tokens: left right top bottom.
  */
 class FigInputJoystick extends HTMLElement {
-  #boundMouseDown = null;
-  #boundTouchStart = null;
-  #boundKeyDown = null;
-  #boundKeyUp = null;
+  #boundPlanePointerDown = null;
+  #boundHandlePointerDown = null;
+  #boundHandleInput = null;
+  #boundHandleChange = null;
   #boundXInput = null;
   #boundYInput = null;
   #boundXFocusOut = null;
@@ -8162,17 +8706,19 @@ class FigInputJoystick extends HTMLElement {
 
     this.position = { x: 0.5, y: 0.5 };
     this.isDragging = false;
-    this.isShiftHeld = false;
     this.plane = null;
     this.cursor = null;
     this.xInput = null;
     this.yInput = null;
     this.coordinates = "screen";
     this.#initialized = false;
-    this.#boundMouseDown = (e) => this.#handleMouseDown(e);
-    this.#boundTouchStart = (e) => this.#handleTouchStart(e);
-    this.#boundKeyDown = (e) => this.#handleKeyDown(e);
-    this.#boundKeyUp = (e) => this.#handleKeyUp(e);
+    this.#boundPlanePointerDown = (e) => this.#handlePlanePointerDown(e);
+    this.#boundHandlePointerDown = () => {
+      this.isDragging = true;
+      this.plane?.classList.add("dragging");
+    };
+    this.#boundHandleInput = (e) => this.#handleHandleInput(e);
+    this.#boundHandleChange = () => this.#handleHandleChange();
     this.#boundXInput = (e) => this.#handleXInput(e);
     this.#boundYInput = (e) => this.#handleYInput(e);
     this.#boundXFocusOut = () => this.#handleFieldFocusOut();
@@ -8278,7 +8824,7 @@ class FigInputJoystick extends HTMLElement {
             ${labelsMarkup}
             <div class="fig-input-joystick-plane">
               <div class="fig-input-joystick-guides"></div>
-              <fig-handle></fig-handle>
+              <fig-handle drag drag-surface=".fig-input-joystick-plane" drag-axes="x,y" drag-snapping="modifier"></fig-handle>
             </div>
             <fig-tooltip text="Reset">
               <fig-button variant="ghost" icon="true" class="fig-joystick-reset" aria-label="Reset to default">
@@ -8318,10 +8864,10 @@ class FigInputJoystick extends HTMLElement {
     this.cursor = this.querySelector("fig-handle");
     this.xInput = this.querySelector("fig-input-number[name='x']");
     this.yInput = this.querySelector("fig-input-number[name='y']");
-    this.plane.addEventListener("mousedown", this.#boundMouseDown);
-    this.plane.addEventListener("touchstart", this.#boundTouchStart);
-    window.addEventListener("keydown", this.#boundKeyDown);
-    window.addEventListener("keyup", this.#boundKeyUp);
+    this.plane?.addEventListener("pointerdown", this.#boundPlanePointerDown);
+    this.cursor?.addEventListener("pointerdown", this.#boundHandlePointerDown);
+    this.cursor?.addEventListener("input", this.#boundHandleInput);
+    this.cursor?.addEventListener("change", this.#boundHandleChange);
     const resetBtn = this.querySelector(".fig-joystick-reset");
     if (resetBtn) {
       resetBtn.addEventListener("click", () => this.#resetToDefault());
@@ -8337,12 +8883,15 @@ class FigInputJoystick extends HTMLElement {
   }
 
   #cleanupListeners() {
-    if (this.plane) {
-      this.plane.removeEventListener("mousedown", this.#boundMouseDown);
-      this.plane.removeEventListener("touchstart", this.#boundTouchStart);
-    }
-    window.removeEventListener("keydown", this.#boundKeyDown);
-    window.removeEventListener("keyup", this.#boundKeyUp);
+    this.plane?.removeEventListener("pointerdown", this.#boundPlanePointerDown);
+    this.cursor?.removeEventListener(
+      "pointerdown",
+      this.#boundHandlePointerDown,
+    );
+    this.cursor?.removeEventListener("input", this.#boundHandleInput);
+    this.cursor?.removeEventListener("change", this.#boundHandleChange);
+    this.plane?.classList.remove("dragging");
+    this.isDragging = false;
     if (this.#fieldsEnabled && this.xInput && this.yInput) {
       this.xInput.removeEventListener("input", this.#boundXInput);
       this.xInput.removeEventListener("change", this.#boundXInput);
@@ -8376,49 +8925,41 @@ class FigInputJoystick extends HTMLElement {
     this.#emitChangeEvent();
   }
 
-  #snapToGuide(value) {
-    if (!this.isShiftHeld) return value;
-    if (value < 0.1) return 0;
-    if (value > 0.9) return 1;
-    if (value > 0.4 && value < 0.6) return 0.5;
-    return value;
+  #applyScreenPosition(screenX, screenY, { syncHandle = true } = {}) {
+    const x = Math.max(0, Math.min(1, screenX));
+    const yScreen = Math.max(0, Math.min(1, screenY));
+    const y = this.coordinates === "math" ? 1 - yScreen : yScreen;
+    this.position = { x, y };
+    if (syncHandle) this.#syncHandlePosition();
+    this.#syncValueAttribute();
   }
 
-  #snapToDiagonal(x, y) {
-    if (!this.isShiftHeld) return { x, y };
-    const diff = Math.abs(x - y);
-    if (diff < 0.1) return { x: (x + y) / 2, y: (x + y) / 2 };
-    if (Math.abs(1 - x - y) < 0.1) return { x, y: 1 - x };
-    return { x, y };
+  #handlePlanePointerDown(e) {
+    if (!this.plane || !this.cursor) return;
+    if (e.target?.closest?.(".fig-joystick-reset, fig-tooltip, fig-handle"))
+      return;
+    const rect = this.plane.getBoundingClientRect();
+    const screenX = rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5;
+    const screenY =
+      rect.height > 0 ? (e.clientY - rect.top) / rect.height : 0.5;
+    this.cursor.value = `${Math.round(screenX * 100)}% ${Math.round(screenY * 100)}%`;
+    this.#applyScreenPosition(screenX, screenY, { syncHandle: false });
+    this.#emitInputEvent();
+    this.#emitChangeEvent();
   }
 
-  #updatePosition(e) {
-    const rect = this.plane.getBoundingClientRect();
-    let x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    let screenY = Math.max(
-      0,
-      Math.min(1, (e.clientY - rect.top) / rect.height),
-    );
-
-    // Convert screen Y to internal Y (flip for math coordinates)
-    let y = this.coordinates === "math" ? 1 - screenY : screenY;
-
-    x = this.#snapToGuide(x);
-    y = this.#snapToGuide(y);
-
-    const snapped = this.#snapToDiagonal(x, y);
-    this.position = snapped;
-
-    const displayY = this.#displayY(snapped.y);
-    this.cursor.style.left = `${snapped.x * 100}%`;
-    this.cursor.style.top = `${displayY * 100}%`;
-    if (this.#fieldsEnabled && this.xInput && this.yInput) {
-      this.xInput.setAttribute("value", Math.round(snapped.x * 100));
-      this.yInput.setAttribute("value", Math.round(snapped.y * 100));
-    }
+  #handleHandleInput(e) {
+    const detail = e.detail ?? {};
+    if (typeof detail.px !== "number" || typeof detail.py !== "number") return;
+    this.#applyScreenPosition(detail.px, detail.py, { syncHandle: false });
+    this.#emitInputEvent();
+  }
 
+  #handleHandleChange() {
+    this.isDragging = false;
+    this.plane?.classList.remove("dragging");
     this.#syncValueAttribute();
-    this.#emitInputEvent();
+    this.#emitChangeEvent();
   }
 
   #emitInputEvent() {
@@ -8442,8 +8983,7 @@ class FigInputJoystick extends HTMLElement {
   #syncHandlePosition() {
     const displayY = this.#displayY(this.position.y);
     if (this.cursor) {
-      this.cursor.style.left = `${this.position.x * 100}%`;
-      this.cursor.style.top = `${displayY * 100}%`;
+      this.cursor.value = `${this.position.x * 100}% ${displayY * 100}%`;
     }
     // Also sync text inputs if they exist (convert to percentage 0-100)
     if (this.#fieldsEnabled && this.xInput && this.yInput) {
@@ -8479,64 +9019,6 @@ class FigInputJoystick extends HTMLElement {
     this.#emitChangeEvent();
   }
 
-  #handleMouseDown(e) {
-    if (e.target.closest(".fig-joystick-reset, fig-tooltip")) return;
-    this.isDragging = true;
-
-    this.#updatePosition(e);
-
-    this.plane.style.cursor = "grabbing";
-
-    const handleMouseMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updatePosition(e);
-    };
-
-    const handleMouseUp = () => {
-      this.isDragging = false;
-      this.plane.classList.remove("dragging");
-      this.plane.style.cursor = "";
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      this.#syncValueAttribute();
-      this.#emitChangeEvent();
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  }
-
-  #handleTouchStart(e) {
-    if (e.target.closest(".fig-joystick-reset, fig-tooltip")) return;
-    e.preventDefault();
-    this.isDragging = true;
-    this.#updatePosition(e.touches[0]);
-
-    const handleTouchMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updatePosition(e.touches[0]);
-    };
-
-    const handleTouchEnd = () => {
-      this.isDragging = false;
-      this.plane.classList.remove("dragging");
-      window.removeEventListener("touchmove", handleTouchMove);
-      window.removeEventListener("touchend", handleTouchEnd);
-      this.#syncValueAttribute();
-      this.#emitChangeEvent();
-    };
-
-    window.addEventListener("touchmove", handleTouchMove);
-    window.addEventListener("touchend", handleTouchEnd);
-  }
-
-  #handleKeyDown(e) {
-    if (e.key === "Shift") this.isShiftHeld = true;
-  }
-
-  #handleKeyUp(e) {
-    if (e.key === "Shift") this.isShiftHeld = false;
-  }
   focus() {
     const container = this.querySelector(".fig-input-joystick-plane-container");
     container?.focus();
@@ -8620,9 +9102,10 @@ customElements.define("fig-joystick", FigInputJoystick);
  * @attr {number} value - The current angle of the handle in degrees.
  * @attr {number} precision - The number of decimal places for the output.
  * @attr {boolean} text - Whether to display a text input for the angle value.
+ * @attr {boolean} dial - Whether to display the circular dial control. Defaults to true.
  * @attr {number} adjacent - The adjacent value of the angle.
  * @attr {number} opposite - The opposite value of the angle.
- * @attr {boolean} show-rotations - Whether to display a rotation count (×N) when rotations > 1. Defaults to false.
+ * @attr {boolean} rotations - Whether to display a rotation count (×N) when rotations > 1. Defaults to false.
  */
 class FigInputAngle extends HTMLElement {
   // Private fields
@@ -8645,6 +9128,7 @@ class FigInputAngle extends HTMLElement {
     this.units = "°";
     this.min = null;
     this.max = null;
+    this.dial = true;
     this.showRotations = false;
     this.rotationSpan = null;
 
@@ -8667,7 +9151,8 @@ class FigInputAngle extends HTMLElement {
       this.max = this.hasAttribute("max")
         ? Number(this.getAttribute("max"))
         : null;
-      this.showRotations = this.getAttribute("show-rotations") === "true";
+      this.dial = this.#readBooleanAttribute("dial", true);
+      this.showRotations = this.#readRotationsEnabled();
 
       this.#render();
       this.#setupListeners();
@@ -8690,14 +9175,38 @@ class FigInputAngle extends HTMLElement {
     this.innerHTML = this.#getInnerHTML();
   }
 
+  #readBooleanAttribute(name, defaultValue = false) {
+    const value = this.getAttribute(name);
+    if (value === null) return defaultValue;
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "" || normalized === "true") return true;
+    if (normalized === "false") return false;
+    return true;
+  }
+
+  #readRotationsEnabled() {
+    if (this.hasAttribute("rotations")) {
+      return this.#readBooleanAttribute("rotations", false);
+    }
+    // Backward-compat alias
+    if (this.hasAttribute("show-rotations")) {
+      return this.#readBooleanAttribute("show-rotations", false);
+    }
+    return false;
+  }
+
   #getInnerHTML() {
     const step = this.#getStepForUnit();
     const minAttr = this.min !== null ? `min="${this.min}"` : "";
     const maxAttr = this.max !== null ? `max="${this.max}"` : "";
     return `
-        <div class="fig-input-angle-plane" tabindex="0">
+        ${
+          this.dial
+            ? `<div class="fig-input-angle-plane" tabindex="0">
           <div class="fig-input-angle-handle"></div>
-        </div>
+        </div>`
+            : ""
+        }
         ${
           this.text
             ? `<fig-input-number
@@ -8798,8 +9307,8 @@ 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(
+    this.plane?.addEventListener("mousedown", this.#handleMouseDown.bind(this));
+    this.plane?.addEventListener(
       "touchstart",
       this.#handleTouchStart.bind(this),
     );
@@ -9025,6 +9534,8 @@ class FigInputAngle extends HTMLElement {
       "min",
       "max",
       "units",
+      "dial",
+      "rotations",
       "show-rotations",
     ];
   }
@@ -9067,18 +9578,26 @@ class FigInputAngle extends HTMLElement {
       case "text":
         if (newValue !== oldValue) {
           this.text = newValue?.toLowerCase() === "true";
-          if (this.plane) {
+          if (this.isConnected) {
             this.#render();
             this.#setupListeners();
             this.#syncHandlePosition();
           }
         }
         break;
+      case "dial":
+        this.dial = this.#readBooleanAttribute("dial", true);
+        if (this.isConnected) {
+          this.#render();
+          this.#setupListeners();
+          this.#syncHandlePosition();
+        }
+        break;
       case "units": {
         let units = newValue || "°";
         if (units === "deg") units = "°";
         this.units = units;
-        if (this.plane) {
+        if (this.isConnected) {
           this.#render();
           this.#setupListeners();
           this.#syncHandlePosition();
@@ -9087,7 +9606,7 @@ class FigInputAngle extends HTMLElement {
       }
       case "min":
         this.min = newValue !== null ? Number(newValue) : null;
-        if (this.plane) {
+        if (this.isConnected) {
           this.#render();
           this.#setupListeners();
           this.#syncHandlePosition();
@@ -9095,15 +9614,16 @@ class FigInputAngle extends HTMLElement {
         break;
       case "max":
         this.max = newValue !== null ? Number(newValue) : null;
-        if (this.plane) {
+        if (this.isConnected) {
           this.#render();
           this.#setupListeners();
           this.#syncHandlePosition();
         }
         break;
+      case "rotations":
       case "show-rotations":
-        this.showRotations = newValue === "true";
-        if (this.plane) {
+        this.showRotations = this.#readRotationsEnabled();
+        if (this.isConnected) {
           this.#render();
           this.#setupListeners();
           this.#syncHandlePosition();
@@ -9148,6 +9668,10 @@ class FigShimmer extends HTMLElement {
 }
 customElements.define("fig-shimmer", FigShimmer);
 
+// FigSkeleton
+class FigSkeleton extends FigShimmer {}
+customElements.define("fig-skeleton", FigSkeleton);
+
 // FigLayer
 class FigLayer extends HTMLElement {
   static get observedAttributes() {
@@ -9281,12 +9805,16 @@ class FigFillPicker extends HTMLElement {
 
   // Fill state
   #fillType = "solid";
+  #gamut = "srgb"; // "srgb" or "display-p3"
   #color = { h: 0, s: 0, v: 85, a: 1 }; // Default gray #D9D9D9
+  #colorInputMode = "hex";
   #gradient = {
     type: "linear",
     angle: 0,
     centerX: 50,
     centerY: 50,
+    interpolationSpace: "oklab",
+    hueInterpolation: "shorter",
     stops: [
       { position: 0, color: "#D9D9D9", opacity: 100 },
       { position: 100, color: "#737373", opacity: 100 },
@@ -9306,6 +9834,7 @@ class FigFillPicker extends HTMLElement {
   #hueSlider = null;
   #opacitySlider = null;
   #isDraggingColor = false;
+  #teardownColorAreaEvents = null;
 
   constructor() {
     super();
@@ -9327,6 +9856,10 @@ class FigFillPicker extends HTMLElement {
   }
 
   disconnectedCallback() {
+    if (this.#teardownColorAreaEvents) {
+      this.#teardownColorAreaEvents();
+      this.#teardownColorAreaEvents = null;
+    }
     if (this.#dialog) {
       this.#dialog.close();
       this.#dialog.remove();
@@ -9396,8 +9929,15 @@ class FigFillPicker extends HTMLElement {
       if (parsed.opacity !== undefined) {
         this.#color.a = parsed.opacity / 100;
       }
-      if (parsed.gradient)
-        this.#gradient = { ...this.#gradient, ...parsed.gradient };
+      if (parsed.colorSpace === "display-p3" || parsed.colorSpace === "srgb") {
+        this.#gamut = parsed.colorSpace;
+      }
+      if (parsed.gradient) {
+        this.#gradient = normalizeGradientConfig({
+          ...this.#gradient,
+          ...parsed.gradient,
+        });
+      }
       if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
       if (parsed.video) this.#video = { ...this.#video, ...parsed.video };
 
@@ -9493,6 +10033,10 @@ class FigFillPicker extends HTMLElement {
     }
 
     this.#switchTab(this.#fillType);
+
+    const gamutEl = this.#dialog.querySelector(".fig-fill-picker-gamut");
+    if (gamutEl) gamutEl.value = this.#gamut;
+
     this.#dialog.open = true;
 
     requestAnimationFrame(() => {
@@ -9580,16 +10124,22 @@ class FigFillPicker extends HTMLElement {
       .map((m) => `<div class="fig-fill-picker-tab" data-tab="${m}"></div>`)
       .join("\n        ");
 
+    const gamutDropdown = `<fig-dropdown class="fig-fill-picker-gamut" ${expAttr} value="${this.#gamut}">
+          <option value="srgb">sRGB</option>
+          <option value="display-p3">Display P3</option>
+        </fig-dropdown>`;
+
     this.#dialog.innerHTML = `
       <fig-header>
         ${headerContent}
+        ${gamutDropdown}
         <fig-button icon variant="ghost" class="fig-fill-picker-close">
           <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
         </fig-button>
       </fig-header>
-      <div class="fig-fill-picker-content">
+      <fig-content>
         ${tabDivs}
-      </div>
+      </fig-content>
     `;
 
     document.body.appendChild(this.#dialog);
@@ -9621,6 +10171,20 @@ class FigFillPicker extends HTMLElement {
       });
     }
 
+    // Setup gamut dropdown
+    const gamutEl = this.#dialog.querySelector(".fig-fill-picker-gamut");
+    if (gamutEl) {
+      const handleGamutChange = (e) => {
+        const val = e.currentTarget?.value ?? e.target?.value ?? e.detail;
+        if (val && val !== this.#gamut) {
+          this.#gamut = val;
+          this.#onGamutChange();
+        }
+      };
+      gamutEl.addEventListener("input", handleGamutChange);
+      gamutEl.addEventListener("change", handleGamutChange);
+    }
+
     this.#dialog
       .querySelector(".fig-fill-picker-close")
       .addEventListener("click", () => {
@@ -9690,7 +10254,7 @@ class FigFillPicker extends HTMLElement {
     });
 
     // Zero out content padding for custom mode tabs
-    const contentEl = this.#dialog.querySelector(".fig-fill-picker-content");
+    const contentEl = this.#dialog.querySelector("fig-content");
     if (contentEl) {
       contentEl.style.padding = this.#customSlots[tabName] ? "0" : "";
     }
@@ -9711,13 +10275,27 @@ class FigFillPicker extends HTMLElement {
   #initSolidTab() {
     const container = this.#dialog.querySelector('[data-tab="solid"]');
     const showAlpha = this.getAttribute("alpha") !== "false";
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const savedMode = localStorage.getItem("figui-color-input-mode");
+    if (
+      savedMode &&
+      ["hex", "rgb", "hsl", "hsb", "lab", "lch"].includes(savedMode)
+    ) {
+      this.#colorInputMode = savedMode;
+    }
 
     container.innerHTML = `
-      <div class="fig-fill-picker-color-area">
+      <fig-preview class="fig-fill-picker-color-area">
         <canvas width="200" height="200"></canvas>
-        <div class="fig-fill-picker-handle"></div>
-      </div>
+        <fig-handle
+          drag
+          drag-surface=".fig-fill-picker-color-area"
+          drag-axes="x,y"
+        ></fig-handle>
+      </fig-preview>
       <div class="fig-fill-picker-sliders">
+        <fig-tooltip text="Sample color"><fig-button icon variant="ghost" class="fig-fill-picker-eyedropper"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button></fig-tooltip>
         <fig-slider type="hue" variant="neue" min="0" max="360" value="${
           this.#color.h
         }"></fig-slider>
@@ -9729,17 +10307,22 @@ class FigFillPicker extends HTMLElement {
             : ""
         }
       </div>
-      <div class="fig-fill-picker-inputs">
-        <fig-button icon variant="ghost" class="fig-fill-picker-eyedropper" title="Pick color from screen"><span class="fig-mask-icon" style="--icon: var(--icon-eyedropper)"></span></fig-button>
-        <fig-input-color class="fig-fill-picker-color-input" text="true" picker="false" value="${this.#hsvToHex(
-          this.#color,
-        )}"></fig-input-color>
-      </div>
+      <fig-field class="fig-fill-picker-inputs" direction="horizontal">
+        <fig-dropdown class="fig-fill-picker-input-mode" ${expAttr} value="${this.#colorInputMode}">
+          <option value="hex">Hex</option>
+          <option value="rgb">RGB</option>
+          <option value="hsl">HSL</option>
+          <option value="hsb">HSB</option>
+          <option value="lab">LAB</option>
+          <option value="lch">LCH</option>
+        </fig-dropdown>
+        <span class="fig-fill-picker-input-fields"></span>
+      </fig-field>
     `;
 
     // Setup color area
     this.#colorArea = container.querySelector("canvas");
-    this.#colorAreaHandle = container.querySelector(".fig-fill-picker-handle");
+    this.#colorAreaHandle = container.querySelector("fig-handle");
     this.#drawColorArea();
     this.#updateHandlePosition();
     this.#setupColorAreaEvents();
@@ -9772,25 +10355,17 @@ class FigFillPicker extends HTMLElement {
       });
     }
 
-    // Setup color input
-    const colorInput = container.querySelector(".fig-fill-picker-color-input");
-    colorInput.addEventListener("input", (e) => {
-      // Skip if we're dragging - prevents feedback loop that loses saturation for dark colors
-      if (this.#isDraggingColor) return;
-
-      const hex = e.target.value;
-      this.#color = { ...this.#hexToHSV(hex), a: this.#color.a };
-      this.#drawColorArea();
-      this.#updateHandlePosition();
-      if (this.#hueSlider) {
-        this.#hueSlider.setAttribute("value", this.#color.h);
-      }
-      this.#emitInput();
-    });
-    colorInput.addEventListener("change", () => {
-      this.#emitChange();
+    // Setup color input mode dropdown
+    const modeDropdown = container.querySelector(".fig-fill-picker-input-mode");
+    modeDropdown.addEventListener("input", (e) => {
+      this.#colorInputMode = e.target.value;
+      localStorage.setItem("figui-color-input-mode", this.#colorInputMode);
+      this.#rebuildColorInputFields();
     });
 
+    // Build initial color input fields
+    this.#rebuildColorInputFields();
+
     // Setup eyedropper
     const eyedropper = container.querySelector(".fig-fill-picker-eyedropper");
     if ("EyeDropper" in window) {
@@ -9813,6 +10388,27 @@ class FigFillPicker extends HTMLElement {
     }
   }
 
+  #onGamutChange() {
+    // Recreate the solid canvas with the new color space
+    const solidContainer = this.#dialog?.querySelector('[data-tab="solid"]');
+    if (solidContainer) {
+      const oldCanvas = solidContainer.querySelector("canvas");
+      if (oldCanvas) {
+        const newCanvas = document.createElement("canvas");
+        newCanvas.width = oldCanvas.width;
+        newCanvas.height = oldCanvas.height;
+        oldCanvas.replaceWith(newCanvas);
+        this.#colorArea = newCanvas;
+        this.#setupColorAreaEvents();
+      }
+      this.#drawColorArea();
+      this.#updateHandlePosition();
+    }
+    // Refresh gradient preview if gradient tab exists
+    this.#updateGradientPreview();
+    this.#emitInput();
+  }
+
   #drawColorArea() {
     // Refresh canvas reference in case DOM changed
     if (!this.#colorArea && this.#dialog) {
@@ -9820,27 +10416,31 @@ class FigFillPicker extends HTMLElement {
     }
     if (!this.#colorArea) return;
 
-    const ctx = this.#colorArea.getContext("2d");
+    const colorSpace = this.#gamut === "display-p3" ? "display-p3" : "srgb";
+    const ctx = this.#colorArea.getContext("2d", { colorSpace });
     if (!ctx) return;
 
     const width = this.#colorArea.width;
     const height = this.#colorArea.height;
 
-    // Clear canvas first
     ctx.clearRect(0, 0, width, height);
 
-    // Draw saturation-value gradient
     const hue = this.#color.h;
+    const isP3 = this.#gamut === "display-p3";
 
-    // Create horizontal gradient (white to hue color)
     const gradH = ctx.createLinearGradient(0, 0, width, 0);
-    gradH.addColorStop(0, "#FFFFFF");
-    gradH.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
+    if (isP3) {
+      gradH.addColorStop(0, "color(display-p3 1 1 1)");
+      const [r, g, b] = hslToP3(hue, 100, 50);
+      gradH.addColorStop(1, `color(display-p3 ${r} ${g} ${b})`);
+    } else {
+      gradH.addColorStop(0, "#FFFFFF");
+      gradH.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
+    }
 
     ctx.fillStyle = gradH;
     ctx.fillRect(0, 0, width, height);
 
-    // Create vertical gradient (transparent to black)
     const gradV = ctx.createLinearGradient(0, 0, 0, height);
     gradV.addColorStop(0, "rgba(0,0,0,0)");
     gradV.addColorStop(1, "rgba(0,0,0,1)");
@@ -9860,90 +10460,319 @@ class FigFillPicker extends HTMLElement {
       return;
     }
 
-    const x = (this.#color.s / 100) * rect.width;
-    const y = ((100 - this.#color.v) / 100) * rect.height;
+    const xPct = Math.max(0, Math.min(100, this.#color.s));
+    const yPct = Math.max(0, Math.min(100, 100 - this.#color.v));
 
-    this.#colorAreaHandle.style.left = `${x}px`;
-    this.#colorAreaHandle.style.top = `${y}px`;
-    this.#colorAreaHandle.style.setProperty(
-      "--picker-color",
+    this.#colorAreaHandle.setAttribute("value", `${xPct}% ${yPct}%`);
+    this.#colorAreaHandle.setAttribute(
+      "color",
       this.#hsvToHex({ ...this.#color, a: 1 }),
     );
   }
 
+  #updateColorFromAreaPosition(x, y, opts = {}) {
+    const { updateHandle = true, emitInput = true, emitChange = false } = opts;
+    this.#color.s = Math.max(0, Math.min(100, x * 100));
+    this.#color.v = Math.max(0, Math.min(100, (1 - y) * 100));
+    if (this.#colorAreaHandle) {
+      this.#colorAreaHandle.setAttribute(
+        "color",
+        this.#hsvToHex({ ...this.#color, a: 1 }),
+      );
+    }
+    if (updateHandle) this.#updateHandlePosition();
+    this.#updateColorInputs();
+    if (emitInput) this.#emitInput();
+    if (emitChange) this.#emitChange();
+  }
+
   #setupColorAreaEvents() {
+    if (this.#teardownColorAreaEvents) {
+      this.#teardownColorAreaEvents();
+      this.#teardownColorAreaEvents = null;
+    }
     if (!this.#colorArea || !this.#colorAreaHandle) return;
 
-    const endColorDrag = () => {
-      if (!this.#isDraggingColor) return;
-      this.#isDraggingColor = false;
-      this.#emitChange();
-    };
+    const colorAreaEl = this.#colorArea.parentElement || this.#colorArea;
+    const colorAreaHandleEl = this.#colorAreaHandle;
 
-    const updateFromEvent = (e) => {
-      const rect = this.#colorArea.getBoundingClientRect();
+    let isPlaneDragging = false;
+
+    const updatePlaneFromEvent = (e, opts = {}) => {
+      const rect = colorAreaEl.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
       const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
       const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));
-
-      this.#color.s = (x / rect.width) * 100;
-      this.#color.v = 100 - (y / rect.height) * 100;
-
-      this.#updateHandlePosition();
-      this.#updateColorInputs();
-      this.#emitInput();
+      this.#updateColorFromAreaPosition(x / rect.width, y / rect.height, opts);
     };
 
-    // Canvas click/drag
-    this.#colorArea.addEventListener("pointerdown", (e) => {
+    const onPlanePointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (
+        e.target === colorAreaHandleEl ||
+        colorAreaHandleEl.contains(e.target)
+      )
+        return;
+      isPlaneDragging = true;
       this.#isDraggingColor = true;
-      this.#colorArea.setPointerCapture(e.pointerId);
-      updateFromEvent(e);
-    });
+      colorAreaEl.setPointerCapture(e.pointerId);
+      updatePlaneFromEvent(e, { updateHandle: true, emitInput: true });
+    };
 
-    this.#colorArea.addEventListener("pointermove", (e) => {
-      if (!this.#isDraggingColor) return;
+    const onPlanePointerMove = (e) => {
+      if (!isPlaneDragging) return;
       if (e.buttons === 0) {
-        endColorDrag();
+        onPlaneDragEnd();
         return;
       }
-      updateFromEvent(e);
-    });
+      updatePlaneFromEvent(e, { updateHandle: true, emitInput: true });
+    };
 
-    this.#colorArea.addEventListener("pointerup", endColorDrag);
-    this.#colorArea.addEventListener("pointercancel", endColorDrag);
-    this.#colorArea.addEventListener("lostpointercapture", endColorDrag);
+    const onPlaneDragEnd = () => {
+      if (!isPlaneDragging) return;
+      isPlaneDragging = false;
+      this.#isDraggingColor = false;
+      this.#emitChange();
+    };
 
-    // Handle drag (for when handle is at corners)
-    this.#colorAreaHandle.addEventListener("pointerdown", (e) => {
-      e.stopPropagation(); // Prevent canvas from also capturing
+    const onHandleInput = (e) => {
       this.#isDraggingColor = true;
-      this.#colorAreaHandle.setPointerCapture(e.pointerId);
-    });
+      const px = e.detail?.px;
+      const py = e.detail?.py;
+      if (!Number.isFinite(px) || !Number.isFinite(py)) return;
+      colorAreaHandleEl.setAttribute("value", `${px * 100}% ${py * 100}%`);
+      this.#updateColorFromAreaPosition(px, py, {
+        updateHandle: false,
+        emitInput: true,
+      });
+    };
 
-    this.#colorAreaHandle.addEventListener("pointermove", (e) => {
-      if (!this.#isDraggingColor) return;
-      if (e.buttons === 0) {
-        endColorDrag();
-        return;
+    const onHandleChange = (e) => {
+      const px = e.detail?.px;
+      const py = e.detail?.py;
+      if (Number.isFinite(px) && Number.isFinite(py)) {
+        colorAreaHandleEl.setAttribute("value", `${px * 100}% ${py * 100}%`);
+        this.#updateColorFromAreaPosition(px, py, {
+          updateHandle: false,
+          emitInput: false,
+        });
+      }
+      this.#isDraggingColor = false;
+      this.#emitChange();
+    };
+
+    colorAreaEl.addEventListener("pointerdown", onPlanePointerDown);
+    colorAreaEl.addEventListener("pointermove", onPlanePointerMove);
+    colorAreaEl.addEventListener("pointerup", onPlaneDragEnd);
+    colorAreaEl.addEventListener("pointercancel", onPlaneDragEnd);
+    colorAreaEl.addEventListener("lostpointercapture", onPlaneDragEnd);
+
+    colorAreaHandleEl.addEventListener("input", onHandleInput);
+    colorAreaHandleEl.addEventListener("change", onHandleChange);
+
+    this.#teardownColorAreaEvents = () => {
+      colorAreaEl.removeEventListener("pointerdown", onPlanePointerDown);
+      colorAreaEl.removeEventListener("pointermove", onPlanePointerMove);
+      colorAreaEl.removeEventListener("pointerup", onPlaneDragEnd);
+      colorAreaEl.removeEventListener("pointercancel", onPlaneDragEnd);
+      colorAreaEl.removeEventListener("lostpointercapture", onPlaneDragEnd);
+
+      colorAreaHandleEl.removeEventListener("input", onHandleInput);
+      colorAreaHandleEl.removeEventListener("change", onHandleChange);
+      this.#isDraggingColor = false;
+    };
+  }
+
+  #rebuildColorInputFields() {
+    const container = this.#dialog?.querySelector(
+      ".fig-fill-picker-input-fields",
+    );
+    if (!container) return;
+
+    const wrap = (tooltip, html) =>
+      `<fig-tooltip text="${tooltip}">${html}</fig-tooltip>`;
+
+    const num = (cls, min, max, step) =>
+      `<fig-input-number class="${cls}" min="${min}" max="${max}"${step != null ? ` step="${step}"` : ""}></fig-input-number>`;
+
+    let html;
+    switch (this.#colorInputMode) {
+      case "rgb":
+        html = `<div class="input-combo">
+          ${wrap("Red", num("fig-fill-picker-ci-r", 0, 255))}
+          ${wrap("Green", num("fig-fill-picker-ci-g", 0, 255))}
+          ${wrap("Blue", num("fig-fill-picker-ci-b", 0, 255))}
+        </div>`;
+        break;
+      case "hsl":
+        html = `<div class="input-combo">
+          ${wrap("Hue", num("fig-fill-picker-ci-h", 0, 360))}
+          ${wrap("Saturation", num("fig-fill-picker-ci-s", 0, 100))}
+          ${wrap("Lightness", num("fig-fill-picker-ci-l", 0, 100))}
+        </div>`;
+        break;
+      case "hsb":
+        html = `<div class="input-combo">
+          ${wrap("Hue", num("fig-fill-picker-ci-h", 0, 360))}
+          ${wrap("Saturation", num("fig-fill-picker-ci-s", 0, 100))}
+          ${wrap("Brightness", num("fig-fill-picker-ci-v", 0, 100))}
+        </div>`;
+        break;
+      case "lab":
+        html = `<div class="input-combo">
+          ${wrap("Lightness", num("fig-fill-picker-ci-okl", 0, 100))}
+          ${wrap("Green-Red axis", num("fig-fill-picker-ci-oka", -0.4, 0.4, 0.001))}
+          ${wrap("Blue-Yellow axis", num("fig-fill-picker-ci-okb", -0.4, 0.4, 0.001))}
+        </div>`;
+        break;
+      case "lch":
+        html = `<div class="input-combo">
+          ${wrap("Lightness", num("fig-fill-picker-ci-okl", 0, 100))}
+          ${wrap("Chroma", num("fig-fill-picker-ci-okc", 0, 0.4, 0.001))}
+          ${wrap("Hue", num("fig-fill-picker-ci-okh", 0, 360))}
+        </div>`;
+        break;
+      default: // hex
+        html = `<fig-input-text class="fig-fill-picker-ci-hex" placeholder="FFFFFF"></fig-input-text>`;
+        break;
+    }
+
+    container.innerHTML = html;
+    this.#wireColorInputEvents();
+    requestAnimationFrame(() => this.#updateColorInputs());
+  }
+
+  #wireColorInputEvents() {
+    const container = this.#dialog?.querySelector(
+      ".fig-fill-picker-input-fields",
+    );
+    if (!container) return;
+
+    const onInput = () => {
+      if (this.#isDraggingColor) return;
+      const color = this.#readColorFromInputs();
+      if (!color) return;
+      this.#color = { ...color, a: this.#color.a };
+      this.#drawColorArea();
+      this.#updateHandlePosition();
+      if (this.#hueSlider) {
+        this.#hueSlider.setAttribute("value", this.#color.h);
       }
-      updateFromEvent(e);
+      this.#emitInput();
+    };
+
+    const onChange = () => this.#emitChange();
+
+    const inputs = container.querySelectorAll(
+      "fig-input-number, fig-input-text",
+    );
+    inputs.forEach((el) => {
+      el.addEventListener("input", onInput);
+      el.addEventListener("change", onChange);
     });
+  }
 
-    this.#colorAreaHandle.addEventListener("pointerup", endColorDrag);
-    this.#colorAreaHandle.addEventListener("pointercancel", endColorDrag);
-    this.#colorAreaHandle.addEventListener("lostpointercapture", endColorDrag);
+  #readColorFromInputs() {
+    const q = (cls) => this.#dialog?.querySelector(`.${cls}`);
+    const val = (cls) => parseFloat(q(cls)?.value ?? 0);
+
+    switch (this.#colorInputMode) {
+      case "rgb":
+        return this.#rgbToHSV({
+          r: val("fig-fill-picker-ci-r"),
+          g: val("fig-fill-picker-ci-g"),
+          b: val("fig-fill-picker-ci-b"),
+        });
+      case "hsl": {
+        const rgb = this.#hslToRGB({
+          h: val("fig-fill-picker-ci-h"),
+          s: val("fig-fill-picker-ci-s"),
+          l: val("fig-fill-picker-ci-l"),
+        });
+        return this.#rgbToHSV(rgb);
+      }
+      case "hsb":
+        return {
+          h: val("fig-fill-picker-ci-h"),
+          s: val("fig-fill-picker-ci-s"),
+          v: val("fig-fill-picker-ci-v"),
+          a: 1,
+        };
+      case "lab": {
+        const rgb = this.#oklabToRGB({
+          l: val("fig-fill-picker-ci-okl") / 100,
+          a: val("fig-fill-picker-ci-oka"),
+          b: val("fig-fill-picker-ci-okb"),
+        });
+        return this.#rgbToHSV(rgb);
+      }
+      case "lch": {
+        const rgb = this.#oklchToRGB({
+          l: val("fig-fill-picker-ci-okl") / 100,
+          c: val("fig-fill-picker-ci-okc"),
+          h: val("fig-fill-picker-ci-okh"),
+        });
+        return this.#rgbToHSV(rgb);
+      }
+      default: {
+        // hex
+        const hexEl = q("fig-fill-picker-ci-hex");
+        if (!hexEl) return null;
+        let hex = hexEl.value.replace(/^#/, "");
+        if (hex.length === 3)
+          hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        if (hex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(hex)) return null;
+        return this.#hexToHSV(`#${hex}`);
+      }
+    }
   }
 
   #updateColorInputs() {
     if (!this.#dialog) return;
 
     const hex = this.#hsvToHex(this.#color);
+    const rgb = this.#hsvToRGB(this.#color);
+    const q = (cls) => this.#dialog.querySelector(`.${cls}`);
+    const set = (cls, v) => {
+      const el = q(cls);
+      if (el) el.setAttribute("value", v);
+    };
 
-    const colorInput = this.#dialog.querySelector(
-      ".fig-fill-picker-color-input",
-    );
-    if (colorInput) {
-      colorInput.setAttribute("value", hex);
+    switch (this.#colorInputMode) {
+      case "rgb":
+        set("fig-fill-picker-ci-r", rgb.r);
+        set("fig-fill-picker-ci-g", rgb.g);
+        set("fig-fill-picker-ci-b", rgb.b);
+        break;
+      case "hsl": {
+        const hsl = this.#rgbToHSL(rgb);
+        set("fig-fill-picker-ci-h", Math.round(hsl.h));
+        set("fig-fill-picker-ci-s", Math.round(hsl.s));
+        set("fig-fill-picker-ci-l", Math.round(hsl.l));
+        break;
+      }
+      case "hsb":
+        set("fig-fill-picker-ci-h", Math.round(this.#color.h));
+        set("fig-fill-picker-ci-s", Math.round(this.#color.s));
+        set("fig-fill-picker-ci-v", Math.round(this.#color.v));
+        break;
+      case "lab": {
+        const lab = this.#rgbToOKLAB(rgb);
+        set("fig-fill-picker-ci-okl", Math.round(lab.l * 100));
+        set("fig-fill-picker-ci-oka", +lab.a.toFixed(3));
+        set("fig-fill-picker-ci-okb", +lab.b.toFixed(3));
+        break;
+      }
+      case "lch": {
+        const lch = this.#rgbToOKLCH(rgb);
+        set("fig-fill-picker-ci-okl", Math.round(lch.l * 100));
+        set("fig-fill-picker-ci-okc", +lch.c.toFixed(3));
+        set("fig-fill-picker-ci-okh", Math.round(lch.h));
+        break;
+      }
+      default: // hex
+        set("fig-fill-picker-ci-hex", hex.replace(/^#/, "").toUpperCase());
+        break;
     }
 
     if (this.#opacitySlider) {
@@ -9960,7 +10789,7 @@ class FigFillPicker extends HTMLElement {
     const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
-      <div class="fig-fill-picker-gradient-header">
+      <fig-field class="fig-fill-picker-gradient-header" direction="horizontal">
         <fig-dropdown class="fig-fill-picker-gradient-type" ${expAttr} value="${
           this.#gradient.type
         }">
@@ -9986,18 +10815,39 @@ class FigFillPicker extends HTMLElement {
             <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
           </fig-button>
         </fig-tooltip>
-      </div>
-      <div class="fig-fill-picker-gradient-preview">
+      </fig-field>
+      <fig-preview class="fig-fill-picker-gradient-preview">
         <div class="fig-fill-picker-gradient-bar"></div>
         <div class="fig-fill-picker-gradient-stops-handles"></div>
-      </div>
+      </fig-preview>
+      <fig-field class="fig-fill-picker-gradient-interpolation" direction="horizontal">
+        <label>Mixing</label>
+        <fig-dropdown class="fig-fill-picker-gradient-space" full ${expAttr} value="${
+          this.#gradient.interpolationSpace === "oklch"
+            ? `oklch-${this.#gradient.hueInterpolation || "shorter"}`
+            : this.#gradient.interpolationSpace
+        }">
+          <optgroup label="sRGB">
+            <option value="srgb-linear">Linear</option>
+          </optgroup>
+          <optgroup label="OKLab">
+            <option value="oklab">Perceptual</option>
+          </optgroup>
+          <optgroup label="OKLCH">
+            <option value="oklch-shorter">Shorter hue</option>
+            <option value="oklch-longer">Longer hue</option>
+            <option value="oklch-increasing">Increasing hue</option>
+            <option value="oklch-decreasing">Decreasing hue</option>
+          </optgroup>
+        </fig-dropdown>
+      </fig-field>
       <div class="fig-fill-picker-gradient-stops">
-        <div class="fig-fill-picker-gradient-stops-header">
+        <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
           <span>Stops</span>
           <fig-button icon variant="ghost" class="fig-fill-picker-gradient-add" title="Add stop">
             <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
           </fig-button>
-        </div>
+        </fig-header>
         <div class="fig-fill-picker-gradient-stops-list"></div>
       </div>
     `;
@@ -10011,11 +10861,41 @@ class FigFillPicker extends HTMLElement {
     const typeDropdown = container.querySelector(
       ".fig-fill-picker-gradient-type",
     );
-    typeDropdown.addEventListener("change", (e) => {
-      this.#gradient.type = e.target.value;
+    const getDropdownValue = (event) =>
+      event.currentTarget?.value ?? event.target?.value ?? event.detail;
+
+    const handleTypeChange = (e) => {
+      this.#gradient.type = getDropdownValue(e);
       this.#updateGradientUI();
       this.#emitInput();
-    });
+    };
+    typeDropdown.addEventListener("input", handleTypeChange);
+    typeDropdown.addEventListener("change", handleTypeChange);
+
+    const interpolationDropdown = container.querySelector(
+      ".fig-fill-picker-gradient-space",
+    );
+    const handleInterpolationChange = (e) => {
+      const val = getDropdownValue(e);
+      let space = val;
+      let hue = "shorter";
+      if (val.startsWith("oklch-")) {
+        space = "oklch";
+        hue = val.slice(6);
+      }
+      this.#gradient = normalizeGradientConfig({
+        ...this.#gradient,
+        interpolationSpace: space,
+        hueInterpolation: hue,
+      });
+      this.#updateGradientUI();
+      this.#emitInput();
+    };
+    interpolationDropdown?.addEventListener("input", handleInterpolationChange);
+    interpolationDropdown?.addEventListener(
+      "change",
+      handleInterpolationChange,
+    );
 
     // Angle input
     // Convert from fig-input-angle coordinates (0° = right) to CSS coordinates (0° = up)
@@ -10076,6 +10956,7 @@ class FigFillPicker extends HTMLElement {
 
     const container = this.#dialog.querySelector('[data-tab="gradient"]');
     if (!container) return;
+    this.#gradient = normalizeGradientConfig(this.#gradient);
 
     // Show/hide angle vs center inputs
     const angleInput = container.querySelector(
@@ -10096,6 +10977,16 @@ class FigFillPicker extends HTMLElement {
       angleInput.setAttribute("value", pickerAngle);
     }
 
+    const interpolationDropdown = container.querySelector(
+      ".fig-fill-picker-gradient-space",
+    );
+    if (interpolationDropdown) {
+      interpolationDropdown.value =
+        this.#gradient.interpolationSpace === "oklch"
+          ? `oklch-${this.#gradient.hueInterpolation || "shorter"}`
+          : this.#gradient.interpolationSpace;
+    }
+
     this.#updateGradientPreview();
     this.#updateGradientStopsList();
   }
@@ -10103,9 +10994,14 @@ class FigFillPicker extends HTMLElement {
   #updateGradientPreview() {
     if (!this.#dialog) return;
 
+    const preview = this.#dialog.querySelector(
+      ".fig-fill-picker-gradient-preview",
+    );
     const bar = this.#dialog.querySelector(".fig-fill-picker-gradient-bar");
-    if (bar) {
-      bar.style.background = this.#getGradientCSS();
+    if (preview || bar) {
+      const css = this.#getGradientCSS();
+      if (bar) bar.style.background = css;
+      if (preview) preview.style.background = css;
     }
 
     this.#updateChit();
@@ -10122,7 +11018,7 @@ class FigFillPicker extends HTMLElement {
     list.innerHTML = this.#gradient.stops
       .map(
         (stop, index) => `
-      <div class="fig-fill-picker-gradient-stop-row" data-index="${index}">
+      <fig-field class="fig-fill-picker-gradient-stop-row" direction="horizontal" data-index="${index}">
         <fig-input-number class="fig-fill-picker-stop-position" min="0" max="100" value="${
           stop.position
         }" units="%"></fig-input-number>
@@ -10134,7 +11030,7 @@ class FigFillPicker extends HTMLElement {
         }>
           <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
         </fig-button>
-      </div>
+      </fig-field>
     `,
       )
       .join("");
@@ -10188,30 +11084,52 @@ class FigFillPicker extends HTMLElement {
       });
   }
 
-  #getGradientCSS() {
-    const stops = this.#gradient.stops
+  #buildGradientCSS(interpolationSpaceOverride, includeInterpolation = true) {
+    const gradient = normalizeGradientConfig({
+      ...this.#gradient,
+      interpolationSpace:
+        interpolationSpaceOverride ?? this.#gradient.interpolationSpace,
+    });
+    const isP3 = this.#gamut === "display-p3";
+    const stops = gradient.stops
       .map((s) => {
-        const rgba = this.#hexToRGBA(s.color, s.opacity / 100);
-        return `${rgba} ${s.position}%`;
+        const color = isP3
+          ? this.#hexToP3(s.color, s.opacity / 100)
+          : this.#hexToRGBA(s.color, s.opacity / 100);
+        return `${color} ${s.position}%`;
       })
       .join(", ");
-
-    switch (this.#gradient.type) {
+    const interpolation = includeInterpolation
+      ? ` ${gradientInterpolationClause(gradient)}`
+      : "";
+    switch (gradient.type) {
       case "linear":
-        return `linear-gradient(${this.#gradient.angle}deg, ${stops})`;
+        return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
       case "radial":
-        return `radial-gradient(circle at ${this.#gradient.centerX}% ${
-          this.#gradient.centerY
-        }%, ${stops})`;
+        return `radial-gradient(circle at ${gradient.centerX}% ${gradient.centerY}%${interpolation}, ${stops})`;
       case "angular":
-        // Internal gradient.angle is already in CSS coordinate system (0° = top)
-        // because it's converted when reading from fig-input-angle
-        return `conic-gradient(from ${this.#gradient.angle}deg, ${stops})`;
+        return `conic-gradient(from ${gradient.angle}deg${interpolation}, ${stops})`;
       default:
-        return `linear-gradient(${this.#gradient.angle}deg, ${stops})`;
+        return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
     }
   }
 
+  #testGradientSupport(css) {
+    const el = document.createElement("div");
+    el.style.background = css;
+    return !!el.style.background;
+  }
+
+  #getGradientCSS() {
+    const preferred = this.#buildGradientCSS(undefined, true);
+    if (this.#testGradientSupport(preferred)) return preferred;
+
+    const oklabFallback = this.#buildGradientCSS("oklab", true);
+    if (this.#testGradientSupport(oklabFallback)) return oklabFallback;
+
+    return this.#buildGradientCSS("oklab", false);
+  }
+
   // ============ IMAGE TAB ============
   #initImageTab() {
     const container = this.#dialog.querySelector('[data-tab="image"]');
@@ -10219,7 +11137,7 @@ class FigFillPicker extends HTMLElement {
     const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
-      <div class="fig-fill-picker-media-header">
+      <fig-field class="fig-fill-picker-media-header" direction="horizontal">
         <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#image.scaleMode
         }">
@@ -10231,7 +11149,7 @@ class FigFillPicker extends HTMLElement {
         <fig-input-number class="fig-fill-picker-scale" min="1" max="200" value="${
           this.#image.scale
         }" units="%" style="display: none;"></fig-input-number>
-      </div>
+      </fig-field>
       <div class="fig-fill-picker-media-preview">
         <div class="fig-fill-picker-checkerboard"></div>
         <div class="fig-fill-picker-image-preview"></div>
@@ -10373,7 +11291,7 @@ class FigFillPicker extends HTMLElement {
     const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
-      <div class="fig-fill-picker-media-header">
+      <fig-field class="fig-fill-picker-media-header" direction="horizontal">
         <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#video.scaleMode
         }">
@@ -10381,7 +11299,7 @@ class FigFillPicker extends HTMLElement {
           <option value="fit">Fit</option>
           <option value="crop">Crop</option>
         </fig-dropdown>
-      </div>
+      </fig-field>
       <div class="fig-fill-picker-media-preview">
         <div class="fig-fill-picker-checkerboard"></div>
         <video class="fig-fill-picker-video-preview" style="display: none;" muted loop></video>
@@ -10471,13 +11389,13 @@ class FigFillPicker extends HTMLElement {
           <span>Camera access required</span>
         </div>
       </div>
-      <div class="fig-fill-picker-webcam-controls">
+      <fig-field class="fig-fill-picker-webcam-controls" direction="horizontal">
         <fig-dropdown class="fig-fill-picker-camera-select" ${expAttr} style="display: none;">
         </fig-dropdown>
         <fig-button class="fig-fill-picker-webcam-capture" variant="primary">
           Capture
         </fig-button>
-      </div>
+      </fig-field>
     `;
 
     this.#setupWebcamEvents(container);
@@ -10701,6 +11619,13 @@ class FigFillPicker extends HTMLElement {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
 
+  #hexToP3(hex, alpha = 1) {
+    const r = +(parseInt(hex.slice(1, 3), 16) / 255).toFixed(4);
+    const g = +(parseInt(hex.slice(3, 5), 16) / 255).toFixed(4);
+    const b = +(parseInt(hex.slice(5, 7), 16) / 255).toFixed(4);
+    return `color(display-p3 ${r} ${g} ${b} / ${alpha})`;
+  }
+
   #rgbToHSL(rgb) {
     const r = rgb.r / 255;
     const g = rgb.g / 255;
@@ -10805,9 +11730,40 @@ class FigFillPicker extends HTMLElement {
     };
   }
 
-  // ============ EVENT EMITTERS ============
-  #emitInput() {
-    this.#updateChit();
+  #oklabToRGB(lab) {
+    const l_ = lab.l + 0.3963377774 * lab.a + 0.2158037573 * lab.b;
+    const m_ = lab.l - 0.1055613458 * lab.a - 0.0638541728 * lab.b;
+    const s_ = lab.l - 0.0894841775 * lab.a - 1.291485548 * lab.b;
+
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+
+    const toSRGB = (c) => {
+      const v =
+        c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+      return Math.round(Math.max(0, Math.min(1, v)) * 255);
+    };
+
+    return {
+      r: toSRGB(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+      g: toSRGB(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+      b: toSRGB(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+    };
+  }
+
+  #oklchToRGB(lch) {
+    const hRad = (lch.h * Math.PI) / 180;
+    return this.#oklabToRGB({
+      l: lch.l,
+      a: lch.c * Math.cos(hRad),
+      b: lch.c * Math.sin(hRad),
+    });
+  }
+
+  // ============ EVENT EMITTERS ============
+  #emitInput() {
+    this.#updateChit();
     this.dispatchEvent(
       new CustomEvent("input", {
         bubbles: true,
@@ -10827,7 +11783,7 @@ class FigFillPicker extends HTMLElement {
 
   // ============ PUBLIC API ============
   get value() {
-    const base = { type: this.#fillType };
+    const base = { type: this.#fillType, colorSpace: this.#gamut };
 
     switch (this.#fillType) {
       case "solid":
@@ -10840,7 +11796,7 @@ class FigFillPicker extends HTMLElement {
       case "gradient":
         return {
           ...base,
-          gradient: { ...this.#gradient },
+          gradient: gradientToValueShape(this.#gradient),
           css: this.#getGradientCSS(),
         };
       case "image":
@@ -10907,6 +11863,237 @@ class FigFillPicker extends HTMLElement {
 }
 customElements.define("fig-fill-picker", FigFillPicker);
 
+/* Color Tip */
+/**
+ * A compact solid-color tip that wraps fig-fill-picker.
+ * @attr {string} value - Solid color string (hex/rgb/hsl/named)
+ * @attr {boolean} selected - Whether the tip is selected
+ * @attr {boolean} disabled - Whether the tip is disabled
+ * @fires input - While color changes
+ * @fires change - When color is committed
+ */
+class FigColorTip extends HTMLElement {
+  #fillPicker = null;
+  #chit = null;
+  #boundHandleInput = this.#handlePickerInput.bind(this);
+  #boundHandleChange = this.#handlePickerChange.bind(this);
+
+  static get observedAttributes() {
+    return ["value", "selected", "disabled", "alpha"];
+  }
+
+  connectedCallback() {
+    this.#render();
+    this.#syncFromAttributes();
+  }
+
+  disconnectedCallback() {
+    this.#teardownListeners();
+  }
+
+  #teardownListeners() {
+    if (!this.#fillPicker) return;
+    this.#fillPicker.removeEventListener("input", this.#boundHandleInput);
+    this.#fillPicker.removeEventListener("change", this.#boundHandleChange);
+  }
+
+  #watchPickerDialog = () => {
+    requestAnimationFrame(() => {
+      const dialog = document.querySelector(".fig-fill-picker-dialog[open]");
+      if (!dialog) return;
+      dialog.addEventListener("close", () => this.removeAttribute("selected"), {
+        once: true,
+      });
+    });
+  };
+
+  get #alphaEnabled() {
+    const v = this.getAttribute("alpha");
+    return v === null || v !== "false";
+  }
+
+  #render() {
+    const color = this.#normalizeColor(this.getAttribute("value"));
+    const alphaAttr = this.#alphaEnabled ? "" : 'alpha="false"';
+    this.innerHTML = `
+      <fig-fill-picker mode="solid" ${alphaAttr} value='${JSON.stringify({ type: "solid", color })}'>
+        <fig-chit background="${color}"></fig-chit>
+      </fig-fill-picker>`;
+
+    this.#fillPicker = this.querySelector("fig-fill-picker");
+    this.#chit = this.querySelector("fig-chit");
+    this.#teardownListeners();
+    this.#fillPicker?.addEventListener("input", this.#boundHandleInput);
+    this.#fillPicker?.addEventListener("change", this.#boundHandleChange);
+    this.#chit?.addEventListener("click", () => {
+      this.setAttribute("selected", "");
+      this.#watchPickerDialog();
+    });
+  }
+
+  #normalizeHex(hex) {
+    if (!hex) return "#D9D9D9";
+    const raw = hex.replace("#", "").trim();
+    if (raw.length === 3 || raw.length === 4) {
+      const [r, g, b] = raw;
+      return `#${r}${r}${g}${g}${b}${b}`.toUpperCase();
+    }
+    if (raw.length === 6 || raw.length === 8) {
+      return `#${raw.slice(0, 6)}`.toUpperCase();
+    }
+    return "#D9D9D9";
+  }
+
+  #normalizeColor(colorValue) {
+    if (!colorValue) return "#D9D9D9";
+    const value = String(colorValue).trim();
+
+    if (value.startsWith("{")) {
+      try {
+        const parsed = JSON.parse(value);
+        if (parsed?.color) {
+          return this.#normalizeColor(parsed.color);
+        }
+      } catch {
+        // Ignore parse errors and continue.
+      }
+    }
+
+    if (value.startsWith("#")) {
+      return this.#normalizeHex(value);
+    }
+
+    try {
+      const ctx = document.createElement("canvas").getContext("2d");
+      if (!ctx) return "#D9D9D9";
+      ctx.fillStyle = value;
+      const resolved = ctx.fillStyle;
+      if (resolved.startsWith("#")) {
+        return this.#normalizeHex(resolved);
+      }
+      const rgb = resolved.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (rgb) {
+        const toHex = (v) =>
+          Math.max(0, Math.min(255, Number(v)))
+            .toString(16)
+            .padStart(2, "0");
+        return `#${toHex(rgb[1])}${toHex(rgb[2])}${toHex(rgb[3])}`.toUpperCase();
+      }
+    } catch {
+      // Fall through to default.
+    }
+
+    return "#D9D9D9";
+  }
+
+  #syncFromAttributes() {
+    const color = this.#normalizeColor(this.getAttribute("value"));
+    if (this.getAttribute("value") !== color) {
+      this.setAttribute("value", color);
+      return;
+    }
+
+    if (this.#fillPicker) {
+      this.#fillPicker.setAttribute(
+        "value",
+        JSON.stringify({ type: "solid", color }),
+      );
+      if (this.#alphaEnabled) {
+        this.#fillPicker.removeAttribute("alpha");
+      } else {
+        this.#fillPicker.setAttribute("alpha", "false");
+      }
+      if (this.hasAttribute("disabled")) {
+        this.#fillPicker.setAttribute("disabled", "");
+      } else {
+        this.#fillPicker.removeAttribute("disabled");
+      }
+    }
+
+    if (this.#chit) {
+      this.#chit.setAttribute("background", color);
+      if (this.hasAttribute("disabled")) {
+        this.#chit.setAttribute("disabled", "");
+      } else {
+        this.#chit.removeAttribute("disabled");
+      }
+    }
+  }
+
+  #updateColorFromPicker(detail, type) {
+    const nextColor = this.#normalizeColor(detail?.color);
+    const prevColor = this.#normalizeColor(this.getAttribute("value"));
+    if (nextColor !== prevColor) {
+      this.setAttribute("value", nextColor);
+    } else {
+      this.#syncFromAttributes();
+    }
+
+    const eventDetail = { color: this.value };
+    if (this.#alphaEnabled && detail?.opacity !== undefined) {
+      eventDetail.opacity = detail.opacity;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: eventDetail,
+      }),
+    );
+  }
+
+  #handlePickerInput(event) {
+    event.stopPropagation();
+    this.#updateColorFromPicker(event.detail, "input");
+  }
+
+  #handlePickerChange(event) {
+    event.stopPropagation();
+    this.#updateColorFromPicker(event.detail, "change");
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.isConnected) return;
+
+    switch (name) {
+      case "value":
+      case "selected":
+      case "disabled":
+        this.#syncFromAttributes();
+        break;
+    }
+  }
+
+  get value() {
+    return this.#normalizeColor(this.getAttribute("value"));
+  }
+  set value(value) {
+    if (value === null || value === undefined || value === "") {
+      this.removeAttribute("value");
+      return;
+    }
+    this.setAttribute("value", this.#normalizeColor(value));
+  }
+
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(value) {
+    this.toggleAttribute("selected", Boolean(value));
+  }
+
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttribute("disabled", Boolean(value));
+  }
+}
+customElements.define("fig-color-tip", FigColorTip);
+
 /* Choice */
 /**
  * A generic choice container for use within FigChooser.
@@ -11471,8 +12658,354 @@ customElements.define("fig-chooser", FigChooser);
 
 /* Handle */
 class FigHandle extends HTMLElement {
-  constructor() {
-    super();
+  static observedAttributes = [
+    "color",
+    "selected",
+    "disabled",
+    "drag",
+    "drag-surface",
+    "drag-axes",
+    "drag-snapping",
+    "value",
+    "type",
+  ];
+
+  #isDragging = false;
+  #didDrag = false;
+  #boundPointerDown = null;
+  #applyingValue = false;
+  #colorTip = null;
+
+  get #dragEnabled() {
+    const v = this.getAttribute("drag");
+    return v !== null && v !== "false";
+  }
+
+  get #axes() {
+    const v = (this.getAttribute("drag-axes") || "x,y").toLowerCase();
+    return { x: v.includes("x"), y: v.includes("y") };
+  }
+
+  get #dragSnappingMode() {
+    const raw = this.getAttribute("drag-snapping");
+    if (raw === null) return "false";
+    const normalized = raw.trim().toLowerCase();
+    if (normalized === "modifier") return "modifier";
+    if (normalized === "" || normalized === "true") return "true";
+    return "false";
+  }
+
+  #shouldSnap(shiftKey) {
+    const mode = this.#dragSnappingMode;
+    if (mode === "true") return true;
+    if (mode === "modifier") return !!shiftKey;
+    return false;
+  }
+
+  #snapGuide(value) {
+    if (value < 0.1) return 0;
+    if (value > 0.9) return 1;
+    if (value > 0.4 && value < 0.6) return 0.5;
+    return value;
+  }
+
+  #snapDiagonal(x, y) {
+    const diff = Math.abs(x - y);
+    if (diff < 0.1) {
+      const avg = (x + y) / 2;
+      return { x: avg, y: avg };
+    }
+    if (Math.abs(1 - x - y) < 0.1) return { x, y: 1 - x };
+    return { x, y };
+  }
+
+  #getContainer() {
+    const attr = this.getAttribute("drag-surface");
+    if (!attr || attr === "parent") return this.parentElement;
+    return this.closest(attr);
+  }
+
+  get value() {
+    const container = this.#getContainer();
+    if (!container) return "0% 0%";
+    const rect = container.getBoundingClientRect();
+    const hw = this.offsetWidth / 2;
+    const hh = this.offsetHeight / 2;
+    const x = parseFloat(this.style.left) || 0;
+    const y = parseFloat(this.style.top) || 0;
+    const px = rect.width > 0 ? ((x + hw) / rect.width) * 100 : 0;
+    const py = rect.height > 0 ? ((y + hh) / rect.height) * 100 : 0;
+    return `${Math.round(px)}% ${Math.round(py)}%`;
+  }
+
+  set value(v) {
+    this.setAttribute("value", v ?? "0% 0%");
+  }
+
+  #parseValue(str) {
+    const normalized = str == null ? "" : String(str).trim();
+    if (!normalized) return { xPct: 0, yPct: 0 };
+
+    const parts = normalized.split(/[\s,]+/).filter(Boolean);
+
+    const parseToken = (token) => {
+      if (!token) return 0;
+      const hasPx = token.includes("px");
+      const hasPct = token.includes("%");
+      const numeric = parseFloat(token.replace(/[%px]/g, ""));
+      if (!Number.isFinite(numeric)) return 0;
+      if (hasPx) return { px: numeric };
+      if (hasPct || Math.abs(numeric) > 1)
+        return Math.max(0, Math.min(100, numeric));
+      return Math.max(0, Math.min(100, numeric * 100));
+    };
+
+    const xToken = parseToken(parts[0]);
+    const yToken = parseToken(parts[1] ?? parts[0]);
+    return { xToken, yToken };
+  }
+
+  #applyValue(str) {
+    const container = this.#getContainer();
+    if (!container) return;
+
+    const { xToken, yToken } = this.#parseValue(str);
+    const rect = container.getBoundingClientRect();
+    const hw = this.offsetWidth / 2;
+    const hh = this.offsetHeight / 2;
+
+    const resolve = (token, containerDim, halfHandle) => {
+      if (token && typeof token === "object" && "px" in token) {
+        return Math.max(
+          -halfHandle,
+          Math.min(containerDim - halfHandle, token.px - halfHandle),
+        );
+      }
+      const pct = typeof token === "number" ? token : 0;
+      const center = (pct / 100) * containerDim;
+      return Math.max(
+        -halfHandle,
+        Math.min(containerDim - halfHandle, center - halfHandle),
+      );
+    };
+
+    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`;
+  }
+
+  #syncValueAttribute() {
+    this.#applyingValue = true;
+    this.setAttribute("value", this.value);
+    this.#applyingValue = false;
+  }
+
+  connectedCallback() {
+    this.#syncDrag();
+    this.addEventListener("click", this.#handleSelect);
+    document.addEventListener("pointerdown", this.#handleDeselect);
+    const initial = this.getAttribute("value");
+    if (initial) this.#applyValue(initial);
+  }
+
+  disconnectedCallback() {
+    this.#teardownDrag();
+    this.#hideColorTip();
+    this.removeEventListener("click", this.#handleSelect);
+    document.removeEventListener("pointerdown", this.#handleDeselect);
+  }
+
+  #handleSelect = (e) => {
+    if (this.hasAttribute("disabled")) return;
+    if (this.#didDrag) {
+      this.#didDrag = false;
+      return;
+    }
+    this.setAttribute("selected", "");
+    if (this.getAttribute("type") === "color") this.#showColorTip();
+  };
+
+  #handleDeselect = (e) => {
+    if (this.contains(e.target)) return;
+    if (this.#colorTip && e.target.closest?.("dialog, [popover]")) return;
+    this.removeAttribute("selected");
+    this.#hideColorTip();
+  };
+
+  attributeChangedCallback(name, _old, value) {
+    if (name === "color") {
+      if (!value || value === "false") {
+        this.style.removeProperty("--fill");
+      } else {
+        this.style.setProperty("--fill", value);
+      }
+    }
+    if (name === "drag") this.#syncDrag();
+    if (name === "value" && !this.#applyingValue && !this.#isDragging) {
+      this.#applyValue(value);
+    }
+  }
+
+  #syncDrag() {
+    if (this.#dragEnabled && !this.#boundPointerDown) {
+      this.#boundPointerDown = (e) => this.#onPointerDown(e);
+      this.addEventListener("pointerdown", this.#boundPointerDown);
+    } else if (!this.#dragEnabled && this.#boundPointerDown) {
+      this.#teardownDrag();
+    }
+  }
+
+  #teardownDrag() {
+    if (this.#boundPointerDown) {
+      this.removeEventListener("pointerdown", this.#boundPointerDown);
+      this.#boundPointerDown = null;
+    }
+    this.#isDragging = false;
+  }
+
+  #onPointerDown(e) {
+    if (!this.#dragEnabled || this.hasAttribute("disabled")) return;
+    e.preventDefault();
+    const container = this.#getContainer();
+    if (!container) return;
+
+    this.#isDragging = true;
+    const axes = this.#axes;
+    const containerRect = container.getBoundingClientRect();
+    const handleW = this.offsetWidth;
+    const handleH = this.offsetHeight;
+
+    const clampAndApply = (clientX, clientY, shiftKey = false) => {
+      const rect = container.getBoundingClientRect();
+      const currentLeft = parseFloat(this.style.left) || 0;
+      const currentTop = parseFloat(this.style.top) || 0;
+      const rawX = clientX - rect.left - handleW / 2;
+      const rawY = clientY - rect.top - handleH / 2;
+
+      const clampedX = Math.max(
+        -handleW / 2,
+        Math.min(rect.width - handleW / 2, rawX),
+      );
+      const clampedY = Math.max(
+        -handleH / 2,
+        Math.min(rect.height - handleH / 2, rawY),
+      );
+
+      let centerX =
+        rect.width > 0
+          ? ((axes.x ? clampedX : currentLeft) + handleW / 2) / rect.width
+          : 0.5;
+      let centerY =
+        rect.height > 0
+          ? ((axes.y ? clampedY : currentTop) + handleH / 2) / rect.height
+          : 0.5;
+
+      if (this.#shouldSnap(shiftKey)) {
+        if (axes.x) centerX = this.#snapGuide(centerX);
+        if (axes.y) centerY = this.#snapGuide(centerY);
+        if (axes.x && axes.y) {
+          const diagonal = this.#snapDiagonal(centerX, centerY);
+          centerX = diagonal.x;
+          centerY = diagonal.y;
+        }
+      }
+
+      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`;
+      }
+      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`;
+      }
+    };
+
+    const isColorType = this.getAttribute("type") === "color";
+    if (!isColorType) {
+      clampAndApply(e.clientX, e.clientY, e.shiftKey);
+    }
+    this.style.cursor = "grabbing";
+    if (!isColorType) {
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          bubbles: true,
+          detail: this.#positionDetail(containerRect),
+        }),
+      );
+    }
+
+    const onMove = (e) => {
+      if (!this.#isDragging) return;
+      this.#didDrag = true;
+      clampAndApply(e.clientX, e.clientY, e.shiftKey);
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          bubbles: true,
+          detail: this.#positionDetail(container.getBoundingClientRect()),
+        }),
+      );
+    };
+
+    const onUp = (e) => {
+      this.#isDragging = false;
+      this.style.cursor = "";
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      if (this.#didDrag || !isColorType) {
+        clampAndApply(e.clientX, e.clientY, e.shiftKey);
+      }
+      this.#syncValueAttribute();
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          detail: this.#positionDetail(container.getBoundingClientRect()),
+        }),
+      );
+    };
+
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }
+
+  #showColorTip() {
+    if (this.#colorTip) return;
+    const tip = document.createElement("fig-color-tip");
+    tip.setAttribute("value", this.getAttribute("color") || "#D9D9D9");
+    tip.setAttribute("selected", "");
+    tip.setAttribute("alpha", "true");
+    tip.addEventListener("pointerdown", (e) => e.stopPropagation());
+    tip.addEventListener("input", this.#handleColorTipInput);
+    tip.addEventListener("change", this.#handleColorTipChange);
+    this.appendChild(tip);
+    this.#colorTip = tip;
+  }
+
+  #hideColorTip() {
+    if (!this.#colorTip) return;
+    this.#colorTip.removeEventListener("input", this.#handleColorTipInput);
+    this.#colorTip.removeEventListener("change", this.#handleColorTipChange);
+    this.#colorTip.remove();
+    this.#colorTip = null;
+  }
+
+  #handleColorTipInput = (e) => {
+    e.stopPropagation();
+    if (e.detail?.color) this.setAttribute("color", e.detail.color);
+  };
+
+  #handleColorTipChange = (e) => {
+    e.stopPropagation();
+    if (e.detail?.color) this.setAttribute("color", e.detail.color);
+  };
+
+  #positionDetail(containerRect) {
+    const hw = this.offsetWidth / 2;
+    const hh = this.offsetHeight / 2;
+    const x = parseFloat(this.style.left) || 0;
+    const y = parseFloat(this.style.top) || 0;
+    const px = containerRect.width > 0 ? (x + hw) / containerRect.width : 0;
+    const py = containerRect.height > 0 ? (y + hh) / containerRect.height : 0;
+    return { x, y, px, py };
   }
 }
 customElements.define("fig-handle", FigHandle);