@rogieking/figui3 6.9.8 → 6.10.0

package/fig-lab.css

@@ -9,23 +9,37 @@
  */
 
 fig-field-slider {
-  --fig-field-slider-elastic-distance: var(--spacer-2);
+  --fig-field-slider-elastic-distance: calc(var(--spacer-2) + 0.25rem);
   --fig-field-slider-elastic-size: 0px;
-  --fig-field-slider-elastic-position-offset: 0px;
-  --fig-field-slider-elastic-transition: 0.1s ease-out;
+  --fig-field-slider-elastic-scale: 1;
+  --fig-field-slider-elastic-origin: left center;
+  --fig-field-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
   --fig-field-slider-height: 2rem;
+  --fig-field-slider-vertical-padding: var(--spacer-1);
+  --fig-field-slider-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
   --fig-field-slider-progress-shadow: inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
   --field-text-shadow: 0 1px 1.5px
     light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+  --fig-field-slider-fig-slider-height: calc(var(--fig-field-slider-height) - var(--fig-field-slider-vertical-padding) * 2);
+  --fig-field-slider-fig-slider-thumb-height: calc(var(--fig-field-slider-fig-slider-height) - var(--spacer-2-5));
+
   display: block;
   position: relative;
   width: 100%;
   height: var(--fig-field-slider-height);
   border-radius: var(--radius-medium);
-  transition:
-    width var(--fig-field-slider-elastic-transition),
-    transform var(--fig-field-slider-elastic-transition);
+  transform-origin: var(--fig-field-slider-elastic-origin);
+  transition: transform var(--fig-field-slider-elastic-transition);
+  padding-top: var(--fig-field-slider-vertical-padding);
+  padding-bottom: var(--fig-field-slider-vertical-padding);
+  padding-left: var(--fig-field-slider-horizontal-padding);
+  padding-right: var(--fig-field-slider-horizontal-padding);
+
+  &[size="large"]{
+    --fig-field-slider-vertical-padding: 0px;
+    --fig-field-slider-fig-slider-thumb-height: calc(var(--fig-field-slider-fig-slider-height) - var(--spacer-3));
+  }
   
   label {
     pointer-events: none;
@@ -57,7 +71,7 @@ fig-field-slider {
 
   fig-field:not([direction="vertical"]) {
     position: relative;
-    padding-left: var(--spacer-2-5);
+    padding-left: var(--spacer-2);
     display: flex;
     height: 100%;
 
@@ -83,8 +97,8 @@ fig-field-slider {
       inset: 0;
       padding: 0;
       background-color: transparent;
-      --slider-height: 2rem;
-      --slider-field-height: 2rem;
+      --slider-height: var(--fig-field-slider-fig-slider-height);
+      --slider-field-height: calc(var(--fig-field-slider-height) - var(--fig-field-slider-vertical-padding) * 2);
       --slider-thumb-width: var(--spacer-1);
       --slider-thumb-color: light-dark(
         var(--figma-color-text-secondary),
@@ -94,7 +108,7 @@ fig-field-slider {
         var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) *
           min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
       );*/
-      --slider-thumb-height: calc(var(--slider-height) - var(--spacer-3));
+      --slider-thumb-height: var(--fig-field-slider-fig-slider-thumb-height);
       --slider-border-radius: var(--radius-medium);
       --slider-tick-width: 0.125rem;
       --slider-tick-height: var(--spacer-2);
@@ -317,8 +331,7 @@ fig-field-slider {
   }
 
   &[data-elastic-dragging="true"] {
-    width: calc(100% + var(--fig-field-slider-elastic-size));
-    transform: translateX(var(--fig-field-slider-elastic-position-offset));
+    transform: scaleX(var(--fig-field-slider-elastic-scale));
     transition: none;
   }
 }
@@ -540,10 +553,18 @@ fig-input-oscillator {
 
   .fig-input-oscillator-svg-container {
     border-radius: var(--radius-medium);
-    background: var(--figma-color-bg-secondary);
-    padding: var(--spacer-3) var(--spacer-2);
+    padding: var(--spacer-3) var(--spacer-5);
     margin-bottom: var(--spacer-2);
     overflow: hidden;
+    position: relative;
+
+    &::before{
+      position: absolute;
+      inset: 0 var(--spacer-3);
+      content: "";
+      background: var(--figma-color-bg-secondary);
+      border-radius: var(--radius-medium);
+    }
 
     &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
       overflow: visible;
@@ -558,6 +579,8 @@ fig-input-oscillator {
     width: 100%;
     aspect-ratio: var(--aspect-ratio);
     overflow: visible;
+    position: relative;
+    z-index: 1;
 
     .fig-input-oscillator-handle{
       opacity: 0;
@@ -616,56 +639,31 @@ fig-input-oscillator {
   .fig-input-oscillator-waves {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-2);
+    gap: 0;
   }
 
   .fig-input-oscillator-wave {
-    padding: 0;
-
-    > .fig-input-oscillator-wave-summary {
-      min-height: var(--control-height);
-      padding: 0;
-
-      > label {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--spacer-1);
-        min-width: 0;
+    margin-bottom: 0;
 
-        > svg {
-          flex: 0 0 auto;
-        }
-      }
-
-      > .fig-input-oscillator-remove-button {
-        margin-left: auto;
+    > fig-header {
+      .fig-input-oscillator-remove-button,
+      .fig-input-oscillator-add-type-button {
+        flex-shrink: 0;
       }
     }
   }
 
   .fig-input-oscillator-field {
-    --fig-field-left-padding: 0;
-    --fig-field-right-padding: 0;
-
-    > fig-slider {
-      min-width: 0;
-    }
-  }
-
-  .fig-input-oscillator-add-wave {
-    display: grid;
-    grid-template-columns: auto;
-    justify-content: end;
     width: 100%;
+  }
 
-    > fig-button[type="select"] {
-      > fig-dropdown,
-      > fig-dropdown > select {
-        width: 100%;
-        height: 100%;
-        min-width: 100%;
-        padding: 0;
-      }
+  .fig-input-oscillator-add-type-button {
+    > fig-dropdown,
+    > fig-dropdown > select {
+      width: 100%;
+      height: 100%;
+      min-width: 100%;
+      padding: 0;
     }
   }
 

package/fig-lab.js

@@ -25,6 +25,8 @@ class FigFieldSlider extends HTMLElement {
   #isElasticTracking = false;
   #elasticMaxPx = 0;
   #elasticRangeRect = null;
+  #elasticHostWidth = 0;
+  #elasticPointerId = null;
   #boundHandleSliderInput = null;
   #boundHandleSliderChange = null;
   #boundHandleElasticPointerDown = this.#handleElasticPointerDown.bind(this);
@@ -38,6 +40,12 @@ class FigFieldSlider extends HTMLElement {
     "color",
     "text",
     "full",
+    "elastic",
+    "size",
+    "name",
+    "class",
+    "data-wave-index",
+    "data-active",
     "data-elastic-dragging",
     "style",
   ]);
@@ -111,6 +119,7 @@ class FigFieldSlider extends HTMLElement {
       this.#focusSyncFrame = 0;
     }
     this.#clearPendingClick();
+    this.#stopElasticTracking();
     this.#resetElasticPull();
     this.#unbindRangeInput();
     this.#unbindSliderEvents();
@@ -323,19 +332,25 @@ class FigFieldSlider extends HTMLElement {
 
   #handleElasticPointerDown(event) {
     if (event.button !== 0 || this.hasAttribute("disabled")) return;
+    if (this.getAttribute("elastic") === "false") return;
     if (event.target?.closest?.("fig-input-number")) return;
     const rangeInput =
       this.#slider?.querySelector('input[type="range"]') ?? this.#rangeInput;
     if (!rangeInput) return;
+    this.#stopElasticTracking();
+    this.#resetElasticPull();
     this.#rangeInput = rangeInput;
     this.#isElasticTracking = true;
+    this.#elasticPointerId = event.pointerId;
     this.#elasticMaxPx = this.#readElasticDistance();
     const rect = rangeInput.getBoundingClientRect();
+    const hostRect = this.getBoundingClientRect();
     this.#elasticRangeRect = {
       left: rect.left,
       right: rect.right,
       width: rect.width,
     };
+    this.#elasticHostWidth = hostRect.width;
     window.addEventListener("pointermove", this.#boundHandleElasticPointerMove, {
       passive: true,
     });
@@ -345,19 +360,40 @@ class FigFieldSlider extends HTMLElement {
     window.addEventListener("pointercancel", this.#boundHandleElasticPointerEnd, {
       once: true,
     });
+    window.addEventListener("blur", this.#boundHandleElasticPointerEnd, {
+      once: true,
+    });
   }
 
   #handleElasticPointerMove(event) {
     if (!this.#isElasticTracking) return;
+    if (event.pointerId !== this.#elasticPointerId) return;
+    if (event.buttons === 0) {
+      this.#handleElasticPointerEnd(event);
+      return;
+    }
     this.#updateElasticPull(event.clientX);
   }
 
-  #handleElasticPointerEnd() {
+  #handleElasticPointerEnd(event) {
+    if (
+      event?.pointerId !== undefined &&
+      this.#elasticPointerId !== null &&
+      event.pointerId !== this.#elasticPointerId
+    ) {
+      return;
+    }
+    this.#stopElasticTracking();
+    this.#resetElasticPull();
+  }
+
+  #stopElasticTracking() {
     window.removeEventListener("pointermove", this.#boundHandleElasticPointerMove);
     window.removeEventListener("pointerup", this.#boundHandleElasticPointerEnd);
     window.removeEventListener("pointercancel", this.#boundHandleElasticPointerEnd);
+    window.removeEventListener("blur", this.#boundHandleElasticPointerEnd);
     this.#isElasticTracking = false;
-    this.#resetElasticPull();
+    this.#elasticPointerId = null;
   }
 
   #handleContextMenu(event) {
@@ -445,11 +481,15 @@ class FigFieldSlider extends HTMLElement {
       Math.min(this.#elasticMaxPx, overshoot * 0.5),
     );
     const stretch = Math.abs(offset);
+    const scale = this.#elasticHostWidth
+      ? (this.#elasticHostWidth + stretch) / this.#elasticHostWidth
+      : 1;
     this.dataset.elasticDragging = "true";
     this.style.setProperty("--fig-field-slider-elastic-size", `${stretch}px`);
+    this.style.setProperty("--fig-field-slider-elastic-scale", `${scale}`);
     this.style.setProperty(
-      "--fig-field-slider-elastic-position-offset",
-      offset < 0 ? `${-stretch / 2}px` : `${stretch / 2}px`,
+      "--fig-field-slider-elastic-origin",
+      offset < 0 ? "right center" : "left center",
     );
   }
 
@@ -457,12 +497,14 @@ class FigFieldSlider extends HTMLElement {
     this.#clearElasticPull();
     this.#elasticMaxPx = 0;
     this.#elasticRangeRect = null;
+    this.#elasticHostWidth = 0;
+    this.#elasticPointerId = null;
   }
 
   #clearElasticPull() {
     this.removeAttribute("data-elastic-dragging");
     this.style.removeProperty("--fig-field-slider-elastic-size");
-    this.style.removeProperty("--fig-field-slider-elastic-position-offset");
+    this.style.removeProperty("--fig-field-slider-elastic-scale");
   }
 
   #valueFromPointer(event) {
@@ -558,7 +600,7 @@ class FigFieldSlider extends HTMLElement {
   }
 
   #forwardSliderEvent(type, event) {
-    event.stopPropagation();
+    event.stopImmediatePropagation();
     if (type === "change") {
       this.#resetElasticPull();
     }
@@ -1797,11 +1839,13 @@ class FigInputOscillator extends HTMLElement {
   #bounds = null;
   #handleAmplitude = null;
   #handleFrequency = null;
-  #addTypeControl = null;
   #fields = [];
   #typeControls = [];
   #waveRows = [];
+  #waveGroups = [];
+  #expandedWaveIndices = new Set();
   #resizeObserver = null;
+  #activeFieldInput = null;
 
   static TYPES = [
     { name: "Wave", value: "sine" },
@@ -2064,12 +2108,6 @@ class FigInputOscillator extends HTMLElement {
   #getWaveControlsHTML(disabled) {
     return `<div class="fig-input-oscillator-waves">
       ${this.#waves.map((wave, index) => this.#getWaveRowHTML(wave, index, disabled)).join("")}
-      <hstack class="fig-input-oscillator-add-wave">
-        <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon aria-label="Choose waveform type"${disabled}>
-          <fig-icon name="settings"></fig-icon>
-          ${this.#getWaveTypeDropdownHTML("fig-input-oscillator-add-type", "sine", disabled)}
-        </fig-button>
-      </hstack>
     </div>`;
   }
 
@@ -2077,18 +2115,27 @@ class FigInputOscillator extends HTMLElement {
     const removeDisabled = disabled || this.#waves.length <= 1 ? " disabled" : "";
     const active = index === this.#activeWaveIndex ? " data-active" : "";
     const label = FigInputOscillator.#labelForType(wave.type);
-    return `<details class="fig-input-oscillator-wave" data-wave-index="${index}" open>
-      <summary class="fig-input-oscillator-wave-summary">
-        <label>${FigInputOscillator.waveIcon(wave.type, 24)}<span>${label}</span></label>
-        <fig-button class="fig-input-oscillator-remove-button" variant="ghost" icon data-wave-index="${index}" aria-label="Remove waveform"${removeDisabled}><fig-icon name="minus"></fig-icon></fig-button>
-      </summary>
+    const open = this.#expandedWaveIndices.has(index) ? ' open="true"' : ' open="false"';
+    return `<fig-group class="fig-input-oscillator-wave" collapsible borderless compact="true"${open} data-wave-index="${index}">
+      <fig-header borderless>
+        <h3>${label}</h3>
+        <fig-tooltip text="Remove form">
+          <fig-button class="fig-input-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">
+          <fig-button class="fig-input-oscillator-add-type-button" type="select" variant="ghost" icon data-wave-index="${index}" aria-label="Add form"${disabled}>
+            <fig-icon name="add"></fig-icon>
+            ${this.#getWaveTypeDropdownHTML("fig-input-oscillator-add-type", "sine", disabled, index)}
+          </fig-button>
+        </fig-tooltip>
+      </fig-header>
       <div class="fig-input-oscillator-fields" data-wave-index="${index}"${active}>
         ${this.#getNumberFieldHTML(index, "frequency", "Frequency", 0.1, 16, 0.1, "")}
         ${this.#getNumberFieldHTML(index, "amplitude", "Amplitude", -4, 4, 0.1, "")}
         ${this.#getNumberFieldHTML(index, "phase", "Phase", -360, 360, 1, "°")}
         ${this.#getNumberFieldHTML(index, "offset", "Offset", -4, 4, 0.1, "")}
       </div>
-    </details>`;
+    </fig-group>`;
   }
 
   #getWaveTypeDropdownHTML(className, value, disabled, index = null) {
@@ -2099,9 +2146,9 @@ class FigInputOscillator extends HTMLElement {
         <label>${type.name}</label>
       </option>`;
     }).join("");
-    const indexAttr = index === null ? "" : ` data-wave-index="${index}"`;
-    const dropdownAttr = index === null ? ' type="dropdown" label="Choose waveform type"' : "";
-    return `<fig-dropdown class="${className}" value="${value}" experimental="modern"${dropdownAttr}${indexAttr}${disabled}>${options}</fig-dropdown>`;
+    const indexAttr =
+      index === null ? "" : ` data-wave-index="${FigInputOscillator.#escapeAttribute(String(index))}"`;
+    return `<fig-dropdown class="${className}" value="${value}" experimental="modern" type="dropdown" label="Add form"${indexAttr}${disabled}>${options}</fig-dropdown>`;
   }
 
   #getNumberFieldHTML(index, name, label, min, max, step, units) {
@@ -2110,11 +2157,7 @@ class FigInputOscillator extends HTMLElement {
       ? ` units="${FigInputOscillator.#escapeAttribute(units)}"`
       : "";
     const wave = this.#waves[index] || FigInputOscillator.#defaultWave();
-    return `<fig-field class="fig-input-oscillator-field" direction="horizontal" data-wave-index="${index}">
-      <label>${label}</label>
-      <fig-slider name="${name}" data-wave-index="${index}" value="${this.#round(wave[name])}" min="${min}" max="${max}" step="${step}" precision="${this.#precision}" text="true"${unitsAttr}${disabled}></fig-slider>
-    </fig-field>
-    `;
+    return `<fig-field-slider class="fig-input-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}></fig-field-slider>`;
   }
 
   #cacheRefs() {
@@ -2125,14 +2168,34 @@ class FigInputOscillator extends HTMLElement {
     this.#bounds = this.querySelector(".fig-input-oscillator-bounds");
     this.#handleAmplitude = this.querySelector('[data-handle="amplitude"]');
     this.#handleFrequency = this.querySelector('[data-handle="frequency"]');
-    this.#addTypeControl = this.querySelector(".fig-input-oscillator-add-type");
     this.#typeControls = Array.from(
       this.querySelectorAll(".fig-input-oscillator-wave-type"),
     );
-    this.#fields = Array.from(this.querySelectorAll("fig-slider[name]"));
-    this.#waveRows = Array.from(this.querySelectorAll("[data-wave-index]")).filter(
-      (row) => row.classList.contains("fig-input-oscillator-field"),
+    this.#fields = Array.from(this.querySelectorAll("fig-field-slider[name]"));
+    this.#waveGroups = Array.from(
+      this.querySelectorAll("fig-group.fig-input-oscillator-wave"),
     );
+    this.#waveRows = Array.from(
+      this.querySelectorAll(".fig-input-oscillator-fields"),
+    );
+  }
+
+  #reindexExpandedWaves(removedIndex) {
+    const nextExpanded = new Set();
+    for (const index of this.#expandedWaveIndices) {
+      if (index < removedIndex) nextExpanded.add(index);
+      else if (index > removedIndex) nextExpanded.add(index - 1);
+    }
+    this.#expandedWaveIndices = nextExpanded;
+  }
+
+  #reindexExpandedWavesAfterInsert(insertIndex) {
+    const nextExpanded = new Set();
+    for (const index of this.#expandedWaveIndices) {
+      nextExpanded.add(index >= insertIndex ? index + 1 : index);
+    }
+    nextExpanded.add(insertIndex);
+    this.#expandedWaveIndices = nextExpanded;
   }
 
   #setupResizeObserver() {
@@ -2308,12 +2371,17 @@ class FigInputOscillator extends HTMLElement {
     for (const field of this.#fields) {
       field.addEventListener("input", (event) => {
         event.stopPropagation();
-        this.#applyFieldValue(
-          this.#indexFromElement(field),
-          field.getAttribute("name"),
-          event.detail ?? event.currentTarget?.value ?? event.target?.value,
-          "input",
-        );
+        this.#activeFieldInput = field;
+        try {
+          this.#applyFieldValue(
+            this.#indexFromElement(field),
+            field.getAttribute("name"),
+            event.detail ?? event.currentTarget?.value ?? event.target?.value,
+            "input",
+          );
+        } finally {
+          this.#activeFieldInput = null;
+        }
       });
       field.addEventListener("change", (event) => {
         event.stopPropagation();
@@ -2326,31 +2394,64 @@ class FigInputOscillator extends HTMLElement {
       });
     }
 
-    for (const row of this.#waveRows) {
-      row.addEventListener("pointerdown", () => {
-        this.#setActiveWave(this.#indexFromElement(row));
+    for (const group of this.#waveGroups) {
+      group.addEventListener("pointerdown", () => {
+        this.#setActiveWave(this.#indexFromElement(group));
+      });
+      group.addEventListener("focusin", () => {
+        this.#setActiveWave(this.#indexFromElement(group));
       });
-      row.addEventListener("focusin", () => {
-        this.#setActiveWave(this.#indexFromElement(row));
+      group.addEventListener("openchange", (event) => {
+        const index = this.#indexFromElement(group);
+        if (event.detail?.open) {
+          this.#expandedWaveIndices.add(index);
+        } else {
+          this.#expandedWaveIndices.delete(index);
+        }
       });
     }
 
-    this.#addTypeControl?.addEventListener("change", (event) => {
-      if (this.#isDisabled()) return;
-      if (event.target !== this.#addTypeControl) return;
-      const type = this.#normalizeType(event.detail ?? this.#addTypeControl?.value);
-      this.#waves.push(FigInputOscillator.#defaultWave(type));
-      this.#activeWaveIndex = this.#waves.length - 1;
-      this.#render();
-      this.#emit("input");
-      this.#emit("change");
-    });
+    for (const control of this.querySelectorAll(".fig-input-oscillator-add-type")) {
+      const stopHeaderToggle = (event) => {
+        event.stopPropagation();
+      };
+      control.addEventListener("pointerdown", stopHeaderToggle);
+      control.addEventListener("click", stopHeaderToggle);
+      control.addEventListener("change", (event) => {
+        if (event.target !== control) return;
+        if (this.#isDisabled()) return;
+        const insertAfter = this.#indexFromElement(control);
+        const insertIndex = insertAfter + 1;
+        const type = this.#normalizeType(event.detail ?? control.value);
+        this.#waves.splice(insertIndex, 0, FigInputOscillator.#defaultWave(type));
+        this.#reindexExpandedWavesAfterInsert(insertIndex);
+        this.#activeWaveIndex = insertIndex;
+        this.#render();
+        this.#emit("input");
+        this.#emit("change");
+      });
+    }
+
+    for (const button of this.querySelectorAll(".fig-input-oscillator-add-type-button")) {
+      const stopHeaderToggle = (event) => {
+        event.stopPropagation();
+      };
+      button.addEventListener("pointerdown", stopHeaderToggle);
+      button.addEventListener("click", stopHeaderToggle);
+      button.closest("fig-tooltip")?.addEventListener("pointerdown", stopHeaderToggle);
+      button.closest("fig-tooltip")?.addEventListener("click", stopHeaderToggle);
+    }
 
     for (const button of this.querySelectorAll(".fig-input-oscillator-remove-button")) {
-      button.addEventListener("click", () => {
+      button.addEventListener("pointerdown", (event) => {
+        event.stopPropagation();
+      });
+      button.addEventListener("click", (event) => {
+        event.stopPropagation();
         if (this.#isDisabled() || this.#waves.length <= 1) return;
         const index = this.#indexFromElement(button);
         this.#waves.splice(index, 1);
+        this.#reindexExpandedWaves(index);
         this.#activeWaveIndex = Math.min(this.#activeWaveIndex, this.#waves.length - 1);
         this.#render();
         this.#emit("input");
@@ -2436,7 +2537,7 @@ class FigInputOscillator extends HTMLElement {
       ...this.#waves[index],
       [name]: next,
     });
-    this.#syncUI();
+    this.#syncUI({ skipFieldSync: eventType == "input" });
     this.#emit(eventType);
   }
 
@@ -2548,9 +2649,9 @@ class FigInputOscillator extends HTMLElement {
     );
   }
 
-  #syncUI() {
+  #syncUI({ skipFieldSync = false } = {}) {
     this.#syncTypeControls();
-    this.#syncFields();
+    if (!skipFieldSync) this.#syncFields();
     this.#syncActiveWave();
     this.#updateWaveform();
   }
@@ -2564,9 +2665,16 @@ class FigInputOscillator extends HTMLElement {
 
   #syncFields() {
     for (const field of this.#fields) {
+      if (field === this.#activeFieldInput) continue;
       const index = this.#indexFromElement(field);
       const name = field.getAttribute("name");
-      field.setAttribute("value", this.#round(this.#waves[index]?.[name] ?? 0));
+      const next = this.#round(this.#waves[index]?.[name] ?? 0);
+      const slider = field.querySelector("fig-slider");
+      if (slider) {
+        slider.value = next;
+      } else {
+        field.setAttribute("value", String(next));
+      }
     }
   }
 

package/package.json

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