@rogieking/figui3 2.13.2 → 2.15.0

package/README.md

@@ -911,6 +911,36 @@ const onChange = (e) => {
 
 ---
 
+## Breaking Changes / Migration
+
+### v2.15.0: Experimental Features
+
+The `experimental` attribute now controls experimental CSS features instead of `variant="neue"`.
+
+**Before (deprecated):**
+```html
+<fig-dropdown variant="neue">
+  <option>Option 1</option>
+</fig-dropdown>
+```
+
+**After:**
+```html
+<fig-dropdown experimental="modern">
+  <option>Option 1</option>
+</fig-dropdown>
+```
+
+The `experimental` attribute uses space-separated feature names for granular control:
+- `experimental="modern"` - Enables the customizable select picker (`::picker(select)`, `appearance: base-select`)
+- Future features can be added: `experimental="modern popover"`
+
+Note: `variant="neue"` on `fig-slider` continues to work for visual styling.
+
+See [CHANGELOG.md](CHANGELOG.md) for full details.
+
+---
+
 ## Theming
 
 FigUI3 automatically adapts to light and dark themes using CSS custom properties. The library uses Figma's color variable naming convention:

package/components.css

@@ -478,7 +478,7 @@ input[type="text"][list] {
 }
 
 @supports (appearance: base-select) {
-  fig-dropdown[variant="neue"] {
+  fig-dropdown[experimental~="modern"] {
     &[type="dropdown"] {
       select:before {
         content: attr(aria-label);
@@ -517,11 +517,14 @@ input[type="text"][list] {
 
       option {
         display: flex;
-        gap: var(--spacer-1);
+        gap: var(--spacer-2);
         padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
         font-weight: var(--body-medium-fontWeight);
         color: var(--figma-color-text-menu);
         position: relative;
+        & * {
+          color: inherit;
+        }
         &[hidden] {
           display: none;
         }
@@ -598,6 +601,7 @@ input[type="text"][list] {
     /* https://codepen.io/editor/argyleink/pen/019c1f28-bbc2-7bac-ad4a-a7e41d3730f1 */
     ::picker(select) {
       appearance: base-select;
+      color-scheme: dark;
 
       /* Appearance/style */
       scrollbar-width: thin;
@@ -2412,7 +2416,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);
@@ -2512,6 +2538,8 @@ class FigInputColor extends HTMLElement {
     const useFigmaPicker = this.picker === "figma";
     const hidePicker = this.picker === "false";
     const showAlpha = this.getAttribute("alpha") === "true";
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     let html = ``;
     if (this.getAttribute("text")) {
@@ -2536,7 +2564,7 @@ class FigInputColor extends HTMLElement {
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${
+          ? `<fig-fill-picker mode="solid" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -2554,7 +2582,7 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${
+          ? `<fig-fill-picker mode="solid" ${expAttr} ${
               showAlpha ? "" : 'alpha="false"'
             } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
               this.alpha
@@ -2746,7 +2774,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker"];
+    return ["value", "style", "mode", "picker", "experimental"];
   }
 
   get mode() {
@@ -2928,7 +2956,7 @@ class FigInputFill extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "mode"];
+    return ["value", "disabled", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -3079,11 +3107,12 @@ class FigInputFill extends HTMLElement {
     }
 
     const modeAttr = this.getAttribute("mode");
+    const experimentalAttr = this.getAttribute("experimental");
     this.innerHTML = `
       <div class="input-combo">
         <fig-fill-picker value='${fillPickerValue}' ${
       disabled ? "disabled" : ""
-    } ${modeAttr ? `mode="${modeAttr}"` : ""}></fig-fill-picker>
+    } ${modeAttr ? `mode="${modeAttr}"` : ""} ${experimentalAttr ? `experimental="${experimentalAttr}"` : ""}></fig-fill-picker>
         ${controlsHtml}
       </div>`;
 
@@ -3525,6 +3554,17 @@ class FigInputFill extends HTMLElement {
           this.#render();
         }
         break;
+      case "mode":
+      case "experimental":
+        // Pass through to internal fill picker
+        if (this.#fillPicker) {
+          if (newValue) {
+            this.#fillPicker.setAttribute(name, newValue);
+          } else {
+            this.#fillPicker.removeAttribute(name);
+          }
+        }
+        break;
     }
   }
 }
@@ -3870,6 +3910,8 @@ class FigComboInput extends HTMLElement {
     this.options = this.getOptionsFromAttribute();
     this.placeholder = this.getAttribute("placeholder") || "";
     this.value = this.getAttribute("value") || "";
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
     this.innerHTML = `<div class="input-combo">
                         <fig-input-text placeholder="${this.placeholder}">
                         </fig-input-text> 
@@ -3877,7 +3919,7 @@ 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">
+                            <fig-dropdown type="dropdown" ${expAttr}>
                               ${this.options
                                 .map((option) => `<option>${option}</option>`)
                                 .join("")}
@@ -3906,7 +3948,7 @@ class FigComboInput extends HTMLElement {
     this.value = this.input.value;
   }
   static get observedAttributes() {
-    return ["options", "placeholder", "value", "disabled"];
+    return ["options", "placeholder", "value", "disabled", "experimental"];
   }
   focus() {
     this.input.focus();
@@ -3953,6 +3995,15 @@ class FigComboInput extends HTMLElement {
       case "disabled":
         this.#applyDisabled(newValue !== null && newValue !== "false");
         break;
+      case "experimental":
+        if (this.dropdown) {
+          if (newValue) {
+            this.dropdown.setAttribute("experimental", newValue);
+          } else {
+            this.dropdown.removeAttribute("experimental");
+          }
+        }
+        break;
     }
   }
 }
@@ -5297,7 +5348,7 @@ class FigFillPicker extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "alpha", "mode"];
+    return ["value", "disabled", "alpha", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -5581,6 +5632,9 @@ class FigFillPicker extends HTMLElement {
     }
 
     // Build header content - label if single mode, dropdown if multiple
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
+    
     let headerContent;
     if (allowedModes.length === 1) {
       headerContent = `<span class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</span>`;
@@ -5588,7 +5642,7 @@ class FigFillPicker extends HTMLElement {
       const options = allowedModes
         .map((m) => `<option value="${m}">${modeLabels[m]}</option>`)
         .join("\n          ");
-      headerContent = `<fig-dropdown class="fig-fill-picker-type" variant="neue" value="${this.#fillType}">
+      headerContent = `<fig-dropdown class="fig-fill-picker-type" ${expAttr} value="${this.#fillType}">
           ${options}
         </fig-dropdown>`;
     }
@@ -5827,10 +5881,17 @@ class FigFillPicker extends HTMLElement {
     ctx.fillRect(0, 0, width, height);
   }
 
-  #updateHandlePosition() {
+  #updateHandlePosition(retryCount = 0) {
     if (!this.#colorAreaHandle || !this.#colorArea) return;
 
     const rect = this.#colorArea.getBoundingClientRect();
+    
+    // If the canvas isn't visible yet (0 dimensions), schedule a retry (max 5 attempts)
+    if ((rect.width === 0 || rect.height === 0) && retryCount < 5) {
+      requestAnimationFrame(() => this.#updateHandlePosition(retryCount + 1));
+      return;
+    }
+    
     const x = (this.#color.s / 100) * rect.width;
     const y = ((100 - this.#color.v) / 100) * rect.height;
 
@@ -5917,10 +5978,12 @@ class FigFillPicker extends HTMLElement {
   // ============ GRADIENT TAB ============
   #initGradientTab() {
     const container = this.#dialog.querySelector('[data-tab="gradient"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     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" ${expAttr} value="${
           this.#gradient.type
         }">
           <option value="linear" selected>Linear</option>

package/index.html

@@ -654,6 +654,12 @@
             <fig-combo-input options="Red, Green, Blue, Yellow, Purple"
                              value="Blue"
                              placeholder="Select a color"></fig-combo-input>
+
+            <h3>Experimental Modern</h3>
+            <p class="description">Uses the modern CSS picker styling for the dropdown.</p>
+            <fig-combo-input options="House, Apartment, Condo, Townhouse, Other"
+                             experimental="modern"
+                             placeholder="Type of residence"></fig-combo-input>
         </section>
         <hr>
 
@@ -840,7 +846,7 @@
             <p class="description">A select dropdown menu with options.</p>
 
             <h3>Default</h3>
-            <fig-dropdown variant="neue">
+            <fig-dropdown>
                 <optgroup label="Numbers">
                     <option>One</option>
                     <option>Two</option>
@@ -854,8 +860,7 @@
             </fig-dropdown>
 
             <h3>Full Width</h3>
-            <fig-dropdown full
-                          variant="neue">
+            <fig-dropdown full>
                 <option>Full Width Dropdown</option>
                 <option>Option Two</option>
                 <option>Option Three</option>
@@ -865,8 +870,7 @@
             <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 8px;">
                 Uses <code>field-sizing: content</code> to resize based on selected option.
             </p>
-            <fig-dropdown autoresize
-                          variant="neue">
+            <fig-dropdown autoresize>
                 <option>XS</option>
                 <option>Small</option>
                 <option>Medium</option>
@@ -875,8 +879,27 @@
                 <option>XXL Super Extended Option</option>
             </fig-dropdown>
 
-            <h3>Dropdown Neue Variant (with many options)</h3>
-            <fig-dropdown variant="neue"
+            <h3>Experimental Modern</h3>
+            <p class="description">
+                Use <code>experimental="modern"</code> to enable the customizable select picker using
+                <code>::picker(select)</code> and <code>appearance: base-select</code>. This is a progressive
+                enhancement that falls back to native select on unsupported browsers.
+            </p>
+            <fig-dropdown experimental="modern">
+                <optgroup label="Numbers">
+                    <option>One</option>
+                    <option>Two</option>
+                    <option>Three</option>
+                </optgroup>
+                <optgroup label="Fruits">
+                    <option>Apple</option>
+                    <option>Banana</option>
+                    <option>Cherry</option>
+                </optgroup>
+            </fig-dropdown>
+
+            <h3>Experimental Modern - Dropdown Type (with many options)</h3>
+            <fig-dropdown experimental="modern"
                           type="dropdown"
                           label="Choose">
                 <optgroup label="North America">
@@ -1007,9 +1030,9 @@
                 </optgroup>
             </fig-dropdown>
 
-            <h3>Select Neue Variant (with many options)</h3>
+            <h3>Experimental Modern - Select Type (with many options)</h3>
 
-            <fig-dropdown variant="neue">
+            <fig-dropdown experimental="modern">
                 <optgroup label="North America">
                     <option value="us">United States</option>
                     <option value="ca">Canada</option>
@@ -1137,6 +1160,41 @@
                     <option value="zeplin">Zeplin</option>
                 </optgroup>
             </fig-dropdown>
+
+            <h3>Experimental Modern - With Icons (Bleeding Edge)</h3>
+            <p class="description">
+                Using icons inside options requires <code>appearance: base-select</code> support.
+                This is bleeding edge and may not work in all browsers.
+            </p>
+            <fig-dropdown experimental="modern">
+                <option value="home">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M2 6.5L8 2L14 6.5V13.5C14 14 13.5 14.5 13 14.5H3C2.5 14.5 2 14 2 13.5V6.5Z" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                    </svg>
+                    <label>Home</label>
+                </option>
+                <option value="settings">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="8" cy="8" r="2" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                        <path d="M8 1V3M8 13V15M1 8H3M13 8H15M2.5 2.5L4 4M12 12L13.5 13.5M2.5 13.5L4 12M12 4L13.5 2.5" stroke="currentColor" stroke-opacity="0.9"/>
+                    </svg>
+                    <label>Settings</label>
+                </option>
+                <option value="user">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="8" cy="5" r="3" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                        <path d="M2 14C2 11 4.5 9 8 9C11.5 9 14 11 14 14" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                    </svg>
+                    <label>User Profile</label>
+                </option>
+                <option value="search">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="6.5" cy="6.5" r="4" stroke="currentColor" stroke-opacity="0.9" fill="none"/>
+                        <path d="M10 10L14 14" stroke="currentColor" stroke-opacity="0.9"/>
+                    </svg>
+                    <label>Search</label>
+                </option>
+            </fig-dropdown>
         </section>
         <hr>
 
@@ -1840,6 +1898,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 +2728,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.15.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",