@rogieking/figui3 2.1.4 → 2.1.5

package/example.html

@@ -605,6 +605,26 @@
                 <fig-chit background="#9747FF"
                           size="large"></fig-chit>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Gradient)</label>
+                <fig-chit background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Radial)</label>
+                <fig-chit background="radial-gradient(circle, #ff6b6b, #4ecdc4)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Angular)</label>
+                <fig-chit background="conic-gradient(from 0deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000)"
+                          size="large"></fig-chit>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Large (Image)</label>
+                <fig-chit background="url(https://avatars.githubusercontent.com/u/12345678?v=4)"
+                          size="large"></fig-chit>
+            </fig-field>
 
             <h3>States</h3>
             <fig-field direction="horizontal">
@@ -947,6 +967,9 @@
                 document.getElementById('fill-picker-events').addEventListener('input', (e) => {
                     document.getElementById('fill-picker-output').textContent = 'Input: ' + JSON.stringify(e.detail);
                 });
+                document.getElementById('fill-picker-events').addEventListener('change', (e) => {
+                    document.getElementById('fill-picker-output').textContent = 'Change: ' + JSON.stringify(e.detail);
+                });
             </script>
         </section>
         <hr>
@@ -1230,6 +1253,27 @@
                                  text="true"
                                  alpha="true"></fig-input-color>
             </div>
+
+            <h3>Event Listening</h3>
+            <fig-input-color id="input-color-events"
+                             value="#FF6B6B"
+                             text="true"
+                             alpha="true"
+                             picker="figma"></fig-input-color>
+            <p class="description"
+               id="input-color-output">Change the color above to see events.</p>
+            <script>
+                document.getElementById('input-color-events').addEventListener('input', (e) => {
+                    const el = e.target;
+                    document.getElementById('input-color-output').textContent =
+                        `Input: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
+                });
+                document.getElementById('input-color-events').addEventListener('change', (e) => {
+                    const el = e.target;
+                    document.getElementById('input-color-output').textContent =
+                        `Change: ${el.value} | Hex: ${el.hexOpaque} | Alpha: ${el.alpha}%`;
+                });
+            </script>
         </section>
         <hr>
 

package/fig.js

@@ -2203,6 +2203,10 @@ class FigInputColor extends HTMLElement {
           "input",
           this.#handleAlphaInput.bind(this)
         );
+        this.#alphaInput.addEventListener(
+          "change",
+          this.#handleChange.bind(this)
+        );
       }
     });
   }
@@ -2290,7 +2294,15 @@ class FigInputColor extends HTMLElement {
     event.stopPropagation();
     const detail = event.detail;
     if (detail && detail.color) {
-      this.#setValues(detail.color);
+      // Build hex value with alpha included
+      let hexValue = detail.color;
+      if (detail.alpha !== undefined) {
+        const alphaHex = Math.round(detail.alpha * 255)
+          .toString(16)
+          .padStart(2, "0");
+        hexValue = detail.color + alphaHex;
+      }
+      this.#setValues(hexValue);
       if (this.#textInput) {
         this.#textInput.setAttribute(
           "value",
@@ -2300,6 +2312,10 @@ class FigInputColor extends HTMLElement {
       if (this.#alphaInput && detail.alpha !== undefined) {
         this.#alphaInput.setAttribute("value", Math.round(detail.alpha * 100));
       }
+      if (this.#swatch) {
+        this.#swatch.setAttribute("background", this.hexOpaque);
+        this.#swatch.setAttribute("alpha", this.rgba.a);
+      }
       this.#emitInputEvent();
     }
   }
@@ -4347,6 +4363,9 @@ class FigFillPicker extends HTMLElement {
       this.#updateColorInputs();
       this.#emitInput();
     });
+    this.#hueSlider.addEventListener("change", () => {
+      this.#emitChange();
+    });
 
     // Setup opacity slider
     if (showAlpha) {
@@ -4358,6 +4377,9 @@ class FigFillPicker extends HTMLElement {
         this.#updateColorInputs();
         this.#emitInput();
       });
+      this.#opacitySlider.addEventListener("change", () => {
+        this.#emitChange();
+      });
     }
 
     // Setup color input
@@ -4375,6 +4397,9 @@ class FigFillPicker extends HTMLElement {
       }
       this.#emitInput();
     });
+    colorInput.addEventListener("change", () => {
+      this.#emitChange();
+    });
 
     // Setup eyedropper
     const eyedropper = container.querySelector(".fig-fill-picker-eyedropper");
@@ -4480,6 +4505,7 @@ class FigFillPicker extends HTMLElement {
 
     this.#colorArea.addEventListener("pointerup", () => {
       this.#isDraggingColor = false;
+      this.#emitChange();
     });
 
     // Handle drag (for when handle is at corners)
@@ -4497,6 +4523,7 @@ class FigFillPicker extends HTMLElement {
 
     this.#colorAreaHandle.addEventListener("pointerup", () => {
       this.#isDraggingColor = false;
+      this.#emitChange();
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {