@rogieking/figui3 2.13.2 → 2.14.0

package/components.css

@@ -2412,7 +2412,7 @@ fig-slider {
   }
 
   & fig-input-number {
-    width: 5rem;
+    flex-basis: 5rem;
   }
 }
 

package/fig.js

@@ -1445,6 +1445,9 @@ class FigSlider extends HTMLElement {
     this.units = this.getAttribute("units") || "";
     this.transform = Number(this.getAttribute("transform") || 1);
     this.disabled = this.getAttribute("disabled") ? true : false;
+    this.precision = this.hasAttribute("precision")
+      ? Number(this.getAttribute("precision"))
+      : null;
 
     const defaults = this.#typeDefaults[this.type];
     this.min = Number(this.getAttribute("min") || defaults.min);
@@ -1481,7 +1484,8 @@ class FigSlider extends HTMLElement {
                         transform="${this.transform}"
                         step="${this.step}"
                         value="${this.value}"
-                        ${this.units ? `units="${this.units}"` : ""}>
+                        ${this.units ? `units="${this.units}"` : ""}
+                        ${this.precision !== null ? `precision="${this.precision}"` : ""}>
                     </fig-input-number>`;
     } else {
       html = slider;
@@ -1654,6 +1658,7 @@ class FigSlider extends HTMLElement {
       "transform",
       "text",
       "default",
+      "precision",
     ];
   }
 
@@ -1690,6 +1695,16 @@ class FigSlider extends HTMLElement {
             this.figInputNumber.setAttribute("transform", this.transform);
           }
           break;
+        case "precision":
+          this.precision = newValue !== null ? Number(newValue) : null;
+          if (this.figInputNumber) {
+            if (this.precision !== null) {
+              this.figInputNumber.setAttribute("precision", this.precision);
+            } else {
+              this.figInputNumber.removeAttribute("precision");
+            }
+          }
+          break;
         case "default":
           this.default = newValue;
           this.#syncProperties();
@@ -2011,6 +2026,7 @@ class FigInputNumber extends HTMLElement {
   #boundKeyDown;
   #units;
   #unitPosition;
+  #precision;
 
   constructor() {
     super();
@@ -2045,6 +2061,9 @@ class FigInputNumber extends HTMLElement {
     this.name = this.getAttribute("name") || null;
     this.#units = this.getAttribute("units") || "";
     this.#unitPosition = this.getAttribute("unit-position") || "suffix";
+    this.#precision = this.hasAttribute("precision")
+      ? Number(this.getAttribute("precision"))
+      : 2;
 
     if (this.getAttribute("step")) {
       this.step = Number(this.getAttribute("step"));
@@ -2331,10 +2350,12 @@ class FigInputNumber extends HTMLElement {
     return sanitized;
   }
 
-  #formatNumber(num, precision = 2) {
-    // Check if the number has any decimal places after rounding
-    const rounded = Math.round(num * 100) / 100;
-    return Number.isInteger(rounded) ? rounded : rounded.toFixed(precision);
+  #formatNumber(num) {
+    const precision = this.#precision ?? 2;
+    const factor = Math.pow(10, precision);
+    const rounded = Math.round(num * factor) / factor;
+    // Only show decimals if needed and up to precision
+    return Number.isInteger(rounded) ? rounded : parseFloat(rounded.toFixed(precision));
   }
 
   static get observedAttributes() {
@@ -2350,6 +2371,7 @@ class FigInputNumber extends HTMLElement {
       "units",
       "unit-position",
       "steppers",
+      "precision",
     ];
   }
 
@@ -2386,6 +2408,10 @@ class FigInputNumber extends HTMLElement {
         case "step":
           this[name] = Number(newValue);
           break;
+        case "precision":
+          this.#precision = newValue !== null ? Number(newValue) : 2;
+          this.input.value = this.#formatWithUnit(this.value);
+          break;
         case "name":
           this[name] = this.input[name] = newValue;
           this.input.setAttribute("name", newValue);
@@ -5920,7 +5946,7 @@ class FigFillPicker extends HTMLElement {
 
     container.innerHTML = `
       <div class="fig-fill-picker-gradient-header">
-        <fig-dropdown class="fig-fill-picker-gradient-type" value="${
+        <fig-dropdown class="fig-fill-picker-gradient-type" variant="neue" value="${
           this.#gradient.type
         }">
           <option value="linear" selected>Linear</option>

package/index.html

@@ -1840,6 +1840,31 @@
                                   steppers="true"></fig-input-number>
             </fig-field>
 
+            <h3>With Precision</h3>
+            <p class="description">Control decimal places with the <code>precision</code> attribute.</p>
+            <fig-field direction="horizontal">
+                <label>Default (2)</label>
+                <fig-input-number value="3.14159"
+                                  step="0.001"></fig-input-number>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Precision 0</label>
+                <fig-input-number value="3.14159"
+                                  precision="0"></fig-input-number>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Precision 1</label>
+                <fig-input-number value="3.14159"
+                                  precision="1"
+                                  step="0.1"></fig-input-number>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Precision 4</label>
+                <fig-input-number value="3.14159"
+                                  precision="4"
+                                  step="0.0001"></fig-input-number>
+            </fig-field>
+
             <h3>States</h3>
             <fig-field direction="horizontal">
                 <label>Disabled</label>
@@ -2645,6 +2670,64 @@
                         text="true"
                         units="%"></fig-slider>
 
+            <h3>With Precision</h3>
+            <p class="description">Control decimal places in the text input with the <code>precision</code> attribute.</p>
+            <fig-field direction="horizontal">
+                <label>Precision 0</label>
+                <fig-slider min="0"
+                            max="100"
+                            value="33"
+                            text="true"
+                            precision="0"></fig-slider>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Precision 1</label>
+                <fig-slider min="0"
+                            max="10"
+                            value="3.5"
+                            step="0.1"
+                            text="true"
+                            precision="1"></fig-slider>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Precision 3</label>
+                <fig-slider min="0"
+                            max="1"
+                            value="0.333"
+                            step="0.001"
+                            text="true"
+                            precision="3"></fig-slider>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Neue - Precision 0</label>
+                <fig-slider min="0"
+                            max="100"
+                            value="33"
+                            text="true"
+                            precision="0"
+                            variant="neue"></fig-slider>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Neue - Precision 1</label>
+                <fig-slider min="0"
+                            max="10"
+                            value="3.5"
+                            step="0.1"
+                            text="true"
+                            precision="1"
+                            variant="neue"></fig-slider>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Neue - Precision 3</label>
+                <fig-slider min="0"
+                            max="1"
+                            value="0.333"
+                            step="0.001"
+                            text="true"
+                            precision="3"
+                            variant="neue"></fig-slider>
+            </fig-field>
+
             <h3>Variants</h3>
             <fig-field direction="horizontal">
                 <label>Default</label>

package/package.json

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