@rogieking/figui3 2.17.4 → 2.18.1

package/components.css

@@ -2486,6 +2486,11 @@ fig-input-number {
   }
 }
 
+fig-input-number > [slot],
+fig-input-text[type="number"] > [slot] {
+  cursor: ew-resize !important;
+}
+
 fig-input-color,
 fig-input-fill {
   & > .input-combo > fig-chit:not(:only-child),
@@ -2512,6 +2517,12 @@ fig-input-fill {
       gap: 0;
     }
   }
+
+  fig-field[direction="horizontal"] &,
+  fig-field[direction="row"] & {
+    flex: 1;
+    min-width: 0;
+  }
 }
 
 fig-slider {
@@ -2524,6 +2535,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;
@@ -2490,41 +2497,39 @@ class FigInputText extends HTMLElement {
   }
   #handleMouseMove(e) {
     if (this.type !== "number") return;
-    if (e.altKey) {
-      let step = (this.step || 1) * e.movementX;
-      let value = Number(this.input.value);
-      value = value / (this.transform || 1) + step;
-      value = this.#sanitizeInput(value, false);
-      let valueTransformed = value * (this.transform || 1);
-      value = this.#formatNumber(value);
-      valueTransformed = this.#formatNumber(valueTransformed);
-      this.value = value;
-      this.input.value = valueTransformed;
-      this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
-    }
+    let step = (this.step || 1) * e.movementX;
+    let value = Number(this.input.value);
+    value = value / (this.transform || 1) + step;
+    value = this.#sanitizeInput(value, false);
+    let valueTransformed = value * (this.transform || 1);
+    value = this.#formatNumber(value);
+    valueTransformed = this.#formatNumber(valueTransformed);
+    this.value = value;
+    this.input.value = valueTransformed;
+    this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
   }
   #handleMouseDown(e) {
     if (this.type !== "number") return;
-    if (e.altKey) {
+    if (e.altKey || e.target.closest("[slot]")) {
+      this.#isInteracting = true;
       this.input.style.cursor =
         this.style.cursor =
         document.body.style.cursor =
           "ew-resize";
       this.style.userSelect = "none";
-      // Use the pre-bound handlers
       window.addEventListener("pointermove", this.#boundMouseMove);
       window.addEventListener("pointerup", this.#boundMouseUp);
     }
   }
   #handleMouseUp(e) {
     if (this.type !== "number") return;
+    this.#isInteracting = false;
     this.input.style.cursor =
       this.style.cursor =
       document.body.style.cursor =
         "";
     this.style.userSelect = "all";
-    // Remove the pre-bound handlers
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
   }
@@ -2594,6 +2599,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 +2657,7 @@ class FigInputNumber extends HTMLElement {
   #units;
   #unitPosition;
   #precision;
+  #isInteracting = false;
 
   constructor() {
     super();
@@ -2830,6 +2837,7 @@ class FigInputNumber extends HTMLElement {
   }
 
   #handleFocus(e) {
+    this.#isInteracting = true;
     setTimeout(() => {
       const value = e.target.value;
       if (value && this.#units) {
@@ -2846,6 +2854,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);
@@ -2924,39 +2933,37 @@ class FigInputNumber extends HTMLElement {
 
   #handleMouseMove(e) {
     if (this.disabled) return;
-    if (e.altKey) {
-      let step = (this.step || 1) * e.movementX;
-      let numericValue = this.#getNumericValue(this.input.value);
-      let value = Number(numericValue) / (this.transform || 1) + step;
-      value = this.#sanitizeInput(value, false);
-      this.value = value;
-      this.input.value = this.#formatWithUnit(this.value);
-      this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
-    }
+    let step = (this.step || 1) * e.movementX;
+    let numericValue = this.#getNumericValue(this.input.value);
+    let value = Number(numericValue) / (this.transform || 1) + step;
+    value = this.#sanitizeInput(value, false);
+    this.value = value;
+    this.input.value = this.#formatWithUnit(this.value);
+    this.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
   }
 
   #handleMouseDown(e) {
     if (this.disabled) return;
-    if (e.altKey) {
+    if (e.altKey || e.target.closest("[slot]")) {
+      this.#isInteracting = true;
       this.input.style.cursor =
         this.style.cursor =
         document.body.style.cursor =
           "ew-resize";
       this.style.userSelect = "none";
-      // Use the pre-bound handlers
       window.addEventListener("pointermove", this.#boundMouseMove);
       window.addEventListener("pointerup", this.#boundMouseUp);
     }
   }
 
   #handleMouseUp(e) {
+    this.#isInteracting = false;
     this.input.style.cursor =
       this.style.cursor =
       document.body.style.cursor =
         "";
     this.style.userSelect = "all";
-    // Remove the pre-bound handlers
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
   }
@@ -3019,6 +3026,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 +4175,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":
@@ -5314,6 +5328,7 @@ class FigInputJoystick extends HTMLElement {
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "value") {
+      if (this.isDragging) return;
       this.value = newValue;
     }
     if (name === "precision") {
@@ -5771,6 +5786,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.4",
+  "version": "2.18.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",