@rogieking/figui3 2.36.0 → 2.38.0

package/fig.js

@@ -2357,6 +2357,7 @@ customElements.define("fig-segmented-control", FigSegmentedControl);
  * @attr {number} max - The maximum value
  * @attr {number} step - The step increment
  * @attr {boolean} text - Whether to show a text input alongside the slider
+ * @attr {string} placeholder - Placeholder for the number input when text is enabled
  * @attr {string} units - The units to display after the value
  * @attr {number} transform - A multiplier for the displayed value
  * @attr {boolean} disabled - Whether the slider is disabled
@@ -2364,6 +2365,7 @@ customElements.define("fig-segmented-control", FigSegmentedControl);
  */
 class FigSlider extends HTMLElement {
   #isInteracting = false;
+  #showEmptyTextValue = false;
   // Private fields declarations
   #typeDefaults = {
     range: { min: 0, max: 100, step: 1 },
@@ -2405,7 +2407,7 @@ class FigSlider extends HTMLElement {
   }
 
   #regenerateInnerHTML() {
-    this.value = Number(this.getAttribute("value") || 0);
+    const rawValue = this.getAttribute("value");
     this.type = this.getAttribute("type") || "range";
     this.variant = this.getAttribute("variant") || "default";
     this.text =
@@ -2416,13 +2418,25 @@ class FigSlider extends HTMLElement {
     this.precision = this.hasAttribute("precision")
       ? Number(this.getAttribute("precision"))
       : null;
+    this.placeholder =
+      this.getAttribute("placeholder") !== null
+        ? this.getAttribute("placeholder")
+        : "##";
 
     const defaults = this.#typeDefaults[this.type];
     this.min = Number(this.getAttribute("min") || defaults.min);
     this.max = Number(this.getAttribute("max") || defaults.max);
     this.step = Number(this.getAttribute("step") || defaults.step);
     this.color = this.getAttribute("color") || defaults?.color;
-    this.default = this.getAttribute("default") || this.min;
+    this.default = this.hasAttribute("default")
+      ? this.getAttribute("default")
+      : this.type === "delta"
+        ? 0
+        : this.min;
+    this.#showEmptyTextValue =
+      rawValue === null ||
+      (typeof rawValue === "string" && rawValue.trim() === "");
+    this.value = this.#normalizeSliderValue(rawValue);
 
     if (this.color) {
       this.style.setProperty("--color", this.color);
@@ -2447,12 +2461,12 @@ class FigSlider extends HTMLElement {
     if (this.text) {
       html = `${slider}
                     <fig-input-number
-                        placeholder="##"
+                        placeholder="${this.placeholder}"
                         min="${this.min}"
                         max="${this.max}"
                         transform="${this.transform}"
                         step="${this.step}"
-                        value="${this.value}"
+                        value="${this.#showEmptyTextValue ? "" : this.value}"
                         ${this.units ? `units="${this.units}"` : ""}
                         ${this.precision !== null ? `precision="${this.precision}"` : ""}>
                     </fig-input-number>`;
@@ -2566,17 +2580,59 @@ class FigSlider extends HTMLElement {
 
   #handleTextInput() {
     if (this.figInputNumber) {
-      this.value = this.input.value = this.figInputNumber.value;
-      this.#syncProperties();
+      const rawTextValue = this.figInputNumber.value;
+      this.#showEmptyTextValue =
+        rawTextValue === null ||
+        rawTextValue === undefined ||
+        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
+      const normalized = this.#normalizeSliderValue(rawTextValue);
+      this.value = normalized;
+      this.input.value = String(normalized);
+      this.#syncValue();
       this.dispatchEvent(
         new CustomEvent("input", { detail: this.value, bubbles: true }),
       );
     }
   }
   #calculateNormal(value) {
-    let min = Number(this.min);
-    let max = Number(this.max);
-    return (Number(value) - min) / (max - min);
+    const { min, max } = this.#getBounds();
+    const range = max - min;
+    if (range === 0) return 0;
+    return (Number(value) - min) / range;
+  }
+  #toFiniteNumber(value) {
+    if (value === null || value === undefined) return null;
+    if (typeof value === "string" && value.trim() === "") return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  #getBounds() {
+    let min = this.#toFiniteNumber(this.min);
+    let max = this.#toFiniteNumber(this.max);
+    if (min === null) min = 0;
+    if (max === null) max = min;
+    if (min > max) {
+      [min, max] = [max, min];
+    }
+    return { min, max };
+  }
+  #clampToBounds(value) {
+    const { min, max } = this.#getBounds();
+    return Math.min(max, Math.max(min, value));
+  }
+  #getFallbackValue() {
+    if (this.type === "delta") {
+      const deltaDefault = this.#toFiniteNumber(this.default);
+      if (deltaDefault !== null) return this.#clampToBounds(deltaDefault);
+      return this.#clampToBounds(0);
+    }
+    const { min } = this.#getBounds();
+    return min;
+  }
+  #normalizeSliderValue(rawValue) {
+    const parsed = this.#toFiniteNumber(rawValue);
+    if (parsed === null) return this.#getFallbackValue();
+    return this.#clampToBounds(parsed);
   }
   #syncProperties() {
     let complete = this.#calculateNormal(this.value);
@@ -2592,11 +2648,15 @@ class FigSlider extends HTMLElement {
     // Update ARIA value
     this.input.setAttribute("aria-valuenow", val);
     if (this.figInputNumber) {
-      this.figInputNumber.setAttribute("value", val);
+      this.figInputNumber.setAttribute(
+        "value",
+        this.#showEmptyTextValue ? "" : val,
+      );
     }
   }
 
   #handleInput() {
+    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
@@ -2605,6 +2665,7 @@ class FigSlider extends HTMLElement {
 
   #handleChange() {
     this.#isInteracting = false;
+    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("change", { detail: this.value, bubbles: true }),
@@ -2613,8 +2674,15 @@ class FigSlider extends HTMLElement {
 
   #handleTextChange() {
     if (this.figInputNumber) {
-      this.value = this.input.value = this.figInputNumber.value;
-      this.#syncProperties();
+      const rawTextValue = this.figInputNumber.value;
+      this.#showEmptyTextValue =
+        rawTextValue === null ||
+        rawTextValue === undefined ||
+        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
+      const normalized = this.#normalizeSliderValue(rawTextValue);
+      this.value = normalized;
+      this.input.value = String(normalized);
+      this.#syncValue();
       this.dispatchEvent(
         new CustomEvent("change", { detail: this.value, bubbles: true }),
       );
@@ -2634,6 +2702,7 @@ class FigSlider extends HTMLElement {
       "units",
       "transform",
       "text",
+      "placeholder",
       "default",
       "precision",
     ];
@@ -2660,11 +2729,17 @@ class FigSlider extends HTMLElement {
           break;
         case "value":
           if (this.#isInteracting) break;
-          this.value = newValue;
-          this.input.value = newValue;
-          this.#syncProperties();
+          this.#showEmptyTextValue =
+            newValue === null ||
+            (typeof newValue === "string" && newValue.trim() === "");
+          this.value = this.#normalizeSliderValue(newValue);
+          this.input.value = String(this.value);
+          this.#syncValue();
           if (this.figInputNumber) {
-            this.figInputNumber.setAttribute("value", newValue);
+            this.figInputNumber.setAttribute(
+              "value",
+              this.#showEmptyTextValue ? "" : this.value,
+            );
           }
           break;
         case "transform":
@@ -2683,8 +2758,19 @@ class FigSlider extends HTMLElement {
             }
           }
           break;
+        case "placeholder":
+          this.placeholder = newValue !== null ? newValue : "##";
+          if (this.figInputNumber) {
+            this.figInputNumber.setAttribute("placeholder", this.placeholder);
+          }
+          break;
         case "default":
-          this.default = newValue;
+          this.default =
+            newValue !== null
+              ? newValue
+              : this.type === "delta"
+                ? 0
+                : this.min;
           this.#syncProperties();
           break;
         case "min":
@@ -6772,6 +6858,460 @@ class Fig3DRotate extends HTMLElement {
 }
 customElements.define("fig-3d-rotate", Fig3DRotate);
 
+/**
+ * A transform-origin grid control with draggable handle.
+ * @attr {string} value - CSS transform-origin pair, e.g. "50% 50%".
+ * @attr {number} precision - Decimal places for percentage output (default 0).
+ * @attr {boolean} drag - Enable handle dragging (default true).
+ * @attr {boolean} fields - Show X/Y percentage fields when present/true (default false).
+ */
+class FigOriginGrid extends HTMLElement {
+  #x = 50;
+  #y = 50;
+  #precision = 0;
+  #grid = null;
+  #cells = [];
+  #handle = null;
+  #xInput = null;
+  #yInput = null;
+  #isDragging = false;
+  #isSyncingValueAttr = false;
+  #activePointerId = null;
+  #boundHandlePointerMove = null;
+  #boundHandlePointerEnd = null;
+
+  static SNAP_POINTS = [0, 16.6667, 33.3333, 50, 66.6667, 83.3333, 100];
+
+  static get observedAttributes() {
+    return ["value", "precision", "aspect-ratio", "drag", "fields"];
+  }
+
+  connectedCallback() {
+    this.#precision = parseInt(this.getAttribute("precision") || "0");
+    this.#syncAspectRatioVar(this.getAttribute("aspect-ratio"));
+    this.#applyIncomingValue(this.getAttribute("value"));
+
+    this.#render();
+    this.#syncDragState();
+    this.#syncValueAttribute();
+  }
+
+  disconnectedCallback() {
+    this.#isDragging = false;
+    this.#detachHandleDragListeners();
+  }
+
+  get value() {
+    const p = this.#precision;
+    return `${this.#x.toFixed(p)}% ${this.#y.toFixed(p)}%`;
+  }
+
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "aspect-ratio") {
+      this.#syncAspectRatioVar(newValue);
+      return;
+    }
+    if (name === "drag") {
+      this.#syncDragState();
+      return;
+    }
+    if (name === "fields") {
+      this.#render();
+      this.#syncDragState();
+      this.#syncValueAttribute();
+      return;
+    }
+    if (name === "precision") {
+      this.#precision = parseInt(newValue || "0");
+      this.#syncValueInputs();
+      this.#syncValueAttribute();
+      return;
+    }
+    if (name === "value") {
+      if (this.#isSyncingValueAttr || this.#isDragging) return;
+      this.#applyIncomingValue(newValue);
+      this.#syncHandlePosition();
+      this.#syncOverflowState();
+      this.#syncValueInputs();
+    }
+  }
+
+  get #dragEnabled() {
+    const attr = this.getAttribute("drag");
+    return attr === null || attr.toLowerCase() !== "false";
+  }
+
+  get #fieldsEnabled() {
+    const attr = this.getAttribute("fields");
+    if (attr === null) return false;
+    return attr.toLowerCase() !== "false";
+  }
+
+  #syncAspectRatioVar(value) {
+    if (value && value.trim()) {
+      this.style.setProperty("--aspect-ratio", value.trim());
+    } else {
+      this.style.removeProperty("--aspect-ratio");
+    }
+  }
+
+  #syncDragState() {
+    if (!this.#grid) return;
+    this.#grid.classList.toggle("drag-disabled", !this.#dragEnabled);
+  }
+
+  #clampPercentage(value) {
+    return Math.max(0, Math.min(100, value));
+  }
+
+  #parseAxisValue(raw, axis) {
+    const token = (raw || "").trim().toLowerCase();
+    if (!token) return axis === "x" ? this.#x : this.#y;
+
+    const keywordMap =
+      axis === "x"
+        ? { left: 0, center: 50, right: 100 }
+        : { top: 0, center: 50, bottom: 100 };
+    if (token in keywordMap) return keywordMap[token];
+
+    const numeric = Number.parseFloat(token.replace("%", ""));
+    if (Number.isFinite(numeric)) return numeric;
+
+    return axis === "x" ? this.#x : this.#y;
+  }
+
+  #parseValue(value) {
+    const parts = value
+      .trim()
+      .replace(/,/g, " ")
+      .split(/\s+/)
+      .filter(Boolean);
+    if (parts.length < 1) return;
+
+    if (parts.length === 1) {
+      const same = this.#parseAxisValue(parts[0], "x");
+      this.#x = same;
+      this.#y = same;
+      return;
+    }
+
+    this.#x = this.#parseAxisValue(parts[0], "x");
+    this.#y = this.#parseAxisValue(parts[1], "y");
+  }
+
+  #applyIncomingValue(value) {
+    const normalized = typeof value === "string" ? value.trim() : "";
+    if (!normalized) {
+      this.#x = 50;
+      this.#y = 50;
+      return;
+    }
+    this.#parseValue(normalized);
+  }
+
+  #render() {
+    const cells = Array.from({ length: 9 }, (_, index) => {
+      const col = index % 3;
+      const row = Math.floor(index / 3);
+      return `<span class="origin-grid-cell" data-col="${col}" data-row="${row}">
+        <span class="origin-grid-dot"></span>
+      </span>`;
+    }).join("");
+
+    const xValue = this.#x.toFixed(this.#precision);
+    const yValue = this.#y.toFixed(this.#precision);
+    const fieldsMarkup = this.#fieldsEnabled
+      ? `<div class="origin-values">
+      <fig-input-number name="x" value="${xValue}" step="1" units="%"><span slot="prepend">X</span></fig-input-number>
+      <fig-input-number name="y" value="${yValue}" step="1" units="%"><span slot="prepend">Y</span></fig-input-number>
+    </div>`
+      : "";
+
+    this.innerHTML = `<div class="fig-origin-grid-surface">
+      <div class="origin-grid" aria-label="Transform origin grid">
+        <div class="origin-grid-cells">${cells}</div>
+        <span class="origin-grid-handle"></span>
+      </div>
+    </div>
+    ${fieldsMarkup}`;
+
+    this.#grid = this.querySelector(".origin-grid");
+    this.#cells = Array.from(this.querySelectorAll(".origin-grid-cell"));
+    this.#handle = this.querySelector(".origin-grid-handle");
+    this.#xInput = this.querySelector('fig-input-number[name="x"]');
+    this.#yInput = this.querySelector('fig-input-number[name="y"]');
+    this.#syncHandlePosition();
+    this.#syncOverflowState();
+    this.#syncValueInputs();
+    this.#setupEvents();
+  }
+
+  #syncValueInputs() {
+    const xValue = this.#x.toFixed(this.#precision);
+    const yValue = this.#y.toFixed(this.#precision);
+    if (this.#xInput) {
+      this.#xInput.setAttribute("value", xValue);
+    }
+    if (this.#yInput) {
+      this.#yInput.setAttribute("value", yValue);
+    }
+  }
+
+  #syncValueAttribute() {
+    const next = this.value;
+    if (this.getAttribute("value") === next) return;
+    this.#isSyncingValueAttr = true;
+    this.setAttribute("value", next);
+    this.#isSyncingValueAttr = false;
+  }
+
+  #emit(type) {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        detail: {
+          value: this.value,
+          x: this.#x,
+          y: this.#y,
+        },
+      }),
+    );
+  }
+
+  #syncHandlePosition() {
+    if (!this.#handle) return;
+    // Constrain draggable visual bounds to the 3x3 dot centers.
+    const toVisual = (value) => 16.6667 + (this.#clampPercentage(value) / 100) * 66.6667;
+    this.#handle.style.left = `${toVisual(this.#x)}%`;
+    this.#handle.style.top = `${toVisual(this.#y)}%`;
+  }
+
+  #syncOverflowState() {
+    if (!this.#handle) return;
+    const overflowX = this.#x < 0 || this.#x > 100;
+    const overflowY = this.#y < 0 || this.#y > 100;
+    const overflowLeft = this.#x < 0;
+    const overflowRight = this.#x > 100;
+    const overflowUp = this.#y < 0;
+    const overflowDown = this.#y > 100;
+
+    this.#handle.classList.toggle("beyond-bounds-x", overflowX);
+    this.#handle.classList.toggle("beyond-bounds-y", overflowY);
+    this.#handle.classList.toggle("overflow-left", overflowLeft);
+    this.#handle.classList.toggle("overflow-right", overflowRight);
+    this.#handle.classList.toggle("overflow-up", overflowUp);
+    this.#handle.classList.toggle("overflow-down", overflowDown);
+  }
+
+  #gridCellFromClient(clientX, clientY) {
+    if (!this.#grid) return null;
+    const rect = this.#grid.getBoundingClientRect();
+    const nx = (clientX - rect.left) / Math.max(rect.width, 1);
+    const ny = (clientY - rect.top) / Math.max(rect.height, 1);
+    if (nx < 0 || nx > 1 || ny < 0 || ny > 1) return null;
+    const col = Math.max(0, Math.min(2, Math.floor(nx * 3)));
+    const row = Math.max(0, Math.min(2, Math.floor(ny * 3)));
+    return this.#cells.find(
+      (cell) =>
+        Number(cell.getAttribute("data-col")) === col &&
+        Number(cell.getAttribute("data-row")) === row,
+    );
+  }
+
+  #clearHoveredCells() {
+    for (const cell of this.#cells) {
+      cell.classList.remove("is-hovered");
+    }
+  }
+
+  #setHoveredCell(cell) {
+    this.#clearHoveredCells();
+    if (cell) cell.classList.add("is-hovered");
+  }
+
+  #setFromPercent(x, y, eventType) {
+    const nextX = Number(x);
+    const nextY = Number(y);
+    if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) return;
+    if (nextX === this.#x && nextY === this.#y && eventType === "input") return;
+
+    this.#x = nextX;
+    this.#y = nextY;
+    this.#syncHandlePosition();
+    this.#syncOverflowState();
+    this.#syncValueInputs();
+    this.#syncValueAttribute();
+    this.#emit(eventType);
+  }
+
+  #clientToPercent(clientX, clientY) {
+    if (!this.#grid) return { x: this.#x, y: this.#y };
+    const rect = this.#grid.getBoundingClientRect();
+    const insetX = rect.width / 6;
+    const insetY = rect.height / 6;
+    const usableWidth = Math.max(1, rect.width - insetX * 2);
+    const usableHeight = Math.max(1, rect.height - insetY * 2);
+    const nx = (clientX - (rect.left + insetX)) / usableWidth;
+    const ny = (clientY - (rect.top + insetY)) / usableHeight;
+    return {
+      x: nx * 100,
+      y: ny * 100,
+    };
+  }
+
+  #cellCenterFromClient(clientX, clientY) {
+    if (!this.#grid) return { x: 50, y: 50 };
+    const rect = this.#grid.getBoundingClientRect();
+    const colRaw = ((clientX - rect.left) / Math.max(rect.width, 1)) * 3;
+    const rowRaw = ((clientY - rect.top) / Math.max(rect.height, 1)) * 3;
+    const col = Math.max(0, Math.min(2, Math.floor(colRaw)));
+    const row = Math.max(0, Math.min(2, Math.floor(rowRaw)));
+    return {
+      x: col * 50,
+      y: row * 50,
+    };
+  }
+
+  #snapPercentage(value) {
+    const threshold = 2.5;
+    let closest = value;
+    let closestDistance = Infinity;
+    for (const point of FigOriginGrid.SNAP_POINTS) {
+      const distance = Math.abs(value - point);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closest = point;
+      }
+    }
+    return closestDistance <= threshold ? closest : value;
+  }
+
+  #maybeSnapPoint(point, shiftKey) {
+    if (!shiftKey) return point;
+    return {
+      x: this.#snapPercentage(point.x),
+      y: this.#snapPercentage(point.y),
+    };
+  }
+
+  #detachHandleDragListeners() {
+    if (!this.#grid || !this.#boundHandlePointerMove || !this.#boundHandlePointerEnd) return;
+    this.#grid.removeEventListener("pointermove", this.#boundHandlePointerMove);
+    this.#grid.removeEventListener("pointerup", this.#boundHandlePointerEnd);
+    this.#grid.removeEventListener("pointercancel", this.#boundHandlePointerEnd);
+    this.#grid.removeEventListener(
+      "lostpointercapture",
+      this.#boundHandlePointerEnd,
+    );
+    this.#boundHandlePointerMove = null;
+    this.#boundHandlePointerEnd = null;
+  }
+
+  #startGridDrag(e) {
+    if (!this.#grid || !this.#dragEnabled) return;
+    e.preventDefault();
+    this.#isDragging = true;
+    this.#activePointerId = e.pointerId;
+    const startClientX = e.clientX;
+    const startClientY = e.clientY;
+    const dragThresholdPx = 3;
+    let didDrag = false;
+    this.#grid.setPointerCapture(e.pointerId);
+
+    this.#boundHandlePointerMove = (moveEvent) => {
+      if (!this.#isDragging || moveEvent.pointerId !== this.#activePointerId) return;
+      const dx = moveEvent.clientX - startClientX;
+      const dy = moveEvent.clientY - startClientY;
+      const distance = Math.hypot(dx, dy);
+      if (!didDrag && distance < dragThresholdPx) return;
+      if (!didDrag) {
+        didDrag = true;
+        this.#grid.classList.add("is-dragging");
+        this.#clearHoveredCells();
+      }
+      const nextPoint = this.#maybeSnapPoint(
+        this.#clientToPercent(moveEvent.clientX, moveEvent.clientY),
+        moveEvent.shiftKey,
+      );
+      this.#setFromPercent(nextPoint.x, nextPoint.y, "input");
+    };
+
+    this.#boundHandlePointerEnd = (endEvent) => {
+      if (!this.#isDragging || endEvent.pointerId !== this.#activePointerId) return;
+      this.#isDragging = false;
+      this.#activePointerId = null;
+      this.#grid.classList.remove("is-dragging");
+      this.#clearHoveredCells();
+      this.#detachHandleDragListeners();
+      if (!didDrag) {
+        // Click behavior: snap to the center of the clicked cell.
+        const center = this.#cellCenterFromClient(startClientX, startClientY);
+        this.#setFromPercent(center.x, center.y, "input");
+      }
+      this.#emit("change");
+    };
+
+    this.#grid.addEventListener("pointermove", this.#boundHandlePointerMove);
+    this.#grid.addEventListener("pointerup", this.#boundHandlePointerEnd);
+    this.#grid.addEventListener("pointercancel", this.#boundHandlePointerEnd);
+    this.#grid.addEventListener("lostpointercapture", this.#boundHandlePointerEnd);
+  }
+
+  #setupEvents() {
+    if (!this.#grid || !this.#handle) return;
+
+    this.#grid.addEventListener("pointerdown", (e) => {
+      const hovered = this.#gridCellFromClient(e.clientX, e.clientY);
+      this.#setHoveredCell(hovered);
+
+      if (this.#dragEnabled) {
+        this.#startGridDrag(e);
+        return;
+      }
+
+      const center = this.#cellCenterFromClient(e.clientX, e.clientY);
+      this.#setFromPercent(center.x, center.y, "input");
+      this.#emit("change");
+    });
+
+    this.#grid.addEventListener("pointermove", (e) => {
+      if (this.#isDragging) return;
+      const hovered = this.#gridCellFromClient(e.clientX, e.clientY);
+      this.#setHoveredCell(hovered);
+    });
+
+    this.#grid.addEventListener("pointerleave", () => {
+      this.#clearHoveredCells();
+    });
+
+    const bindValueInput = (inputEl, axis) => {
+      if (!inputEl) return;
+      const handle = (e) => {
+        const next = Number.parseFloat(e.target.value);
+        if (!Number.isFinite(next)) return;
+        if (axis === "x") {
+          this.#setFromPercent(next, this.#y, "input");
+        } else {
+          this.#setFromPercent(this.#x, next, "input");
+        }
+      };
+      inputEl.addEventListener("input", handle);
+      inputEl.addEventListener("change", handle);
+      inputEl.addEventListener("focusout", () => {
+        this.#emit("change");
+      });
+    };
+
+    bindValueInput(this.#xInput, "x");
+    bindValueInput(this.#yInput, "y");
+  }
+}
+customElements.define("fig-origin-grid", FigOriginGrid);
+
 /**
  * A custom joystick input element.
  * @attr {string} value - The current position of the joystick (e.g., "0.5,0.5").

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.36.0",
+  "version": "2.38.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",