@rogieking/figui3 6.9.9 → 6.10.0

package/fig-lab.css

@@ -15,10 +15,15 @@ fig-field-slider {
   --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%;
@@ -26,6 +31,15 @@ fig-field-slider {
   border-radius: var(--radius-medium);
   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);
@@ -539,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;
@@ -557,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;
@@ -615,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

@@ -40,6 +40,12 @@ class FigFieldSlider extends HTMLElement {
     "color",
     "text",
     "full",
+    "elastic",
+    "size",
+    "name",
+    "class",
+    "data-wave-index",
+    "data-active",
     "data-elastic-dragging",
     "style",
   ]);
@@ -326,6 +332,7 @@ 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;
@@ -498,7 +505,6 @@ class FigFieldSlider extends HTMLElement {
     this.removeAttribute("data-elastic-dragging");
     this.style.removeProperty("--fig-field-slider-elastic-size");
     this.style.removeProperty("--fig-field-slider-elastic-scale");
-    this.style.removeProperty("--fig-field-slider-elastic-origin");
   }
 
   #valueFromPointer(event) {
@@ -594,7 +600,7 @@ class FigFieldSlider extends HTMLElement {
   }
 
   #forwardSliderEvent(type, event) {
-    event.stopPropagation();
+    event.stopImmediatePropagation();
     if (type === "change") {
       this.#resetElasticPull();
     }
@@ -1833,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" },
@@ -2100,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>`;
   }
 
@@ -2113,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) {
@@ -2135,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) {
@@ -2146,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() {
@@ -2161,16 +2168,36 @@ 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() {
     if (this.#resizeObserver || !window.ResizeObserver) return;
     this.#resizeObserver = new ResizeObserver(() => {
@@ -2344,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();
@@ -2362,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));
       });
-      row.addEventListener("focusin", () => {
-        this.#setActiveWave(this.#indexFromElement(row));
+      group.addEventListener("focusin", () => {
+        this.#setActiveWave(this.#indexFromElement(group));
+      });
+      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");
@@ -2472,7 +2537,7 @@ class FigInputOscillator extends HTMLElement {
       ...this.#waves[index],
       [name]: next,
     });
-    this.#syncUI();
+    this.#syncUI({ skipFieldSync: eventType == "input" });
     this.#emit(eventType);
   }
 
@@ -2584,9 +2649,9 @@ class FigInputOscillator extends HTMLElement {
     );
   }
 
-  #syncUI() {
+  #syncUI({ skipFieldSync = false } = {}) {
     this.#syncTypeControls();
-    this.#syncFields();
+    if (!skipFieldSync) this.#syncFields();
     this.#syncActiveWave();
     this.#updateWaveform();
   }
@@ -2600,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.9",
+  "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",