@rogieking/figui3 3.23.0 → 4.1.0

package/fig.js

@@ -4472,268 +4472,6 @@ class FigField extends HTMLElement {
 }
 customElements.define("fig-field", FigField);
 
-/* Field + Slider wrapper */
-class FigFieldSlider extends HTMLElement {
-  #field = null;
-  #label = null;
-  #slider = null;
-  #observer = null;
-  #managedSliderAttrs = new Set();
-  #steppersSyncFrame = 0;
-  #boundHandleSliderInput = null;
-  #boundHandleSliderChange = null;
-  #ignoredSliderAttrs = new Set(["variant", "color", "text", "full"]);
-
-  static get observedAttributes() {
-    return ["label", "direction"];
-  }
-
-  connectedCallback() {
-    if (!this.#field) {
-      this.#initialize();
-    }
-
-    this.#syncField();
-    this.#syncSliderAttributes();
-    this.#bindSliderEvents();
-
-    if (!this.#observer) {
-      this.#observer = new MutationObserver((mutations) => {
-        let syncField = false;
-        let syncSlider = false;
-
-        for (const mutation of mutations) {
-          if (mutation.type === "attributes") {
-            if (
-              mutation.attributeName &&
-              this.#ignoredSliderAttrs.has(mutation.attributeName)
-            ) {
-              continue;
-            }
-            if (
-              mutation.attributeName === "label" ||
-              mutation.attributeName === "direction"
-            ) {
-              syncField = true;
-            } else {
-              syncSlider = true;
-            }
-          }
-        }
-
-        if (syncField) this.#syncField();
-        if (syncSlider) this.#syncSliderAttributes();
-      });
-    }
-
-    this.#observer.observe(this, { attributes: true });
-  }
-
-  disconnectedCallback() {
-    this.#observer?.disconnect();
-    if (this.#steppersSyncFrame) {
-      cancelAnimationFrame(this.#steppersSyncFrame);
-      this.#steppersSyncFrame = 0;
-    }
-    this.#unbindSliderEvents();
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue || !this.#field) return;
-    if (name === "label" || name === "direction") {
-      this.#syncField();
-    }
-  }
-
-  #initialize() {
-    const initialChildren = Array.from(this.childNodes).filter((node) => {
-      return (
-        node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim())
-      );
-    });
-
-    const field = document.createElement("fig-field");
-    const label = document.createElement("label");
-    const slider = document.createElement("fig-slider");
-    slider.setAttribute("text", "true");
-    for (const attrName of this.#getForwardedSliderAttrNames()) {
-      const value = this.getAttribute(attrName);
-      slider.setAttribute(attrName, value ?? "");
-    }
-
-    field.append(label, slider);
-
-    this.#field = field;
-    this.#label = label;
-    this.#slider = slider;
-
-    this.replaceChildren(field);
-
-    for (const node of initialChildren) {
-      this.#slider.appendChild(node);
-    }
-  }
-
-  #syncField() {
-    if (!this.#field || !this.#label) return;
-    const hasLabelAttr = this.hasAttribute("label");
-    const rawLabel = this.getAttribute("label");
-    const isBlankLabel = hasLabelAttr && (rawLabel ?? "").trim() === "";
-
-    if (isBlankLabel) {
-      if (this.#label.parentElement === this.#field) {
-        this.#label.remove();
-      }
-    } else {
-      this.#label.textContent = hasLabelAttr ? (rawLabel ?? "") : "Label";
-      if (this.#label.parentElement !== this.#field) {
-        this.#field.prepend(this.#label);
-      }
-    }
-
-    this.#field.setAttribute(
-      "direction",
-      this.getAttribute("direction") || "horizontal",
-    );
-  }
-
-  #syncSliderAttributes() {
-    if (!this.#slider) return;
-    const hostAttrs = this.#getForwardedSliderAttrNames();
-
-    const nextManaged = new Set(hostAttrs.filter((name) => name !== "text"));
-
-    for (const attrName of this.#managedSliderAttrs) {
-      if (!nextManaged.has(attrName)) {
-        this.#slider.removeAttribute(attrName);
-      }
-    }
-
-    for (const attrName of hostAttrs) {
-      if (attrName === "text") continue;
-      const value = this.getAttribute(attrName);
-      this.#slider.setAttribute(attrName, value ?? "");
-    }
-
-    this.#slider.removeAttribute("variant");
-    this.#slider.removeAttribute("color");
-    this.#slider.removeAttribute("transform");
-    this.#slider.removeAttribute("full");
-    this.#slider.setAttribute("text", "true");
-
-    const sliderType = (this.getAttribute("type") || "range").toLowerCase();
-    if (sliderType === "delta" || sliderType === "stepper") {
-      this.#slider.setAttribute(
-        "default",
-        this.getAttribute("default") ?? "50",
-      );
-    } else if (!this.hasAttribute("default")) {
-      this.#slider.removeAttribute("default");
-    }
-    if (sliderType === "stepper") {
-      this.#slider.setAttribute("step", this.getAttribute("step") ?? "10");
-    } else if (!this.hasAttribute("step")) {
-      this.#slider.removeAttribute("step");
-    }
-    if (sliderType === "opacity") {
-      this.#slider.style.setProperty(
-        "--color",
-        "var(--figma-color-bg-tertiary)",
-      );
-    } else {
-      this.#slider.style.removeProperty("--color");
-    }
-
-    this.#managedSliderAttrs = nextManaged;
-    this.#queueSteppersSync();
-  }
-
-  #getForwardedSliderAttrNames() {
-    const reserved = new Set([
-      "label",
-      "direction",
-      "oninput",
-      "onchange",
-      "steppers",
-    ]);
-    return this.getAttributeNames().filter(
-      (name) => !reserved.has(name) && !this.#ignoredSliderAttrs.has(name),
-    );
-  }
-
-  #queueSteppersSync() {
-    if (this.#steppersSyncFrame) {
-      cancelAnimationFrame(this.#steppersSyncFrame);
-    }
-    this.#steppersSyncFrame = requestAnimationFrame(() => {
-      this.#steppersSyncFrame = 0;
-      this.#syncSteppersToNumberInput();
-    });
-  }
-
-  #syncSteppersToNumberInput() {
-    if (!this.#slider) return;
-    const numberInput = this.#slider.querySelector("fig-input-number");
-    if (!numberInput) return;
-
-    const hasSteppers =
-      this.hasAttribute("steppers") &&
-      this.getAttribute("steppers") !== "false";
-    if (!hasSteppers) {
-      numberInput.removeAttribute("steppers");
-      return;
-    }
-
-    const steppersValue = this.getAttribute("steppers");
-    numberInput.setAttribute("steppers", steppersValue ?? "");
-  }
-
-  #bindSliderEvents() {
-    if (!this.#slider) return;
-    if (!this.#boundHandleSliderInput) {
-      this.#boundHandleSliderInput = this.#forwardSliderEvent.bind(
-        this,
-        "input",
-      );
-    }
-    if (!this.#boundHandleSliderChange) {
-      this.#boundHandleSliderChange = this.#forwardSliderEvent.bind(
-        this,
-        "change",
-      );
-    }
-    this.#slider.addEventListener("input", this.#boundHandleSliderInput);
-    this.#slider.addEventListener("change", this.#boundHandleSliderChange);
-  }
-
-  #unbindSliderEvents() {
-    if (!this.#slider) return;
-    if (this.#boundHandleSliderInput) {
-      this.#slider.removeEventListener("input", this.#boundHandleSliderInput);
-    }
-    if (this.#boundHandleSliderChange) {
-      this.#slider.removeEventListener("change", this.#boundHandleSliderChange);
-    }
-  }
-
-  #forwardSliderEvent(type, event) {
-    event.stopPropagation();
-    const detail =
-      event instanceof CustomEvent && event.detail !== undefined
-        ? event.detail
-        : this.#slider?.value;
-    this.dispatchEvent(
-      new CustomEvent(type, {
-        detail,
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      }),
-    );
-  }
-}
-customElements.define("fig-field-slider", FigFieldSlider);
-
 /* Color swatch */
 class FigInputColor extends HTMLElement {
   rgba;
@@ -7695,142 +7433,206 @@ figDefineCustomizedBuiltIn("fig-toast", FigToast, { extends: "dialog" });
  * @attr {string} options - Comma-separated list of dropdown options
  * @attr {string} placeholder - Placeholder text for the input
  * @attr {string} value - The current input value
+ * @attr {boolean} disabled - Disables the input and dropdown button
+ * @attr {string} experimental - Feature flag passed to internal fig-dropdown
  */
 class FigComboInput extends HTMLElement {
+  static observedAttributes = [
+    "options",
+    "placeholder",
+    "value",
+    "disabled",
+    "experimental",
+  ];
+
   #usesCustomDropdown = false;
-  #boundHandleSelectInput = null;
+  #input = null;
+  #dropdown = null;
+  #button = null;
+  #customDropdown = null;
+  #internalUpdate = false;
 
-  constructor() {
-    super();
-    this.#boundHandleSelectInput = this.handleSelectInput.bind(this);
+  #boundHandleDropdownInput = this.#handleDropdownInput.bind(this);
+  #boundHandleTextInput = this.#handleTextInput.bind(this);
+  #boundHandleTextChange = this.#handleTextChange.bind(this);
+
+  get value() {
+    return this.getAttribute("value") || "";
   }
-  getOptionsFromAttribute() {
-    return (this.getAttribute("options") || "").split(",");
+
+  set value(val) {
+    this.setAttribute("value", val ?? "");
   }
+
   connectedCallback() {
-    const customDropdown =
+    this.#customDropdown =
       Array.from(this.children).find(
         (child) => child.tagName === "FIG-DROPDOWN",
       ) || null;
-    this.#usesCustomDropdown = customDropdown !== null;
-    if (customDropdown) {
-      customDropdown.remove();
+    this.#usesCustomDropdown = this.#customDropdown !== null;
+    if (this.#customDropdown) {
+      this.#customDropdown.remove();
     }
 
-    this.options = this.getOptionsFromAttribute();
-    this.placeholder = this.getAttribute("placeholder") || "";
-    this.value = this.getAttribute("value") || "";
+    this.#render();
+    this.#setupListeners();
+
+    if (this.hasAttribute("disabled")) {
+      this.#applyDisabled(true);
+    }
+  }
+
+  disconnectedCallback() {
+    this.#teardownListeners();
+  }
+
+  #render() {
+    const options = this.#getOptions();
+    const placeholder = this.getAttribute("placeholder") || "";
+    const currentValue = this.value;
     const experimental = this.getAttribute("experimental");
-    const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const expAttr = experimental ? ` experimental="${experimental}"` : "";
+
     const dropdownHTML = this.#usesCustomDropdown
       ? ""
-      : `<fig-dropdown type="dropdown" ${expAttr}>
-                              ${this.options
-                                .map((option) => `<option>${option}</option>`)
-                                .join("")}
-                            </fig-dropdown>`;
+      : `<fig-dropdown type="dropdown"${expAttr}>${options.map((o) => `<option>${o.trim()}</option>`).join("")}</fig-dropdown>`;
+
     this.innerHTML = `<div class="input-combo">
-                        <fig-input-text placeholder="${this.placeholder}">
-                        </fig-input-text> 
-                        <fig-button type="select" variant="input" icon>
-                            <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
-</svg>
-                            ${dropdownHTML}
-                        </fig-button>
-                    </div>`;
-    requestAnimationFrame(() => {
-      this.input = this.querySelector("fig-input-text");
-      const button = this.querySelector("fig-button");
+  <fig-input-text placeholder="${placeholder}" value="${currentValue}"></fig-input-text>
+  <fig-button type="select" variant="input" icon>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.87868 7.12132L8 9.24264L10.1213 7.12132" stroke="currentColor" stroke-opacity="0.9" stroke-linecap="round"/>
+    </svg>
+    ${dropdownHTML}
+  </fig-button>
+</div>`;
 
-      if (this.#usesCustomDropdown && customDropdown && button) {
-        if (!customDropdown.hasAttribute("type")) {
-          customDropdown.setAttribute("type", "dropdown");
-        }
-        if (experimental) {
-          customDropdown.setAttribute("experimental", experimental);
-        }
-        button.append(customDropdown);
+    this.#input = this.querySelector("fig-input-text");
+    this.#button = this.querySelector("fig-button");
+
+    if (this.#usesCustomDropdown && this.#customDropdown && this.#button) {
+      if (!this.#customDropdown.hasAttribute("type")) {
+        this.#customDropdown.setAttribute("type", "dropdown");
       }
-      this.dropdown = this.querySelector("fig-dropdown");
+      if (experimental) {
+        this.#customDropdown.setAttribute("experimental", experimental);
+      }
+      this.#button.append(this.#customDropdown);
+    }
 
-      this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
-      this.dropdown?.addEventListener("input", this.#boundHandleSelectInput);
+    this.#dropdown = this.querySelector("fig-dropdown");
+  }
 
-      if (this.input) {
-        this.input.setAttribute("value", this.value);
-      }
+  #setupListeners() {
+    this.#dropdown?.addEventListener("input", this.#boundHandleDropdownInput);
+    this.#input?.addEventListener("input", this.#boundHandleTextInput);
+    this.#input?.addEventListener("change", this.#boundHandleTextChange);
+  }
 
-      // Apply initial disabled state
-      if (this.hasAttribute("disabled")) {
-        this.#applyDisabled(true);
-      }
-    });
+  #teardownListeners() {
+    this.#dropdown?.removeEventListener("input", this.#boundHandleDropdownInput);
+    this.#input?.removeEventListener("input", this.#boundHandleTextInput);
+    this.#input?.removeEventListener("change", this.#boundHandleTextChange);
   }
-  disconnectedCallback() {
-    this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
+
+  #handleDropdownInput(e) {
+    e.stopPropagation();
+    const val = e.target.closest("fig-dropdown")?.value ?? "";
+    this.#internalUpdate = true;
+    this.setAttribute("value", val);
+    this.#internalUpdate = false;
+    if (this.#input) this.#input.setAttribute("value", val);
+    this.#emitInput();
+    this.#emitChange();
+  }
+
+  #handleTextInput(e) {
+    e.stopPropagation();
+    const val = e.target.value ?? "";
+    this.#internalUpdate = true;
+    this.setAttribute("value", val);
+    this.#internalUpdate = false;
+    this.#emitInput();
   }
-  handleSelectInput(e) {
-    this.setAttribute("value", e.target.closest("fig-dropdown").value);
+
+  #handleTextChange(e) {
+    e.stopPropagation();
+    const val = e.target.value ?? "";
+    this.#internalUpdate = true;
+    this.setAttribute("value", val);
+    this.#internalUpdate = false;
+    this.#emitChange();
   }
-  handleInput(e) {
-    this.value = this.input.value;
+
+  #emitInput() {
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: true,
+        cancelable: true,
+        detail: { value: this.value },
+      }),
+    );
   }
-  static get observedAttributes() {
-    return ["options", "placeholder", "value", "disabled", "experimental"];
+
+  #emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        cancelable: true,
+        detail: { value: this.value },
+      }),
+    );
   }
-  focus() {
-    this.input.focus();
+
+  #getOptions() {
+    return (this.getAttribute("options") || "")
+      .split(",")
+      .map((s) => s.trim())
+      .filter(Boolean);
   }
+
   #applyDisabled(disabled) {
-    if (this.input) {
-      if (disabled) {
-        this.input.setAttribute("disabled", "");
-      } else {
-        this.input.removeAttribute("disabled");
-      }
+    if (this.#input) {
+      if (disabled) this.#input.setAttribute("disabled", "");
+      else this.#input.removeAttribute("disabled");
     }
-    const button = this.querySelector("fig-button");
-    if (button) {
-      if (disabled) {
-        button.setAttribute("disabled", "");
-      } else {
-        button.removeAttribute("disabled");
-      }
+    if (this.#button) {
+      if (disabled) this.#button.setAttribute("disabled", "");
+      else this.#button.removeAttribute("disabled");
     }
   }
+
+  focus() {
+    this.#input?.focus();
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
     switch (name) {
       case "options":
-        this.options = newValue.split(",");
-        if (this.dropdown && !this.#usesCustomDropdown) {
-          this.dropdown.innerHTML = this.options
-            .map((option) => `<option>${option}</option>`)
+        if (this.#dropdown && !this.#usesCustomDropdown) {
+          const options = this.#getOptions();
+          this.#dropdown.innerHTML = options
+            .map((o) => `<option>${o}</option>`)
             .join("");
         }
         break;
       case "placeholder":
-        this.placeholder = newValue;
-        if (this.input) {
-          this.input.setAttribute("placeholder", newValue);
-        }
+        if (this.#input) this.#input.setAttribute("placeholder", newValue || "");
         break;
       case "value":
-        this.value = newValue;
-        if (this.input) {
-          this.input.setAttribute("value", newValue);
+        if (!this.#internalUpdate && this.#input) {
+          this.#input.setAttribute("value", newValue || "");
         }
         break;
       case "disabled":
         this.#applyDisabled(newValue !== null && newValue !== "false");
         break;
       case "experimental":
-        if (this.dropdown) {
-          if (newValue) {
-            this.dropdown.setAttribute("experimental", newValue);
-          } else if (!this.#usesCustomDropdown) {
-            this.dropdown.removeAttribute("experimental");
-          }
+        if (this.#dropdown) {
+          if (newValue) this.#dropdown.setAttribute("experimental", newValue);
+          else if (!this.#usesCustomDropdown)
+            this.#dropdown.removeAttribute("experimental");
         }
         break;
     }
@@ -8007,57 +7809,58 @@ customElements.define("fig-chit", FigChit);
 class FigSwatch extends FigChit {}
 customElements.define("fig-swatch", FigSwatch);
 
-/* Upload */
+/* Image */
 /**
- * A custom image upload element.
- * @attr {string} src - The current image source URL
- * @attr {boolean} upload - Whether to show the upload button
- * @attr {string} label - The upload button label
- * @attr {string} size - Size of the image preview
+ * @attr {string} src - Image source URL
+ * @attr {boolean} upload - Show upload overlay (generates fig-input-file)
+ * @attr {string} label - Upload button label (default "Upload")
+ * @attr {string} size - small | medium | large | auto
+ * @attr {string} aspect-ratio - CSS aspect-ratio or "auto" (lazy dimension sniff)
+ * @attr {string} fit - CSS object-fit value
+ * @attr {boolean} checkerboard - Show checkerboard behind transparent images
  */
 class FigImage extends HTMLElement {
   #src = null;
+  #chit = null;
+  #fileInput = null;
+  #blobUrl = null;
+  #file = null;
   #boundHandleFileInput = this.#handleFileInput.bind(this);
-  #boundHandleDownload = this.#handleDownload.bind(this);
-  constructor() {
-    super();
+
+  static get observedAttributes() {
+    return ["src", "upload", "aspect-ratio", "fit", "checkerboard"];
   }
-  #getInnerHTML() {
-    const cb =
-      this.hasAttribute("checkerboard") &&
-      this.getAttribute("checkerboard") !== "false";
-    const bg = this.src
-      ? `url(${this.src})`
-      : cb
-        ? "url()"
-        : "var(--figma-color-bg-secondary)";
-    return `<fig-chit size="large" data-type="image" background="${bg}" disabled${cb ? " checkerboard" : ""}></fig-chit><div>${
-      this.upload
-        ? `<fig-button variant="overlay" type="upload">
-          ${this.label} 
-          <input type="file" accept="image/*" />
-        </fig-button>`
-        : ""
-    } ${
-      this.download
-        ? `<fig-button variant="overlay" icon="true" type="download">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.2597 13.9473 12.1326 14 12 14C11.9006 14 11.8042 13.9704 11.7227 13.916L11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z" fill="black"/>
-</svg></fig-button>`
-        : ""
-    }</div>`;
+
+  get src() {
+    return this.#src;
+  }
+  set src(value) {
+    this.#src = value;
+    this.setAttribute("src", value);
+  }
+
+  get file() {
+    return this.#file;
   }
+
+  async getBase64() {
+    const src = this.#src;
+    if (!src) return null;
+    const res = await fetch(src);
+    const blob = await res.blob();
+    const bitmap = await createImageBitmap(blob);
+    const canvas = document.createElement("canvas");
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    canvas.getContext("2d").drawImage(bitmap, 0, 0);
+    bitmap.close();
+    const dataUrl = canvas.toDataURL();
+    return dataUrl;
+  }
+
   connectedCallback() {
     this.#src = this.getAttribute("src") || "";
-    this.upload =
-      this.hasAttribute("upload") && this.getAttribute("upload") !== "false";
-    this.download =
-      this.hasAttribute("download") &&
-      this.getAttribute("download") !== "false";
-    this.label = this.getAttribute("label") || "Upload";
-    this.size = this.getAttribute("size") || "small";
-    this.innerHTML = this.#getInnerHTML();
-    this.#updateRefs();
+
     const ar = this.getAttribute("aspect-ratio");
     if (ar && ar !== "auto") {
       this.style.setProperty("--aspect-ratio", ar);
@@ -8066,182 +7869,169 @@ class FigImage extends HTMLElement {
     if (fit) {
       this.style.setProperty("--fit", fit);
     }
+
+    if (!this.querySelector("fig-chit")) {
+      const chit = document.createElement("fig-chit");
+      chit.setAttribute("data-generated", "");
+      chit.setAttribute("size", "large");
+      chit.setAttribute("data-type", "image");
+      chit.setAttribute("disabled", "");
+      this.#applyChitBackground(chit);
+      if (this.hasAttribute("checkerboard") && this.getAttribute("checkerboard") !== "false") {
+        chit.setAttribute("checkerboard", "");
+      }
+      this.prepend(chit);
+    }
+    this.#chit = this.querySelector("fig-chit");
+
+    const isUpload = this.hasAttribute("upload") && this.getAttribute("upload") !== "false";
+    if (isUpload && !this.querySelector("fig-input-file[data-generated]")) {
+      this.#createFileInput();
+    }
+
+    if (this.#src && this.getAttribute("aspect-ratio") === "auto") {
+      this.#sniffDimensions(this.#src);
+    }
   }
+
   disconnectedCallback() {
-    this.fileInput?.removeEventListener("change", this.#boundHandleFileInput);
-    this.downloadButton?.removeEventListener(
-      "click",
-      this.#boundHandleDownload,
-    );
+    this.#fileInput?.removeEventListener("change", this.#boundHandleFileInput);
+    if (this.#blobUrl) {
+      URL.revokeObjectURL(this.#blobUrl);
+      this.#blobUrl = null;
+    }
   }
 
-  #updateRefs() {
-    requestAnimationFrame(() => {
-      this.chit = this.querySelector("fig-chit");
-      if (this.upload) {
-        this.uploadButton = this.querySelector("fig-button[type='upload']");
-        this.fileInput = this.uploadButton?.querySelector("input");
-        this.fileInput?.removeEventListener(
-          "change",
-          this.#boundHandleFileInput,
-        );
-        this.fileInput?.addEventListener("change", this.#boundHandleFileInput);
-      }
-      if (this.download) {
-        this.downloadButton = this.querySelector("fig-button[type='download']");
-        this.downloadButton?.removeEventListener(
-          "click",
-          this.#boundHandleDownload,
-        );
-        this.downloadButton?.addEventListener(
-          "click",
-          this.#boundHandleDownload,
-        );
-      }
-    });
+  #applyChitBackground(chit) {
+    const cb = this.hasAttribute("checkerboard") && this.getAttribute("checkerboard") !== "false";
+    if (this.#src) {
+      chit.setAttribute("background", `url(${this.#src})`);
+    } else {
+      chit.setAttribute("background", cb ? "url()" : "var(--figma-color-bg-secondary)");
+    }
   }
-  #handleDownload() {
-    //force blob download
-    const link = document.createElement("a");
-    link.href = this.blob;
-    link.download = "image.png";
-    link.click();
-  }
-  async #loadImage(src) {
-    // Get blob from canvas
-    await new Promise((resolve) => {
-      this.image = new Image();
-      this.image.crossOrigin = "Anonymous";
-      this.image.onload = async () => {
-        this.aspectRatio = this.image.width / this.image.height;
-        const ar = this.getAttribute("aspect-ratio");
-        if (!ar || ar === "auto") {
-          this.style.setProperty(
-            "--aspect-ratio",
-            `${this.image.width}/${this.image.height}`,
-          );
-        }
-        this.dispatchEvent(
-          new CustomEvent("loaded", {
-            bubbles: true,
-            cancelable: true,
-            detail: {
-              blob: this.blob,
-              base64: this.base64,
-            },
-          }),
-        );
-        resolve();
-
-        // Create canvas to extract blob and base64 from image
-        const canvas = document.createElement("canvas");
-        const ctx = canvas.getContext("2d");
-        canvas.width = this.image.width;
-        canvas.height = this.image.height;
-        ctx.drawImage(this.image, 0, 0);
-
-        // Get base64 from canvas
-        this.base64 = canvas.toDataURL();
-
-        // Get blob from canvas
-        canvas.toBlob((blob) => {
-          if (this.blob) {
-            URL.revokeObjectURL(this.blob);
-          }
-          if (blob) {
-            this.blob = URL.createObjectURL(blob);
-          }
-        });
-      };
-      this.image.src = src;
-    });
+
+  #createFileInput() {
+    const fi = document.createElement("fig-input-file");
+    fi.setAttribute("data-generated", "");
+    fi.setAttribute("accepts", "image/*");
+    fi.setAttribute("variant", "overlay");
+    const defaultLabel = this.getAttribute("label") || "Upload";
+    fi.setAttribute("label", this.#src ? "Replace" : defaultLabel);
+    if (this.#src) fi.setAttribute("url", this.#src);
+    fi.addEventListener("change", this.#boundHandleFileInput);
+    this.append(fi);
+    this.#fileInput = fi;
   }
-  async #handleFileInput(e) {
-    if (this.blob) {
-      URL.revokeObjectURL(this.blob);
-    }
-    this.blob = URL.createObjectURL(e.target.files[0]);
-    //set base64 url
-    const reader = new FileReader();
-    reader.readAsDataURL(e.target.files[0]);
-    //await this data url to be set
-    await new Promise((resolve) => {
-      reader.onload = (e) => {
-        this.base64 = e.target.result;
-        resolve();
-      };
-    });
-    //emit event for loaded
+
+  #removeFileInput() {
+    if (this.#fileInput) {
+      this.#fileInput.removeEventListener("change", this.#boundHandleFileInput);
+      this.#fileInput.remove();
+      this.#fileInput = null;
+    }
+  }
+
+  #handleFileInput(e) {
+    const file = e.detail?.files?.[0];
+
+    if (!file) {
+      if (this.#blobUrl) {
+        URL.revokeObjectURL(this.#blobUrl);
+        this.#blobUrl = null;
+      }
+      this.#file = null;
+      this.removeAttribute("src");
+      this.dispatchEvent(
+        new CustomEvent("change", { bubbles: true, cancelable: true }),
+      );
+      return;
+    }
+
+    if (this.#blobUrl) {
+      URL.revokeObjectURL(this.#blobUrl);
+    }
+    this.#file = file;
+    this.#blobUrl = URL.createObjectURL(file);
+
+    this.setAttribute("src", this.#blobUrl);
+
     this.dispatchEvent(
       new CustomEvent("loaded", {
         bubbles: true,
         cancelable: true,
-        detail: {
-          blob: this.blob,
-          base64: this.base64,
-        },
+        detail: { file, src: this.#blobUrl },
       }),
     );
-    //emit for change too
     this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-      }),
+      new CustomEvent("change", { bubbles: true, cancelable: true }),
     );
-    this.setAttribute("src", this.blob);
-  }
-  static get observedAttributes() {
-    return ["src", "upload", "download", "aspect-ratio", "fit", "checkerboard"];
-  }
-  get src() {
-    return this.#src;
+
+    if (this.#fileInput) {
+      this.#fileInput.clear();
+      this.#fileInput.setAttribute("label", "Replace");
+    }
   }
-  set src(value) {
-    this.#src = value;
-    this.setAttribute("src", value);
+
+  async #sniffDimensions(src) {
+    try {
+      let blob;
+      if (src.startsWith("blob:")) {
+        const res = await fetch(src);
+        blob = await res.blob();
+      } else {
+        const res = await fetch(src, { mode: "cors" });
+        blob = await res.blob();
+      }
+      const bitmap = await createImageBitmap(blob);
+      this.style.setProperty("--aspect-ratio", `${bitmap.width}/${bitmap.height}`);
+      bitmap.close();
+    } catch {
+      // Non-critical — CSS aspect-ratio fallback handles it
+    }
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
     if (name === "src") {
       this.#src = newValue;
-      if (this.chit) {
-        const hasCb =
-          this.hasAttribute("checkerboard") &&
-          this.getAttribute("checkerboard") !== "false";
+      if (this.#chit) {
+        this.#applyChitBackground(this.#chit);
+      }
+      if (this.#fileInput) {
+        const defaultLabel = this.getAttribute("label") || "Upload";
+        this.#fileInput.setAttribute("label", this.#src ? "Replace" : defaultLabel);
         if (this.#src) {
-          this.chit.setAttribute("background", `url(${this.#src})`);
+          this.#fileInput.setAttribute("url", this.#src);
         } else {
-          this.chit.setAttribute(
-            "background",
-            hasCb ? "url()" : "var(--figma-color-bg-secondary)",
-          );
+          this.#fileInput.removeAttribute("url");
         }
       }
-      if (this.#src) {
-        this.#loadImage(this.#src);
+      if (this.#src && this.getAttribute("aspect-ratio") === "auto") {
+        this.#sniffDimensions(this.#src);
       }
     }
+
     if (name === "upload") {
-      this.upload = newValue !== null && newValue !== "false";
-      this.innerHTML = this.#getInnerHTML();
-      this.#updateRefs();
-    }
-    if (name === "download") {
-      this.download = newValue !== null && newValue !== "false";
-      this.innerHTML = this.#getInnerHTML();
-      this.#updateRefs();
-    }
-    if (name === "size") {
-      this.size = newValue;
+      const on = newValue !== null && newValue !== "false";
+      if (on && !this.#fileInput) {
+        this.#createFileInput();
+      } else if (!on) {
+        this.#removeFileInput();
+      }
     }
+
     if (name === "aspect-ratio") {
       if (newValue && newValue !== "auto") {
         this.style.setProperty("--aspect-ratio", newValue);
       } else if (!newValue) {
         this.style.removeProperty("--aspect-ratio");
+      } else if (newValue === "auto" && this.#src) {
+        this.#sniffDimensions(this.#src);
       }
     }
+
     if (name === "fit") {
       if (newValue) {
         this.style.setProperty("--fit", newValue);
@@ -8249,12 +8039,13 @@ class FigImage extends HTMLElement {
         this.style.removeProperty("--fit");
       }
     }
+
     if (name === "checkerboard") {
-      if (this.chit) {
+      if (this.#chit) {
         if (newValue !== null && newValue !== "false") {
-          this.chit.setAttribute("checkerboard", "");
+          this.#chit.setAttribute("checkerboard", "");
         } else {
-          this.chit.removeAttribute("checkerboard");
+          this.#chit.removeAttribute("checkerboard");
         }
       }
     }
@@ -8264,7 +8055,7 @@ customElements.define("fig-image", FigImage);
 
 /* File Upload Input */
 class FigInputFile extends HTMLElement {
-  static observedAttributes = ["accepts", "label", "disabled", "multiple"];
+  static observedAttributes = ["accepts", "label", "disabled", "multiple", "variant", "url"];
 
   #fileInput = null;
   #filenameEl = null;
@@ -8277,10 +8068,24 @@ class FigInputFile extends HTMLElement {
     return this.#files;
   }
 
+  get #urlFilename() {
+    const url = this.getAttribute("url");
+    if (!url) return "";
+    try {
+      const path = new URL(url, location.href).pathname;
+      const name = path.split("/").pop();
+      return name ? decodeURIComponent(name) : url;
+    } catch {
+      return url;
+    }
+  }
+
   get value() {
-    if (!this.#files || this.#files.length === 0) return "";
-    if (this.#files.length === 1) return this.#files[0].name;
-    return `${this.#files.length} files`;
+    if (this.#files && this.#files.length > 0) {
+      if (this.#files.length === 1) return this.#files[0].name;
+      return `${this.#files.length} files`;
+    }
+    return this.#urlFilename;
   }
 
   connectedCallback() {
@@ -8306,6 +8111,7 @@ class FigInputFile extends HTMLElement {
   clear() {
     this.#files = null;
     if (this.#fileInput) this.#fileInput.value = "";
+    this.removeAttribute("url");
     this.#render();
     this.#emitEvents();
   }
@@ -8319,6 +8125,7 @@ class FigInputFile extends HTMLElement {
   #onFileChange = () => {
     if (this.#fileInput.files.length > 0) {
       this.#files = this.#fileInput.files;
+      this.removeAttribute("url");
       this.#render();
       this.#emitEvents();
     }
@@ -8331,16 +8138,30 @@ class FigInputFile extends HTMLElement {
 
   #onDragOver = (e) => {
     e.preventDefault();
-    this.setAttribute("dragover", "");
+    if (!this.hasAttribute("dragover")) {
+      this.setAttribute("dragover", "");
+      if (this.#uploadBtn) {
+        this.#uploadBtn.dataset.prevText = this.#uploadBtn.textContent;
+        this.#uploadBtn.textContent = "Drop file";
+      }
+    }
   };
 
   #onDragLeave = () => {
     this.removeAttribute("dragover");
+    if (this.#uploadBtn && this.#uploadBtn.dataset.prevText !== undefined) {
+      this.#uploadBtn.textContent = this.#uploadBtn.dataset.prevText;
+      delete this.#uploadBtn.dataset.prevText;
+    }
   };
 
   #onDrop = (e) => {
     e.preventDefault();
     this.removeAttribute("dragover");
+    if (this.#uploadBtn && this.#uploadBtn.dataset.prevText !== undefined) {
+      this.#uploadBtn.textContent = this.#uploadBtn.dataset.prevText;
+      delete this.#uploadBtn.dataset.prevText;
+    }
     if (
       this.hasAttribute("disabled") &&
       this.getAttribute("disabled") !== "false"
@@ -8373,6 +8194,7 @@ class FigInputFile extends HTMLElement {
     if (this.#fileInput) {
       this.#fileInput.files = dt.files;
     }
+    this.removeAttribute("url");
     this.#render();
     this.#emitEvents();
   };
@@ -8384,7 +8206,8 @@ class FigInputFile extends HTMLElement {
       this.hasAttribute("disabled") &&
       this.getAttribute("disabled") !== "false";
     const multiple = this.hasAttribute("multiple");
-    const hasFile = this.#files && this.#files.length > 0;
+    const variant = this.getAttribute("variant") || "input";
+    const hasFile = (this.#files && this.#files.length > 0) || !!this.getAttribute("url");
 
     this.innerHTML = "";
 
@@ -8397,7 +8220,7 @@ class FigInputFile extends HTMLElement {
         : "";
 
       this.#uploadBtn = document.createElement("fig-button");
-      this.#uploadBtn.setAttribute("variant", "input");
+      this.#uploadBtn.setAttribute("variant", variant);
       this.#uploadBtn.setAttribute("type", "upload");
       this.#uploadBtn.className = "fig-input-file-filename";
       if (disabled) this.#uploadBtn.setAttribute("disabled", "");
@@ -8452,7 +8275,7 @@ class FigInputFile extends HTMLElement {
       }
 
       this.#uploadBtn = document.createElement("fig-button");
-      this.#uploadBtn.setAttribute("variant", "input");
+      this.#uploadBtn.setAttribute("variant", variant);
       this.#uploadBtn.setAttribute("type", "upload");
       this.#uploadBtn.textContent = label;
       if (disabled) this.#uploadBtn.setAttribute("disabled", "");
@@ -10561,628 +10384,183 @@ class FigInputJoystick extends HTMLElement {
 
 customElements.define("fig-joystick", FigInputJoystick);
 
-/**
- * A custom angle chooser input element.
- * @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} rotations - Whether to display a rotation count (×N) when rotations > 1. Defaults to false.
- */
-class FigInputAngle extends HTMLElement {
-  // Private fields
-  #adjacent;
-  #opposite;
-  #prevRawAngle = null;
-  #boundHandleRawChange;
-  #boundHandleMouseDown;
-  #boundHandleTouchStart;
-  #boundHandleKeyDown;
-  #boundHandleKeyUp;
-  #boundHandleAngleInput;
-
-  constructor() {
-    super();
-
-    this.angle = 0;
-    this.#adjacent = 1;
-    this.#opposite = 0;
-    this.isDragging = false;
-    this.isShiftHeld = false;
-    this.handle = null;
-    this.angleInput = null;
-    this.plane = null;
-    this.units = "°";
-    this.min = null;
-    this.max = null;
-    this.dial = true;
-    this.showRotations = false;
-    this.rotationSpan = null;
-
-    this.#boundHandleRawChange = this.#handleRawChange.bind(this);
-    this.#boundHandleMouseDown = this.#handleMouseDown.bind(this);
-    this.#boundHandleTouchStart = this.#handleTouchStart.bind(this);
-    this.#boundHandleKeyDown = this.#handleKeyDown.bind(this);
-    this.#boundHandleKeyUp = this.#handleKeyUp.bind(this);
-    this.#boundHandleAngleInput = this.#handleAngleInput.bind(this);
-  }
 
+// FigInputAngle moved to fig-lab.js
+// FigShimmer
+class FigShimmer extends HTMLElement {
   connectedCallback() {
-    requestAnimationFrame(() => {
-      this.precision = this.getAttribute("precision") || 1;
-      this.precision = parseInt(this.precision);
-      this.text = this.getAttribute("text") === "true";
-
-      let rawUnits = this.getAttribute("units") || "°";
-      if (rawUnits === "deg") rawUnits = "°";
-      this.units = rawUnits;
-
-      this.min = this.hasAttribute("min")
-        ? Number(this.getAttribute("min"))
-        : null;
-      this.max = this.hasAttribute("max")
-        ? Number(this.getAttribute("max"))
-        : null;
-      this.dial = this.#readBooleanAttribute("dial", true);
-      this.showRotations = this.#readRotationsEnabled();
-
-      this.#render();
-      this.#setupListeners();
-
-      this.#syncHandlePosition();
-      if (this.text && this.angleInput) {
-        this.angleInput.setAttribute(
-          "value",
-          this.angle.toFixed(this.precision),
-        );
-      }
-    });
-  }
-
-  disconnectedCallback() {
-    this.#cleanupListeners();
-  }
-
-  #render() {
-    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);
+    const duration = this.getAttribute("duration");
+    if (duration) {
+      this.style.setProperty("--shimmer-duration", duration);
     }
-    return false;
   }
 
-  #getInnerHTML() {
-    const step = this.#getStepForUnit();
-    const minAttr = this.min !== null ? `min="${this.min}"` : "";
-    const maxAttr = this.max !== null ? `max="${this.max}"` : "";
-    return `
-        ${
-          this.dial
-            ? `<div class="fig-input-angle-plane" tabindex="0">
-          <div class="fig-input-angle-handle"></div>
-        </div>`
-            : ""
-        }
-        ${
-          this.text
-            ? `<fig-input-number
-                name="angle"
-                step="${step}"
-                value="${this.angle}"
-                ${minAttr}
-                ${maxAttr}
-                units="${this.units}">
-                ${this.showRotations ? `<span slot="append" class="fig-input-angle-rotations"></span>` : ""}
-              </fig-input-number>`
-            : ""
-        }
-    `;
+  static get observedAttributes() {
+    return ["duration", "playing"];
   }
 
-  #getRotationCount() {
-    const degrees = Math.abs(this.#toDegrees(this.angle));
-    return Math.floor(degrees / 360);
+  get playing() {
+    return this.getAttribute("playing") !== "false";
   }
 
-  #updateRotationDisplay() {
-    if (!this.rotationSpan) return;
-    const rotations = this.#getRotationCount();
-    if (rotations > 1) {
-      this.rotationSpan.textContent = `\u00d7${rotations}`;
-      this.rotationSpan.style.display = "";
+  set playing(value) {
+    if (value) {
+      this.removeAttribute("playing"); // Default is playing
     } else {
-      this.rotationSpan.textContent = "";
-      this.rotationSpan.style.display = "none";
+      this.setAttribute("playing", "false");
     }
   }
 
-  #getStepForUnit() {
-    switch (this.units) {
-      case "rad":
-        return 0.01;
-      case "turn":
-        return 0.001;
-      default:
-        return 0.1;
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "duration") {
+      this.style.setProperty("--shimmer-duration", newValue || "1.5s");
     }
+    // playing is handled purely by CSS attribute selectors
   }
+}
+customElements.define("fig-shimmer", FigShimmer);
 
-  // --- Unit conversion helpers ---
+// FigSkeleton
+class FigSkeleton extends FigShimmer {}
+customElements.define("fig-skeleton", FigSkeleton);
 
-  #toDegrees(value) {
-    switch (this.units) {
-      case "rad":
-        return (value * 180) / Math.PI;
-      case "turn":
-        return value * 360;
-      default:
-        return value;
-    }
+// FigLayer
+class FigLayer extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "visible"];
   }
 
-  #fromDegrees(degrees) {
-    switch (this.units) {
-      case "rad":
-        return (degrees * Math.PI) / 180;
-      case "turn":
-        return degrees / 360;
-      default:
-        return degrees;
-    }
+  #chevron = null;
+  #boundHandleChevronClick = null;
+
+  connectedCallback() {
+    // Use requestAnimationFrame to ensure child elements have rendered
+    requestAnimationFrame(() => {
+      this.#injectChevron();
+    });
   }
 
-  #convertAngle(value, fromUnit, toUnit) {
-    // Convert to degrees first
-    let degrees;
-    switch (fromUnit) {
-      case "rad":
-        degrees = (value * 180) / Math.PI;
-        break;
-      case "turn":
-        degrees = value * 360;
-        break;
-      default:
-        degrees = value;
-    }
-    // Convert from degrees to target
-    switch (toUnit) {
-      case "rad":
-        return (degrees * Math.PI) / 180;
-      case "turn":
-        return degrees / 360;
-      default:
-        return degrees;
+  disconnectedCallback() {
+    if (this.#chevron && this.#boundHandleChevronClick) {
+      this.#chevron.removeEventListener("click", this.#boundHandleChevronClick);
     }
   }
 
-  // --- Event listeners ---
+  #injectChevron() {
+    const row = this.querySelector(":scope > .fig-layer-row");
+    if (!row) return;
 
-  #setupListeners() {
-    this.handle = this.querySelector(".fig-input-angle-handle");
-    this.plane = this.querySelector(".fig-input-angle-plane");
-    this.angleInput = this.querySelector("fig-input-number[name='angle']");
-    this.rotationSpan = this.querySelector(".fig-input-angle-rotations");
-    this.#updateRotationDisplay();
-    this.plane?.addEventListener("mousedown", this.#boundHandleMouseDown);
-    this.plane?.addEventListener("touchstart", this.#boundHandleTouchStart);
-    window.addEventListener("keydown", this.#boundHandleKeyDown);
-    window.addEventListener("keyup", this.#boundHandleKeyUp);
-    if (this.text && this.angleInput) {
-      this.angleInput.addEventListener("input", this.#boundHandleAngleInput);
-    }
-    this.addEventListener("change", this.#boundHandleRawChange, true);
-  }
+    // Check if chevron already exists
+    if (row.querySelector(".fig-layer-chevron")) return;
 
-  #cleanupListeners() {
-    this.plane?.removeEventListener("mousedown", this.#boundHandleMouseDown);
-    this.plane?.removeEventListener("touchstart", this.#boundHandleTouchStart);
-    window.removeEventListener("keydown", this.#boundHandleKeyDown);
-    window.removeEventListener("keyup", this.#boundHandleKeyUp);
-    if (this.text && this.angleInput) {
-      this.angleInput.removeEventListener("input", this.#boundHandleAngleInput);
-    }
-    this.removeEventListener("change", this.#boundHandleRawChange, true);
-  }
+    // Always create chevron element - CSS handles visibility via :has(fig-layer)
+    this.#chevron = document.createElement("span");
+    this.#chevron.className = "fig-layer-chevron";
+    row.prepend(this.#chevron);
 
-  #handleRawChange(e) {
-    // Only intercept native change events from the raw <input> element
-    if (!e.target?.matches?.("input")) return;
-    const raw = e.target.value;
-    const match = raw.match(/^(-?\d*\.?\d+)\s*(turn|rad|deg|°)$/i);
-    if (match) {
-      const num = parseFloat(match[1]);
-      let fromUnit = match[2].toLowerCase();
-      if (fromUnit === "deg") fromUnit = "°";
-      if (fromUnit !== this.units) {
-        const converted = this.#convertAngle(num, fromUnit, this.units);
-        e.target.value = String(converted);
-      }
-    }
+    // Add click listener to chevron only
+    this.#boundHandleChevronClick = this.#handleChevronClick.bind(this);
+    this.#chevron.addEventListener("click", this.#boundHandleChevronClick);
   }
 
-  #handleAngleInput(e) {
+  #handleChevronClick(e) {
     e.stopPropagation();
-    this.angle = Number(e.target.value);
-    this.#calculateAdjacentAndOpposite();
-    this.#syncHandlePosition();
-    this.#updateRotationDisplay();
-    this.#emitInputEvent();
-    this.#emitChangeEvent();
+    this.open = !this.open;
   }
 
-  // --- Angle calculation ---
-
-  #calculateAdjacentAndOpposite() {
-    const degrees = this.#toDegrees(this.angle);
-    const radians = (degrees * Math.PI) / 180;
-    this.#adjacent = Math.cos(radians);
-    this.#opposite = Math.sin(radians);
+  get open() {
+    const attr = this.getAttribute("open");
+    return attr !== null && attr !== "false";
   }
 
-  #snapToIncrement(angle) {
-    if (!this.isShiftHeld) return angle;
-    const increment = 45;
-    return Math.round(angle / increment) * increment;
+  set open(value) {
+    const oldValue = this.open;
+    if (value) {
+      this.setAttribute("open", "true");
+    } else {
+      this.setAttribute("open", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: value },
+          bubbles: true,
+        }),
+      );
+    }
   }
 
-  #getRawAngle(e) {
-    const rect = this.plane.getBoundingClientRect();
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const deltaX = e.clientX - centerX;
-    const deltaY = e.clientY - centerY;
-    return (Math.atan2(deltaY, deltaX) * 180) / Math.PI;
+  get visible() {
+    const attr = this.getAttribute("visible");
+    return attr !== "false";
   }
 
-  #updateAngle(e) {
-    let rawAngle = this.#getRawAngle(e);
-    // Normalize to 0-360 for snap and positioning
-    let normalizedAngle = ((rawAngle % 360) + 360) % 360;
-    normalizedAngle = this.#snapToIncrement(normalizedAngle);
-
-    const isBounded = this.min !== null || this.max !== null;
-
-    if (isBounded) {
-      // Bounded: absolute position
-      this.angle = this.#fromDegrees(normalizedAngle);
+  set visible(value) {
+    const oldValue = this.visible;
+    if (value) {
+      this.setAttribute("visible", "true");
     } else {
-      // Unbounded: cumulative winding
-      if (this.#prevRawAngle === null) {
-        // First event of this drag — snap to clicked position, preserving revolution
-        this.#prevRawAngle = normalizedAngle;
-        const currentDeg = this.#toDegrees(this.angle);
-        const currentMod = ((currentDeg % 360) + 360) % 360;
-        let delta = normalizedAngle - currentMod;
-        if (delta > 180) delta -= 360;
-        if (delta < -180) delta += 360;
-        this.angle += this.#fromDegrees(delta);
-      } else {
-        // Subsequent events — accumulate delta
-        let delta = normalizedAngle - this.#prevRawAngle;
-        if (delta > 180) delta -= 360;
-        if (delta < -180) delta += 360;
-        this.angle += this.#fromDegrees(delta);
-        this.#prevRawAngle = normalizedAngle;
-      }
+      this.setAttribute("visible", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: value },
+          bubbles: true,
+        }),
+      );
     }
+  }
 
-    this.#calculateAdjacentAndOpposite();
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
 
-    this.#syncHandlePosition();
-    if (this.text && this.angleInput) {
-      this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
+    if (name === "open") {
+      const isOpen = newValue !== null && newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: isOpen },
+          bubbles: true,
+        }),
+      );
     }
-    this.#updateRotationDisplay();
 
-    this.#emitInputEvent();
+    if (name === "visible") {
+      const isVisible = newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: isVisible },
+          bubbles: true,
+        }),
+      );
+    }
   }
+}
+customElements.define("fig-layer", FigLayer);
 
-  // --- Event dispatching ---
-
-  #emitInputEvent() {
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        cancelable: true,
-        detail: { value: this.value, angle: this.angle },
-      }),
-    );
-  }
-
-  #emitChangeEvent() {
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-        detail: { value: this.value, angle: this.angle },
-      }),
-    );
-  }
-
-  // --- Handle position ---
-
-  #syncHandlePosition() {
-    if (this.handle) {
-      const degrees = this.#toDegrees(this.angle);
-      const radians = (degrees * Math.PI) / 180;
-      const radius = this.plane.offsetWidth / 2 - this.handle.offsetWidth / 2;
-      const x = Math.cos(radians) * radius;
-      const y = Math.sin(radians) * radius;
-      this.handle.style.transform = `translate(${x}px, ${y}px)`;
-    }
-  }
-
-  // --- Mouse/Touch handlers ---
-
-  #handleMouseDown(e) {
-    this.isDragging = true;
-    this.#prevRawAngle = null;
-    this.#updateAngle(e);
-
-    const handleMouseMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updateAngle(e);
-    };
-
-    const handleMouseUp = () => {
-      this.isDragging = false;
-      this.#prevRawAngle = null;
-      this.plane.classList.remove("dragging");
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      this.#emitChangeEvent();
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-  }
-
-  #handleTouchStart(e) {
-    e.preventDefault();
-    this.isDragging = true;
-    this.#prevRawAngle = null;
-    this.#updateAngle(e.touches[0]);
-
-    const handleTouchMove = (e) => {
-      this.plane.classList.add("dragging");
-      if (this.isDragging) this.#updateAngle(e.touches[0]);
-    };
-
-    const handleTouchEnd = () => {
-      this.isDragging = false;
-      this.#prevRawAngle = null;
-      this.plane.classList.remove("dragging");
-      window.removeEventListener("touchmove", handleTouchMove);
-      window.removeEventListener("touchend", handleTouchEnd);
-      this.#emitChangeEvent();
-    };
-
-    window.addEventListener("touchmove", handleTouchMove);
-    window.addEventListener("touchend", handleTouchEnd);
-  }
-
-  // --- Keyboard handlers ---
-
-  #handleKeyDown(e) {
-    if (e.key === "Shift") this.isShiftHeld = true;
-  }
-
-  #handleKeyUp(e) {
-    if (e.key === "Shift") this.isShiftHeld = false;
-  }
-
-  focus() {
-    this.plane?.focus();
-  }
-
-  // --- Attributes ---
-
-  static get observedAttributes() {
-    return [
-      "value",
-      "precision",
-      "text",
-      "min",
-      "max",
-      "units",
-      "dial",
-      "rotations",
-      "show-rotations",
-    ];
-  }
-
-  get value() {
-    return this.angle;
-  }
-
-  get adjacent() {
-    return this.#adjacent;
-  }
-
-  get opposite() {
-    return this.#opposite;
-  }
-
-  set value(value) {
-    if (isNaN(value)) {
-      console.error("Invalid value: must be a number.");
-      return;
-    }
-    this.angle = value;
-    this.#calculateAdjacentAndOpposite();
-    this.#syncHandlePosition();
-    if (this.angleInput) {
-      this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
-    }
-    this.#updateRotationDisplay();
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "value":
-        if (this.isDragging) break;
-        this.value = Number(newValue);
-        break;
-      case "precision":
-        this.precision = parseInt(newValue);
-        break;
-      case "text":
-        if (newValue !== oldValue) {
-          this.text = newValue?.toLowerCase() === "true";
-          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.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      }
-      case "min":
-        this.min = newValue !== null ? Number(newValue) : null;
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "max":
-        this.max = newValue !== null ? Number(newValue) : null;
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-      case "rotations":
-      case "show-rotations":
-        this.showRotations = this.#readRotationsEnabled();
-        if (this.isConnected) {
-          this.#render();
-          this.#setupListeners();
-          this.#syncHandlePosition();
-        }
-        break;
-    }
-  }
-}
-customElements.define("fig-input-angle", FigInputAngle);
-
-// FigShimmer
-class FigShimmer extends HTMLElement {
-  connectedCallback() {
-    const duration = this.getAttribute("duration");
-    if (duration) {
-      this.style.setProperty("--shimmer-duration", duration);
-    }
-  }
-
-  static get observedAttributes() {
-    return ["duration", "playing"];
-  }
-
-  get playing() {
-    return this.getAttribute("playing") !== "false";
-  }
-
-  set playing(value) {
-    if (value) {
-      this.removeAttribute("playing"); // Default is playing
-    } else {
-      this.setAttribute("playing", "false");
-    }
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "duration") {
-      this.style.setProperty("--shimmer-duration", newValue || "1.5s");
-    }
-    // playing is handled purely by CSS attribute selectors
-  }
-}
-customElements.define("fig-shimmer", FigShimmer);
-
-// FigSkeleton
-class FigSkeleton extends FigShimmer {}
-customElements.define("fig-skeleton", FigSkeleton);
-
-// FigLayer
-class FigLayer extends HTMLElement {
-  static get observedAttributes() {
-    return ["open", "visible"];
-  }
+// FigGroup
+class FigGroup extends HTMLElement {
+  static observedAttributes = ["name", "collapsible"];
 
+  #header = null;
   #chevron = null;
-  #boundHandleChevronClick = null;
 
   connectedCallback() {
-    // Use requestAnimationFrame to ensure child elements have rendered
-    requestAnimationFrame(() => {
-      this.#injectChevron();
-    });
+    requestAnimationFrame(() => this.#render());
   }
 
   disconnectedCallback() {
-    if (this.#chevron && this.#boundHandleChevronClick) {
-      this.#chevron.removeEventListener("click", this.#boundHandleChevronClick);
+    if (this.#chevron) {
+      this.#chevron.removeEventListener("click", this.#handleToggle);
+    }
+    if (this.#header) {
+      this.#header.removeEventListener("click", this.#handleToggle);
     }
   }
 
-  #injectChevron() {
-    const row = this.querySelector(":scope > .fig-layer-row");
-    if (!row) return;
-
-    // Check if chevron already exists
-    if (row.querySelector(".fig-layer-chevron")) return;
-
-    // Always create chevron element - CSS handles visibility via :has(fig-layer)
-    this.#chevron = document.createElement("span");
-    this.#chevron.className = "fig-layer-chevron";
-    row.prepend(this.#chevron);
-
-    // Add click listener to chevron only
-    this.#boundHandleChevronClick = this.#handleChevronClick.bind(this);
-    this.#chevron.addEventListener("click", this.#boundHandleChevronClick);
-  }
-
-  #handleChevronClick(e) {
-    e.stopPropagation();
-    this.open = !this.open;
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#render();
   }
 
   get open() {
@@ -11191,146 +10569,51 @@ class FigLayer extends HTMLElement {
   }
 
   set open(value) {
-    const oldValue = this.open;
+    const was = this.open;
     if (value) {
       this.setAttribute("open", "true");
     } else {
       this.setAttribute("open", "false");
     }
-    if (oldValue !== value) {
+    if (was !== !!value) {
       this.dispatchEvent(
         new CustomEvent("openchange", {
-          detail: { open: value },
+          detail: { open: !!value },
           bubbles: true,
         }),
       );
     }
   }
 
-  get visible() {
-    const attr = this.getAttribute("visible");
-    return attr !== "false";
-  }
+  #handleToggle = (e) => {
+    e.stopPropagation();
+    this.open = !this.open;
+  };
 
-  set visible(value) {
-    const oldValue = this.visible;
-    if (value) {
-      this.setAttribute("visible", "true");
-    } else {
-      this.setAttribute("visible", "false");
-    }
-    if (oldValue !== value) {
-      this.dispatchEvent(
-        new CustomEvent("visibilitychange", {
-          detail: { visible: value },
-          bubbles: true,
-        }),
-      );
-    }
-  }
+  #render() {
+    const isCollapsible = this.hasAttribute("collapsible");
+    const nameAttr = this.getAttribute("name");
+    const label = nameAttr || (isCollapsible ? "Group" : null);
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    // Check if user supplied their own fig-header
+    const userHeader = this.querySelector(":scope > fig-header");
 
-    if (name === "open") {
-      const isOpen = newValue !== null && newValue !== "false";
-      this.dispatchEvent(
-        new CustomEvent("openchange", {
-          detail: { open: isOpen },
-          bubbles: true,
-        }),
-      );
+    if (!label && !isCollapsible && !userHeader) {
+      if (this.#header && this.#header.dataset.generated) {
+        this.#header.remove();
+        this.#header = null;
+        this.#chevron = null;
+      }
+      return;
     }
 
-    if (name === "visible") {
-      const isVisible = newValue !== "false";
-      this.dispatchEvent(
-        new CustomEvent("visibilitychange", {
-          detail: { visible: isVisible },
-          bubbles: true,
-        }),
-      );
-    }
-  }
-}
-customElements.define("fig-layer", FigLayer);
-
-// FigGroup
-class FigGroup extends HTMLElement {
-  static observedAttributes = ["name", "collapsible"];
-
-  #header = null;
-  #chevron = null;
-
-  connectedCallback() {
-    requestAnimationFrame(() => this.#render());
-  }
-
-  disconnectedCallback() {
-    if (this.#chevron) {
-      this.#chevron.removeEventListener("click", this.#handleToggle);
-    }
-    if (this.#header) {
-      this.#header.removeEventListener("click", this.#handleToggle);
-    }
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-    this.#render();
-  }
-
-  get open() {
-    const attr = this.getAttribute("open");
-    return attr !== null && attr !== "false";
-  }
-
-  set open(value) {
-    const was = this.open;
-    if (value) {
-      this.setAttribute("open", "true");
-    } else {
-      this.setAttribute("open", "false");
-    }
-    if (was !== !!value) {
-      this.dispatchEvent(
-        new CustomEvent("openchange", {
-          detail: { open: !!value },
-          bubbles: true,
-        }),
-      );
-    }
-  }
-
-  #handleToggle = (e) => {
-    e.stopPropagation();
-    this.open = !this.open;
-  };
-
-  #render() {
-    const isCollapsible = this.hasAttribute("collapsible");
-    const nameAttr = this.getAttribute("name");
-    const label = nameAttr || (isCollapsible ? "Group" : null);
-
-    // Check if user supplied their own fig-header
-    const userHeader = this.querySelector(":scope > fig-header");
-
-    if (!label && !isCollapsible && !userHeader) {
-      if (this.#header && this.#header.dataset.generated) {
-        this.#header.remove();
-        this.#header = null;
-        this.#chevron = null;
-      }
-      return;
-    }
-
-    if (userHeader) {
-      this.#header = userHeader;
-    } else if (!this.#header || !this.#header.dataset.generated) {
-      this.#header = document.createElement("fig-header");
-      this.#header.setAttribute("borderless", "");
-      this.#header.dataset.generated = "true";
-      this.prepend(this.#header);
+    if (userHeader) {
+      this.#header = userHeader;
+    } else if (!this.#header || !this.#header.dataset.generated) {
+      this.#header = document.createElement("fig-header");
+      this.#header.setAttribute("borderless", "");
+      this.#header.dataset.generated = "true";
+      this.prepend(this.#header);
     }
 
     // Ensure h3 exists inside header
@@ -12414,9 +11697,9 @@ class FigFillPicker extends HTMLElement {
           <option value="angular">Angular</option>
         </fig-dropdown>
         <fig-tooltip text="Rotate gradient">
-          <fig-input-angle class="fig-fill-picker-gradient-angle" value="${
+          <fig-input-number class="fig-fill-picker-gradient-angle" value="${
             (this.#gradient.angle - 90 + 360) % 360
-          }"></fig-input-angle>
+          }" min="0" max="360" units="°" wrap></fig-input-number>
         </fig-tooltip>
         <div class="fig-fill-picker-gradient-center input-combo" style="display: none;">
           <fig-input-number min="0" max="100" value="${
@@ -12513,7 +11796,6 @@ class FigFillPicker extends HTMLElement {
     );
 
     // Angle input
-    // Convert from fig-input-angle coordinates (0° = right) to CSS coordinates (0° = up)
     const angleInput = container.querySelector(
       ".fig-fill-picker-gradient-angle",
     );
@@ -13700,1623 +12982,699 @@ class FigColorTip extends HTMLElement {
         return `#${toHex(rgb[1])}${toHex(rgb[2])}${toHex(rgb[3])}`.toUpperCase();
       }
     } catch {
-      // Fall through to default.
-    }
-
-    return "#D9D9D9";
-  }
-
-  #syncFromAttributes() {
-    const rawAttr = this.getAttribute("value");
-    const color = this.#normalizeColor(rawAttr);
-    const alpha = this.#extractAlpha(rawAttr);
-    if (rawAttr !== color && alpha >= 1) {
-      this.setAttribute("value", color);
-      return;
-    }
-
-    if (this.#fillPicker) {
-      const pickerVal =
-        alpha < 1
-          ? { type: "solid", color, opacity: Math.round(alpha * 100) }
-          : { type: "solid", color };
-      this.#fillPicker.setAttribute("value", JSON.stringify(pickerVal));
-      if (this.#alphaEnabled) {
-        this.#fillPicker.removeAttribute("alpha");
-      } else {
-        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) {
-      if (detail?.opacity !== undefined) {
-        eventDetail.opacity = detail.opacity;
-      } else if (detail?.alpha !== undefined) {
-        eventDetail.opacity = Math.round(detail.alpha * 100);
-      }
-    }
-
-    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 "control":
-        this.#render();
-        break;
-      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.
- * @attr {string} value - Identifier for this choice
- * @attr {boolean} selected - Whether this choice is currently selected
- * @attr {boolean} disabled - Whether this choice is disabled
- */
-class FigChoice extends HTMLElement {
-  static get observedAttributes() {
-    return ["selected", "disabled"];
-  }
-
-  connectedCallback() {
-    this.setAttribute("role", "option");
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    this.setAttribute(
-      "aria-selected",
-      this.hasAttribute("selected") ? "true" : "false",
-    );
-    if (this.hasAttribute("disabled")) {
-      this.setAttribute("aria-disabled", "true");
-    }
-  }
-
-  attributeChangedCallback(name) {
-    if (name === "selected") {
-      this.setAttribute(
-        "aria-selected",
-        this.hasAttribute("selected") ? "true" : "false",
-      );
-    }
-    if (name === "disabled") {
-      const isDisabled =
-        this.hasAttribute("disabled") &&
-        this.getAttribute("disabled") !== "false";
-      if (isDisabled) {
-        this.setAttribute("aria-disabled", "true");
-        this.setAttribute("tabindex", "-1");
-      } else {
-        this.removeAttribute("aria-disabled");
-        this.setAttribute("tabindex", "0");
-      }
-    }
-  }
-}
-customElements.define("fig-choice", FigChoice);
-
-/* Chooser */
-/**
- * A selection controller for a list of choice elements.
- * @attr {string} choice-element - CSS selector for child choices (default: "fig-choice")
- * @attr {string} layout - Layout mode: "vertical" (default), "horizontal", "grid"
- * @attr {string} value - Value of the currently selected choice
- * @attr {boolean} disabled - Whether the chooser is disabled
- */
-class FigChooser extends HTMLElement {
-  #selectedChoice = null;
-  #boundHandleClick = this.#handleClick.bind(this);
-  #boundHandleKeyDown = this.#handleKeyDown.bind(this);
-  #boundSyncOverflow = this.#syncOverflow.bind(this);
-  #mutationObserver = null;
-  #resizeObserver = null;
-  #navStart = null;
-  #navEnd = null;
-  #dragState = null;
-
-  constructor() {
-    super();
-  }
-
-  static get observedAttributes() {
-    return [
-      "value",
-      "disabled",
-      "choice-element",
-      "drag",
-      "overflow",
-      "loop",
-      "padding",
-    ];
-  }
-
-  get #overflowMode() {
-    return this.getAttribute("overflow") === "scrollbar"
-      ? "scrollbar"
-      : "buttons";
-  }
-
-  get #dragEnabled() {
-    const attr = this.getAttribute("drag");
-    return attr === null || attr !== "false";
-  }
-
-  get #choiceSelector() {
-    return this.getAttribute("choice-element") || "fig-choice";
-  }
-
-  get choices() {
-    return Array.from(this.querySelectorAll(this.#choiceSelector));
-  }
-
-  get selectedChoice() {
-    return this.#selectedChoice;
-  }
-
-  set selectedChoice(element) {
-    if (element && !this.contains(element)) return;
-    const choices = this.choices;
-    for (const choice of choices) {
-      const shouldSelect = choice === element;
-      const isSelected = choice.hasAttribute("selected");
-      if (shouldSelect && !isSelected) {
-        choice.setAttribute("selected", "");
-      } else if (!shouldSelect && isSelected) {
-        choice.removeAttribute("selected");
-      }
-    }
-    this.#selectedChoice = element;
-    const val = element?.getAttribute("value") ?? "";
-    if (this.getAttribute("value") !== val) {
-      if (val) {
-        this.setAttribute("value", val);
-      }
-    }
-    this.#scrollToChoice(element);
-  }
-
-  get value() {
-    return this.#selectedChoice?.getAttribute("value") ?? "";
-  }
-
-  set value(val) {
-    if (val === null || val === undefined || val === "") return;
-    this.setAttribute("value", String(val));
-  }
-
-  connectedCallback() {
-    this.setAttribute("role", "listbox");
-    this.addEventListener("click", this.#boundHandleClick);
-    this.addEventListener("keydown", this.#boundHandleKeyDown);
-    this.addEventListener("scroll", this.#boundSyncOverflow);
-    this.#applyOverflowMode();
-    this.#setupDrag();
-    this.#startObserver();
-    this.#startResizeObserver();
-
-    requestAnimationFrame(() => {
-      this.#syncSelection();
-      this.#syncOverflow();
-    });
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener("click", this.#boundHandleClick);
-    this.removeEventListener("keydown", this.#boundHandleKeyDown);
-    this.removeEventListener("scroll", this.#boundSyncOverflow);
-    this.#teardownDrag();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
-    this.#resizeObserver?.disconnect();
-    this.#resizeObserver = null;
-    this.#removeNavButtons();
-  }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "value" && newValue !== oldValue && newValue) {
-      this.#selectByValue(newValue);
-    }
-    if (name === "disabled") {
-      const isDisabled = newValue !== null && newValue !== "false";
-      const choices = this.choices;
-      for (const choice of choices) {
-        if (isDisabled) {
-          choice.setAttribute("aria-disabled", "true");
-          choice.setAttribute("tabindex", "-1");
-        } else {
-          choice.removeAttribute("aria-disabled");
-          choice.setAttribute("tabindex", "0");
-        }
-      }
-    }
-    if (name === "choice-element") {
-      requestAnimationFrame(() => this.#syncSelection());
-    }
-    if (name === "drag") {
-      if (this.#dragEnabled) {
-        this.#setupDrag();
-      } else {
-        this.#teardownDrag();
-      }
-    }
-    if (name === "overflow") {
-      this.#applyOverflowMode();
-    }
-  }
-
-  #syncSelection() {
-    const choices = this.choices;
-    if (!choices.length) {
-      this.#selectedChoice = null;
-      return;
-    }
-
-    const valueAttr = this.getAttribute("value");
-    if (valueAttr && this.#selectByValue(valueAttr)) return;
-
-    const alreadySelected = choices.find((c) => c.hasAttribute("selected"));
-    if (alreadySelected) {
-      this.selectedChoice = alreadySelected;
-      return;
-    }
-
-    this.selectedChoice = choices[0];
-  }
-
-  #selectByValue(value) {
-    const choices = this.choices;
-    for (const choice of choices) {
-      if (choice.getAttribute("value") === value) {
-        this.selectedChoice = choice;
-        return true;
-      }
-    }
-    return false;
-  }
-
-  #findChoiceFromTarget(target) {
-    const selector = this.#choiceSelector;
-    let el = target;
-    while (el && el !== this) {
-      if (el.matches(selector)) return el;
-      el = el.parentElement;
-    }
-    return null;
-  }
-
-  #handleClick(event) {
-    if (
-      this.hasAttribute("disabled") &&
-      this.getAttribute("disabled") !== "false"
-    )
-      return;
-    const choice = this.#findChoiceFromTarget(event.target);
-    if (!choice) return;
-    if (
-      choice.hasAttribute("disabled") &&
-      choice.getAttribute("disabled") !== "false"
-    )
-      return;
-    this.selectedChoice = choice;
-    this.#emitEvents();
-  }
-
-  #handleKeyDown(event) {
-    if (
-      this.hasAttribute("disabled") &&
-      this.getAttribute("disabled") !== "false"
-    )
-      return;
-    const choices = this.choices.filter(
-      (c) =>
-        !c.hasAttribute("disabled") || c.getAttribute("disabled") === "false",
-    );
-    if (!choices.length) return;
-    const currentIndex = choices.indexOf(this.#selectedChoice);
-    let nextIndex = currentIndex;
-
-    const loop = this.hasAttribute("loop");
-
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        event.preventDefault();
-        if (currentIndex < choices.length - 1) {
-          nextIndex = currentIndex + 1;
-        } else if (loop) {
-          nextIndex = 0;
-        }
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        event.preventDefault();
-        if (currentIndex > 0) {
-          nextIndex = currentIndex - 1;
-        } else if (loop) {
-          nextIndex = choices.length - 1;
-        }
-        break;
-      case "Home":
-        event.preventDefault();
-        nextIndex = 0;
-        break;
-      case "End":
-        event.preventDefault();
-        nextIndex = choices.length - 1;
-        break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        if (document.activeElement?.matches(this.#choiceSelector)) {
-          const focused = this.#findChoiceFromTarget(document.activeElement);
-          if (focused && focused !== this.#selectedChoice) {
-            this.selectedChoice = focused;
-            this.#emitEvents();
-          }
-        }
-        return;
-      default:
-        return;
-    }
-
-    if (nextIndex !== currentIndex && choices[nextIndex]) {
-      this.selectedChoice = choices[nextIndex];
-      choices[nextIndex].focus();
-      this.#emitEvents();
-    }
-  }
-
-  #emitEvents() {
-    const val = this.value;
-    this.dispatchEvent(
-      new CustomEvent("input", { detail: val, bubbles: true }),
-    );
-    this.dispatchEvent(
-      new CustomEvent("change", { detail: val, bubbles: true }),
-    );
-  }
-
-  #syncOverflow() {
-    if (this.#overflowMode === "scrollbar") return;
-    const isHorizontal = this.getAttribute("layout") === "horizontal";
-    const threshold = 2;
-
-    if (isHorizontal) {
-      const atStart = this.scrollLeft <= threshold;
-      const atEnd =
-        this.scrollLeft + this.clientWidth >= this.scrollWidth - threshold;
-      this.classList.toggle("overflow-start", !atStart);
-      this.classList.toggle("overflow-end", !atEnd);
-    } else {
-      const atStart = this.scrollTop <= threshold;
-      const atEnd =
-        this.scrollTop + this.clientHeight >= this.scrollHeight - threshold;
-      this.classList.toggle("overflow-start", !atStart);
-      this.classList.toggle("overflow-end", !atEnd);
-    }
-  }
-
-  #startResizeObserver() {
-    this.#resizeObserver?.disconnect();
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#syncOverflow();
-    });
-    this.#resizeObserver.observe(this);
-  }
-
-  #setupDrag() {
-    if (this.#dragState?.bound) return;
-    if (!this.#dragEnabled) return;
-
-    const onPointerDown = (e) => {
-      if (e.button !== 0) return;
-      const isHorizontal = this.getAttribute("layout") === "horizontal";
-      const hasOverflow = isHorizontal
-        ? this.scrollWidth > this.clientWidth
-        : this.scrollHeight > this.clientHeight;
-      if (!hasOverflow) return;
-
-      this.#dragState.active = true;
-      this.#dragState.didDrag = false;
-      this.#dragState.startX = e.clientX;
-      this.#dragState.startY = e.clientY;
-      this.#dragState.scrollLeft = this.scrollLeft;
-      this.#dragState.scrollTop = this.scrollTop;
-      this.style.cursor = "grab";
-      this.style.userSelect = "none";
-    };
-
-    const onPointerMove = (e) => {
-      if (!this.#dragState.active) return;
-      const isHorizontal = this.getAttribute("layout") === "horizontal";
-      const dx = e.clientX - this.#dragState.startX;
-      const dy = e.clientY - this.#dragState.startY;
-
-      if (!this.#dragState.didDrag && Math.abs(isHorizontal ? dx : dy) > 3) {
-        this.#dragState.didDrag = true;
-        this.style.cursor = "grabbing";
-        this.setPointerCapture(e.pointerId);
-      }
-
-      if (!this.#dragState.didDrag) return;
-
-      if (isHorizontal) {
-        this.scrollLeft = this.#dragState.scrollLeft - dx;
-      } else {
-        this.scrollTop = this.#dragState.scrollTop - dy;
-      }
-    };
-
-    const onPointerUp = (e) => {
-      if (!this.#dragState.active) return;
-      const wasDrag = this.#dragState.didDrag;
-      this.#dragState.active = false;
-      this.#dragState.didDrag = false;
-      this.style.cursor = "";
-      this.style.userSelect = "";
-      if (e.pointerId !== undefined) {
-        try {
-          this.releasePointerCapture(e.pointerId);
-        } catch {}
-      }
-      if (wasDrag) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-
-    const onClick = (e) => {
-      if (this.#dragState?.suppressClick) {
-        e.stopPropagation();
-        e.preventDefault();
-        this.#dragState.suppressClick = false;
-      }
-    };
-
-    const onPointerUpCapture = (e) => {
-      if (this.#dragState?.didDrag) {
-        this.#dragState.suppressClick = true;
-        setTimeout(() => {
-          if (this.#dragState) this.#dragState.suppressClick = false;
-        }, 0);
-      }
-    };
-
-    this.#dragState = {
-      active: false,
-      didDrag: false,
-      suppressClick: false,
-      startX: 0,
-      startY: 0,
-      scrollLeft: 0,
-      scrollTop: 0,
-      bound: true,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onClick,
-      onPointerUpCapture,
-    };
-
-    this.addEventListener("pointerdown", onPointerDown);
-    window.addEventListener("pointermove", onPointerMove);
-    window.addEventListener("pointerup", onPointerUp);
-    this.addEventListener("pointerup", onPointerUpCapture, true);
-    this.addEventListener("click", onClick, true);
-  }
-
-  #teardownDrag() {
-    if (!this.#dragState?.bound) return;
-    this.removeEventListener("pointerdown", this.#dragState.onPointerDown);
-    window.removeEventListener("pointermove", this.#dragState.onPointerMove);
-    window.removeEventListener("pointerup", this.#dragState.onPointerUp);
-    this.removeEventListener(
-      "pointerup",
-      this.#dragState.onPointerUpCapture,
-      true,
-    );
-    this.removeEventListener("click", this.#dragState.onClick, true);
-    this.style.cursor = "";
-    this.style.userSelect = "";
-    this.#dragState = null;
-  }
-
-  #applyOverflowMode() {
-    if (this.#overflowMode === "scrollbar") {
-      this.#removeNavButtons();
-    } else {
-      this.#createNavButtons();
-    }
-  }
-
-  #removeNavButtons() {
-    this.#navStart?.remove();
-    this.#navEnd?.remove();
-    this.#navStart = null;
-    this.#navEnd = null;
-    this.classList.remove("overflow-start", "overflow-end");
-  }
-
-  #createNavButtons() {
-    if (this.#navStart) return;
-
-    this.#navStart = document.createElement("button");
-    this.#navStart.className = "fig-chooser-nav-start";
-    this.#navStart.setAttribute("tabindex", "-1");
-    this.#navStart.setAttribute("aria-label", "Scroll back");
-
-    this.#navEnd = document.createElement("button");
-    this.#navEnd.className = "fig-chooser-nav-end";
-    this.#navEnd.setAttribute("tabindex", "-1");
-    this.#navEnd.setAttribute("aria-label", "Scroll forward");
-
-    this.#navStart.addEventListener("pointerdown", (e) => {
-      e.stopPropagation();
-      this.#scrollByPage(-1);
-    });
-
-    this.#navEnd.addEventListener("pointerdown", (e) => {
-      e.stopPropagation();
-      this.#scrollByPage(1);
-    });
-
-    this.prepend(this.#navStart);
-    this.append(this.#navEnd);
-  }
-
-  #scrollByPage(direction) {
-    const isHorizontal = this.getAttribute("layout") === "horizontal";
-    const pageSize = isHorizontal ? this.clientWidth : this.clientHeight;
-    const scrollAmount = pageSize * 0.8 * direction;
-
-    this.scrollBy({
-      [isHorizontal ? "left" : "top"]: scrollAmount,
-      behavior: "smooth",
-    });
+      // Fall through to default.
+    }
+
+    return "#D9D9D9";
   }
 
-  #scrollToChoice(el) {
-    if (!el) return;
-    requestAnimationFrame(() => {
-      const overflowY = this.scrollHeight > this.clientHeight;
-      const overflowX = this.scrollWidth > this.clientWidth;
-      if (!overflowX && !overflowY) return;
+  #syncFromAttributes() {
+    const rawAttr = this.getAttribute("value");
+    const color = this.#normalizeColor(rawAttr);
+    const alpha = this.#extractAlpha(rawAttr);
+    if (rawAttr !== color && alpha >= 1) {
+      this.setAttribute("value", color);
+      return;
+    }
 
-      const options = { behavior: "smooth" };
+    if (this.#fillPicker) {
+      const pickerVal =
+        alpha < 1
+          ? { type: "solid", color, opacity: Math.round(alpha * 100) }
+          : { type: "solid", color };
+      this.#fillPicker.setAttribute("value", JSON.stringify(pickerVal));
+      if (this.#alphaEnabled) {
+        this.#fillPicker.removeAttribute("alpha");
+      } else {
+        this.#fillPicker.setAttribute("alpha", "false");
+      }
+      if (this.hasAttribute("disabled")) {
+        this.#fillPicker.setAttribute("disabled", "");
+      } else {
+        this.#fillPicker.removeAttribute("disabled");
+      }
+    }
 
-      if (overflowY) {
-        const target =
-          el.offsetTop - this.clientHeight / 2 + el.offsetHeight / 2;
-        options.top = target;
+    if (this.#chit) {
+      this.#chit.setAttribute("background", color);
+      if (this.hasAttribute("disabled")) {
+        this.#chit.setAttribute("disabled", "");
+      } else {
+        this.#chit.removeAttribute("disabled");
       }
+    }
+  }
 
-      if (overflowX) {
-        const target =
-          el.offsetLeft - this.clientWidth / 2 + el.offsetWidth / 2;
-        options.left = target;
+  #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) {
+      if (detail?.opacity !== undefined) {
+        eventDetail.opacity = detail.opacity;
+      } else if (detail?.alpha !== undefined) {
+        eventDetail.opacity = Math.round(detail.alpha * 100);
       }
+    }
 
-      this.scrollTo(options);
-    });
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: eventDetail,
+      }),
+    );
   }
 
-  #startObserver() {
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = new MutationObserver(() => {
-      const choices = this.choices;
-      if (this.#selectedChoice && !choices.includes(this.#selectedChoice)) {
-        this.#selectedChoice = null;
-        this.#syncSelection();
-      } else if (!this.#selectedChoice && choices.length) {
-        this.#syncSelection();
-      }
-    });
-    this.#mutationObserver.observe(this, { childList: true, subtree: true });
+  #handlePickerInput(event) {
+    event.stopPropagation();
+    this.#updateColorFromPicker(event.detail, "input");
   }
-}
-customElements.define("fig-chooser", FigChooser);
 
-/* Canvas Control */
-class FigCanvasControl extends HTMLElement {
-  static observedAttributes = [
-    "type",
-    "value",
-    "color",
-    "name",
-    "tooltips",
-    "disabled",
-    "drag-surface",
-    "snapping",
-  ];
+  #handlePickerChange(event) {
+    event.stopPropagation();
+    this.#updateColorFromPicker(event.detail, "change");
+  }
 
-  #x = 50;
-  #y = 50;
-  #x2 = 75;
-  #y2 = 75;
-  #radius = 0;
-  #radiusIsPercent = false;
-  #angle = 0;
-  #pointHandle = null;
-  #secondHandle = null;
-  #angleHandle = null;
-  #radiusSvg = null;
-  #angleSvg = null;
-  #pointTooltip = null;
-  #secondTooltip = null;
-  #radiusTooltip = null;
-  #angleTooltip = null;
-  #isDragging = false;
-  #isSecondDragging = false;
-  #isRadiusDragging = false;
-  #isAngleDragging = false;
-  #prevBodyCursor = "";
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.isConnected) return;
+
+    switch (name) {
+      case "control":
+        this.#render();
+        break;
+      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 #type() {
-    return this.getAttribute("type") || "point";
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(value) {
+    this.toggleAttribute("selected", Boolean(value));
   }
 
-  get #hasRadius() {
-    return this.#type === "point-radius" || this.#type === "point-radius-angle";
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttribute("disabled", Boolean(value));
   }
+}
+customElements.define("fig-color-tip", FigColorTip);
 
-  get #hasAngle() {
-    return this.#type === "point-radius-angle";
+/* Choice */
+/**
+ * A generic choice container for use within FigChooser.
+ * @attr {string} value - Identifier for this choice
+ * @attr {boolean} selected - Whether this choice is currently selected
+ * @attr {boolean} disabled - Whether this choice is disabled
+ */
+class FigChoice extends HTMLElement {
+  static get observedAttributes() {
+    return ["selected", "disabled"];
   }
 
-  get #hasSecondPoint() {
-    return this.#type === "point-point";
+  connectedCallback() {
+    this.setAttribute("role", "option");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    this.setAttribute(
+      "aria-selected",
+      this.hasAttribute("selected") ? "true" : "false",
+    );
+    if (this.hasAttribute("disabled")) {
+      this.setAttribute("aria-disabled", "true");
+    }
   }
 
-  get #hasLine() {
-    return this.#type === "point-radius-angle" || this.#type === "point-point";
+  attributeChangedCallback(name) {
+    if (name === "selected") {
+      this.setAttribute(
+        "aria-selected",
+        this.hasAttribute("selected") ? "true" : "false",
+      );
+    }
+    if (name === "disabled") {
+      const isDisabled =
+        this.hasAttribute("disabled") &&
+        this.getAttribute("disabled") !== "false";
+      if (isDisabled) {
+        this.setAttribute("aria-disabled", "true");
+        this.setAttribute("tabindex", "-1");
+      } else {
+        this.removeAttribute("aria-disabled");
+        this.setAttribute("tabindex", "0");
+      }
+    }
   }
+}
+customElements.define("fig-choice", FigChoice);
 
-  get #tooltipsEnabled() {
-    const v = this.getAttribute("tooltips");
-    return v === null || v !== "false";
+/* Chooser */
+/**
+ * A selection controller for a list of choice elements.
+ * @attr {string} choice-element - CSS selector for child choices (default: "fig-choice")
+ * @attr {string} layout - Layout mode: "vertical" (default), "horizontal", "grid"
+ * @attr {string} value - Value of the currently selected choice
+ * @attr {boolean} disabled - Whether the chooser is disabled
+ */
+class FigChooser extends HTMLElement {
+  #selectedChoice = null;
+  #boundHandleClick = this.#handleClick.bind(this);
+  #boundHandleKeyDown = this.#handleKeyDown.bind(this);
+  #boundSyncOverflow = this.#syncOverflow.bind(this);
+  #mutationObserver = null;
+  #resizeObserver = null;
+  #navStart = null;
+  #navEnd = null;
+  #dragState = null;
+
+  constructor() {
+    super();
   }
 
-  get #snappingMode() {
-    const raw = this.getAttribute("snapping");
-    if (raw === null) return "false";
-    const n = raw.trim().toLowerCase();
-    if (n === "modifier") return "modifier";
-    if (n === "" || n === "true") return "true";
-    return "false";
+  static get observedAttributes() {
+    return [
+      "value",
+      "disabled",
+      "choice-element",
+      "drag",
+      "overflow",
+      "loop",
+      "padding",
+    ];
   }
 
-  #shouldSnap(shiftKey) {
-    const mode = this.#snappingMode;
-    if (mode === "true") return true;
-    if (mode === "modifier") return !!shiftKey;
-    return false;
+  get #overflowMode() {
+    return this.getAttribute("overflow") === "scrollbar"
+      ? "scrollbar"
+      : "buttons";
   }
 
-  get #pointTipText() {
-    const name = this.getAttribute("name");
-    if (name) {
-      const parts = name.split(",");
-      return parts[0].trim();
-    }
-    return `${Math.round(this.#x)}%, ${Math.round(this.#y)}%`;
+  get #dragEnabled() {
+    const attr = this.getAttribute("drag");
+    return attr === null || attr !== "false";
   }
 
-  get #secondTipText() {
-    const name = this.getAttribute("name");
-    if (name) {
-      const parts = name.split(",");
-      if (parts.length > 1) return parts[1].trim();
-    }
-    return `${Math.round(this.#x2)}%, ${Math.round(this.#y2)}%`;
+  get #choiceSelector() {
+    return this.getAttribute("choice-element") || "fig-choice";
   }
 
-  get #dragSurface() {
-    return this.getAttribute("drag-surface") || "parent";
+  get choices() {
+    return Array.from(this.querySelectorAll(this.#choiceSelector));
   }
 
-  get #container() {
-    const surface = this.#dragSurface;
-    if (surface === "parent") return this.parentElement;
-    return this.closest(surface);
+  get selectedChoice() {
+    return this.#selectedChoice;
   }
 
-  get #handleDragSurface() {
-    const surface = this.#dragSurface;
-    if (surface === "parent") {
-      const container = this.parentElement;
-      if (container) {
-        container.setAttribute("data-fig-canvas-control-surface", "");
-        return "[data-fig-canvas-control-surface]";
+  set selectedChoice(element) {
+    if (element && !this.contains(element)) return;
+    const choices = this.choices;
+    for (const choice of choices) {
+      const shouldSelect = choice === element;
+      const isSelected = choice.hasAttribute("selected");
+      if (shouldSelect && !isSelected) {
+        choice.setAttribute("selected", "");
+      } else if (!shouldSelect && isSelected) {
+        choice.removeAttribute("selected");
+      }
+    }
+    this.#selectedChoice = element;
+    const val = element?.getAttribute("value") ?? "";
+    if (this.getAttribute("value") !== val) {
+      if (val) {
+        this.setAttribute("value", val);
       }
     }
-    return surface;
+    this.#scrollToChoice(element);
   }
 
-  #resolveRadius(containerWidth) {
-    if (this.#radiusIsPercent) return (this.#radius / 100) * containerWidth;
-    return this.#radius;
+  get value() {
+    return this.#selectedChoice?.getAttribute("value") ?? "";
   }
 
-  #formatRadius() {
-    if (this.#radiusIsPercent) return `Radius ${Math.round(this.#radius)}%`;
-    return `Radius ${Math.round(this.#radius)}`;
+  set value(val) {
+    if (val === null || val === undefined || val === "") return;
+    this.setAttribute("value", String(val));
   }
 
   connectedCallback() {
-    this.#parseValue();
-    this.#render();
+    this.setAttribute("role", "listbox");
+    this.addEventListener("click", this.#boundHandleClick);
+    this.addEventListener("keydown", this.#boundHandleKeyDown);
+    this.addEventListener("scroll", this.#boundSyncOverflow);
+    this.#applyOverflowMode();
+    this.#setupDrag();
+    this.#startObserver();
+    this.#startResizeObserver();
+
+    requestAnimationFrame(() => {
+      this.#syncSelection();
+      this.#syncOverflow();
+    });
   }
 
   disconnectedCallback() {
-    this.#teardownRadiusDrag();
+    this.removeEventListener("click", this.#boundHandleClick);
+    this.removeEventListener("keydown", this.#boundHandleKeyDown);
+    this.removeEventListener("scroll", this.#boundSyncOverflow);
+    this.#teardownDrag();
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.#removeNavButtons();
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) return;
-    if (
-      name === "value" &&
-      !this.#isDragging &&
-      !this.#isSecondDragging &&
-      !this.#isRadiusDragging &&
-      !this.#isAngleDragging
-    ) {
-      this.#parseValue();
-      if (this.#pointHandle) this.#syncPositions();
-      else this.#render();
-    }
-    if (name === "type") {
-      this.#parseValue();
-      this.#render();
-    }
-    if (name === "color" && this.#pointHandle) {
-      if (newVal) this.#pointHandle.setAttribute("color", newVal);
-      else this.#pointHandle.removeAttribute("color");
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value" && newValue !== oldValue && newValue) {
+      this.#selectByValue(newValue);
     }
     if (name === "disabled") {
-      this.#render();
+      const isDisabled = newValue !== null && newValue !== "false";
+      const choices = this.choices;
+      for (const choice of choices) {
+        if (isDisabled) {
+          choice.setAttribute("aria-disabled", "true");
+          choice.setAttribute("tabindex", "-1");
+        } else {
+          choice.removeAttribute("aria-disabled");
+          choice.setAttribute("tabindex", "0");
+        }
+      }
     }
-    if (name === "tooltips") {
-      this.#render();
+    if (name === "choice-element") {
+      requestAnimationFrame(() => this.#syncSelection());
     }
-    if (name === "snapping" && this.#pointHandle) {
-      this.#pointHandle.setAttribute("drag-snapping", newVal || "false");
-      if (this.#secondHandle)
-        this.#secondHandle.setAttribute("drag-snapping", newVal || "false");
+    if (name === "drag") {
+      if (this.#dragEnabled) {
+        this.#setupDrag();
+      } else {
+        this.#teardownDrag();
+      }
     }
-    if (name === "name") {
-      if (this.#pointTooltip)
-        this.#pointTooltip.setAttribute("text", this.#pointTipText);
-      if (this.#secondTooltip)
-        this.#secondTooltip.setAttribute("text", this.#secondTipText);
+    if (name === "overflow") {
+      this.#applyOverflowMode();
     }
   }
 
-  #parseValue() {
-    const raw = this.getAttribute("value");
-    if (!raw) return;
-    try {
-      const v = JSON.parse(raw);
-      if (typeof v.x === "number") this.#x = v.x;
-      if (typeof v.y === "number") this.#y = v.y;
-      if (v.radius !== undefined) {
-        const rs = String(v.radius);
-        if (rs.endsWith("%")) {
-          this.#radiusIsPercent = true;
-          this.#radius = parseFloat(rs);
-        } else {
-          this.#radiusIsPercent = false;
-          this.#radius = parseFloat(rs);
-        }
-        if (!Number.isFinite(this.#radius)) this.#radius = 0;
-      }
-      if (typeof v.angle === "number") this.#angle = v.angle;
-      if (typeof v.x2 === "number") this.#x2 = v.x2;
-      if (typeof v.y2 === "number") this.#y2 = v.y2;
-    } catch {
-      /* ignore */
+  #syncSelection() {
+    const choices = this.choices;
+    if (!choices.length) {
+      this.#selectedChoice = null;
+      return;
     }
-  }
 
-  get value() {
-    const v = { x: this.#x, y: this.#y };
-    if (this.#type === "color") {
-      const color =
-        this.getAttribute("color") || this.#pointHandle?.getAttribute("color");
-      if (color) v.color = color;
-    }
-    if (this.#hasRadius) {
-      v.radius = this.#radiusIsPercent ? `${this.#radius}%` : this.#radius;
+    const valueAttr = this.getAttribute("value");
+    if (valueAttr && this.#selectByValue(valueAttr)) return;
+
+    const alreadySelected = choices.find((c) => c.hasAttribute("selected"));
+    if (alreadySelected) {
+      this.selectedChoice = alreadySelected;
+      return;
     }
-    if (this.#hasAngle) v.angle = this.#angle;
-    if (this.#hasSecondPoint) {
-      v.x2 = this.#x2;
-      v.y2 = this.#y2;
+
+    this.selectedChoice = choices[0];
+  }
+
+  #selectByValue(value) {
+    const choices = this.choices;
+    for (const choice of choices) {
+      if (choice.getAttribute("value") === value) {
+        this.selectedChoice = choice;
+        return true;
+      }
     }
-    return v;
+    return false;
   }
 
-  set value(val) {
-    if (typeof val === "object") {
-      this.setAttribute("value", JSON.stringify(val));
-    } else if (typeof val === "string") {
-      this.setAttribute("value", val);
+  #findChoiceFromTarget(target) {
+    const selector = this.#choiceSelector;
+    let el = target;
+    while (el && el !== this) {
+      if (el.matches(selector)) return el;
+      el = el.parentElement;
     }
+    return null;
   }
 
-  #render() {
-    this.innerHTML = "";
-    this.#pointHandle = null;
-    this.#secondHandle = null;
-    this.#angleHandle = null;
-    this.#radiusSvg = null;
-    this.#angleSvg = null;
-    this.#pointTooltip = null;
-    this.#secondTooltip = null;
-    this.#radiusTooltip = null;
-    this.#angleTooltip = null;
+  #handleClick(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    )
+      return;
+    const choice = this.#findChoiceFromTarget(event.target);
+    if (!choice) return;
+    if (
+      choice.hasAttribute("disabled") &&
+      choice.getAttribute("disabled") !== "false"
+    )
+      return;
+    this.selectedChoice = choice;
+    this.#emitEvents();
+  }
 
-    const disabled = this.hasAttribute("disabled");
-    const type = this.#type;
-    const tooltips = this.#tooltipsEnabled;
-
-    const handleSurface = this.#handleDragSurface;
-
-    const handle = document.createElement("fig-handle");
-    handle.setAttribute("drag", "true");
-    handle.setAttribute("drag-surface", handleSurface);
-    handle.setAttribute("drag-axes", "x,y");
-    handle.setAttribute("drag-snapping", this.#snappingMode);
-    handle.setAttribute("value", `${this.#x}% ${this.#y}%`);
-    if (disabled) handle.setAttribute("disabled", "");
-    if (type === "color") {
-      handle.setAttribute("type", "color");
-      const color = this.getAttribute("color");
-      if (color) handle.setAttribute("color", color);
-    }
-    if (this.#hasSecondPoint) {
-      handle.setAttribute("hit-area", "12 circle");
-      handle.setAttribute("hit-area-mode", "delegate");
-    }
-    this.#pointHandle = handle;
-
-    if (this.#hasRadius) {
-      this.#createRadiusSvg();
-    }
-
-    if (this.#hasLine) {
-      this.#createAngleSvg();
-    }
-
-    if (tooltips) {
-      const tip = document.createElement("fig-tooltip");
-      tip.setAttribute("action", "manual");
-      tip.setAttribute("theme", "brand");
-      tip.setAttribute("pointer", "false");
-      tip.setAttribute("text", this.#pointTipText);
-      tip.appendChild(handle);
-      this.appendChild(tip);
-      this.#pointTooltip = tip;
-    } else {
-      this.appendChild(handle);
-    }
+  #handleKeyDown(event) {
+    if (
+      this.hasAttribute("disabled") &&
+      this.getAttribute("disabled") !== "false"
+    )
+      return;
+    const choices = this.choices.filter(
+      (c) =>
+        !c.hasAttribute("disabled") || c.getAttribute("disabled") === "false",
+    );
+    if (!choices.length) return;
+    const currentIndex = choices.indexOf(this.#selectedChoice);
+    let nextIndex = currentIndex;
 
-    if (this.#hasAngle) {
-      this.#createAngleHandle(disabled, tooltips, handleSurface);
-    }
+    const loop = this.hasAttribute("loop");
 
-    if (this.#hasSecondPoint) {
-      this.#createSecondHandle(disabled, tooltips, handleSurface);
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        if (currentIndex < choices.length - 1) {
+          nextIndex = currentIndex + 1;
+        } else if (loop) {
+          nextIndex = 0;
+        }
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        if (currentIndex > 0) {
+          nextIndex = currentIndex - 1;
+        } else if (loop) {
+          nextIndex = choices.length - 1;
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = choices.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (document.activeElement?.matches(this.#choiceSelector)) {
+          const focused = this.#findChoiceFromTarget(document.activeElement);
+          if (focused && focused !== this.#selectedChoice) {
+            this.selectedChoice = focused;
+            this.#emitEvents();
+          }
+        }
+        return;
+      default:
+        return;
     }
 
-    this.#setupEventListeners();
-    requestAnimationFrame(() => this.#syncPositions());
-  }
-
-  #createRadiusSvg() {
-    const ns = "http://www.w3.org/2000/svg";
-    const svg = document.createElementNS(ns, "svg");
-    svg.classList.add("fig-canvas-control-radius");
-    svg.setAttribute("overflow", "visible");
-    const hitCircle = document.createElementNS(ns, "circle");
-    hitCircle.classList.add("fig-canvas-control-radius-hit");
-    svg.appendChild(hitCircle);
-    const circle = document.createElementNS(ns, "circle");
-    svg.appendChild(circle);
-    this.#radiusSvg = svg;
-
-    if (this.#tooltipsEnabled) {
-      const tip = document.createElement("fig-tooltip");
-      tip.setAttribute("action", "manual");
-      tip.setAttribute("theme", "brand");
-      tip.setAttribute("pointer", "false");
-      tip.setAttribute("text", this.#formatRadius());
-      tip.appendChild(svg);
-      this.appendChild(tip);
-      this.#radiusTooltip = tip;
-    } else {
-      this.appendChild(svg);
-    }
-
-    this.#setupRadiusDrag(hitCircle);
-  }
-
-  #createAngleSvg() {
-    const ns = "http://www.w3.org/2000/svg";
-    const svg = document.createElementNS(ns, "svg");
-    svg.classList.add("fig-canvas-control-angle-svg");
-    svg.setAttribute("overflow", "visible");
-    svg.style.position = "absolute";
-    svg.style.pointerEvents = "none";
-    const line = document.createElementNS(ns, "line");
-    line.classList.add("fig-canvas-control-angle-line");
-    svg.appendChild(line);
-    this.#angleSvg = svg;
-    this.appendChild(svg);
-  }
-
-  #createAngleHandle(disabled, tooltips, handleSurface) {
-    const handle = document.createElement("fig-handle");
-    handle.setAttribute("drag", "true");
-    handle.setAttribute("drag-surface", handleSurface);
-    handle.setAttribute("drag-axes", "x,y");
-    handle.setAttribute("size", "small");
-    handle.setAttribute("hit-area", "12 circle");
-    handle.setAttribute("hit-area-mode", "delegate");
-    if (disabled) handle.setAttribute("disabled", "");
-    this.#angleHandle = handle;
-
-    if (tooltips) {
-      const tip = document.createElement("fig-tooltip");
-      tip.setAttribute("action", "manual");
-      tip.setAttribute("theme", "brand");
-      tip.setAttribute("pointer", "false");
-      tip.setAttribute("text", `${Math.round(this.#angle)}°`);
-      tip.appendChild(handle);
-      this.appendChild(tip);
-      this.#angleTooltip = tip;
-    } else {
-      this.appendChild(handle);
-    }
-  }
-
-  #createSecondHandle(disabled, tooltips, handleSurface) {
-    const handle = document.createElement("fig-handle");
-    handle.setAttribute("drag", "true");
-    handle.setAttribute("drag-surface", handleSurface);
-    handle.setAttribute("drag-axes", "x,y");
-    handle.setAttribute("drag-snapping", this.#snappingMode);
-    handle.setAttribute("hit-area", "12 circle");
-    handle.setAttribute("hit-area-mode", "delegate");
-    handle.setAttribute("value", `${this.#x2}% ${this.#y2}%`);
-    if (disabled) handle.setAttribute("disabled", "");
-    this.#secondHandle = handle;
-
-    if (tooltips) {
-      const tip = document.createElement("fig-tooltip");
-      tip.setAttribute("action", "manual");
-      tip.setAttribute("theme", "brand");
-      tip.setAttribute("pointer", "false");
-      tip.setAttribute("text", this.#secondTipText);
-      tip.appendChild(handle);
-      this.appendChild(tip);
-      this.#secondTooltip = tip;
-    } else {
-      this.appendChild(handle);
+    if (nextIndex !== currentIndex && choices[nextIndex]) {
+      this.selectedChoice = choices[nextIndex];
+      choices[nextIndex].focus();
+      this.#emitEvents();
     }
   }
 
-  #resizeCursorSvg(deg) {
-    const r = Math.round(deg);
-    return `url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${r} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`;
+  #emitEvents() {
+    const val = this.value;
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: val, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: val, bubbles: true }),
+    );
   }
 
-  #rotateCursorSvg(deg) {
-    const r = Math.round(deg - 45);
-    return `url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${r} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`;
-  }
+  #syncOverflow() {
+    if (this.#overflowMode === "scrollbar") return;
+    const isHorizontal = this.getAttribute("layout") === "horizontal";
+    const threshold = 2;
 
-  #syncAngleCursor() {
-    if (!this.#angleHandle || !this.#hasAngle) return;
-    const hitArea = this.#angleHandle.querySelector(".fig-handle-hit-area");
-    if (!hitArea) return;
-    hitArea.style.cursor = this.#rotateCursorSvg(this.#angle);
+    if (isHorizontal) {
+      const atStart = this.scrollLeft <= threshold;
+      const atEnd =
+        this.scrollLeft + this.clientWidth >= this.scrollWidth - threshold;
+      this.classList.toggle("overflow-start", !atStart);
+      this.classList.toggle("overflow-end", !atEnd);
+    } else {
+      const atStart = this.scrollTop <= threshold;
+      const atEnd =
+        this.scrollTop + this.clientHeight >= this.scrollHeight - threshold;
+      this.classList.toggle("overflow-start", !atStart);
+      this.classList.toggle("overflow-end", !atEnd);
+    }
   }
 
-  #pointPointLineDeg() {
-    return (Math.atan2(this.#y2 - this.#y, this.#x2 - this.#x) * 180) / Math.PI;
+  #startResizeObserver() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#syncOverflow();
+    });
+    this.#resizeObserver.observe(this);
   }
 
-  #syncPointPointCursors() {
-    if (!this.#hasSecondPoint) return;
-    const deg = this.#pointPointLineDeg();
-    const setHitCursor = (handle, rotateDeg) => {
-      if (!handle) return;
-      const hitArea = handle.querySelector(".fig-handle-hit-area");
-      if (hitArea) hitArea.style.cursor = this.#rotateCursorSvg(rotateDeg);
+  #setupDrag() {
+    if (this.#dragState?.bound) return;
+    if (!this.#dragEnabled) return;
+
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      const isHorizontal = this.getAttribute("layout") === "horizontal";
+      const hasOverflow = isHorizontal
+        ? this.scrollWidth > this.clientWidth
+        : this.scrollHeight > this.clientHeight;
+      if (!hasOverflow) return;
+
+      this.#dragState.active = true;
+      this.#dragState.didDrag = false;
+      this.#dragState.startX = e.clientX;
+      this.#dragState.startY = e.clientY;
+      this.#dragState.scrollLeft = this.scrollLeft;
+      this.#dragState.scrollTop = this.scrollTop;
+      this.style.cursor = "grab";
+      this.style.userSelect = "none";
     };
-    setHitCursor(this.#pointHandle, deg + 180);
-    setHitCursor(this.#secondHandle, deg);
-  }
 
-  #positionHandle(handle, xPct, yPct, rect) {
-    const hw = handle.offsetWidth / 2;
-    const hh = handle.offsetHeight / 2;
-    handle.style.left = `${(xPct / 100) * rect.width - hw}px`;
-    handle.style.top = `${(yPct / 100) * rect.height - hh}px`;
-  }
+    const onPointerMove = (e) => {
+      if (!this.#dragState.active) return;
+      const isHorizontal = this.getAttribute("layout") === "horizontal";
+      const dx = e.clientX - this.#dragState.startX;
+      const dy = e.clientY - this.#dragState.startY;
+
+      if (!this.#dragState.didDrag && Math.abs(isHorizontal ? dx : dy) > 3) {
+        this.#dragState.didDrag = true;
+        this.style.cursor = "grabbing";
+        this.setPointerCapture(e.pointerId);
+      }
 
-  #syncPositions() {
-    const container = this.#container;
-    if (!container || !this.#pointHandle) return;
-    const rect = container.getBoundingClientRect();
+      if (!this.#dragState.didDrag) return;
 
-    this.#positionHandle(this.#pointHandle, this.#x, this.#y, rect);
-
-    if (this.#radiusSvg) {
-      const cx = (this.#x / 100) * rect.width;
-      const cy = (this.#y / 100) * rect.height;
-      const r = this.#resolveRadius(rect.width);
-      const svg = this.#radiusSvg;
-      const d = Math.max(r * 2, 1);
-      svg.style.position = "absolute";
-      svg.style.width = `${d}px`;
-      svg.style.height = `${d}px`;
-      svg.style.left = `${cx - r}px`;
-      svg.style.top = `${cy - r}px`;
-      svg.setAttribute("viewBox", `0 0 ${d} ${d}`);
-      const circles = svg.querySelectorAll("circle");
-      for (const c of circles) {
-        c.setAttribute("cx", String(r));
-        c.setAttribute("cy", String(r));
-        c.setAttribute("r", String(Math.max(r - 1, 0)));
-      }
-    }
-
-    if (this.#angleSvg && this.#hasLine) {
-      const cx = (this.#x / 100) * rect.width;
-      const cy = (this.#y / 100) * rect.height;
-      let lx2, ly2;
-      if (this.#hasSecondPoint) {
-        lx2 = (this.#x2 / 100) * rect.width;
-        ly2 = (this.#y2 / 100) * rect.height;
+      if (isHorizontal) {
+        this.scrollLeft = this.#dragState.scrollLeft - dx;
       } else {
-        const r = this.#resolveRadius(rect.width);
-        const angleRad = (this.#angle * Math.PI) / 180;
-        lx2 = cx + r * Math.cos(angleRad);
-        ly2 = cy + r * Math.sin(angleRad);
+        this.scrollTop = this.#dragState.scrollTop - dy;
       }
+    };
 
-      const svg = this.#angleSvg;
-      svg.style.width = `${rect.width}px`;
-      svg.style.height = `${rect.height}px`;
-      svg.style.left = "0";
-      svg.style.top = "0";
-      svg.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`);
-      const line = svg.querySelector("line");
-      if (line) {
-        line.setAttribute("x1", String(cx));
-        line.setAttribute("y1", String(cy));
-        line.setAttribute("x2", String(lx2));
-        line.setAttribute("y2", String(ly2));
+    const onPointerUp = (e) => {
+      if (!this.#dragState.active) return;
+      const wasDrag = this.#dragState.didDrag;
+      this.#dragState.active = false;
+      this.#dragState.didDrag = false;
+      this.style.cursor = "";
+      this.style.userSelect = "";
+      if (e.pointerId !== undefined) {
+        try {
+          this.releasePointerCapture(e.pointerId);
+        } catch {}
       }
-    }
+      if (wasDrag) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
 
-    if (this.#angleHandle && this.#hasAngle) {
-      const cx = (this.#x / 100) * rect.width;
-      const cy = (this.#y / 100) * rect.height;
-      const r = this.#resolveRadius(rect.width);
-      const angleRad = (this.#angle * Math.PI) / 180;
-      const ax = cx + r * Math.cos(angleRad);
-      const ay = cy + r * Math.sin(angleRad);
-      const pxPct = rect.width > 0 ? (ax / rect.width) * 100 : 0;
-      const pyPct = rect.height > 0 ? (ay / rect.height) * 100 : 0;
-      this.#positionHandle(this.#angleHandle, pxPct, pyPct, rect);
-    }
+    const onClick = (e) => {
+      if (this.#dragState?.suppressClick) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.#dragState.suppressClick = false;
+      }
+    };
 
-    if (this.#secondHandle && this.#hasSecondPoint) {
-      this.#positionHandle(this.#secondHandle, this.#x2, this.#y2, rect);
-    }
+    const onPointerUpCapture = (e) => {
+      if (this.#dragState?.didDrag) {
+        this.#dragState.suppressClick = true;
+        setTimeout(() => {
+          if (this.#dragState) this.#dragState.suppressClick = false;
+        }, 0);
+      }
+    };
+
+    this.#dragState = {
+      active: false,
+      didDrag: false,
+      suppressClick: false,
+      startX: 0,
+      startY: 0,
+      scrollLeft: 0,
+      scrollTop: 0,
+      bound: true,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onClick,
+      onPointerUpCapture,
+    };
 
-    this.#syncAngleCursor();
-    this.#syncPointPointCursors();
+    this.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    this.addEventListener("pointerup", onPointerUpCapture, true);
+    this.addEventListener("click", onClick, true);
   }
 
-  #emitInput() {
-    this.dispatchEvent(
-      new CustomEvent("input", { bubbles: true, detail: this.value }),
+  #teardownDrag() {
+    if (!this.#dragState?.bound) return;
+    this.removeEventListener("pointerdown", this.#dragState.onPointerDown);
+    window.removeEventListener("pointermove", this.#dragState.onPointerMove);
+    window.removeEventListener("pointerup", this.#dragState.onPointerUp);
+    this.removeEventListener(
+      "pointerup",
+      this.#dragState.onPointerUpCapture,
+      true,
     );
+    this.removeEventListener("click", this.#dragState.onClick, true);
+    this.style.cursor = "";
+    this.style.userSelect = "";
+    this.#dragState = null;
   }
 
-  #emitChange() {
-    this.dispatchEvent(
-      new CustomEvent("change", { bubbles: true, detail: this.value }),
-    );
+  #applyOverflowMode() {
+    if (this.#overflowMode === "scrollbar") {
+      this.#removeNavButtons();
+    } else {
+      this.#createNavButtons();
+    }
   }
 
-  #syncValueAttribute() {
-    this.setAttribute("value", JSON.stringify(this.value));
+  #removeNavButtons() {
+    this.#navStart?.remove();
+    this.#navEnd?.remove();
+    this.#navStart = null;
+    this.#navEnd = null;
+    this.classList.remove("overflow-start", "overflow-end");
   }
 
-  #setupEventListeners() {
-    if (!this.#pointHandle) return;
+  #createNavButtons() {
+    if (this.#navStart) return;
+
+    this.#navStart = document.createElement("button");
+    this.#navStart.className = "fig-chooser-nav-start";
+    this.#navStart.setAttribute("tabindex", "-1");
+    this.#navStart.setAttribute("aria-label", "Scroll back");
+
+    this.#navEnd = document.createElement("button");
+    this.#navEnd.className = "fig-chooser-nav-end";
+    this.#navEnd.setAttribute("tabindex", "-1");
+    this.#navEnd.setAttribute("aria-label", "Scroll forward");
 
-    this.#pointHandle.addEventListener("input", (e) => {
+    this.#navStart.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
-      if (e.detail?.color) {
-        this.setAttribute("color", e.detail.color);
-        this.#emitInput();
-        return;
-      }
-      if (!this.#isDragging && this.#hasSecondPoint) {
-        this.#prevBodyCursor = document.body.style.cursor;
-      }
-      this.#isDragging = true;
-      const px = e.detail?.px ?? this.#x / 100;
-      const py = e.detail?.py ?? this.#y / 100;
-      this.#x = Math.round(Math.max(0, Math.min(100, px * 100)));
-      this.#y = Math.round(Math.max(0, Math.min(100, py * 100)));
-      if (this.#pointTooltip && this.#type !== "color") {
-        this.#pointTooltip.setAttribute("text", this.#pointTipText);
-        this.#pointTooltip.setAttribute("show", "true");
-        this.#pointTooltip.showPopup?.();
-      }
-      this.#syncPositions();
-      if (this.#hasSecondPoint) {
-        document.body.style.cursor = this.#resizeCursorSvg(
-          this.#pointPointLineDeg(),
-        );
-      }
-      this.#emitInput();
+      this.#scrollByPage(-1);
     });
 
-    this.#pointHandle.addEventListener("change", (e) => {
+    this.#navEnd.addEventListener("pointerdown", (e) => {
       e.stopPropagation();
-      if (e.detail?.color) {
-        this.setAttribute("color", e.detail.color);
-        this.#emitChange();
-        return;
-      }
-      const px = e.detail?.px ?? this.#x / 100;
-      const py = e.detail?.py ?? this.#y / 100;
-      this.#x = Math.round(Math.max(0, Math.min(100, px * 100)));
-      this.#y = Math.round(Math.max(0, Math.min(100, py * 100)));
-      if (this.#pointTooltip && this.#type !== "color")
-        this.#pointTooltip.removeAttribute("show");
-      if (this.#hasSecondPoint) {
-        document.body.style.cursor = this.#prevBodyCursor ?? "";
-      }
-      this.#syncPositions();
-      this.#syncValueAttribute();
-      this.#emitChange();
-      requestAnimationFrame(() => {
-        this.#isDragging = false;
-      });
+      this.#scrollByPage(1);
     });
 
-    if (this.#angleHandle) {
-      this.#angleHandle.addEventListener("input", (e) => {
-        e.stopPropagation();
-        this.#isAngleDragging = true;
-        this.classList.add("fig-canvas-control-ring-active");
-        const container = this.#container;
-        if (!container) return;
-        const rect = container.getBoundingClientRect();
-        const cx = (this.#x / 100) * rect.width;
-        const cy = (this.#y / 100) * rect.height;
-        const hx = e.detail?.x ?? 0;
-        const hy = e.detail?.y ?? 0;
-        const hw = this.#angleHandle.offsetWidth / 2;
-        const hh = this.#angleHandle.offsetHeight / 2;
-        const dx = hx + hw - cx;
-        const dy = hy + hh - cy;
-        let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-        if (this.#shouldSnap(e.detail?.shiftKey)) {
-          angle = Math.round(angle / 15) * 15;
-        }
-        this.#angle = angle;
-
-        let dist = Math.sqrt(dx * dx + dy * dy);
-        if (this.#shouldSnap(e.detail?.shiftKey)) {
-          const step = this.#radiusIsPercent ? 5 : 10;
-          if (this.#radiusIsPercent) {
-            let pct = (dist / rect.width) * 100;
-            pct = Math.round(pct / step) * step;
-            dist = (pct / 100) * rect.width;
-          } else {
-            dist = Math.round(dist / step) * step;
-          }
-        }
-        if (this.#radiusIsPercent) {
-          this.#radius = Math.max(0, (dist / rect.width) * 100);
-        } else {
-          this.#radius = Math.max(0, dist);
-        }
-
-        if (this.#angleTooltip) {
-          this.#angleTooltip.setAttribute(
-            "text",
-            `Angle ${Math.round(this.#angle)}°`,
-          );
-          this.#angleTooltip.setAttribute("show", "true");
-          this.#angleTooltip.showPopup?.();
-        }
-        this.#syncPositions();
-        this.#emitInput();
-      });
-
-      this.#angleHandle.addEventListener("change", (e) => {
-        e.stopPropagation();
-        this.classList.remove("fig-canvas-control-ring-active");
-        if (this.#angleTooltip) this.#angleTooltip.removeAttribute("show");
-        this.#syncPositions();
-        this.#syncValueAttribute();
-        this.#emitChange();
-        requestAnimationFrame(() => {
-          this.#isAngleDragging = false;
-        });
-      });
-
-      this.#angleHandle.addEventListener("hitareadown", (e) => {
-        e.stopPropagation();
-        const origEvent = e.detail?.originalEvent;
-        if (!origEvent) return;
-        origEvent.preventDefault();
-        this.#isAngleDragging = true;
-        this.classList.add("fig-canvas-control-ring-active");
-        const container = this.#container;
-        if (!container) return;
-
-        if (this.#angleTooltip) {
-          this.#angleTooltip.setAttribute("show", "true");
-          this.#angleTooltip.showPopup?.();
-        }
-
-        const prevBodyCursor = document.body.style.cursor;
-        let lastCursorDeg = Math.round(this.#angle);
-        document.body.style.cursor = this.#rotateCursorSvg(lastCursorDeg);
-
-        const onMove = (ev) => {
-          const rect = container.getBoundingClientRect();
-          const cx = (this.#x / 100) * rect.width;
-          const cy = (this.#y / 100) * rect.height;
-          const dx = ev.clientX - rect.left - cx;
-          const dy = ev.clientY - rect.top - cy;
-          let angle = (Math.atan2(dy, dx) * 180) / Math.PI;
-          if (this.#shouldSnap(ev.shiftKey)) {
-            angle = Math.round(angle / 15) * 15;
-          }
-          this.#angle = angle;
-          if (this.#angleTooltip)
-            this.#angleTooltip.setAttribute(
-              "text",
-              `Angle ${Math.round(angle)}°`,
-            );
-          this.#syncPositions();
-          const curDeg = Math.round(angle);
-          if (curDeg !== lastCursorDeg) {
-            lastCursorDeg = curDeg;
-            document.body.style.cursor = this.#rotateCursorSvg(curDeg);
-          }
-          this.#emitInput();
-        };
-
-        const onUp = () => {
-          this.#isAngleDragging = false;
-          this.classList.remove("fig-canvas-control-ring-active");
-          document.body.style.cursor = prevBodyCursor;
-          if (this.#angleTooltip) this.#angleTooltip.removeAttribute("show");
-          this.#syncValueAttribute();
-          this.#emitChange();
-          window.removeEventListener("pointermove", onMove);
-          window.removeEventListener("pointerup", onUp);
-        };
-
-        window.addEventListener("pointermove", onMove);
-        window.addEventListener("pointerup", onUp);
-      });
-    }
-
-    if (this.#secondHandle) {
-      this.#secondHandle.addEventListener("input", (e) => {
-        e.stopPropagation();
-        if (!this.#isSecondDragging) {
-          this.#prevBodyCursor = document.body.style.cursor;
-        }
-        this.#isSecondDragging = true;
-        const px = e.detail?.px ?? this.#x2 / 100;
-        const py = e.detail?.py ?? this.#y2 / 100;
-        this.#x2 = Math.round(Math.max(0, Math.min(100, px * 100)));
-        this.#y2 = Math.round(Math.max(0, Math.min(100, py * 100)));
-        if (this.#secondTooltip) {
-          this.#secondTooltip.setAttribute("text", this.#secondTipText);
-          this.#secondTooltip.setAttribute("show", "true");
-          this.#secondTooltip.showPopup?.();
-        }
-        this.#syncPositions();
-        document.body.style.cursor = this.#resizeCursorSvg(
-          this.#pointPointLineDeg(),
-        );
-        this.#emitInput();
-      });
+    this.prepend(this.#navStart);
+    this.append(this.#navEnd);
+  }
 
-      this.#secondHandle.addEventListener("change", (e) => {
-        e.stopPropagation();
-        document.body.style.cursor = this.#prevBodyCursor ?? "";
-        if (this.#secondTooltip) this.#secondTooltip.removeAttribute("show");
-        this.#syncPositions();
-        this.#syncValueAttribute();
-        this.#emitChange();
-        requestAnimationFrame(() => {
-          this.#isSecondDragging = false;
-        });
-      });
+  #scrollByPage(direction) {
+    const isHorizontal = this.getAttribute("layout") === "horizontal";
+    const pageSize = isHorizontal ? this.clientWidth : this.clientHeight;
+    const scrollAmount = pageSize * 0.8 * direction;
 
-      this.#setupPointPointHitArea(this.#pointHandle, true);
-      this.#setupPointPointHitArea(this.#secondHandle, false);
-    }
+    this.scrollBy({
+      [isHorizontal ? "left" : "top"]: scrollAmount,
+      behavior: "smooth",
+    });
   }
 
-  #setupPointPointHitArea(handle, isFirst) {
-    if (!handle) return;
-    handle.addEventListener("hitareadown", (e) => {
-      e.stopPropagation();
-      const origEvent = e.detail?.originalEvent;
-      if (!origEvent) return;
-      origEvent.preventDefault();
-      this.#isDragging = true;
-      const container = this.#container;
-      if (!container) return;
-      const rect = container.getBoundingClientRect();
+  #scrollToChoice(el) {
+    if (!el) return;
+    requestAnimationFrame(() => {
+      const overflowY = this.scrollHeight > this.clientHeight;
+      const overflowX = this.scrollWidth > this.clientWidth;
+      if (!overflowX && !overflowY) return;
 
-      const pivotX = isFirst ? this.#x2 : this.#x;
-      const pivotY = isFirst ? this.#y2 : this.#y;
-      const movingX = isFirst ? this.#x : this.#x2;
-      const movingY = isFirst ? this.#y : this.#y2;
-      const pcx = (pivotX / 100) * rect.width;
-      const pcy = (pivotY / 100) * rect.height;
-      const mcx = (movingX / 100) * rect.width;
-      const mcy = (movingY / 100) * rect.height;
-      const fixedLen = Math.sqrt((mcx - pcx) ** 2 + (mcy - pcy) ** 2);
-
-      const tooltip = isFirst ? this.#pointTooltip : this.#secondTooltip;
-      if (tooltip) {
-        tooltip.setAttribute("show", "true");
-        tooltip.showPopup?.();
-      }
-
-      const prevBodyCursor = document.body.style.cursor;
-      const initDeg = this.#pointPointLineDeg();
-      let lastCursorDeg = Math.round(isFirst ? initDeg + 180 : initDeg);
-      document.body.style.cursor = this.#rotateCursorSvg(lastCursorDeg);
-
-      const onMove = (ev) => {
-        const r = container.getBoundingClientRect();
-        const px = (pivotX / 100) * r.width;
-        const py = (pivotY / 100) * r.height;
-        const dx = ev.clientX - r.left - px;
-        const dy = ev.clientY - r.top - py;
-        let angle = Math.atan2(dy, dx);
-        if (this.#shouldSnap(ev.shiftKey)) {
-          const snapDeg = Math.round((angle * 180) / Math.PI / 15) * 15;
-          angle = (snapDeg * Math.PI) / 180;
-        }
-        const nx = px + fixedLen * Math.cos(angle);
-        const ny = py + fixedLen * Math.sin(angle);
-        const newPctX = Math.max(0, Math.min(100, (nx / r.width) * 100));
-        const newPctY = Math.max(0, Math.min(100, (ny / r.height) * 100));
-        if (isFirst) {
-          this.#x = newPctX;
-          this.#y = newPctY;
-        } else {
-          this.#x2 = newPctX;
-          this.#y2 = newPctY;
-        }
-        this.#syncPositions();
-        const curDeg = Math.round(
-          isFirst ? this.#pointPointLineDeg() + 180 : this.#pointPointLineDeg(),
-        );
-        if (curDeg !== lastCursorDeg) {
-          lastCursorDeg = curDeg;
-          document.body.style.cursor = this.#rotateCursorSvg(curDeg);
-        }
-        this.#emitInput();
-      };
+      const options = { behavior: "smooth" };
 
-      const onUp = () => {
-        this.#isDragging = false;
-        document.body.style.cursor = prevBodyCursor;
-        if (tooltip) tooltip.removeAttribute("show");
-        this.#syncValueAttribute();
-        this.#emitChange();
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onUp);
-      };
+      if (overflowY) {
+        const target =
+          el.offsetTop - this.clientHeight / 2 + el.offsetHeight / 2;
+        options.top = target;
+      }
 
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onUp);
-    });
-  }
+      if (overflowX) {
+        const target =
+          el.offsetLeft - this.clientWidth / 2 + el.offsetWidth / 2;
+        options.left = target;
+      }
 
-  #setupRadiusDrag(circle) {
-    if (!circle) return;
-    circle.addEventListener("pointermove", (e) => {
-      if (this.#isRadiusDragging) return;
-      const container = this.#container;
-      if (!container) return;
-      const rect = container.getBoundingClientRect();
-      const cx = (this.#x / 100) * rect.width;
-      const cy = (this.#y / 100) * rect.height;
-      const deg =
-        (Math.atan2(e.clientY - rect.top - cy, e.clientX - rect.left - cx) *
-          180) /
-        Math.PI;
-      circle.style.cursor = this.#resizeCursorSvg(deg);
+      this.scrollTo(options);
     });
-    const onDown = (e) => {
-      if (this.hasAttribute("disabled")) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.#isRadiusDragging = true;
-      this.classList.add("fig-canvas-control-ring-active");
-      const container = this.#container;
-      if (!container) return;
-
-      if (this.#radiusTooltip) {
-        this.#radiusTooltip.setAttribute("show", "true");
-        this.#radiusTooltip.showPopup?.();
-      }
-
-      const prevBodyCursor = document.body.style.cursor;
-      circle.style.pointerEvents = "none";
-      const rect0 = container.getBoundingClientRect();
-      const cx0 = (this.#x / 100) * rect0.width;
-      const cy0 = (this.#y / 100) * rect0.height;
-      const initDeg =
-        (Math.atan2(e.clientY - rect0.top - cy0, e.clientX - rect0.left - cx0) *
-          180) /
-        Math.PI;
-      let lastCursorDeg = Math.round(initDeg);
-      document.body.style.cursor = this.#resizeCursorSvg(lastCursorDeg);
-
-      const onMove = (ev) => {
-        const rect = container.getBoundingClientRect();
-        const cx = (this.#x / 100) * rect.width;
-        const cy = (this.#y / 100) * rect.height;
-        const dx = ev.clientX - rect.left - cx;
-        const dy = ev.clientY - rect.top - cy;
-        const curDeg = Math.round((Math.atan2(dy, dx) * 180) / Math.PI);
-        if (curDeg !== lastCursorDeg) {
-          lastCursorDeg = curDeg;
-          document.body.style.cursor = this.#resizeCursorSvg(curDeg);
-        }
-        let dist = Math.sqrt(dx * dx + dy * dy);
-        if (this.#shouldSnap(ev.shiftKey)) {
-          const step = this.#radiusIsPercent ? 5 : 10;
-          if (this.#radiusIsPercent) {
-            let pct = (dist / rect.width) * 100;
-            pct = Math.round(pct / step) * step;
-            dist = (pct / 100) * rect.width;
-          } else {
-            dist = Math.round(dist / step) * step;
-          }
-        }
-        if (this.#radiusIsPercent) {
-          this.#radius = Math.max(0, (dist / rect.width) * 100);
-        } else {
-          this.#radius = Math.max(0, dist);
-        }
-        if (this.#radiusTooltip)
-          this.#radiusTooltip.setAttribute("text", this.#formatRadius());
-        this.#syncPositions();
-        this.#emitInput();
-      };
-
-      const onUp = () => {
-        this.#isRadiusDragging = false;
-        this.classList.remove("fig-canvas-control-ring-active");
-        circle.style.pointerEvents = "";
-        document.body.style.cursor = prevBodyCursor;
-        if (this.#radiusTooltip) this.#radiusTooltip.removeAttribute("show");
-        this.#syncValueAttribute();
-        this.#emitChange();
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onUp);
-      };
-
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onUp);
-    };
-    circle.addEventListener("pointerdown", onDown);
-    this._radiusDragCleanup = () =>
-      circle.removeEventListener("pointerdown", onDown);
   }
 
-  #teardownRadiusDrag() {
-    if (this._radiusDragCleanup) {
-      this._radiusDragCleanup();
-      this._radiusDragCleanup = null;
-    }
+  #startObserver() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = new MutationObserver(() => {
+      const choices = this.choices;
+      if (this.#selectedChoice && !choices.includes(this.#selectedChoice)) {
+        this.#selectedChoice = null;
+        this.#syncSelection();
+      } else if (!this.#selectedChoice && choices.length) {
+        this.#syncSelection();
+      }
+    });
+    this.#mutationObserver.observe(this, { childList: true, subtree: true });
   }
 }
-customElements.define("fig-canvas-control", FigCanvasControl);
+customElements.define("fig-chooser", FigChooser);
 
 /* Handle */
 class FigHandle extends HTMLElement {