@rogieking/figui3 6.25.0 → 6.27.0

package/fig-lab.js

@@ -18,6 +18,139 @@ function figLabBooleanAttribute(element, name) {
   return element.hasAttribute(name) && element.getAttribute(name) !== "false";
 }
 
+function figLabColorEventAliases(color, alpha, opacity) {
+  const numericAlpha = Number(alpha);
+  const numericOpacity = Number(opacity);
+  const normalizedAlpha = Number.isFinite(numericAlpha)
+    ? Math.max(0, Math.min(1, numericAlpha))
+    : Number.isFinite(numericOpacity)
+      ? Math.max(0, Math.min(100, numericOpacity)) / 100
+      : 1;
+  const normalizedOpacity = Number.isFinite(numericOpacity)
+    ? Math.max(0, Math.min(100, numericOpacity))
+    : Math.round(normalizedAlpha * 100);
+  return { color, alpha: normalizedAlpha, opacity: normalizedOpacity };
+}
+
+const figLabPropskitResetMenus = new WeakMap();
+
+function figLabConnectPropskitResetMenu(host) {
+  let state = figLabPropskitResetMenus.get(host);
+  if (!state) {
+    const menu = document.createElement("fig-menu");
+    menu.setAttribute("position", "bottom left");
+    menu.setAttribute("offset", "0 0");
+    const resetItem = document.createElement("fig-menu-item");
+    resetItem.setAttribute("value", "reset-default");
+    resetItem.textContent = "Reset";
+    menu.appendChild(resetItem);
+
+    let fallbackTimer = 0;
+    const clearPendingOpen = () => {
+      if (fallbackTimer) {
+        clearTimeout(fallbackTimer);
+        fallbackTimer = 0;
+      }
+      window.removeEventListener("pointerup", openMenu, true);
+      window.removeEventListener("pointercancel", openMenu, true);
+    };
+    const openMenu = () => {
+      clearPendingOpen();
+      const point = state?.point;
+      if (point) menu.showAt?.(point.x, point.y);
+    };
+    const handleContextMenu = (event) => {
+      if (
+        figLabBooleanAttribute(host, "disabled") ||
+        event.target?.closest?.("fig-menu")
+      ) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation?.();
+      state.point = { x: event.clientX, y: event.clientY };
+      clearPendingOpen();
+      window.addEventListener("pointerup", openMenu, {
+        once: true,
+        capture: true,
+      });
+      window.addEventListener("pointercancel", openMenu, {
+        once: true,
+        capture: true,
+      });
+      fallbackTimer = window.setTimeout(openMenu, 180);
+    };
+    const handleChange = (event) => {
+      event.stopPropagation();
+      if (event.detail?.value === "reset-default") host.resetToDefault?.();
+    };
+    state = {
+      menu,
+      point: null,
+      clearPendingOpen,
+      handleContextMenu,
+      handleChange,
+    };
+    figLabPropskitResetMenus.set(host, state);
+  }
+
+  if (state.menu.parentElement !== host) host.appendChild(state.menu);
+  host.removeEventListener("contextmenu", state.handleContextMenu);
+  host.addEventListener("contextmenu", state.handleContextMenu);
+  state.menu.removeEventListener("change", state.handleChange);
+  state.menu.addEventListener("change", state.handleChange);
+}
+
+function figLabDisconnectPropskitResetMenu(host) {
+  const state = figLabPropskitResetMenus.get(host);
+  if (!state) return;
+  state.clearPendingOpen();
+  host.removeEventListener("contextmenu", state.handleContextMenu);
+  state.menu.removeEventListener("change", state.handleChange);
+}
+
+function figLabEmitPropskitReset(host, detail) {
+  for (const type of ["input", "change"]) {
+    host.dispatchEvent(
+      new CustomEvent(type, {
+        detail,
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }),
+    );
+  }
+}
+
+function figLabPropskitValuesEqual(value, defaultValue) {
+  if (typeof value === "boolean" || typeof defaultValue === "boolean") {
+    return Boolean(value) === Boolean(defaultValue);
+  }
+  return String(value ?? "") === String(defaultValue ?? "");
+}
+
+function figLabPerceivedColorTheme(context, color) {
+  if (!context || !color) return null;
+  const probe = document.createElement("span");
+  probe.style.cssText =
+    "position:absolute;visibility:hidden;pointer-events:none;color:" + color;
+  context.appendChild(probe);
+  const resolved = getComputedStyle(probe).color;
+  probe.remove();
+  if (!resolved.startsWith("rgb")) return null;
+  const channels = resolved.match(/[\d.]+/g)?.slice(0, 3).map(Number);
+  if (!channels || channels.length < 3 || channels.some(Number.isNaN)) return null;
+  const [r, g, b] = channels.map((channel) => {
+    const value = channel / 255;
+    return value <= 0.04045
+      ? value / 12.92
+      : ((value + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luminance <= 0.179 ? "light" : "dark";
+}
+
 /* Unique IDs for lab components such as propskit-group. */
 let figLabUniqueIdCounter = 0;
 function figLabUniqueId(prefix = "fig-lab") {
@@ -44,6 +177,7 @@ class PropskitSwitch extends HTMLElement {
   #boundHandleInput = null;
   #boundHandleChange = null;
   #boundHandleClick = this.#handleClick.bind(this);
+  #initialChecked = false;
 
   static get observedAttributes() {
     return ["label", "direction"];
@@ -56,6 +190,7 @@ class PropskitSwitch extends HTMLElement {
     this.#bindSwitchEvents();
     this.removeEventListener("click", this.#boundHandleClick);
     this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
 
     if (!this.#observer) {
       this.#observer = new MutationObserver((mutations) => {
@@ -86,6 +221,7 @@ class PropskitSwitch extends HTMLElement {
     this.#observer?.disconnect();
     this.#unbindSwitchEvents();
     this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -94,6 +230,7 @@ class PropskitSwitch extends HTMLElement {
   }
 
   #initialize() {
+    this.#initialChecked = figLabBooleanAttribute(this, "checked");
     const initialChildren = Array.from(this.childNodes).filter(
       (node) =>
         node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()),
@@ -157,6 +294,7 @@ class PropskitSwitch extends HTMLElement {
       "id",
       "checked",
       "value",
+      "default",
     ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !name.startsWith("data-"),
@@ -219,7 +357,10 @@ class PropskitSwitch extends HTMLElement {
   }
 
   #handleClick(event) {
-    if (event.target instanceof Element && event.target.closest("fig-segmented-control")) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-segmented-control, fig-menu")
+    ) {
       return;
     }
     const value = this.#switch?.value === "on" ? "off" : "on";
@@ -246,6 +387,25 @@ class PropskitSwitch extends HTMLElement {
     this.setAttribute("value", nextValue ?? "");
   }
 
+  get defaultValue() {
+    return this.hasAttribute("default")
+      ? figLabBooleanAttribute(this, "default")
+      : this.#initialChecked;
+  }
+
+  get isDefault() {
+    return this.checked === this.defaultValue;
+  }
+
+  resetToDefault() {
+    const checked = this.defaultValue;
+    this.checked = checked;
+    figLabEmitPropskitReset(this, {
+      checked,
+      value: this.getAttribute("value") ?? "",
+    });
+  }
+
   focus(options) {
     const selected =
       this.#switch?.querySelector("fig-segment[selected]") ||
@@ -283,6 +443,7 @@ class PropskitColor extends HTMLElement {
     }
     this.removeEventListener("click", this.#boundHandleClick);
     this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
 
     if (!this.#observer) {
       this.#observer = new MutationObserver((mutations) => {
@@ -314,6 +475,7 @@ class PropskitColor extends HTMLElement {
     this.#observer?.disconnect();
     this.#unbindInputEvents();
     this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -477,7 +639,10 @@ class PropskitColor extends HTMLElement {
   }
 
   #handleClick(event) {
-    if (event.target instanceof Element && event.target.closest("fig-input-color")) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-input-color, fig-menu")
+    ) {
       return;
     }
     this.focus();
@@ -513,8 +678,16 @@ class PropskitColor extends HTMLElement {
     return this.getAttribute("default") ?? this.#initialValue ?? "";
   }
 
+  get defaultValue() {
+    return String(this.#defaultValue());
+  }
+
+  get isDefault() {
+    return figLabPropskitValuesEqual(this.value, this.defaultValue);
+  }
+
   resetToDefault() {
-    const next = String(this.#defaultValue());
+    const next = this.defaultValue;
     this.setAttribute("value", next);
     this.#forceInputValue(next);
     this.dispatchEvent(
@@ -555,6 +728,7 @@ class PropskitSelect extends HTMLElement {
   #boundHandlePointerDown = this.#handlePointerDown.bind(this);
   /** True when pointerdown saw the menu open — skip click-to-open after light-dismiss. */
   #closeGesture = false;
+  #initialValue = null;
 
   static get observedAttributes() {
     return ["label", "direction", "aria-label", "options", "value"];
@@ -569,6 +743,7 @@ class PropskitSelect extends HTMLElement {
     this.addEventListener("click", this.#boundHandleClick);
     this.removeEventListener("pointerdown", this.#boundHandlePointerDown, true);
     this.addEventListener("pointerdown", this.#boundHandlePointerDown, true);
+    figLabConnectPropskitResetMenu(this);
 
     if (!this.#observer) {
       this.#observer = new MutationObserver((mutations) => {
@@ -602,6 +777,7 @@ class PropskitSelect extends HTMLElement {
     this.#unbindSelectEvents();
     this.removeEventListener("click", this.#boundHandleClick);
     this.removeEventListener("pointerdown", this.#boundHandlePointerDown, true);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -616,6 +792,7 @@ class PropskitSelect extends HTMLElement {
   }
 
   #initialize() {
+    this.#initialValue = this.getAttribute("value") ?? "";
     const customLabel = this.querySelector(":scope > label");
     const field = document.createElement("fig-field");
     const label = customLabel || document.createElement("label");
@@ -673,6 +850,7 @@ class PropskitSelect extends HTMLElement {
       "size",
       "aria-label",
       "full",
+      "default",
     ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !name.startsWith("data-"),
@@ -749,6 +927,7 @@ class PropskitSelect extends HTMLElement {
 
   #handlePointerDown(event) {
     if (!(event.target instanceof Element)) return;
+    if (event.target.closest("fig-menu")) return;
     // fig-select owns its trigger/option clicks.
     if (event.target.closest("fig-select")) {
       this.#closeGesture = false;
@@ -759,6 +938,9 @@ class PropskitSelect extends HTMLElement {
   }
 
   #handleClick(event) {
+    if (event.target instanceof Element && event.target.closest("fig-menu")) {
+      return;
+    }
     if (event.target instanceof Element && event.target.closest("fig-select")) {
       this.#closeGesture = false;
       return;
@@ -790,6 +972,21 @@ class PropskitSelect extends HTMLElement {
     }
   }
 
+  get defaultValue() {
+    return this.getAttribute("default") ?? this.#initialValue ?? "";
+  }
+
+  get isDefault() {
+    return figLabPropskitValuesEqual(this.value, this.defaultValue);
+  }
+
+  resetToDefault() {
+    const value = this.defaultValue;
+    this.value = value;
+    if (this.#select) this.#select.value = value;
+    figLabEmitPropskitReset(this, value);
+  }
+
   focus(options) {
     this.#select?.focus(options);
   }
@@ -807,6 +1004,7 @@ class PropskitText extends HTMLElement {
   #boundHandleInput = null;
   #boundHandleChange = null;
   #boundHandleClick = this.#handleClick.bind(this);
+  #initialValue = null;
 
   static get observedAttributes() {
     return ["label", "direction", "aria-label"];
@@ -819,6 +1017,7 @@ class PropskitText extends HTMLElement {
     this.#bindInputEvents();
     this.removeEventListener("click", this.#boundHandleClick);
     this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
 
     if (!this.#observer) {
       this.#observer = new MutationObserver((mutations) => {
@@ -850,6 +1049,7 @@ class PropskitText extends HTMLElement {
     this.#observer?.disconnect();
     this.#unbindInputEvents();
     this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -860,6 +1060,7 @@ class PropskitText extends HTMLElement {
   }
 
   #initialize() {
+    this.#initialValue = this.getAttribute("value") ?? "";
     const initialChildren = Array.from(this.childNodes).filter(
       (node) =>
         node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()),
@@ -924,6 +1125,7 @@ class PropskitText extends HTMLElement {
       "aria-label",
       "multiline",
       "resizable",
+      "default",
     ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !name.startsWith("data-"),
@@ -982,7 +1184,10 @@ class PropskitText extends HTMLElement {
   }
 
   #handleClick(event) {
-    if (event.target instanceof Element && event.target.closest("fig-input-text")) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-input-text, fig-menu")
+    ) {
       return;
     }
     this.focus();
@@ -1003,6 +1208,20 @@ class PropskitText extends HTMLElement {
     }
   }
 
+  get defaultValue() {
+    return this.getAttribute("default") ?? this.#initialValue ?? "";
+  }
+
+  get isDefault() {
+    return figLabPropskitValuesEqual(this.value, this.defaultValue);
+  }
+
+  resetToDefault() {
+    const value = this.defaultValue;
+    this.value = value;
+    figLabEmitPropskitReset(this, value);
+  }
+
   focus(options) {
     this.#input?.focus(options);
   }
@@ -1020,6 +1239,7 @@ class PropskitNumber extends HTMLElement {
   #boundHandleInput = null;
   #boundHandleChange = null;
   #boundHandleClick = this.#handleClick.bind(this);
+  #initialValue = null;
 
   static get observedAttributes() {
     return ["label", "direction"];
@@ -1032,6 +1252,7 @@ class PropskitNumber extends HTMLElement {
     this.#bindInputEvents();
     this.removeEventListener("click", this.#boundHandleClick);
     this.addEventListener("click", this.#boundHandleClick);
+    figLabConnectPropskitResetMenu(this);
 
     if (!this.#observer) {
       this.#observer = new MutationObserver((mutations) => {
@@ -1062,6 +1283,7 @@ class PropskitNumber extends HTMLElement {
     this.#observer?.disconnect();
     this.#unbindInputEvents();
     this.removeEventListener("click", this.#boundHandleClick);
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -1070,6 +1292,8 @@ class PropskitNumber extends HTMLElement {
   }
 
   #initialize() {
+    this.#initialValue =
+      this.getAttribute("value") ?? this.getAttribute("min") ?? "0";
     const initialChildren = Array.from(this.childNodes).filter(
       (node) =>
         node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()),
@@ -1126,6 +1350,7 @@ class PropskitNumber extends HTMLElement {
       "class",
       "style",
       "id",
+      "default",
     ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !name.startsWith("data-"),
@@ -1185,7 +1410,10 @@ class PropskitNumber extends HTMLElement {
   }
 
   #handleClick(event) {
-    if (event.target instanceof Element && event.target.closest("fig-input-number")) {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("fig-input-number, fig-menu")
+    ) {
       return;
     }
     this.focus();
@@ -1206,6 +1434,20 @@ class PropskitNumber extends HTMLElement {
     }
   }
 
+  get defaultValue() {
+    return this.getAttribute("default") ?? this.#initialValue ?? "0";
+  }
+
+  get isDefault() {
+    return figLabPropskitValuesEqual(this.value, this.defaultValue);
+  }
+
+  resetToDefault() {
+    const value = this.defaultValue;
+    this.value = value;
+    figLabEmitPropskitReset(this, this.#input?.value ?? value);
+  }
+
   focus(options) {
     this.#input?.focus(options);
   }
@@ -1223,12 +1465,12 @@ class PropskitGroup extends HTMLElement {
     "propskit-slider",
     "propskit-switch",
     "propskit-text",
+    "propskit-oscillator",
   ].join(",");
 
   #header = null;
   #chevron = null;
   #resetTooltip = null;
-  #defaults = new WeakMap();
   #childObserver = null;
   #dirtyFrame = 0;
   #boundOnControlEvent = () => this.#queueDirtySync();
@@ -1237,7 +1479,6 @@ class PropskitGroup extends HTMLElement {
     this.#render();
     this.#bindDirtyListeners();
     requestAnimationFrame(() => {
-      this.#ensureDefaults();
       this.#syncDirtyState();
     });
   }
@@ -1320,12 +1561,16 @@ class PropskitGroup extends HTMLElement {
 
     if (!this.#childObserver) {
       this.#childObserver = new MutationObserver(() => {
-        this.#ensureDefaults();
         this.#queueDirtySync();
       });
     }
     this.#childObserver.disconnect();
-    this.#childObserver.observe(this, { childList: true, subtree: true });
+    this.#childObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["value", "checked", "default"],
+    });
   }
 
   #unbindDirtyListeners() {
@@ -1338,7 +1583,6 @@ class PropskitGroup extends HTMLElement {
     if (this.#dirtyFrame) return;
     this.#dirtyFrame = requestAnimationFrame(() => {
       this.#dirtyFrame = 0;
-      this.#ensureDefaults();
       this.#syncDirtyState();
     });
   }
@@ -1377,48 +1621,15 @@ class PropskitGroup extends HTMLElement {
   #controls() {
     return [
       ...this.querySelectorAll(PropskitGroup.#CONTROL_SELECTOR),
-    ].filter((el) => el.closest("propskit-group") === this);
-  }
-
-  #snapshotControl(el) {
-    if (el.localName === "propskit-switch") {
-      return { kind: "checked", value: Boolean(el.checked) };
-    }
-    if ("value" in el) {
-      return { kind: "value", value: el.value };
-    }
-    return { kind: "value", value: el.getAttribute("value") ?? "" };
-  }
-
-  #ensureDefaults() {
-    for (const el of this.#controls()) {
-      if (this.#defaults.has(el)) continue;
-      if (el.hasAttribute("default")) {
-        if (el.localName === "propskit-switch") {
-          this.#defaults.set(el, {
-            kind: "checked",
-            value: figLabBooleanAttribute(el, "default"),
-          });
-          continue;
-        }
-        this.#defaults.set(el, {
-          kind: "value",
-          value: el.getAttribute("default") ?? "",
-        });
-        continue;
-      }
-      this.#defaults.set(el, this.#snapshotControl(el));
-    }
+    ].filter(
+      (el) =>
+        el.closest("propskit-group") === this &&
+        !el.parentElement?.closest(PropskitGroup.#CONTROL_SELECTOR),
+    );
   }
 
   #controlIsDirty(el) {
-    const snap = this.#defaults.get(el);
-    if (!snap) return false;
-    const cur = this.#snapshotControl(el);
-    if (snap.kind === "checked") {
-      return Boolean(cur.value) !== Boolean(snap.value);
-    }
-    return String(cur.value ?? "") !== String(snap.value ?? "");
+    return el.isDefault === false;
   }
 
   #computeDirty() {
@@ -1436,67 +1647,12 @@ class PropskitGroup extends HTMLElement {
   }
 
   #restoreControl(el) {
-    const snap = this.#defaults.get(el);
-    if (!snap) return;
-
-    if (snap.kind === "checked") {
-      el.checked = snap.value;
-      const detail = {
-        checked: Boolean(snap.value),
-        value: el.getAttribute("value") ?? "",
-      };
-      el.dispatchEvent(
-        new CustomEvent("input", {
-          detail,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-        }),
-      );
-      el.dispatchEvent(
-        new CustomEvent("change", {
-          detail,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-        }),
-      );
-      return;
-    }
-
     if (typeof el.resetToDefault === "function") {
-      const prevDefault = el.getAttribute("default");
-      el.setAttribute("default", String(snap.value ?? ""));
       el.resetToDefault();
-      if (prevDefault === null) el.removeAttribute("default");
-      else el.setAttribute("default", prevDefault);
-      return;
     }
-
-    el.value = snap.value;
-    const detail =
-      el.getAttribute?.("value") ??
-      ("value" in el ? el.value : snap.value);
-    el.dispatchEvent(
-      new CustomEvent("input", {
-        detail,
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      }),
-    );
-    el.dispatchEvent(
-      new CustomEvent("change", {
-        detail,
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      }),
-    );
   }
 
   #resetControls() {
-    this.#ensureDefaults();
     for (const el of this.#controls()) this.#restoreControl(el);
     this.#syncDirtyState();
     this.dispatchEvent(
@@ -1638,6 +1794,7 @@ class PropskitSlider extends HTMLElement {
   #contextMenu = null;
   #pendingClickTimer = 0;
   #pendingClickValue = null;
+  #initialValue = null;
   #isElasticTracking = false;
   #elasticMaxPx = 0;
   #elasticRangeRect = null;
@@ -1711,6 +1868,10 @@ class PropskitSlider extends HTMLElement {
               this.#pushExternalValueToSlider();
               continue;
             }
+            if (mutation.attributeName === "color") {
+              syncSlider = true;
+              continue;
+            }
             if (
               mutation.attributeName &&
               this.#ignoredSliderAttrs.has(mutation.attributeName)
@@ -1770,6 +1931,8 @@ class PropskitSlider extends HTMLElement {
   }
 
   #initialize() {
+    this.#initialValue =
+      this.getAttribute("value") ?? this.getAttribute("min") ?? "0";
     const initialChildren = Array.from(this.childNodes).filter((node) => {
       return (
         node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim())
@@ -1811,7 +1974,7 @@ class PropskitSlider extends HTMLElement {
 
     const resetItem = document.createElement("fig-menu-item");
     resetItem.setAttribute("value", "reset-default");
-    resetItem.textContent = "Reset to default";
+    resetItem.textContent = "Reset";
     menu.appendChild(resetItem);
     menu.addEventListener("change", this.#boundHandleContextMenuChange);
 
@@ -1889,17 +2052,33 @@ class PropskitSlider extends HTMLElement {
     if (sliderType === "opacity") {
       this.#slider.style.setProperty(
         "--color",
-        "light-dark(#444444, #e6e6e6)",
+        this.getAttribute("color") || "var(--figma-color-bg-secondary)",
       );
     } else {
       this.#slider.style.removeProperty("--color");
     }
+    this.#syncNumberTheme(sliderType);
 
     this.#managedSliderAttrs = nextManaged;
     this.#pushExternalValueToSlider();
     this.#queueSteppersSync();
   }
 
+  #syncNumberTheme(sliderType) {
+    const numberInput = this.#slider?.querySelector("fig-input-number");
+    if (!numberInput) return;
+    if (sliderType !== "opacity" || !this.hasAttribute("color")) {
+      numberInput.removeAttribute("theme");
+      return;
+    }
+    const theme = figLabPerceivedColorTheme(
+      this.#slider,
+      this.getAttribute("color"),
+    );
+    if (theme) numberInput.setAttribute("theme", theme);
+    else numberInput.removeAttribute("theme");
+  }
+
   #pushExternalValueToSlider() {
     if (!this.#slider) return;
     const next = this.getAttribute("value") ?? "";
@@ -1963,8 +2142,8 @@ class PropskitSlider extends HTMLElement {
       }
     }
     if (numberInput) {
-      numberInput.setAttribute("tabindex", "-1");
-      numberInput.setAttribute("aria-hidden", "true");
+      numberInput.removeAttribute("tabindex");
+      numberInput.removeAttribute("aria-hidden");
     }
   }
 
@@ -2214,8 +2393,7 @@ class PropskitSlider extends HTMLElement {
     return (
       this.getAttribute("default") ??
       this.#slider?.getAttribute("default") ??
-      this.getAttribute("value") ??
-      this.#slider?.getAttribute("value") ??
+      this.#initialValue ??
       this.#rangeInput?.min ??
       "0"
     );
@@ -2333,6 +2511,14 @@ class PropskitSlider extends HTMLElement {
     if (this.#slider) this.#slider.value = next;
   }
 
+  get defaultValue() {
+    return this.#defaultValue();
+  }
+
+  get isDefault() {
+    return figLabPropskitValuesEqual(this.value, this.defaultValue);
+  }
+
   resetToDefault() {
     this.#resetToDefault();
   }
@@ -3243,18 +3429,29 @@ class FigCanvasControl extends HTMLElement {
     this.#syncPointPointCursors();
   }
 
-  #emitInput() {
+  #emitInput(detail = this.value) {
     this.dispatchEvent(
-      new CustomEvent("input", { bubbles: true, detail: this.value }),
+      new CustomEvent("input", { bubbles: true, detail }),
     );
   }
 
-  #emitChange() {
+  #emitChange(detail = this.value) {
     this.dispatchEvent(
-      new CustomEvent("change", { bubbles: true, detail: this.value }),
+      new CustomEvent("change", { bubbles: true, detail }),
     );
   }
 
+  #colorEventDetail(detail) {
+    return {
+      ...this.value,
+      ...figLabColorEventAliases(
+        detail.color,
+        detail.alpha,
+        detail.opacity,
+      ),
+    };
+  }
+
   #syncValueAttribute() {
     this.setAttribute("value", JSON.stringify(this.value));
   }
@@ -3265,8 +3462,11 @@ class FigCanvasControl extends HTMLElement {
     this.#pointHandle.addEventListener("input", (e) => {
       e.stopPropagation();
       if (e.detail?.color) {
-        this.setAttribute("color", e.detail.color);
-        this.#emitInput();
+        this.setAttribute(
+          "color",
+          this.#pointHandle.getAttribute("color") || e.detail.color,
+        );
+        this.#emitInput(this.#colorEventDetail(e.detail));
         return;
       }
       this.#isDragging = true;
@@ -3285,8 +3485,11 @@ class FigCanvasControl extends HTMLElement {
     this.#pointHandle.addEventListener("change", (e) => {
       e.stopPropagation();
       if (e.detail?.color) {
-        this.setAttribute("color", e.detail.color);
-        this.#emitChange();
+        this.setAttribute(
+          "color",
+          this.#pointHandle.getAttribute("color") || e.detail.color,
+        );
+        this.#emitChange(this.#colorEventDetail(e.detail));
         return;
       }
       const px = e.detail?.px ?? this.#x / 100;
@@ -3718,6 +3921,7 @@ class PropskitOscillator extends HTMLElement {
   #activeFieldInput = null;
   #dragController = null;
   #dragCleanup = null;
+  #initialValue = null;
 
   static TYPES = [
     { name: "Wave", value: "sine" },
@@ -3741,11 +3945,18 @@ class PropskitOscillator extends HTMLElement {
   }
 
   connectedCallback() {
+    if (this.#initialValue === null) {
+      this.#initialValue =
+        this.getAttribute("default") ??
+        this.getAttribute("value") ??
+        JSON.stringify({ waves: [PropskitOscillator.#defaultWave()] });
+    }
     this.#precision = this.#readInteger("precision", 2);
     this.#parseValue(this.getAttribute("value"));
     this.#syncAspectRatio();
     this.#render();
     this.#setupResizeObserver();
+    figLabConnectPropskitResetMenu(this);
   }
 
   disconnectedCallback() {
@@ -3755,6 +3966,7 @@ class PropskitOscillator extends HTMLElement {
       this.#resizeObserver.disconnect();
       this.#resizeObserver = null;
     }
+    figLabDisconnectPropskitResetMenu(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -3794,6 +4006,27 @@ class PropskitOscillator extends HTMLElement {
     );
   }
 
+  get defaultValue() {
+    return this.getAttribute("default") ?? this.#initialValue ?? "";
+  }
+
+  get isDefault() {
+    const defaultWaves = this.#normalizedWaves(this.defaultValue);
+    if (!defaultWaves) return false;
+    return (
+      JSON.stringify(this.data.waves) ===
+      JSON.stringify(defaultWaves.map((wave) => this.#roundWave(wave)))
+    );
+  }
+
+  resetToDefault() {
+    const value = this.defaultValue;
+    if (!value) return;
+    this.value = value;
+    this.#emit("input");
+    this.#emit("change");
+  }
+
   get data() {
     return {
       waves: this.#waves.map((wave) => this.#roundWave(wave)),
@@ -3835,33 +4068,35 @@ class PropskitOscillator extends HTMLElement {
   }
 
   #parseValue(value) {
-    if (!value) return false;
+    const nextWaves = this.#normalizedWaves(value);
+    if (!nextWaves) return false;
+    this.#waves = nextWaves;
+    if (!this.#waves.length) {
+      this.#waves = [PropskitOscillator.#defaultWave()];
+    }
+    this.#activeWaveIndex = Math.min(this.#activeWaveIndex, this.#waves.length - 1);
+    return true;
+  }
 
+  #normalizedWaves(value) {
+    if (!value) return null;
     let parsed = null;
     if (typeof value === "string") {
       try {
         parsed = JSON.parse(value);
       } catch {
-        parsed = null;
+        return null;
       }
     } else if (typeof value === "object") {
       parsed = value;
     }
-
-    if (!parsed) return false;
-
-    const nextWaves = Array.isArray(parsed)
+    if (!parsed) return null;
+    const waves = Array.isArray(parsed)
       ? parsed
       : Array.isArray(parsed.waves)
         ? parsed.waves
         : [parsed];
-
-    this.#waves = nextWaves.map((wave) => this.#normalizeWave(wave));
-    if (!this.#waves.length) {
-      this.#waves = [PropskitOscillator.#defaultWave()];
-    }
-    this.#activeWaveIndex = Math.min(this.#activeWaveIndex, this.#waves.length - 1);
-    return true;
+    return waves.map((wave) => this.#normalizeWave(wave));
   }
 
   #normalizeWave(state = {}) {
@@ -3962,6 +4197,7 @@ class PropskitOscillator extends HTMLElement {
     this.#updateWaveform();
     this.#setupEvents();
     this.#startPlayhead();
+    figLabConnectPropskitResetMenu(this);
   }
 
   #getInnerHTML() {
@@ -3998,9 +4234,7 @@ class PropskitOscillator extends HTMLElement {
         <fig-tooltip text="Remove form">
           <fig-button class="propskit-oscillator-remove-button" variant="ghost" icon data-wave-index="${index}" aria-label="Remove form"${removeDisabled}><fig-icon name="minus"></fig-icon></fig-button>
         </fig-tooltip>
-        <fig-tooltip text="Add form">
-          ${this.#getWaveTypeSelectHTML("propskit-oscillator-add-type propskit-oscillator-add-type-button", "sine", disabled, index)}
-        </fig-tooltip>
+        ${this.#getWaveTypeMenuHTML(disabled, index)}
       </fig-header>
       <div class="propskit-oscillator-fields" data-wave-index="${index}"${active}>
         ${this.#getNumberFieldHTML(index, "frequency", "Frequency", 0.1, 16, 0.1, "")}
@@ -4011,26 +4245,33 @@ class PropskitOscillator extends HTMLElement {
     </fig-group>`;
   }
 
-  #getWaveTypeSelectHTML(className, value, disabled, index = null) {
-    const options = PropskitOscillator.TYPES.map((type) => {
-      const selected = type.value === value ? " selected" : "";
-      return `<fig-select-option value="${type.value}" label="${type.name}"${selected}>
-        <span slot="prepend">${PropskitOscillator.waveIcon(type.value, 24)}</span>
+  #getWaveTypeMenuHTML(disabled, index) {
+    const items = PropskitOscillator.TYPES.map((type) => {
+      return `<fig-menu-item value="${type.value}">
+        ${PropskitOscillator.waveIcon(type.value, 24)}
         <span>${type.name}</span>
-      </fig-select-option>`;
+      </fig-menu-item>`;
     }).join("");
-    const indexAttr =
-      index === null ? "" : ` data-wave-index="${PropskitOscillator.#escapeAttribute(String(index))}"`;
-    return `<fig-select class="${className}" value="${value}" label="Add form"${indexAttr}${disabled}><fig-select-options>${options}</fig-select-options></fig-select>`;
+    const indexAttr = ` data-wave-index="${PropskitOscillator.#escapeAttribute(String(index))}"`;
+    return `<fig-menu class="propskit-oscillator-add-type" position="bottom right"${indexAttr}${disabled}>
+      <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-tooltip>
+      ${items}
+    </fig-menu>`;
   }
 
   #getNumberFieldHTML(index, name, label, min, max, step, units) {
     const disabled = this.#isDisabled() ? " disabled" : "";
+    const typeAttrs =
+      name === "amplitude" || name === "offset"
+        ? ' type="delta" default="0"'
+        : "";
     const unitsAttr = units
       ? ` units="${PropskitOscillator.#escapeAttribute(units)}"`
       : "";
     const wave = this.#waves[index] || PropskitOscillator.#defaultWave();
-    return `<propskit-slider class="propskit-oscillator-field" label="${label}" direction="horizontal" name="${name}" data-wave-index="${index}" value="${this.#round(wave[name])}" min="${min}" max="${max}" step="${step}" precision="${this.#precision}" elastic="false"${unitsAttr}${disabled}></propskit-slider>`;
+    return `<propskit-slider class="propskit-oscillator-field" label="${label}" direction="horizontal" name="${name}" data-wave-index="${index}" value="${this.#round(wave[name])}" min="${min}" max="${max}" step="${step}" precision="${this.#precision}" elastic="false"${typeAttrs}${unitsAttr}${disabled}></propskit-slider>`;
   }
 
   #cacheRefs() {
@@ -4297,7 +4538,7 @@ class PropskitOscillator extends HTMLElement {
         if (this.#isDisabled()) return;
         const insertAfter = this.#indexFromElement(control);
         const insertIndex = insertAfter + 1;
-        const type = this.#normalizeType(event.detail ?? control.value);
+        const type = this.#normalizeType(event.detail?.value ?? control.value);
         this.#waves.splice(insertIndex, 0, PropskitOscillator.#defaultWave(type));
         this.#reindexExpandedWavesAfterInsert(insertIndex);
         this.#activeWaveIndex = insertIndex;