@rogieking/figui3 8.0.3 → 8.2.0

package/fig-lab.js

@@ -18,6 +18,13 @@ function figLabBooleanAttribute(element, name) {
   return element.hasAttribute(name) && element.getAttribute(name) !== "false";
 }
 
+function figLabSyncDisabledControls(host, controls) {
+  const disabled = figLabBooleanAttribute(host, "disabled");
+  for (const control of controls) {
+    control?.toggleAttribute("disabled", disabled);
+  }
+}
+
 function figLabColorEventAliases(color, alpha, opacity) {
   const numericAlpha = Number(alpha);
   const numericOpacity = Number(opacity);
@@ -566,6 +573,7 @@ class PropskitSwitch extends HTMLElement {
 
   #forwardSwitchEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const checked = this.#switch?.value === "on";
     this.toggleAttribute("checked", checked);
     const detail = {
@@ -583,6 +591,7 @@ class PropskitSwitch extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-segmented-control, fig-menu")
@@ -845,6 +854,7 @@ class PropskitColor extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#valueFromColorEvent(event);
     this.setAttribute("value", value);
     if (this.#input && this.#input.getAttribute("value") !== value) {
@@ -865,6 +875,7 @@ class PropskitColor extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-color, fig-menu")
@@ -1131,6 +1142,7 @@ class PropskitGradient extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#valueFromGradientEvent(event);
     this.setAttribute("value", value);
     const detail =
@@ -1148,6 +1160,7 @@ class PropskitGradient extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-gradient, fig-menu")
@@ -1481,6 +1494,7 @@ class PropskitSelect extends HTMLElement {
   #forwardSelectEvent(type, event) {
     if (event.target !== this.#select) return;
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#select?.value ?? "";
     if (type !== "optionhover") this.setAttribute("value", String(value));
     const detail =
@@ -1520,6 +1534,7 @@ class PropskitSelect extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (event.target instanceof Element && event.target.closest("fig-menu")) {
       return;
     }
@@ -1753,6 +1768,7 @@ class PropskitText extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const value = this.#input?.value ?? "";
     this.setAttribute("value", String(value));
     const detail =
@@ -1770,6 +1786,7 @@ class PropskitText extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-text, fig-menu")
@@ -1978,6 +1995,7 @@ class PropskitNumber extends HTMLElement {
 
   #forwardInputEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     const detail =
       event instanceof CustomEvent && event.detail !== undefined
         ? event.detail
@@ -1996,6 +2014,7 @@ class PropskitNumber extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (
       event.target instanceof Element &&
       event.target.closest("fig-input-number, fig-menu")
@@ -2040,233 +2059,1793 @@ class PropskitNumber extends HTMLElement {
 }
 figLabDefineElement("propskit-number", PropskitNumber);
 
-/* Collapsible property group — always collapsible (no collapsible attr). */
-class PropskitGroup extends HTMLElement {
-  static observedAttributes = ["name", "open", "show-reset"];
-
-  static #CONTROL_SELECTOR = [
-    "propskit-color",
-    "propskit-gradient",
-    "propskit-number",
-    "propskit-select",
-    "propskit-slider",
-    "propskit-switch",
-    "propskit-text",
-    "propskit-oscillator",
-  ].join(",");
+/**
+ * Compact X/Y editor.
+ *
+ * @attr {number} x - Horizontal value.
+ * @attr {number} y - Vertical value.
+ * @attr {string} default - JSON reset value with x and y.
+ * @attr {string} label - Field label. Empty values use "Position".
+ * @attr {string} units - Set to "percent" to show percentage units.
+ * @attr {boolean|string} disabled - Disables both number inputs.
+ * @attr {string} size - Set to "large" for the expanded row.
+ * @fires input - Composed event with { x, y }.
+ * @fires change - Composed event with { x, y }.
+ */
+class PropskitPosition extends HTMLElement {
+  static observedAttributes = [
+    "x",
+    "y",
+    "default",
+    "label",
+    "units",
+    "disabled",
+    "size",
+  ];
 
-  #header = null;
-  #chevron = null;
-  #resetTooltip = null;
-  #childObserver = null;
-  #dirtyFrame = 0;
-  #boundOnControlEvent = () => this.#queueDirtySync();
+  #field = null;
+  #xInput = null;
+  #yInput = null;
+  #initialValue = null;
+  #initialized = false;
+  #reflecting = false;
+  #boundHandleInput = this.#handleInputEvent.bind(this, "input");
+  #boundHandleChange = this.#handleInputEvent.bind(this, "change");
+  #boundHandleClick = this.#handleClick.bind(this);
 
   connectedCallback() {
-    this.#render();
-    this.#bindDirtyListeners();
-    requestAnimationFrame(() => {
-      this.#syncDirtyState();
-    });
+    if (!this.#initialized) {
+      this.#initialValue = this.#readValue();
+      this.#reflectValue(this.#initialValue);
+      this.#initialized = true;
+    }
+    if (!this.#field) this.#render();
+    this.#syncLabel();
+    this.#syncInputs();
+    this.#bindEvents();
+    this.removeEventListener("click", this.#boundHandleClick);
+    this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
   }
 
   disconnectedCallback() {
-    this.#unbindDirtyListeners();
-    if (this.#dirtyFrame) {
-      cancelAnimationFrame(this.#dirtyFrame);
-      this.#dirtyFrame = 0;
-    }
-    this.#header?.removeEventListener("click", this.#handleToggle);
-    this.#header?.removeEventListener("keydown", this.#handleHeaderKeyDown);
-    const resetBtn = this.#resetTooltip?.querySelector("fig-button");
-    resetBtn?.removeEventListener("click", this.#handleReset);
+    this.#unbindEvents();
+    this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-    if (name === "open") {
-      this.#header?.setAttribute("aria-expanded", String(this.open));
-      return;
-    }
-    if (name === "show-reset") {
-      this.#syncResetButton();
-      this.#syncDirtyState();
-      return;
+    if (oldValue === newValue || !this.#initialized) return;
+    if ((name === "x" || name === "y") && !this.#reflecting) {
+      this.#syncInputs();
+    } else if (name === "label") {
+      this.#syncLabel();
+    } else if (name === "units") {
+      this.#syncUnits();
+    } else if (name === "disabled") {
+      this.#syncDisabled();
     }
-    this.#render();
   }
 
-  get open() {
-    const attr = this.getAttribute("open");
-    return attr !== null && attr !== "false";
+  #finiteNumber(value, fallback = 50) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
   }
 
-  set open(value) {
-    const was = this.open;
-    if (value) {
-      this.setAttribute("open", "true");
-    } else {
-      this.setAttribute("open", "false");
-    }
-    this.#header?.setAttribute("aria-expanded", String(!!value));
-    if (was !== !!value) {
-      this.dispatchEvent(
-        new CustomEvent("openchange", {
-          detail: { open: !!value },
-          bubbles: true,
-        }),
-      );
+  #readValue() {
+    const x = this.getAttribute("x");
+    const y = this.getAttribute("y");
+    return {
+      x: x === null || !x.trim() ? 50 : this.#finiteNumber(x, 50),
+      y: y === null || !y.trim() ? 50 : this.#finiteNumber(y, 50),
+    };
+  }
+
+  #parseDefault(value) {
+    if (typeof value !== "string" || !value.trim()) return null;
+    try {
+      const parsed = JSON.parse(value);
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+        return null;
+      }
+      return {
+        x: this.#finiteNumber(parsed.x, this.#initialValue?.x ?? 50),
+        y: this.#finiteNumber(parsed.y, this.#initialValue?.y ?? 50),
+      };
+    } catch {
+      return null;
     }
   }
 
-  /** When true (default), show the reset control while the group is dirty. */
-  get showReset() {
-    const attr = this.getAttribute("show-reset");
-    if (attr === null) return true;
-    return attr !== "false";
+  #reflectValue(value) {
+    const current = this.#readValue();
+    const normalized = {
+      x: this.#finiteNumber(value?.x, current.x),
+      y: this.#finiteNumber(value?.y, current.y),
+    };
+    this.#reflecting = true;
+    this.setAttribute("x", String(normalized.x));
+    this.setAttribute("y", String(normalized.y));
+    this.#reflecting = false;
+    return normalized;
   }
 
-  set showReset(value) {
-    if (value) this.setAttribute("show-reset", "true");
-    else this.setAttribute("show-reset", "false");
+  #createNumber(axis, value) {
+    const input = document.createElement("fig-input-number");
+    input.setAttribute("data-propskit-position-axis", axis);
+    input.setAttribute("value", String(value));
+    input.setAttribute("min", "0");
+    input.setAttribute("max", "100");
+    input.setAttribute("step", "1");
+    input.setAttribute("precision", "2");
+    if (this.units === "percent") input.setAttribute("units", "%");
+    input.setAttribute("aria-label", `${axis.toUpperCase()} position`);
+    const prepend = document.createElement("span");
+    prepend.setAttribute("slot", "prepend");
+    prepend.textContent = axis.toUpperCase();
+    input.append(prepend);
+    if (figLabBooleanAttribute(this, "disabled")) {
+      input.setAttribute("disabled", "");
+    }
+    return input;
   }
 
-  get dirty() {
-    return this.hasAttribute("data-dirty") && this.getAttribute("data-dirty") !== "false";
+  #render() {
+    const value = this.#readValue();
+    const field = document.createElement("fig-field");
+    field.className = "propskit-position-row";
+    field.setAttribute("direction", "horizontal");
+    const label = document.createElement("label");
+    const xInput = this.#createNumber("x", value.x);
+    const yInput = this.#createNumber("y", value.y);
+    field.append(label, xInput, yInput);
+    this.#field = field;
+    this.#xInput = xInput;
+    this.#yInput = yInput;
+    this.replaceChildren(field);
+    figLabConnectPropskitResetMenu(this);
   }
 
-  /** Restore all propskit controls in this group to their captured defaults. */
-  resetProperties() {
-    this.#resetControls();
+  #syncLabel() {
+    const label = this.#field?.querySelector(":scope > label");
+    if (!label) return;
+    const rawLabel = this.getAttribute("label");
+    label.textContent = rawLabel?.trim() || "Position";
   }
 
-  #bindDirtyListeners() {
-    this.removeEventListener("input", this.#boundOnControlEvent, true);
-    this.removeEventListener("change", this.#boundOnControlEvent, true);
-    this.addEventListener("input", this.#boundOnControlEvent, true);
-    this.addEventListener("change", this.#boundOnControlEvent, true);
+  #syncInputs() {
+    const value = this.#readValue();
+    this.#xInput?.setAttribute("value", String(value.x));
+    this.#yInput?.setAttribute("value", String(value.y));
+    this.#syncUnits();
+    this.#syncDisabled();
+  }
 
-    if (!this.#childObserver) {
-      this.#childObserver = new MutationObserver(() => {
-        this.#queueDirtySync();
-      });
+  #syncUnits() {
+    const units = this.units === "percent" ? "%" : null;
+    for (const input of [this.#xInput, this.#yInput]) {
+      if (!input) continue;
+      if (units) input.setAttribute("units", units);
+      else input.removeAttribute("units");
     }
-    this.#childObserver.disconnect();
-    this.#childObserver.observe(this, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["value", "checked", "default"],
-    });
   }
 
-  #unbindDirtyListeners() {
-    this.removeEventListener("input", this.#boundOnControlEvent, true);
-    this.removeEventListener("change", this.#boundOnControlEvent, true);
-    this.#childObserver?.disconnect();
+  #syncDisabled() {
+    const disabled = figLabBooleanAttribute(this, "disabled");
+    this.#xInput?.toggleAttribute("disabled", disabled);
+    this.#yInput?.toggleAttribute("disabled", disabled);
   }
 
-  #queueDirtySync() {
-    if (this.#dirtyFrame) return;
-    this.#dirtyFrame = requestAnimationFrame(() => {
-      this.#dirtyFrame = 0;
-      this.#syncDirtyState();
-    });
+  #bindEvents() {
+    this.#unbindEvents();
+    this.#xInput?.addEventListener("input", this.#boundHandleInput);
+    this.#xInput?.addEventListener("change", this.#boundHandleChange);
+    this.#yInput?.addEventListener("input", this.#boundHandleInput);
+    this.#yInput?.addEventListener("change", this.#boundHandleChange);
   }
 
-  #isResetTarget(target) {
-    return (
-      target instanceof Element &&
-      Boolean(
-        target.closest(
-          ".propskit-group-reset, .propskit-group-reset-tooltip",
-        ),
-      )
+  #unbindEvents() {
+    this.#xInput?.removeEventListener("input", this.#boundHandleInput);
+    this.#xInput?.removeEventListener("change", this.#boundHandleChange);
+    this.#yInput?.removeEventListener("input", this.#boundHandleInput);
+    this.#yInput?.removeEventListener("change", this.#boundHandleChange);
+  }
+
+  #handleInputEvent(type, event) {
+    event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    const axis = event.currentTarget?.getAttribute("data-propskit-position-axis");
+    if (axis !== "x" && axis !== "y") return;
+    const value = this.value;
+    value[axis] = this.#finiteNumber(event.currentTarget.value, value[axis]);
+    const detail = this.#reflectValue(value);
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail: { ...detail, units: this.units },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
     );
   }
 
-  #handleToggle = (e) => {
-    if (this.#isResetTarget(e.target)) return;
-    e.stopPropagation();
-    this.open = !this.open;
-  };
+  #handleClick(event) {
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-input-number, fig-menu")
+    ) {
+      return;
+    }
+    this.focus();
+  }
 
-  #handleHeaderKeyDown = (e) => {
-    if (this.#isResetTarget(e.target)) return;
-    if (e.key !== "Enter" && e.key !== " ") return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.open = !this.open;
-  };
+  get x() {
+    return this.#readValue().x;
+  }
 
-  #handleReset = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.#resetControls();
-  };
+  set x(value) {
+    this.setAttribute("x", String(this.#finiteNumber(value, 50)));
+  }
 
-  #controls() {
-    return [
-      ...this.querySelectorAll(PropskitGroup.#CONTROL_SELECTOR),
-    ].filter(
-      (el) =>
-        el.closest("propskit-group") === this &&
-        !el.parentElement?.closest(PropskitGroup.#CONTROL_SELECTOR),
-    );
+  get y() {
+    return this.#readValue().y;
   }
 
-  #controlIsDirty(el) {
-    return el.isDefault === false;
+  set y(value) {
+    this.setAttribute("y", String(this.#finiteNumber(value, 50)));
   }
 
-  #computeDirty() {
-    for (const el of this.#controls()) {
-      if (this.#controlIsDirty(el)) return true;
-    }
-    return false;
+  get units() {
+    return this.getAttribute("units")?.trim().toLowerCase() === "percent"
+      ? "percent"
+      : "none";
   }
 
-  #syncDirtyState() {
-    const dirty = this.#computeDirty();
-    if (dirty) this.setAttribute("data-dirty", "");
-    else this.removeAttribute("data-dirty");
-    this.#syncResetButton();
+  set units(value) {
+    this.setAttribute(
+      "units",
+      String(value).trim().toLowerCase() === "none" ? "none" : "percent",
+    );
   }
 
-  #restoreControl(el) {
-    if (typeof el.resetToDefault === "function") {
-      el.resetToDefault();
-    }
+  get value() {
+    return { ...this.#readValue() };
   }
 
-  #resetControls() {
-    for (const el of this.#controls()) this.#restoreControl(el);
-    this.#syncDirtyState();
-    this.dispatchEvent(
-      new CustomEvent("reset", {
-        bubbles: true,
-        composed: true,
-      }),
+  set value(value) {
+    const normalized = this.#reflectValue(value);
+    this.#syncInputs(normalized);
+  }
+
+  get defaultValue() {
+    return (
+      this.#parseDefault(this.getAttribute("default")) || {
+        ...(this.#initialValue || { x: 50, y: 50 }),
+      }
     );
   }
 
-  #syncResetButton() {
-    if (!this.showReset) {
-      this.#resetTooltip?.setAttribute("hidden", "");
-      return;
-    }
-    this.#ensureResetButton();
-    this.#resetTooltip?.removeAttribute("hidden");
+  get isDefault() {
+    return figLabPropskitJsonValuesEqual(this.value, this.defaultValue);
   }
 
-  #ensureResetButton() {
-    if (!this.#header || !this.showReset) return;
-    let tip = this.#header.querySelector(":scope > .propskit-group-reset-tooltip");
-    if (!tip) {
-      tip = document.createElement("fig-tooltip");
-      tip.className = "propskit-group-reset-tooltip";
-      tip.setAttribute("text", "Reset properties");
-      const btn = document.createElement("fig-button");
+  resetToDefault() {
+    const value = this.defaultValue;
+    this.value = value;
+    figLabEmitPropskitReset(this, { ...value, units: this.units });
+  }
+
+  focus(options) {
+    this.#xInput?.focus(options);
+  }
+}
+figLabDefineElement("propskit-position", PropskitPosition);
+
+/**
+ * Collapsible color-point group composed from color and position controls.
+ *
+ * @attr {string} label - Passed to the internal fig-group name.
+ * @attr {boolean|string} collapsible - Internal group collapsibility; defaults true.
+ * @attr {boolean|string} open - Internal group expanded state; defaults true.
+ * @attr {string} size - Passed to both internal PropsKit controls.
+ * @attr {boolean|string} disabled - Disables both internal controls.
+ * @attr {string} value - JSON object with x, y, and color.
+ * @fires input - Composed event with { x, y, color }.
+ * @fires change - Composed event with { x, y, color }.
+ * @fires openchange - Composed event mirroring the internal fig-group.
+ */
+class PropskitColorPoint extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "collapsible",
+    "open",
+    "size",
+    "disabled",
+    "value",
+  ];
+
+  #group = null;
+  #colorControl = null;
+  #positionControl = null;
+  #initialized = false;
+  #reflectingValue = false;
+  #reflectingOpen = false;
+  #boundHandleInput = this.#handleControlEvent.bind(this, "input");
+  #boundHandleChange = this.#handleControlEvent.bind(this, "change");
+  #boundHandleOpenChange = this.#handleOpenChange.bind(this);
+
+  connectedCallback() {
+    if (!this.#initialized) {
+      this.#reflectValue(this.#readValue());
+      this.#initialized = true;
+    }
+    if (!this.#group) this.#render();
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncDisabled();
+    this.#syncControls(this.#readValue());
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.addEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.addEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+    this.addEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#initialized) return;
+    if (name === "value") {
+      if (!this.#reflectingValue) {
+        const value = this.#reflectValue(this.#readValue());
+        this.#syncControls(value);
+      }
+      return;
+    }
+    if (name === "size") {
+      this.#syncSize();
+      return;
+    }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
+    this.#syncGroupAttributes();
+  }
+
+  #finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  }
+
+  #normalizeValue(value) {
+    let source = value;
+    if (typeof value === "string") {
+      try {
+        source = JSON.parse(value);
+      } catch {
+        source = null;
+      }
+    }
+    if (!source || typeof source !== "object" || Array.isArray(source)) {
+      source = {};
+    }
+    return {
+      x: this.#finiteNumber(source.x, 50),
+      y: this.#finiteNumber(source.y, 50),
+      color:
+        typeof source.color === "string" && source.color.trim()
+          ? source.color.trim()
+          : "#D9D9D9",
+    };
+  }
+
+  #readValue() {
+    return this.#normalizeValue(this.getAttribute("value"));
+  }
+
+  #reflectValue(value) {
+    const normalized = this.#normalizeValue(value);
+    const serialized = JSON.stringify(normalized);
+    if (this.getAttribute("value") === serialized) return normalized;
+    this.#reflectingValue = true;
+    this.setAttribute("value", serialized);
+    this.#reflectingValue = false;
+    return normalized;
+  }
+
+  #render() {
+    const value = this.#readValue();
+    const group = document.createElement("fig-group");
+    const color = document.createElement("propskit-color");
+    const position = document.createElement("propskit-position");
+    group.setAttribute("compact", "");
+    color.setAttribute("label", "Color");
+    color.setAttribute("value", value.color);
+    color.setAttribute("data-propskit-color-point-control", "color");
+    position.setAttribute("label", "Position");
+    position.setAttribute("x", String(value.x));
+    position.setAttribute("y", String(value.y));
+    position.setAttribute("units", "percent");
+    position.setAttribute("data-propskit-color-point-control", "position");
+    this.#group = group;
+    this.#colorControl = color;
+    this.#positionControl = position;
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncDisabled();
+    group.append(color, position);
+    this.replaceChildren(group);
+  }
+
+  #syncGroupAttributes() {
+    if (!this.#group) return;
+    this.#group.setAttribute("compact", "");
+    const label = this.getAttribute("label")?.trim();
+    if (label) this.#group.setAttribute("name", label);
+    else this.#group.removeAttribute("name");
+    this.#group.toggleAttribute("collapsible", this.collapsible);
+    if (this.collapsible) {
+      this.#group.setAttribute("open", String(this.open));
+    } else {
+      this.#group.removeAttribute("open");
+    }
+  }
+
+  #syncSize() {
+    const size = this.getAttribute("size");
+    for (const control of [this.#colorControl, this.#positionControl]) {
+      if (!control) continue;
+      if (size === null) control.removeAttribute("size");
+      else control.setAttribute("size", size);
+    }
+  }
+
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#colorControl,
+      this.#positionControl,
+    ]);
+  }
+
+  #syncControls(value) {
+    const normalized = this.#normalizeValue(value);
+    if (this.#colorControl) this.#colorControl.value = normalized.color;
+    if (this.#positionControl) {
+      this.#positionControl.value = {
+        x: normalized.x,
+        y: normalized.y,
+      };
+    }
+  }
+
+  #handleControlEvent(type, event) {
+    if (event.target === this) return;
+    const control = event.target?.closest?.(
+      "[data-propskit-color-point-control]",
+    );
+    if (!control || !this.contains(control)) return;
+    event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    const value = this.value;
+    const kind = control.getAttribute("data-propskit-color-point-control");
+    if (kind === "color") {
+      value.color = control.value || control.getAttribute("value");
+    } else if (kind === "position") {
+      value.x = this.#finiteNumber(control.value?.x, value.x);
+      value.y = this.#finiteNumber(control.value?.y, value.y);
+    } else {
+      return;
+    }
+    const detail = this.#reflectValue(value);
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail: { ...detail, units: "percent" },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #handleOpenChange(event) {
+    if (event.target !== this.#group || this.#reflectingOpen) return;
+    event.stopImmediatePropagation();
+    const open = Boolean(event.detail?.open);
+    this.#reflectingOpen = true;
+    this.setAttribute("open", String(open));
+    this.#reflectingOpen = false;
+    this.dispatchEvent(
+      new CustomEvent("openchange", {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  get collapsible() {
+    const value = this.getAttribute("collapsible");
+    return value === null || value !== "false";
+  }
+
+  set collapsible(value) {
+    this.setAttribute("collapsible", String(Boolean(value)));
+  }
+
+  get open() {
+    const value = this.getAttribute("open");
+    return value === null || value !== "false";
+  }
+
+  set open(value) {
+    this.setAttribute("open", String(Boolean(value)));
+  }
+
+  get value() {
+    return { ...this.#readValue() };
+  }
+
+  set value(value) {
+    const normalized = this.#reflectValue(value);
+    this.#syncControls(normalized);
+  }
+
+  focus(options) {
+    this.#colorControl?.focus(options);
+  }
+}
+figLabDefineElement("propskit-color-point", PropskitColorPoint);
+
+/**
+ * Collapsible point-radius group composed from position and number controls.
+ *
+ * @attr {string} label - Passed to the internal fig-group name.
+ * @attr {boolean|string} collapsible - Internal group collapsibility; defaults true.
+ * @attr {boolean|string} open - Internal group expanded state; defaults true.
+ * @attr {string} size - Passed to both internal PropsKit controls.
+ * @attr {string} units - Passed to the internal position and radius controls.
+ * @attr {boolean|string} disabled - Disables both internal controls.
+ * @attr {string} value - JSON object with x, y, and radius.
+ * @fires input - Composed event with { x, y, radius }.
+ * @fires change - Composed event with { x, y, radius }.
+ * @fires openchange - Composed event mirroring the internal fig-group.
+ */
+class PropskitPointRadius extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "collapsible",
+    "open",
+    "size",
+    "units",
+    "disabled",
+    "value",
+  ];
+
+  #group = null;
+  #positionControl = null;
+  #radiusControl = null;
+  #initialized = false;
+  #reflectingValue = false;
+  #reflectingOpen = false;
+  #boundHandleInput = this.#handleControlEvent.bind(this, "input");
+  #boundHandleChange = this.#handleControlEvent.bind(this, "change");
+  #boundHandleOpenChange = this.#handleOpenChange.bind(this);
+
+  connectedCallback() {
+    if (!this.#initialized) {
+      this.#reflectValue(this.#readValue());
+      this.#initialized = true;
+    }
+    if (!this.#group) this.#render();
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncUnits();
+    this.#syncDisabled();
+    this.#syncControls(this.#readValue());
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.addEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.addEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+    this.addEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#initialized) return;
+    if (name === "value") {
+      if (!this.#reflectingValue) {
+        const value = this.#reflectValue(this.#readValue());
+        this.#syncControls(value);
+      }
+      return;
+    }
+    if (name === "size") {
+      this.#syncSize();
+      return;
+    }
+    if (name === "units") {
+      this.#syncUnits();
+      return;
+    }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
+    this.#syncGroupAttributes();
+  }
+
+  #finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  }
+
+  #normalizeRadius(value) {
+    if (typeof value === "string" && value.trim().endsWith("%")) {
+      const number = Number.parseFloat(value);
+      if (Number.isFinite(number)) return `${number}%`;
+    }
+    return this.#finiteNumber(value, 0);
+  }
+
+  #normalizeValue(value) {
+    let source = value;
+    if (typeof value === "string") {
+      try {
+        source = JSON.parse(value);
+      } catch {
+        source = null;
+      }
+    }
+    if (!source || typeof source !== "object" || Array.isArray(source)) {
+      source = {};
+    }
+    return {
+      x: this.#finiteNumber(source.x, 50),
+      y: this.#finiteNumber(source.y, 50),
+      radius: this.#normalizeRadius(source.radius),
+    };
+  }
+
+  #readValue() {
+    return this.#normalizeValue(this.getAttribute("value"));
+  }
+
+  #reflectValue(value) {
+    const normalized = this.#normalizeValue(value);
+    const serialized = JSON.stringify(normalized);
+    if (this.getAttribute("value") === serialized) return normalized;
+    this.#reflectingValue = true;
+    this.setAttribute("value", serialized);
+    this.#reflectingValue = false;
+    return normalized;
+  }
+
+  #radiusParts(radius) {
+    const percent =
+      typeof radius === "string" && radius.trim().endsWith("%");
+    return {
+      value: percent ? Number.parseFloat(radius) : radius,
+      units: percent ? "%" : "px",
+    };
+  }
+
+  #render() {
+    const value = this.#readValue();
+    const radiusValue = this.#radiusParts(value.radius);
+    const group = document.createElement("fig-group");
+    const position = document.createElement("propskit-position");
+    const radius = document.createElement("propskit-number");
+    group.setAttribute("compact", "");
+    position.setAttribute("label", "Position");
+    position.setAttribute("x", String(value.x));
+    position.setAttribute("y", String(value.y));
+    if (this.hasAttribute("units")) position.setAttribute("units", this.units);
+    position.setAttribute("data-propskit-point-radius-control", "position");
+    radius.setAttribute("label", "Radius");
+    radius.setAttribute("value", String(radiusValue.value));
+    if (this.units === "percent") radius.setAttribute("units", "%");
+    radius.setAttribute("units-disallow", "");
+    radius.setAttribute("min", "0");
+    radius.setAttribute("precision", "2");
+    radius.setAttribute("data-propskit-point-radius-control", "radius");
+    this.#group = group;
+    this.#positionControl = position;
+    this.#radiusControl = radius;
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncDisabled();
+    group.append(position, radius);
+    this.replaceChildren(group);
+  }
+
+  #syncGroupAttributes() {
+    if (!this.#group) return;
+    this.#group.setAttribute("compact", "");
+    const label = this.getAttribute("label")?.trim();
+    if (label) this.#group.setAttribute("name", label);
+    else this.#group.removeAttribute("name");
+    this.#group.toggleAttribute("collapsible", this.collapsible);
+    if (this.collapsible) {
+      this.#group.setAttribute("open", String(this.open));
+    } else {
+      this.#group.removeAttribute("open");
+    }
+  }
+
+  #syncSize() {
+    const size = this.getAttribute("size");
+    for (const control of [this.#positionControl, this.#radiusControl]) {
+      if (!control) continue;
+      if (size === null) control.removeAttribute("size");
+      else control.setAttribute("size", size);
+    }
+  }
+
+  #syncUnits() {
+    if (this.hasAttribute("units")) {
+      this.#positionControl?.setAttribute("units", this.units);
+    } else {
+      this.#positionControl?.removeAttribute("units");
+    }
+    if (this.units === "percent") {
+      this.#radiusControl?.setAttribute("units", "%");
+    } else {
+      this.#radiusControl?.removeAttribute("units");
+    }
+  }
+
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#positionControl,
+      this.#radiusControl,
+    ]);
+  }
+
+  #syncControls(value) {
+    const normalized = this.#normalizeValue(value);
+    if (this.#positionControl) {
+      this.#positionControl.value = {
+        x: normalized.x,
+        y: normalized.y,
+      };
+    }
+    if (this.#radiusControl) {
+      const radius = this.#radiusParts(normalized.radius);
+      this.#radiusControl.value = radius.value;
+    }
+  }
+
+  #radiusFromControl(control, fallback) {
+    const fallbackValue = this.#radiusParts(fallback).value;
+    const value = this.#finiteNumber(control.value, fallbackValue);
+    const units =
+      control.querySelector("fig-input-number")?.getAttribute("units") ||
+      control.getAttribute("units");
+    return units === "%" ? `${value}%` : value;
+  }
+
+  #handleControlEvent(type, event) {
+    if (event.target === this) return;
+    const control = event.target?.closest?.(
+      "[data-propskit-point-radius-control]",
+    );
+    if (!control || !this.contains(control)) return;
+    event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    const value = this.value;
+    const kind = control.getAttribute("data-propskit-point-radius-control");
+    if (kind === "position") {
+      value.x = this.#finiteNumber(control.value?.x, value.x);
+      value.y = this.#finiteNumber(control.value?.y, value.y);
+    } else if (kind === "radius") {
+      value.radius = this.#radiusFromControl(control, value.radius);
+    } else {
+      return;
+    }
+    const detail = this.#reflectValue(value);
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail: {
+          ...detail,
+          radius: this.#radiusParts(detail.radius).value,
+          units: this.units,
+        },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #handleOpenChange(event) {
+    if (event.target !== this.#group || this.#reflectingOpen) return;
+    event.stopImmediatePropagation();
+    const open = Boolean(event.detail?.open);
+    this.#reflectingOpen = true;
+    this.setAttribute("open", String(open));
+    this.#reflectingOpen = false;
+    this.dispatchEvent(
+      new CustomEvent("openchange", {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  get collapsible() {
+    const value = this.getAttribute("collapsible");
+    return value === null || value !== "false";
+  }
+
+  set collapsible(value) {
+    this.setAttribute("collapsible", String(Boolean(value)));
+  }
+
+  get open() {
+    const value = this.getAttribute("open");
+    return value === null || value !== "false";
+  }
+
+  set open(value) {
+    this.setAttribute("open", String(Boolean(value)));
+  }
+
+  get units() {
+    return this.getAttribute("units")?.trim().toLowerCase() === "percent"
+      ? "percent"
+      : "none";
+  }
+
+  set units(value) {
+    this.setAttribute(
+      "units",
+      String(value).trim().toLowerCase() === "none" ? "none" : "percent",
+    );
+  }
+
+  get value() {
+    return { ...this.#readValue() };
+  }
+
+  set value(value) {
+    const normalized = this.#reflectValue(value);
+    this.#syncControls(normalized);
+  }
+
+  focus(options) {
+    this.#positionControl?.focus(options);
+  }
+}
+figLabDefineElement("propskit-point-radius", PropskitPointRadius);
+
+/**
+ * Collapsible point-radius-angle group composed from PropsKit controls.
+ *
+ * @attr {string} label - Passed to the internal fig-group name.
+ * @attr {boolean|string} collapsible - Internal group collapsibility; defaults true.
+ * @attr {boolean|string} open - Internal group expanded state; defaults true.
+ * @attr {string} size - Passed to every internal PropsKit control.
+ * @attr {string} units - Passed to the internal position and radius controls.
+ * @attr {boolean|string} disabled - Disables every internal control.
+ * @attr {string} value - JSON object with x, y, radius, and angle.
+ * @fires input - Composed event with { x, y, radius, angle }.
+ * @fires change - Composed event with { x, y, radius, angle }.
+ * @fires openchange - Composed event mirroring the internal fig-group.
+ */
+class PropskitPointRadiusAngle extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "collapsible",
+    "open",
+    "size",
+    "units",
+    "disabled",
+    "value",
+  ];
+
+  #group = null;
+  #positionControl = null;
+  #radiusControl = null;
+  #angleControl = null;
+  #initialized = false;
+  #reflectingValue = false;
+  #reflectingOpen = false;
+  #boundHandleInput = this.#handleControlEvent.bind(this, "input");
+  #boundHandleChange = this.#handleControlEvent.bind(this, "change");
+  #boundHandleOpenChange = this.#handleOpenChange.bind(this);
+
+  connectedCallback() {
+    if (!this.#initialized) {
+      this.#reflectValue(this.#readValue());
+      this.#initialized = true;
+    }
+    if (!this.#group) this.#render();
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncUnits();
+    this.#syncDisabled();
+    this.#syncControls(this.#readValue());
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.addEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.addEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+    this.addEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#initialized) return;
+    if (name === "value") {
+      if (!this.#reflectingValue) {
+        const value = this.#reflectValue(this.#readValue());
+        this.#syncControls(value);
+      }
+      return;
+    }
+    if (name === "size") {
+      this.#syncSize();
+      return;
+    }
+    if (name === "units") {
+      this.#syncUnits();
+      return;
+    }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
+    this.#syncGroupAttributes();
+  }
+
+  #finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  }
+
+  #normalizeRadius(value) {
+    if (typeof value === "string" && value.trim().endsWith("%")) {
+      const number = Number.parseFloat(value);
+      if (Number.isFinite(number)) return `${number}%`;
+    }
+    return this.#finiteNumber(value, 0);
+  }
+
+  #normalizeValue(value) {
+    let source = value;
+    if (typeof value === "string") {
+      try {
+        source = JSON.parse(value);
+      } catch {
+        source = null;
+      }
+    }
+    if (!source || typeof source !== "object" || Array.isArray(source)) {
+      source = {};
+    }
+    return {
+      x: this.#finiteNumber(source.x, 50),
+      y: this.#finiteNumber(source.y, 50),
+      radius: this.#normalizeRadius(source.radius),
+      angle: this.#finiteNumber(source.angle, 0),
+    };
+  }
+
+  #readValue() {
+    return this.#normalizeValue(this.getAttribute("value"));
+  }
+
+  #reflectValue(value) {
+    const normalized = this.#normalizeValue(value);
+    const serialized = JSON.stringify(normalized);
+    if (this.getAttribute("value") === serialized) return normalized;
+    this.#reflectingValue = true;
+    this.setAttribute("value", serialized);
+    this.#reflectingValue = false;
+    return normalized;
+  }
+
+  #radiusParts(radius) {
+    const percent =
+      typeof radius === "string" && radius.trim().endsWith("%");
+    return {
+      value: percent ? Number.parseFloat(radius) : radius,
+      units: percent ? "%" : "px",
+    };
+  }
+
+  #render() {
+    const value = this.#readValue();
+    const radiusValue = this.#radiusParts(value.radius);
+    const group = document.createElement("fig-group");
+    const position = document.createElement("propskit-position");
+    const radius = document.createElement("propskit-number");
+    const angle = document.createElement("propskit-number");
+    group.setAttribute("compact", "");
+    position.setAttribute("label", "Position");
+    position.setAttribute("x", String(value.x));
+    position.setAttribute("y", String(value.y));
+    if (this.hasAttribute("units")) position.setAttribute("units", this.units);
+    position.setAttribute(
+      "data-propskit-point-radius-angle-control",
+      "position",
+    );
+    radius.setAttribute("label", "Radius");
+    radius.setAttribute("value", String(radiusValue.value));
+    if (this.units === "percent") radius.setAttribute("units", "%");
+    radius.setAttribute("units-disallow", "");
+    radius.setAttribute("min", "0");
+    radius.setAttribute("precision", "2");
+    radius.setAttribute("data-propskit-point-radius-angle-control", "radius");
+    angle.setAttribute("label", "Angle");
+    angle.setAttribute("value", String(value.angle));
+    angle.setAttribute("units", "°");
+    angle.setAttribute("units-disallow", "");
+    angle.setAttribute("precision", "1");
+    angle.setAttribute("data-propskit-point-radius-angle-control", "angle");
+    this.#group = group;
+    this.#positionControl = position;
+    this.#radiusControl = radius;
+    this.#angleControl = angle;
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncDisabled();
+    group.append(position, radius, angle);
+    this.replaceChildren(group);
+  }
+
+  #syncGroupAttributes() {
+    if (!this.#group) return;
+    this.#group.setAttribute("compact", "");
+    const label = this.getAttribute("label")?.trim();
+    if (label) this.#group.setAttribute("name", label);
+    else this.#group.removeAttribute("name");
+    this.#group.toggleAttribute("collapsible", this.collapsible);
+    if (this.collapsible) {
+      this.#group.setAttribute("open", String(this.open));
+    } else {
+      this.#group.removeAttribute("open");
+    }
+  }
+
+  #syncSize() {
+    const size = this.getAttribute("size");
+    for (const control of [
+      this.#positionControl,
+      this.#radiusControl,
+      this.#angleControl,
+    ]) {
+      if (!control) continue;
+      if (size === null) control.removeAttribute("size");
+      else control.setAttribute("size", size);
+    }
+  }
+
+  #syncUnits() {
+    if (this.hasAttribute("units")) {
+      this.#positionControl?.setAttribute("units", this.units);
+    } else {
+      this.#positionControl?.removeAttribute("units");
+    }
+    if (this.units === "percent") {
+      this.#radiusControl?.setAttribute("units", "%");
+    } else {
+      this.#radiusControl?.removeAttribute("units");
+    }
+  }
+
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#positionControl,
+      this.#radiusControl,
+      this.#angleControl,
+    ]);
+  }
+
+  #syncControls(value) {
+    const normalized = this.#normalizeValue(value);
+    if (this.#positionControl) {
+      this.#positionControl.value = {
+        x: normalized.x,
+        y: normalized.y,
+      };
+    }
+    if (this.#radiusControl) {
+      const radius = this.#radiusParts(normalized.radius);
+      this.#radiusControl.value = radius.value;
+    }
+    if (this.#angleControl) {
+      this.#angleControl.value = normalized.angle;
+    }
+  }
+
+  #radiusFromControl(control, fallback) {
+    const fallbackValue = this.#radiusParts(fallback).value;
+    const value = this.#finiteNumber(control.value, fallbackValue);
+    const units =
+      control.querySelector("fig-input-number")?.getAttribute("units") ||
+      control.getAttribute("units");
+    return units === "%" ? `${value}%` : value;
+  }
+
+  #handleControlEvent(type, event) {
+    if (event.target === this) return;
+    const control = event.target?.closest?.(
+      "[data-propskit-point-radius-angle-control]",
+    );
+    if (!control || !this.contains(control)) return;
+    event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    const value = this.value;
+    const kind = control.getAttribute(
+      "data-propskit-point-radius-angle-control",
+    );
+    if (kind === "position") {
+      value.x = this.#finiteNumber(control.value?.x, value.x);
+      value.y = this.#finiteNumber(control.value?.y, value.y);
+    } else if (kind === "radius") {
+      value.radius = this.#radiusFromControl(control, value.radius);
+    } else if (kind === "angle") {
+      value.angle = this.#finiteNumber(control.value, value.angle);
+    } else {
+      return;
+    }
+    const detail = this.#reflectValue(value);
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail: {
+          ...detail,
+          radius: this.#radiusParts(detail.radius).value,
+          units: this.units,
+        },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #handleOpenChange(event) {
+    if (event.target !== this.#group || this.#reflectingOpen) return;
+    event.stopImmediatePropagation();
+    const open = Boolean(event.detail?.open);
+    this.#reflectingOpen = true;
+    this.setAttribute("open", String(open));
+    this.#reflectingOpen = false;
+    this.dispatchEvent(
+      new CustomEvent("openchange", {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  get collapsible() {
+    const value = this.getAttribute("collapsible");
+    return value === null || value !== "false";
+  }
+
+  set collapsible(value) {
+    this.setAttribute("collapsible", String(Boolean(value)));
+  }
+
+  get open() {
+    const value = this.getAttribute("open");
+    return value === null || value !== "false";
+  }
+
+  set open(value) {
+    this.setAttribute("open", String(Boolean(value)));
+  }
+
+  get units() {
+    return this.getAttribute("units")?.trim().toLowerCase() === "percent"
+      ? "percent"
+      : "none";
+  }
+
+  set units(value) {
+    this.setAttribute(
+      "units",
+      String(value).trim().toLowerCase() === "none" ? "none" : "percent",
+    );
+  }
+
+  get value() {
+    return { ...this.#readValue() };
+  }
+
+  set value(value) {
+    const normalized = this.#reflectValue(value);
+    this.#syncControls(normalized);
+  }
+
+  focus(options) {
+    this.#positionControl?.focus(options);
+  }
+}
+figLabDefineElement(
+  "propskit-point-radius-angle",
+  PropskitPointRadiusAngle,
+);
+
+/**
+ * Collapsible point-point group composed from two position controls.
+ *
+ * @attr {string} label - Passed to the internal fig-group name.
+ * @attr {boolean|string} collapsible - Internal group collapsibility; defaults true.
+ * @attr {boolean|string} open - Internal group expanded state; defaults true.
+ * @attr {string} size - Passed to both internal position controls.
+ * @attr {string} units - Passed to both internal position controls.
+ * @attr {boolean|string} disabled - Disables both internal position controls.
+ * @attr {string} value - JSON object with x, y, x2, and y2.
+ * @fires input - Composed event with { x, y, x2, y2 }.
+ * @fires change - Composed event with { x, y, x2, y2 }.
+ * @fires openchange - Composed event mirroring the internal fig-group.
+ */
+class PropskitPointPoint extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "collapsible",
+    "open",
+    "size",
+    "units",
+    "disabled",
+    "value",
+  ];
+
+  #group = null;
+  #startControl = null;
+  #endControl = null;
+  #initialized = false;
+  #reflectingValue = false;
+  #reflectingOpen = false;
+  #boundHandleInput = this.#handleControlEvent.bind(this, "input");
+  #boundHandleChange = this.#handleControlEvent.bind(this, "change");
+  #boundHandleOpenChange = this.#handleOpenChange.bind(this);
+
+  connectedCallback() {
+    if (!this.#initialized) {
+      this.#reflectValue(this.#readValue());
+      this.#initialized = true;
+    }
+    if (!this.#group) this.#render();
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncUnits();
+    this.#syncDisabled();
+    this.#syncControls(this.#readValue());
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.addEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.addEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+    this.addEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("input", this.#boundHandleInput);
+    this.removeEventListener("change", this.#boundHandleChange);
+    this.removeEventListener("openchange", this.#boundHandleOpenChange);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#initialized) return;
+    if (name === "value") {
+      if (!this.#reflectingValue) {
+        const value = this.#reflectValue(this.#readValue());
+        this.#syncControls(value);
+      }
+      return;
+    }
+    if (name === "size") {
+      this.#syncSize();
+      return;
+    }
+    if (name === "units") {
+      this.#syncUnits();
+      return;
+    }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      return;
+    }
+    this.#syncGroupAttributes();
+  }
+
+  #finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  }
+
+  #normalizeValue(value) {
+    let source = value;
+    if (typeof value === "string") {
+      try {
+        source = JSON.parse(value);
+      } catch {
+        source = null;
+      }
+    }
+    if (!source || typeof source !== "object" || Array.isArray(source)) {
+      source = {};
+    }
+    return {
+      x: this.#finiteNumber(source.x, 50),
+      y: this.#finiteNumber(source.y, 50),
+      x2: this.#finiteNumber(source.x2, 75),
+      y2: this.#finiteNumber(source.y2, 75),
+    };
+  }
+
+  #readValue() {
+    return this.#normalizeValue(this.getAttribute("value"));
+  }
+
+  #reflectValue(value) {
+    const normalized = this.#normalizeValue(value);
+    const serialized = JSON.stringify(normalized);
+    if (this.getAttribute("value") === serialized) return normalized;
+    this.#reflectingValue = true;
+    this.setAttribute("value", serialized);
+    this.#reflectingValue = false;
+    return normalized;
+  }
+
+  #createPosition(label, role, x, y) {
+    const control = document.createElement("propskit-position");
+    control.setAttribute("label", label);
+    control.setAttribute("x", String(x));
+    control.setAttribute("y", String(y));
+    if (this.hasAttribute("units")) control.setAttribute("units", this.units);
+    control.setAttribute("data-propskit-point-point-control", role);
+    return control;
+  }
+
+  #render() {
+    const value = this.#readValue();
+    const group = document.createElement("fig-group");
+    const start = this.#createPosition("Start", "start", value.x, value.y);
+    const end = this.#createPosition("End", "end", value.x2, value.y2);
+    group.setAttribute("compact", "");
+    this.#group = group;
+    this.#startControl = start;
+    this.#endControl = end;
+    this.#syncGroupAttributes();
+    this.#syncSize();
+    this.#syncDisabled();
+    group.append(start, end);
+    this.replaceChildren(group);
+  }
+
+  #syncGroupAttributes() {
+    if (!this.#group) return;
+    this.#group.setAttribute("compact", "");
+    const label = this.getAttribute("label")?.trim();
+    if (label) this.#group.setAttribute("name", label);
+    else this.#group.removeAttribute("name");
+    this.#group.toggleAttribute("collapsible", this.collapsible);
+    if (this.collapsible) {
+      this.#group.setAttribute("open", String(this.open));
+    } else {
+      this.#group.removeAttribute("open");
+    }
+  }
+
+  #syncSize() {
+    const size = this.getAttribute("size");
+    for (const control of [this.#startControl, this.#endControl]) {
+      if (!control) continue;
+      if (size === null) control.removeAttribute("size");
+      else control.setAttribute("size", size);
+    }
+  }
+
+  #syncUnits() {
+    for (const control of [this.#startControl, this.#endControl]) {
+      if (!control) continue;
+      if (this.hasAttribute("units")) control.setAttribute("units", this.units);
+      else control.removeAttribute("units");
+    }
+  }
+
+  #syncDisabled() {
+    figLabSyncDisabledControls(this, [
+      this.#startControl,
+      this.#endControl,
+    ]);
+  }
+
+  #syncControls(value) {
+    const normalized = this.#normalizeValue(value);
+    if (this.#startControl) {
+      this.#startControl.value = {
+        x: normalized.x,
+        y: normalized.y,
+      };
+    }
+    if (this.#endControl) {
+      this.#endControl.value = {
+        x: normalized.x2,
+        y: normalized.y2,
+      };
+    }
+  }
+
+  #handleControlEvent(type, event) {
+    if (event.target === this) return;
+    const control = event.target?.closest?.(
+      "[data-propskit-point-point-control]",
+    );
+    if (!control || !this.contains(control)) return;
+    event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    const value = this.value;
+    const point = control.value;
+    const role = control.getAttribute("data-propskit-point-point-control");
+    if (role === "start") {
+      value.x = this.#finiteNumber(point?.x, value.x);
+      value.y = this.#finiteNumber(point?.y, value.y);
+    } else if (role === "end") {
+      value.x2 = this.#finiteNumber(point?.x, value.x2);
+      value.y2 = this.#finiteNumber(point?.y, value.y2);
+    } else {
+      return;
+    }
+    const detail = this.#reflectValue(value);
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        detail: { ...detail, units: this.units },
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #handleOpenChange(event) {
+    if (event.target !== this.#group || this.#reflectingOpen) return;
+    event.stopImmediatePropagation();
+    const open = Boolean(event.detail?.open);
+    this.#reflectingOpen = true;
+    this.setAttribute("open", String(open));
+    this.#reflectingOpen = false;
+    this.dispatchEvent(
+      new CustomEvent("openchange", {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  get collapsible() {
+    const value = this.getAttribute("collapsible");
+    return value === null || value !== "false";
+  }
+
+  set collapsible(value) {
+    this.setAttribute("collapsible", String(Boolean(value)));
+  }
+
+  get open() {
+    const value = this.getAttribute("open");
+    return value === null || value !== "false";
+  }
+
+  set open(value) {
+    this.setAttribute("open", String(Boolean(value)));
+  }
+
+  get units() {
+    return this.getAttribute("units")?.trim().toLowerCase() === "percent"
+      ? "percent"
+      : "none";
+  }
+
+  set units(value) {
+    this.setAttribute(
+      "units",
+      String(value).trim().toLowerCase() === "none" ? "none" : "percent",
+    );
+  }
+
+  get value() {
+    return { ...this.#readValue() };
+  }
+
+  set value(value) {
+    const normalized = this.#reflectValue(value);
+    this.#syncControls(normalized);
+  }
+
+  focus(options) {
+    this.#startControl?.focus(options);
+  }
+}
+figLabDefineElement("propskit-point-point", PropskitPointPoint);
+
+/* Collapsible property group — always collapsible (no collapsible attr). */
+class PropskitGroup extends HTMLElement {
+  static observedAttributes = ["name", "open", "show-reset", "disabled"];
+
+  static #CONTROL_SELECTOR = [
+    "propskit-color",
+    "propskit-gradient",
+    "propskit-number",
+    "propskit-position",
+    "propskit-color-point",
+    "propskit-point-radius",
+    "propskit-point-radius-angle",
+    "propskit-point-point",
+    "propskit-select",
+    "propskit-slider",
+    "propskit-switch",
+    "propskit-text",
+    "propskit-oscillator",
+  ].join(",");
+
+  #header = null;
+  #chevron = null;
+  #resetTooltip = null;
+  #childObserver = null;
+  #dirtyFrame = 0;
+  #boundOnControlEvent = () => this.#queueDirtySync();
+
+  connectedCallback() {
+    this.#render();
+    this.#syncDisabled();
+    this.#bindDirtyListeners();
+    requestAnimationFrame(() => {
+      this.#syncDirtyState();
+    });
+  }
+
+  disconnectedCallback() {
+    this.#unbindDirtyListeners();
+    if (this.#dirtyFrame) {
+      cancelAnimationFrame(this.#dirtyFrame);
+      this.#dirtyFrame = 0;
+    }
+    this.#header?.removeEventListener("click", this.#handleToggle);
+    this.#header?.removeEventListener("keydown", this.#handleHeaderKeyDown);
+    const resetBtn = this.#resetTooltip?.querySelector("fig-button");
+    resetBtn?.removeEventListener("click", this.#handleReset);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "open") {
+      this.#header?.setAttribute("aria-expanded", String(this.open));
+      return;
+    }
+    if (name === "show-reset") {
+      this.#syncResetButton();
+      this.#syncDirtyState();
+      return;
+    }
+    if (name === "disabled") {
+      this.#syncDisabled();
+      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");
+    }
+    this.#header?.setAttribute("aria-expanded", String(!!value));
+    if (was !== !!value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: !!value },
+          bubbles: true,
+        }),
+      );
+    }
+  }
+
+  /** When true (default), show the reset control while the group is dirty. */
+  get showReset() {
+    const attr = this.getAttribute("show-reset");
+    if (attr === null) return true;
+    return attr !== "false";
+  }
+
+  set showReset(value) {
+    if (value) this.setAttribute("show-reset", "true");
+    else this.setAttribute("show-reset", "false");
+  }
+
+  get dirty() {
+    return this.hasAttribute("data-dirty") && this.getAttribute("data-dirty") !== "false";
+  }
+
+  /** Restore all propskit controls in this group to their captured defaults. */
+  resetProperties() {
+    this.#resetControls();
+  }
+
+  #bindDirtyListeners() {
+    this.removeEventListener("input", this.#boundOnControlEvent, true);
+    this.removeEventListener("change", this.#boundOnControlEvent, true);
+    this.addEventListener("input", this.#boundOnControlEvent, true);
+    this.addEventListener("change", this.#boundOnControlEvent, true);
+
+    if (!this.#childObserver) {
+      this.#childObserver = new MutationObserver(() => {
+        this.#syncDisabled();
+        this.#queueDirtySync();
+      });
+    }
+    this.#childObserver.disconnect();
+    this.#childObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["value", "checked", "default", "x", "y"],
+    });
+  }
+
+  #unbindDirtyListeners() {
+    this.removeEventListener("input", this.#boundOnControlEvent, true);
+    this.removeEventListener("change", this.#boundOnControlEvent, true);
+    this.#childObserver?.disconnect();
+  }
+
+  #queueDirtySync() {
+    if (this.#dirtyFrame) return;
+    this.#dirtyFrame = requestAnimationFrame(() => {
+      this.#dirtyFrame = 0;
+      this.#syncDirtyState();
+    });
+  }
+
+  #isResetTarget(target) {
+    return (
+      target instanceof Element &&
+      Boolean(
+        target.closest(
+          ".propskit-group-reset, .propskit-group-reset-tooltip",
+        ),
+      )
+    );
+  }
+
+  #handleToggle = (e) => {
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    if (this.#isResetTarget(e.target)) return;
+    e.stopPropagation();
+    this.open = !this.open;
+  };
+
+  #handleHeaderKeyDown = (e) => {
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    if (this.#isResetTarget(e.target)) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.open = !this.open;
+  };
+
+  #handleReset = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
+    this.#resetControls();
+  };
+
+  #controls() {
+    return [
+      ...this.querySelectorAll(PropskitGroup.#CONTROL_SELECTOR),
+    ].filter(
+      (el) =>
+        el.closest("propskit-group") === this &&
+        !el.parentElement?.closest(PropskitGroup.#CONTROL_SELECTOR),
+    );
+  }
+
+  #syncDisabled() {
+    const disabled = figLabBooleanAttribute(this, "disabled");
+    for (const control of this.#controls()) {
+      if (disabled) {
+        if (!figLabBooleanAttribute(control, "disabled")) {
+          control.setAttribute("disabled", "");
+          control.setAttribute("data-propskit-group-disabled", "");
+        }
+      } else if (control.hasAttribute("data-propskit-group-disabled")) {
+        control.removeAttribute("disabled");
+        control.removeAttribute("data-propskit-group-disabled");
+      }
+    }
+    this.#header?.setAttribute("aria-disabled", String(disabled));
+    this.#header?.setAttribute("tabindex", disabled ? "-1" : "0");
+    this.#resetTooltip
+      ?.querySelector("fig-button")
+      ?.toggleAttribute("disabled", disabled);
+  }
+
+  #controlIsDirty(el) {
+    return el.isDefault === false;
+  }
+
+  #computeDirty() {
+    for (const el of this.#controls()) {
+      if (this.#controlIsDirty(el)) return true;
+    }
+    return false;
+  }
+
+  #syncDirtyState() {
+    const dirty = this.#computeDirty();
+    if (dirty) this.setAttribute("data-dirty", "");
+    else this.removeAttribute("data-dirty");
+    this.#syncResetButton();
+  }
+
+  #restoreControl(el) {
+    if (typeof el.resetToDefault === "function") {
+      el.resetToDefault();
+    }
+  }
+
+  #resetControls() {
+    for (const el of this.#controls()) this.#restoreControl(el);
+    this.#syncDirtyState();
+    this.dispatchEvent(
+      new CustomEvent("reset", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #syncResetButton() {
+    if (!this.showReset) {
+      this.#resetTooltip?.setAttribute("hidden", "");
+      return;
+    }
+    this.#ensureResetButton();
+    this.#resetTooltip?.removeAttribute("hidden");
+  }
+
+  #ensureResetButton() {
+    if (!this.#header || !this.showReset) return;
+    let tip = this.#header.querySelector(":scope > .propskit-group-reset-tooltip");
+    if (!tip) {
+      tip = document.createElement("fig-tooltip");
+      tip.className = "propskit-group-reset-tooltip";
+      tip.setAttribute("text", "Reset properties");
+      const btn = document.createElement("fig-button");
       btn.className = "propskit-group-reset";
       btn.setAttribute("variant", "ghost");
       btn.setAttribute("icon", "");
@@ -2352,7 +3931,7 @@ class PropskitGroup extends HTMLElement {
     this.#chevron = h3.querySelector(".propskit-group-chevron");
     this.#syncResetButton();
     this.#header.setAttribute("role", "button");
-    this.#header.setAttribute("tabindex", "0");
+    this.#syncDisabled();
     this.#header.setAttribute("aria-expanded", String(this.open));
     this.#header.removeEventListener("click", this.#handleToggle);
     this.#header.addEventListener("click", this.#handleToggle);
@@ -3165,6 +4744,7 @@ class PropskitSlider extends HTMLElement {
 
   #forwardSliderEvent(type, event) {
     event.stopImmediatePropagation();
+    if (figLabBooleanAttribute(this, "disabled")) return;
     if (type === "change") {
       this.#resetElasticPull();
     }
@@ -3437,6 +5017,14 @@ class FigCanvasControl extends HTMLElement {
       if (typeof v.angle === "number") this.#angle = v.angle;
       if (typeof v.x2 === "number") this.#x2 = v.x2;
       if (typeof v.y2 === "number") this.#y2 = v.y2;
+      if (
+        this.#type === "color" &&
+        typeof v.color === "string" &&
+        v.color.trim() &&
+        this.getAttribute("color") !== v.color.trim()
+      ) {
+        this.setAttribute("color", v.color.trim());
+      }
     } catch {
       /* ignore */
     }
@@ -4895,7 +6483,7 @@ class PropskitOscillator extends HTMLElement {
     this.#syncViewportSize();
     this.#updateWaveform();
     this.#setupEvents();
-    this.#startPlayhead();
+    if (!this.#isDisabled()) this.#startPlayhead();
     figLabConnectPropskitResetMenu(this);
   }
 
@@ -4945,6 +6533,7 @@ class PropskitOscillator extends HTMLElement {
   }
 
   #getWaveTypeMenuHTML(disabled, index) {
+    const disabledAttr = disabled ? " disabled" : "";
     const items = PropskitOscillator.TYPES.map((type) => {
       return `<fig-menu-item value="${type.value}">
         ${PropskitOscillator.waveIcon(type.value, 24)}
@@ -4952,9 +6541,9 @@ class PropskitOscillator extends HTMLElement {
       </fig-menu-item>`;
     }).join("");
     const indexAttr = ` data-wave-index="${PropskitOscillator.#escapeAttribute(String(index))}"`;
-    return `<fig-menu class="propskit-oscillator-add-type" position="bottom right"${indexAttr}${disabled}>
+    return `<fig-menu class="propskit-oscillator-add-type" position="bottom right"${indexAttr}${disabledAttr}>
       <fig-tooltip text="Add form">
-        <fig-button class="propskit-oscillator-add-type-button" variant="ghost" icon fig-menu-trigger aria-label="Add form"><fig-icon name="plus"></fig-icon></fig-button>
+        <fig-button class="propskit-oscillator-add-type-button" variant="ghost" icon fig-menu-trigger aria-label="Add form"${disabledAttr}><fig-icon name="plus"></fig-icon></fig-button>
       </fig-tooltip>
       ${items}
     </fig-menu>`;
@@ -6239,7 +7828,12 @@ class FigReorder extends HTMLElement {
     "fig-input-angle",
     "fig-input-joystick",
     "fig-canvas-control",
+    "propskit-color-point",
     "propskit-number",
+    "propskit-point-point",
+    "propskit-point-radius",
+    "propskit-point-radius-angle",
+    "propskit-position",
     "propskit-slider",
     "propskit-oscillator",
   ];