@rogieking/figui3 4.4.4 → 4.5.3

package/fig.js

@@ -3162,6 +3162,15 @@ class FigOptions extends HTMLElement {
   #childControl = null;
   #suppressEvents = false;
 
+  #normalizeChildEventValue(e) {
+    const detailValue = e?.detail;
+    if (typeof detailValue === "string") return detailValue;
+    const fallbackValue =
+      e?.currentTarget?.value ?? e?.target?.value ?? this.getAttribute("value");
+    if (fallbackValue === null || fallbackValue === undefined) return null;
+    return String(fallbackValue);
+  }
+
   connectedCallback() {
     this.#parseOptions();
     this.#renderSegments();
@@ -3252,7 +3261,6 @@ class FigOptions extends HTMLElement {
     if (this.hasAttribute("full")) sc.setAttribute("full", "");
 
     const currentValue = this.getAttribute("value");
-    let hasSelection = false;
 
     for (const opt of this.#parsedOptions) {
       const seg = document.createElement("fig-segment");
@@ -3260,7 +3268,6 @@ class FigOptions extends HTMLElement {
       seg.textContent = opt;
       if (currentValue === opt) {
         seg.setAttribute("selected", "true");
-        hasSelection = true;
       }
       sc.appendChild(seg);
     }
@@ -3268,18 +3275,32 @@ class FigOptions extends HTMLElement {
     if (currentValue) sc.setAttribute("value", currentValue);
 
     sc.addEventListener("input", (e) => {
+      e.stopPropagation();
       if (this.#suppressEvents) return;
+      const nextValue = this.#normalizeChildEventValue(e);
+      if (nextValue === null) return;
       this.#suppressEvents = true;
-      this.setAttribute("value", e.detail);
+      this.setAttribute("value", nextValue);
       this.#suppressEvents = false;
       this.dispatchEvent(
-        new CustomEvent("input", { detail: e.detail, bubbles: true }),
+        new CustomEvent("input", {
+          detail: nextValue,
+          bubbles: true,
+          composed: true,
+        }),
       );
     });
     sc.addEventListener("change", (e) => {
+      e.stopPropagation();
       if (this.#suppressEvents) return;
+      const nextValue = this.#normalizeChildEventValue(e);
+      if (nextValue === null) return;
       this.dispatchEvent(
-        new CustomEvent("change", { detail: e.detail, bubbles: true }),
+        new CustomEvent("change", {
+          detail: nextValue,
+          bubbles: true,
+          composed: true,
+        }),
       );
     });
 
@@ -3308,18 +3329,32 @@ class FigOptions extends HTMLElement {
     if (currentValue) dd.setAttribute("value", currentValue);
 
     dd.addEventListener("input", (e) => {
+      e.stopPropagation();
       if (this.#suppressEvents) return;
+      const nextValue = this.#normalizeChildEventValue(e);
+      if (!nextValue) return;
       this.#suppressEvents = true;
-      this.setAttribute("value", e.detail);
+      this.setAttribute("value", nextValue);
       this.#suppressEvents = false;
       this.dispatchEvent(
-        new CustomEvent("input", { detail: e.detail, bubbles: true }),
+        new CustomEvent("input", {
+          detail: nextValue,
+          bubbles: true,
+          composed: true,
+        }),
       );
     });
     dd.addEventListener("change", (e) => {
+      e.stopPropagation();
       if (this.#suppressEvents) return;
+      const nextValue = this.#normalizeChildEventValue(e);
+      if (!nextValue) return;
       this.dispatchEvent(
-        new CustomEvent("change", { detail: e.detail, bubbles: true }),
+        new CustomEvent("change", {
+          detail: nextValue,
+          bubbles: true,
+          composed: true,
+        }),
       );
     });
 
@@ -4175,6 +4210,7 @@ customElements.define("fig-input-text", FigInputText);
  * @attr {number} step - Step increment
  * @attr {number} transform - A multiplier for displayed number values
  * @attr {string} units - Unit string to append/prepend to displayed value (e.g., "%", "°", "$")
+ * @attr {string} units-disallow - Comma-separated units to disallow (defaults to "px")
  * @attr {string} unit-position - Position of unit: "suffix" (default) or "prefix"
  * @attr {string} name - Form field name
  */
@@ -4189,10 +4225,31 @@ class FigInputNumber extends HTMLElement {
   #boundBlur;
   #boundKeyDown;
   #units;
+  #rawUnits;
+  #unitsDisallow;
   #unitPosition;
   #precision;
   #isInteracting = false;
   #stepperEl = null;
+  static #DEFAULT_UNITS_DISALLOW = "px";
+
+  #parseUnitsDisallowList(value) {
+    return (value || "")
+      .split(",")
+      .map((unit) => unit.trim().toLowerCase())
+      .filter(Boolean);
+  }
+
+  #resolveUnits(rawUnits) {
+    const unit = (rawUnits || "").trim();
+    if (!unit) return "";
+    const disallowList = this.#unitsDisallow ?? [];
+    return disallowList.includes(unit.toLowerCase()) ? "" : unit;
+  }
+
+  #setUnitsFromAttributes() {
+    this.#units = this.#resolveUnits(this.#rawUnits);
+  }
 
   #syncSteppers(hasSteppers) {
     if (hasSteppers && !this.#stepperEl) {
@@ -4266,7 +4323,14 @@ class FigInputNumber extends HTMLElement {
       valueAttr !== null && valueAttr !== "" ? Number(valueAttr) : "";
     this.placeholder = this.getAttribute("placeholder") || "";
     this.name = this.getAttribute("name") || null;
-    this.#units = this.getAttribute("units") || "";
+    this.#rawUnits = this.getAttribute("units") || "";
+    const unitsDisallowAttr = this.getAttribute("units-disallow");
+    this.#unitsDisallow = this.#parseUnitsDisallowList(
+      unitsDisallowAttr === null
+        ? FigInputNumber.#DEFAULT_UNITS_DISALLOW
+        : unitsDisallowAttr,
+    );
+    this.#setUnitsFromAttributes();
     this.#unitPosition = this.getAttribute("unit-position") || "suffix";
     this.#precision = this.hasAttribute("precision")
       ? Number(this.getAttribute("precision"))
@@ -4587,6 +4651,7 @@ class FigInputNumber extends HTMLElement {
       "transform",
       "name",
       "units",
+      "units-disallow",
       "unit-position",
       "steppers",
       "precision",
@@ -4601,7 +4666,17 @@ class FigInputNumber extends HTMLElement {
             newValue !== null && newValue !== "false";
           break;
         case "units":
-          this.#units = newValue || "";
+          this.#rawUnits = newValue || "";
+          this.#setUnitsFromAttributes();
+          this.input.value = this.#formatWithUnit(this.value);
+          break;
+        case "units-disallow":
+          this.#unitsDisallow = this.#parseUnitsDisallowList(
+            newValue === null
+              ? FigInputNumber.#DEFAULT_UNITS_DISALLOW
+              : newValue,
+          );
+          this.#setUnitsFromAttributes();
           this.input.value = this.#formatWithUnit(this.value);
           break;
         case "unit-position":
@@ -11584,13 +11659,6 @@ class FigFillPicker extends HTMLElement {
     const showAlpha = this.getAttribute("alpha") !== "false";
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? `experimental="${experimental}"` : "";
-    const savedMode = localStorage.getItem("figui-color-input-mode");
-    if (
-      savedMode &&
-      ["hex", "rgb", "hsl", "hsb", "lab", "lch"].includes(savedMode)
-    ) {
-      this.#colorInputMode = savedMode;
-    }
 
     container.innerHTML = `
       <fig-preview class="fig-fill-picker-color-area">
@@ -11669,7 +11737,6 @@ class FigFillPicker extends HTMLElement {
     const modeDropdown = container.querySelector(".fig-fill-picker-input-mode");
     modeDropdown.addEventListener("input", (e) => {
       this.#colorInputMode = e.target.value;
-      localStorage.setItem("figui-color-input-mode", this.#colorInputMode);
       this.#rebuildColorInputFields();
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "4.4.4",
+  "version": "4.5.3",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "dev": "bun --hot server.ts",
     "build": "bun build fig.js --minify --outdir dist && npm run build:css",
     "build:css": "lightningcss --minify --nesting --bundle fig.css -o dist/fig.css && lightningcss --minify --nesting --bundle components.css -o dist/components.css && lightningcss --minify --nesting base.css -o dist/base.css",
-    "dev:playground": "cd playground && npm run dev",
+    "dev:playground": "node playground/dev.mjs",
     "build:playground": "cd playground && npm run build"
   },
   "repository": {