@rogieking/figui3 2.14.0 → 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;

package/fig.js

@@ -2538,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")) {
@@ -2562,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
@@ -2580,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
@@ -2772,7 +2774,7 @@ class FigInputColor extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "style", "mode", "picker"];
+    return ["value", "style", "mode", "picker", "experimental"];
   }
 
   get mode() {
@@ -2954,7 +2956,7 @@ class FigInputFill extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "mode"];
+    return ["value", "disabled", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -3105,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>`;
 
@@ -3551,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;
     }
   }
 }
@@ -3896,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> 
@@ -3903,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("")}
@@ -3932,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();
@@ -3979,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;
     }
   }
 }
@@ -5323,7 +5348,7 @@ class FigFillPicker extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled", "alpha", "mode"];
+    return ["value", "disabled", "alpha", "mode", "experimental"];
   }
 
   connectedCallback() {
@@ -5607,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>`;
@@ -5614,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>`;
     }
@@ -5853,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;
 
@@ -5943,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" variant="neue" 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>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.14.0",
+  "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",