@rogieking/figui3 2.17.3 → 2.18.0

package/components.css

@@ -2512,6 +2512,12 @@ fig-input-fill {
       gap: 0;
     }
   }
+
+  fig-field[direction="horizontal"] &,
+  fig-field[direction="row"] & {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 fig-slider {
@@ -2524,6 +2530,12 @@ fig-slider {
   & fig-input-number {
     flex-basis: 5rem;
   }
+
+  fig-field[direction="horizontal"] &,
+  fig-field[direction="row"] & {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 fig-field,

package/fig.js

@@ -2022,6 +2022,7 @@ customElements.define("fig-segmented-control", FigSegmentedControl);
  * @attr {string} color - The color for the slider track (for opacity type)
  */
 class FigSlider extends HTMLElement {
+  #isInteracting = false;
   // Private fields declarations
   #typeDefaults = {
     range: { min: 0, max: 100, step: 1 },
@@ -2088,6 +2089,7 @@ class FigSlider extends HTMLElement {
     let slider = `<div class="fig-slider-input-container" role="group">
                 <input 
                     type="range"
+                    ${this.text ? 'tabindex="-1"' : ""}
                     ${this.disabled ? "disabled" : ""}
                     min="${this.min}"
                     max="${this.max}"
@@ -2124,6 +2126,8 @@ class FigSlider extends HTMLElement {
       this.input.addEventListener("input", this.#boundHandleInput);
       this.input.removeEventListener("change", this.#boundHandleChange);
       this.input.addEventListener("change", this.#boundHandleChange);
+      this.input.addEventListener("pointerdown", () => { this.#isInteracting = true; });
+      this.input.addEventListener("pointerup", () => { this.#isInteracting = false; });
 
       if (this.default) {
         this.style.setProperty(
@@ -2253,6 +2257,7 @@ class FigSlider extends HTMLElement {
   }
 
   #handleChange() {
+    this.#isInteracting = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("change", { detail: this.value, bubbles: true })
@@ -2306,6 +2311,7 @@ class FigSlider extends HTMLElement {
           }
           break;
         case "value":
+          if (this.#isInteracting) break;
           this.value = newValue;
           this.input.value = newValue;
           this.#syncProperties();
@@ -2365,6 +2371,7 @@ customElements.define("fig-slider", FigSlider);
  * @attr {number} transform - A multiplier for displayed number values
  */
 class FigInputText extends HTMLElement {
+  #isInteracting = false;
   #boundMouseMove;
   #boundMouseUp;
   #boundMouseDown;
@@ -2507,6 +2514,7 @@ class FigInputText extends HTMLElement {
   #handleMouseDown(e) {
     if (this.type !== "number") return;
     if (e.altKey) {
+      this.#isInteracting = true;
       this.input.style.cursor =
         this.style.cursor =
         document.body.style.cursor =
@@ -2519,6 +2527,7 @@ class FigInputText extends HTMLElement {
   }
   #handleMouseUp(e) {
     if (this.type !== "number") return;
+    this.#isInteracting = false;
     this.input.style.cursor =
       this.style.cursor =
       document.body.style.cursor =
@@ -2594,6 +2603,7 @@ class FigInputText extends HTMLElement {
           }
           break;
         case "value":
+          if (this.#isInteracting) break;
           let value = newValue;
           if (this.type === "number") {
             value = this.#sanitizeInput(value, false);
@@ -2651,6 +2661,7 @@ class FigInputNumber extends HTMLElement {
   #units;
   #unitPosition;
   #precision;
+  #isInteracting = false;
 
   constructor() {
     super();
@@ -2830,6 +2841,7 @@ class FigInputNumber extends HTMLElement {
   }
 
   #handleFocus(e) {
+    this.#isInteracting = true;
     setTimeout(() => {
       const value = e.target.value;
       if (value && this.#units) {
@@ -2846,6 +2858,7 @@ class FigInputNumber extends HTMLElement {
   }
 
   #handleBlur(e) {
+    this.#isInteracting = false;
     let numericValue = this.#getNumericValue(e.target.value);
     if (numericValue !== "") {
       let val = Number(numericValue) / (this.transform || 1);
@@ -2939,6 +2952,7 @@ class FigInputNumber extends HTMLElement {
   #handleMouseDown(e) {
     if (this.disabled) return;
     if (e.altKey) {
+      this.#isInteracting = true;
       this.input.style.cursor =
         this.style.cursor =
         document.body.style.cursor =
@@ -2951,6 +2965,7 @@ class FigInputNumber extends HTMLElement {
   }
 
   #handleMouseUp(e) {
+    this.#isInteracting = false;
     this.input.style.cursor =
       this.style.cursor =
       document.body.style.cursor =
@@ -3019,6 +3034,7 @@ class FigInputNumber extends HTMLElement {
           this.input.value = this.#formatWithUnit(this.value);
           break;
         case "value":
+          if (this.#isInteracting) break;
           let value =
             newValue !== null && newValue !== "" ? Number(newValue) : "";
           if (value !== "") {
@@ -4167,9 +4183,15 @@ class FigInputFill extends HTMLElement {
 
     switch (name) {
       case "value":
+        const prevType = this.#fillType;
         this.#parseValue();
         if (this.#fillPicker) {
-          this.#render();
+          if (this.#fillType !== prevType) {
+            this.#render();
+          } else {
+            this.#updateFillPicker();
+            this.#updateControls();
+          }
         }
         break;
       case "disabled":
@@ -4540,18 +4562,37 @@ customElements.define("fig-toast", FigToast, { extends: "dialog" });
  * @attr {string} value - The current input value
  */
 class FigComboInput extends HTMLElement {
+  #usesCustomDropdown = false;
+  #boundHandleSelectInput = null;
+
   constructor() {
     super();
+    this.#boundHandleSelectInput = this.handleSelectInput.bind(this);
   }
   getOptionsFromAttribute() {
     return (this.getAttribute("options") || "").split(",");
   }
   connectedCallback() {
+    const customDropdown =
+      Array.from(this.children).find((child) => child.tagName === "FIG-DROPDOWN") ||
+      null;
+    this.#usesCustomDropdown = customDropdown !== null;
+    if (customDropdown) {
+      customDropdown.remove();
+    }
+
     this.options = this.getOptionsFromAttribute();
     this.placeholder = this.getAttribute("placeholder") || "";
     this.value = this.getAttribute("value") || "";
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const dropdownHTML = this.#usesCustomDropdown
+      ? ""
+      : `<fig-dropdown type="dropdown" ${expAttr}>
+                              ${this.options
+                                .map((option) => `<option>${option}</option>`)
+                                .join("")}
+                            </fig-dropdown>`;
     this.innerHTML = `<div class="input-combo">
                         <fig-input-text placeholder="${this.placeholder}">
                         </fig-input-text> 
@@ -4559,21 +4600,30 @@ class FigComboInput extends HTMLElement {
                             <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
   <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
 </svg>
-                            <fig-dropdown type="dropdown" ${expAttr}>
-                              ${this.options
-                                .map((option) => `<option>${option}</option>`)
-                                .join("")}
-                            </fig-dropdown>
+                            ${dropdownHTML}
                         </fig-button>
                     </div>`;
     requestAnimationFrame(() => {
       this.input = this.querySelector("fig-input-text");
+      const button = this.querySelector("fig-button");
+
+      if (this.#usesCustomDropdown && customDropdown && button) {
+        if (!customDropdown.hasAttribute("type")) {
+          customDropdown.setAttribute("type", "dropdown");
+        }
+        if (experimental) {
+          customDropdown.setAttribute("experimental", experimental);
+        }
+        button.append(customDropdown);
+      }
       this.dropdown = this.querySelector("fig-dropdown");
 
-      this.dropdown.addEventListener(
-        "input",
-        this.handleSelectInput.bind(this)
-      );
+      this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
+      this.dropdown?.addEventListener("input", this.#boundHandleSelectInput);
+
+      if (this.input) {
+        this.input.setAttribute("value", this.value);
+      }
 
       // Apply initial disabled state
       if (this.hasAttribute("disabled")) {
@@ -4581,6 +4631,9 @@ class FigComboInput extends HTMLElement {
       }
     });
   }
+  disconnectedCallback() {
+    this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
+  }
   handleSelectInput(e) {
     this.setAttribute("value", e.target.closest("fig-dropdown").value);
   }
@@ -4614,7 +4667,7 @@ class FigComboInput extends HTMLElement {
     switch (name) {
       case "options":
         this.options = newValue.split(",");
-        if (this.dropdown) {
+        if (this.dropdown && !this.#usesCustomDropdown) {
           this.dropdown.innerHTML = this.options
             .map((option) => `<option>${option}</option>`)
             .join("");
@@ -4639,7 +4692,7 @@ class FigComboInput extends HTMLElement {
         if (this.dropdown) {
           if (newValue) {
             this.dropdown.setAttribute("experimental", newValue);
-          } else {
+          } else if (!this.#usesCustomDropdown) {
             this.dropdown.removeAttribute("experimental");
           }
         }
@@ -5283,6 +5336,7 @@ class FigInputJoystick extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "value") {
+      if (this.isDragging) return;
       this.value = newValue;
     }
     if (name === "precision") {
@@ -5740,6 +5794,7 @@ class FigInputAngle extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "value":
+        if (this.isDragging) break;
         this.value = Number(newValue);
         break;
       case "precision":

package/index.html

@@ -1267,69 +1267,62 @@
             </fig-field>
 
             <h3>Horizontal Fields with Different Inputs</h3>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Text Input</label>
-                <fig-input-text placeholder="Enter text"></fig-input-text>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Number Input</label>
-                <fig-input-number value="100"
-                                  units="px"></fig-input-number>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Dropdown</label>
-                <fig-dropdown>
-                    <option>Option One</option>
-                    <option>Option Two</option>
-                    <option>Option Three</option>
-                </fig-dropdown>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Slider</label>
-                <fig-slider value="50"
-                            text="true"></fig-slider>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Color</label>
-                <fig-input-color value="#0D99FF"
-                                 text="true"></fig-input-color>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Angle</label>
-                <fig-input-angle value="45"
-                                 text="true"></fig-input-angle>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Joystick</label>
-                <fig-input-joystick text="true"
-                                    value="50,50"></fig-input-joystick>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Switch</label>
-                <fig-switch></fig-switch>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Checkbox</label>
-                <fig-checkbox></fig-checkbox>
-            </fig-field>
-            <fig-field direction="horizontal"
-                       style="width: 240px;">
-                <label>Segmented</label>
-                <fig-segmented-control>
-                    <fig-segment value="left">Left</fig-segment>
-                    <fig-segment value="center">Center</fig-segment>
-                    <fig-segment value="right">Right</fig-segment>
-                </fig-segmented-control>
-            </fig-field>
+            <p class="description">Drag the right edge to test at different widths.</p>
+            <div class="resize-test" style="width: 240px;">
+                <fig-field direction="horizontal">
+                    <label>Text Input</label>
+                    <fig-input-text placeholder="Enter text" full></fig-input-text>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Number Input</label>
+                    <fig-input-number value="100"
+                                      units="px" full></fig-input-number>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Dropdown</label>
+                    <fig-dropdown full>
+                        <option>Option One</option>
+                        <option>Option Two</option>
+                        <option>Option Three</option>
+                    </fig-dropdown>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Slider</label>
+                    <fig-slider value="50"
+                                text="true" full></fig-slider>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Color</label>
+                    <fig-input-color value="#0D99FF"
+                                     text="true" full></fig-input-color>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Angle</label>
+                    <fig-input-angle value="45"
+                                     text="true" full></fig-input-angle>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Joystick</label>
+                    <fig-input-joystick text="true"
+                                        value="50,50" full></fig-input-joystick>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Switch</label>
+                    <fig-switch></fig-switch>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Checkbox</label>
+                    <fig-checkbox></fig-checkbox>
+                </fig-field>
+                <fig-field direction="horizontal">
+                    <label>Segmented</label>
+                    <fig-segmented-control full>
+                        <fig-segment value="left">Left</fig-segment>
+                        <fig-segment value="center">Center</fig-segment>
+                        <fig-segment value="right">Right</fig-segment>
+                    </fig-segmented-control>
+                </fig-field>
+            </div>
         </section>
         <hr>
 

package/package.json

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