@rogieking/figui3 2.18.0 → 2.18.2

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),

package/fig.js

@@ -2497,30 +2497,27 @@ 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);
     }
@@ -2533,7 +2530,6 @@ class FigInputText extends HTMLElement {
       document.body.style.cursor =
         "";
     this.style.userSelect = "all";
-    // Remove the pre-bound handlers
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
   }
@@ -2937,28 +2933,25 @@ 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);
     }
@@ -2971,7 +2964,6 @@ class FigInputNumber extends HTMLElement {
       document.body.style.cursor =
         "";
     this.style.userSelect = "all";
-    // Remove the pre-bound handlers
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
   }
@@ -3690,7 +3682,7 @@ class FigInputFill extends HTMLElement {
               placeholder="##" 
               min="0"
               max="100"
-              value="${this.#gradient.stops[0]?.opacity || 100}"
+              value="${this.#gradient.stops[0]?.opacity ?? 100}"
               units="%"
               ${disabled ? "disabled" : ""}>
             </fig-input-number>
@@ -3895,7 +3887,7 @@ class FigInputFill extends HTMLElement {
         if (this.#opacityInput) {
           this.#opacityInput.setAttribute(
             "value",
-            this.#gradient.stops[0]?.opacity || 100
+            this.#gradient.stops[0]?.opacity ?? 100
           );
         }
         break;
@@ -3978,7 +3970,7 @@ class FigInputFill extends HTMLElement {
               placeholder="##" 
               min="0"
               max="100"
-              value="${this.#gradient.stops[0]?.opacity || 100}"
+              value="${this.#gradient.stops[0]?.opacity ?? 100}"
               units="%"
               ${disabled ? "disabled" : ""}>
             </fig-input-number>
@@ -6477,6 +6469,7 @@ class FigFillPicker extends HTMLElement {
     this.#hueSlider.addEventListener("input", (e) => {
       this.#color.h = parseFloat(e.target.value);
       this.#drawColorArea();
+      this.#updateHandlePosition();
       this.#updateColorInputs();
       this.#emitInput();
     });
@@ -6876,8 +6869,9 @@ class FigFillPicker extends HTMLElement {
           .addEventListener("input", (e) => {
             this.#gradient.stops[index].color =
               e.target.hexOpaque || e.target.value;
+            const parsedAlpha = parseFloat(e.target.alpha);
             this.#gradient.stops[index].opacity =
-              parseFloat(e.target.alpha) || 100;
+              isNaN(parsedAlpha) ? 100 : parsedAlpha;
             this.#updateGradientPreview();
             this.#emitInput();
           });

package/index.html

@@ -1268,15 +1268,18 @@
 
             <h3>Horizontal Fields with Different Inputs</h3>
             <p class="description">Drag the right edge to test at different widths.</p>
-            <div class="resize-test" style="width: 240px;">
+            <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-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>
+                                      units="px"
+                                      full></fig-input-number>
                 </fig-field>
                 <fig-field direction="horizontal">
                     <label>Dropdown</label>
@@ -1289,22 +1292,26 @@
                 <fig-field direction="horizontal">
                     <label>Slider</label>
                     <fig-slider value="50"
-                                text="true" full></fig-slider>
+                                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>
+                                     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>
+                                     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>
+                                        value="50,50"
+                                        full></fig-input-joystick>
                 </fig-field>
                 <fig-field direction="horizontal">
                     <label>Switch</label>
@@ -1401,6 +1408,18 @@
                     document.getElementById('fill-picker-output').textContent = 'Change: ' + JSON.stringify(e.detail);
                 });
             </script>
+
+            <h3>Experimental</h3>
+            <p class="description">Use the <code>experimental</code> attribute to pass through experimental features to
+                internal <code>fig-dropdown</code> elements.</p>
+
+            <h4>fig-fill-picker</h4>
+            <fig-fill-picker experimental="modern"
+                             value='{"type":"gradient","gradient":{"type":"linear","angle":135,"stops":[{"position":0,"color":"#f093fb","opacity":100},{"position":100,"color":"#f5576c","opacity":100}]}}'></fig-fill-picker>
+
+            <h4>fig-input-fill</h4>
+            <fig-input-fill experimental="modern"
+                            value='{"type":"gradient","gradient":{"type":"radial","centerX":50,"centerY":50,"stops":[{"position":0,"color":"#4facfe","opacity":100},{"position":100,"color":"#00f2fe","opacity":100}]}}'></fig-input-fill>
         </section>
         <hr>
 
@@ -2882,7 +2901,8 @@
 
             <h3>Single-Value Position Shorthand</h3>
             <p class="description">Single values are supported for directional shorthand (for example:
-                <code>top</code>, <code>right</code>).</p>
+                <code>top</code>, <code>right</code>).
+            </p>
 
             <h4>Top (left edges aligned)</h4>
             <hstack>

package/package.json

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