@rogieking/figui3 2.18.1 → 2.18.3

package/fig.js

@@ -3682,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>
@@ -3883,14 +3883,22 @@ class FigInputFill extends HTMLElement {
           );
         }
         break;
-      case "gradient":
+      case "gradient": {
         if (this.#opacityInput) {
           this.#opacityInput.setAttribute(
             "value",
-            this.#gradient.stops[0]?.opacity || 100
+            this.#gradient.stops[0]?.opacity ?? 100
           );
         }
+        const label = this.querySelector(".fig-input-fill-label");
+        if (label) {
+          const newLabel =
+            this.#gradient.type.charAt(0).toUpperCase() +
+            this.#gradient.type.slice(1);
+          label.textContent = newLabel;
+        }
         break;
+      }
       case "image":
         if (this.#opacityInput) {
           this.#opacityInput.setAttribute(
@@ -3970,7 +3978,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>
@@ -6469,6 +6477,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();
     });
@@ -6868,8 +6877,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();
           });
@@ -6913,10 +6923,12 @@ class FigFillPicker extends HTMLElement {
   // ============ IMAGE TAB ============
   #initImageTab() {
     const container = this.#dialog.querySelector('[data-tab="image"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-media-header">
-        <fig-dropdown class="fig-fill-picker-scale-mode" value="${
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#image.scaleMode
         }">
           <option value="fill" selected>Fill</option>
@@ -7065,10 +7077,12 @@ class FigFillPicker extends HTMLElement {
   // ============ VIDEO TAB ============
   #initVideoTab() {
     const container = this.#dialog.querySelector('[data-tab="video"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-media-header">
-        <fig-dropdown class="fig-fill-picker-scale-mode" value="${
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#video.scaleMode
         }">
           <option value="fill" selected>Fill</option>
@@ -7154,6 +7168,8 @@ class FigFillPicker extends HTMLElement {
   // ============ WEBCAM TAB ============
   #initWebcamTab() {
     const container = this.#dialog.querySelector('[data-tab="webcam"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-webcam-preview">
@@ -7164,7 +7180,7 @@ class FigFillPicker extends HTMLElement {
         </div>
       </div>
       <div class="fig-fill-picker-webcam-controls">
-        <fig-dropdown class="fig-fill-picker-camera-select" style="display: none;">
+        <fig-dropdown class="fig-fill-picker-camera-select" ${expAttr} style="display: none;">
         </fig-dropdown>
         <fig-button class="fig-fill-picker-webcam-capture" variant="primary">
           Capture

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.1",
+  "version": "2.18.3",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",