@rogieking/figui3 2.1.0 → 2.1.2

package/components.css

@@ -326,6 +326,10 @@
     --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
       0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
       0px 1px 3px 0px rgba(0, 0, 0, 0.4);
+    --figma-elevation-200: px 3px 8px rgba(0, 0, 0, 0.35),
+      0px 1px 3px rgba(0, 0, 0, 0.5),
+      inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
+      inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
     --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
         rgba(255, 255, 255, 0.08) inset,
       0px 10px 16px 0px rgba(0, 0, 0, 0.35),
@@ -344,6 +348,10 @@
   --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
     0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
     0px 1px 3px 0px rgba(0, 0, 0, 0.4);
+  --figma-elevation-200: px 3px 8px rgba(0, 0, 0, 0.35),
+    0px 1px 3px rgba(0, 0, 0, 0.5),
+    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
+    inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
   --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.08)
       inset,
     0px 10px 16px 0px rgba(0, 0, 0, 0.35),

package/example.html

@@ -565,6 +565,19 @@
                     <fig-chit background="#000000"></fig-chit>
                 </hstack>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Color (50% opacity)</label>
+                <hstack>
+                    <fig-chit background="#FF0000"
+                              alpha="0.5"></fig-chit>
+                    <fig-chit background="#00FF00"
+                              alpha="0.5"></fig-chit>
+                    <fig-chit background="#0000FF"
+                              alpha="0.5"></fig-chit>
+                    <fig-chit background="#000000"
+                              alpha="0.5"></fig-chit>
+                </hstack>
+            </fig-field>
             <fig-field direction="horizontal">
                 <label>Gradient (linear)</label>
                 <fig-chit background="linear-gradient(180deg, #ff90ff, #0000ff)"></fig-chit>
@@ -638,8 +651,11 @@
                 <fig-header>
                     <h3>Dialog Title</h3>
                     <fig-tooltip text="Close">
-                        <fig-button variant="ghost" icon="true" close-dialog>
-                            <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
                         </fig-button>
                     </fig-tooltip>
                 </fig-header>
@@ -681,8 +697,11 @@
                 <fig-header>
                     <h3>Positioned Dialog</h3>
                     <fig-tooltip text="Close">
-                        <fig-button variant="ghost" icon="true" close-dialog>
-                            <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
                         </fig-button>
                     </fig-tooltip>
                 </fig-header>
@@ -716,8 +735,11 @@
                 <fig-header>
                     <h3>Drag Handle Demo</h3>
                     <fig-tooltip text="Close">
-                        <fig-button variant="ghost" icon="true" close-dialog>
-                            <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+                        <fig-button variant="ghost"
+                                    icon="true"
+                                    close-dialog>
+                            <span class="fig-mask-icon"
+                                  style="--icon: var(--icon-close)"></span>
                         </fig-button>
                     </fig-tooltip>
                 </fig-header>
@@ -904,14 +926,15 @@
                              value='{"type":"solid","color":"#AA96DA"}'></fig-fill-picker>
 
             <h3>Mode Lockdown</h3>
-            <p class="description">Use the <code>mode</code> attribute to lock the picker to a single fill type. The dropdown is replaced with a label and tab switching is disabled.</p>
-            
+            <p class="description">Use the <code>mode</code> attribute to lock the picker to a single fill type. The
+                dropdown is replaced with a label and tab switching is disabled.</p>
+
             <h4>Solid Only</h4>
             <fig-fill-picker mode="solid"></fig-fill-picker>
-            
+
             <h4>Gradient Only</h4>
             <fig-fill-picker mode="gradient"></fig-fill-picker>
-            
+
             <h4>Image Only</h4>
             <fig-fill-picker mode="image"></fig-fill-picker>
 
@@ -1063,26 +1086,38 @@
             </hstack>
 
             <h3>Picker Attribute</h3>
-            <p class="description">Use <code>picker="figma"</code> to use the FigFillPicker instead of the native color picker. Default is <code>picker="native"</code>.</p>
-            
+            <p class="description">Use <code>picker="figma"</code> to use the FigFillPicker instead of the native color
+                picker. Default is <code>picker="native"</code>.</p>
+
             <h4>Native Picker (default)</h4>
-            <fig-input-color value="#9747FF" text="true"></fig-input-color>
-            
+            <fig-input-color value="#9747FF"
+                             text="true"></fig-input-color>
+
             <h4>Figma Picker</h4>
-            <fig-input-color value="#9747FF" text="true" picker="figma"></fig-input-color>
-            
+            <fig-input-color value="#9747FF"
+                             text="true"
+                             picker="figma"></fig-input-color>
+
             <h4>Figma Picker with Alpha</h4>
-            <fig-input-color value="#9747FF" text="true" alpha="true" picker="figma"></fig-input-color>
-            
+            <fig-input-color value="#9747FF"
+                             text="true"
+                             alpha="true"
+                             picker="figma"></fig-input-color>
+
             <h4>No Picker (text input only)</h4>
-            <fig-input-color value="#9747FF" text="true" picker="false"></fig-input-color>
-            
+            <fig-input-color value="#9747FF"
+                             text="true"
+                             picker="false"></fig-input-color>
+
             <h4>No Picker with Alpha</h4>
-            <fig-input-color value="#9747FF" text="true" alpha="true" picker="false"></fig-input-color>
+            <fig-input-color value="#9747FF"
+                             text="true"
+                             alpha="true"
+                             picker="false"></fig-input-color>
 
             <h3>Width Test (Resizable)</h3>
             <p class="description">Drag the right edge of each container to test at different widths.</p>
-            
+
             <style>
                 .resize-test {
                     resize: horizontal;
@@ -1095,9 +1130,11 @@
                     width: 200px;
                     border-radius: 4px;
                 }
+
                 .resize-test fig-input-color {
                     width: 100%;
                 }
+
                 .resize-test-label {
                     font-size: 0.7rem;
                     color: var(--figma-color-text-tertiary);
@@ -1115,61 +1152,83 @@
             <h4>Text Only</h4>
             <div class="resize-test">
                 <div class="resize-test-label">text="true"</div>
-                <fig-input-color value="#33FF57" text="true"></fig-input-color>
+                <fig-input-color value="#33FF57"
+                                 text="true"></fig-input-color>
             </div>
 
             <h4>Text + Alpha</h4>
             <div class="resize-test">
                 <div class="resize-test-label">text="true" alpha="true"</div>
-                <fig-input-color value="#3357FF" text="true" alpha="true"></fig-input-color>
+                <fig-input-color value="#3357FF"
+                                 text="true"
+                                 alpha="true"></fig-input-color>
             </div>
 
             <h4>Picker="figma"</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="figma"</div>
-                <fig-input-color value="#FF33A1" picker="figma"></fig-input-color>
+                <fig-input-color value="#FF33A1"
+                                 picker="figma"></fig-input-color>
             </div>
 
             <h4>Picker="figma" + Text</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="figma" text="true"</div>
-                <fig-input-color value="#A133FF" picker="figma" text="true"></fig-input-color>
+                <fig-input-color value="#A133FF"
+                                 picker="figma"
+                                 text="true"></fig-input-color>
             </div>
 
             <h4>Picker="figma" + Text + Alpha</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="figma" text="true" alpha="true"</div>
-                <fig-input-color value="#33FFA1" picker="figma" text="true" alpha="true"></fig-input-color>
+                <fig-input-color value="#33FFA1"
+                                 picker="figma"
+                                 text="true"
+                                 alpha="true"></fig-input-color>
             </div>
 
             <h4>Picker="false" + Text</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="false" text="true"</div>
-                <fig-input-color value="#FFD700" picker="false" text="true"></fig-input-color>
+                <fig-input-color value="#FFD700"
+                                 picker="false"
+                                 text="true"></fig-input-color>
             </div>
 
             <h4>Picker="false" + Text + Alpha</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="false" text="true" alpha="true"</div>
-                <fig-input-color value="#00CED1" picker="false" text="true" alpha="true"></fig-input-color>
+                <fig-input-color value="#00CED1"
+                                 picker="false"
+                                 text="true"
+                                 alpha="true"></fig-input-color>
             </div>
 
             <h4>Full Attribute</h4>
             <div class="resize-test">
                 <div class="resize-test-label">text="true" alpha="true" full</div>
-                <fig-input-color value="#DC143C" text="true" alpha="true" full></fig-input-color>
+                <fig-input-color value="#DC143C"
+                                 text="true"
+                                 alpha="true"
+                                 full></fig-input-color>
             </div>
 
             <h4>With Alpha in Value (#RRGGBBAA)</h4>
             <div class="resize-test">
                 <div class="resize-test-label">value="#8B008B80" text="true" alpha="true"</div>
-                <fig-input-color value="#8B008B80" text="true" alpha="true"></fig-input-color>
+                <fig-input-color value="#8B008B80"
+                                 text="true"
+                                 alpha="true"></fig-input-color>
             </div>
 
             <h4>Picker="native" + Text + Alpha</h4>
             <div class="resize-test">
                 <div class="resize-test-label">picker="native" text="true" alpha="true"</div>
-                <fig-input-color value="#20B2AA" picker="native" text="true" alpha="true"></fig-input-color>
+                <fig-input-color value="#20B2AA"
+                                 picker="native"
+                                 text="true"
+                                 alpha="true"></fig-input-color>
             </div>
         </section>
         <hr>
@@ -2355,8 +2414,11 @@
                     is="fig-toast">
                 <p>File uploaded successfully.</p>
                 <hr vertical />
-                <fig-button variant="ghost" icon="true" close-toast>
-                    <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+                <fig-button variant="ghost"
+                            icon="true"
+                            close-toast>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-close)"></span>
                 </fig-button>
             </dialog>
 
@@ -2487,53 +2549,66 @@
         <!-- Icons -->
         <section id="icons">
             <h2>Icons</h2>
-            <p class="description">CSS mask-based icons using the <code>.fig-mask-icon</code> utility class. Icons inherit <code>currentColor</code> and can be sized with the <code>--size</code> variable.</p>
+            <p class="description">CSS mask-based icons using the <code>.fig-mask-icon</code> utility class. Icons
+                inherit <code>currentColor</code> and can be sized with the <code>--size</code> variable.</p>
 
             <h3>Usage</h3>
-            <p class="description">Set the <code>--icon</code> CSS variable to any icon variable. Icons use <code>currentColor</code> so they inherit text color.</p>
-            
-<pre><code>&lt;span class="fig-mask-icon" style="--icon: var(--icon-add)"&gt;&lt;/span&gt;</code></pre>
+            <p class="description">Set the <code>--icon</code> CSS variable to any icon variable. Icons use
+                <code>currentColor</code> so they inherit text color.
+            </p>
+
+            <pre><code>&lt;span class="fig-mask-icon" style="--icon: var(--icon-add)"&gt;&lt;/span&gt;</code></pre>
 
             <h3>Available Icons</h3>
             <hstack style="gap: 16px; flex-wrap: wrap;">
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add)"></span>
                     <code>--icon-add</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-minus)"></span>
                     <code>--icon-minus</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-back)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-back)"></span>
                     <code>--icon-back</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-forward)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-forward)"></span>
                     <code>--icon-forward</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-close)"></span>
                     <code>--icon-close</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-rotate)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-rotate)"></span>
                     <code>--icon-rotate</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-swap)"></span>
                     <code>--icon-swap</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-checkmark)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-checkmark)"></span>
                     <code>--icon-checkmark</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
                     <code>--icon-eyedropper</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
                     <code>--icon-steppers</code>
                 </vstack>
             </hstack>
@@ -2542,19 +2617,23 @@
             <p class="description">Use the <code>--size</code> variable to adjust icon dimensions.</p>
             <hstack style="gap: 16px; align-items: end;">
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 12px"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add); --size: 12px"></span>
                     <code>12px</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 16px"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add); --size: 16px"></span>
                     <code>16px</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 24px"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add); --size: 24px"></span>
                     <code>24px</code>
                 </vstack>
                 <vstack style="align-items: center; gap: 4px;">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 32px"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add); --size: 32px"></span>
                     <code>32px</code>
                 </vstack>
             </hstack>
@@ -2562,24 +2641,35 @@
             <h3>Color Inheritance</h3>
             <p class="description">Icons inherit <code>currentColor</code>, so they match the parent's text color.</p>
             <hstack style="gap: 16px;">
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
-                <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
+                <span class="fig-mask-icon"
+                      style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
             </hstack>
 
             <h3>Inside Buttons</h3>
             <hstack>
-                <fig-button icon variant="ghost">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
+                <fig-button icon
+                            variant="ghost">
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add)"></span>
                 </fig-button>
-                <fig-button icon variant="ghost">
-                    <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
+                <fig-button icon
+                            variant="ghost">
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-minus)"></span>
                 </fig-button>
                 <fig-button>
-                    <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-add)"></span>
                     Add Item
                 </fig-button>
             </hstack>

package/fig.js

@@ -2122,14 +2122,18 @@ class FigInputColor extends HTMLElement {
                     </fig-input-number>
                 </fig-tooltip>`;
       }
-      
+
       let swatchElement = "";
       if (!hidePicker) {
         swatchElement = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${showAlpha ? "" : 'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}"}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}"></fig-chit>`;
+          ? `<fig-fill-picker mode="solid" ${
+              showAlpha ? "" : 'alpha="false"'
+            } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
+              this.alpha
+            }}'></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
       }
-      
+
       html = `<div class="input-combo">
                 ${swatchElement}
                 ${label}
@@ -2140,8 +2144,12 @@ class FigInputColor extends HTMLElement {
         html = ``;
       } else {
         html = useFigmaPicker
-          ? `<fig-fill-picker mode="solid" ${showAlpha ? "" : 'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}"}'></fig-fill-picker>`
-          : `<fig-chit background="${this.hexOpaque}"></fig-chit>`;
+          ? `<fig-fill-picker mode="solid" ${
+              showAlpha ? "" : 'alpha="false"'
+            } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
+              this.alpha
+            }}'></fig-fill-picker>`
+          : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
       }
     }
     this.innerHTML = html;
@@ -2163,8 +2171,14 @@ class FigInputColor extends HTMLElement {
         if (this.hasAttribute("disabled")) {
           this.#fillPicker.setAttribute("disabled", "");
         }
-        this.#fillPicker.addEventListener("input", this.#handleFillPickerInput.bind(this));
-        this.#fillPicker.addEventListener("change", this.#handleChange.bind(this));
+        this.#fillPicker.addEventListener(
+          "input",
+          this.#handleFillPickerInput.bind(this)
+        );
+        this.#fillPicker.addEventListener(
+          "change",
+          this.#handleChange.bind(this)
+        );
       }
 
       if (this.#textInput) {
@@ -2233,6 +2247,19 @@ class FigInputColor extends HTMLElement {
     const alpha = Math.round((alphaValue / 100) * 255);
     const alphaHex = alpha.toString(16).padStart(2, "0");
     this.#setValues(this.hexOpaque + alphaHex);
+    if (this.#swatch) {
+      this.#swatch.setAttribute("alpha", this.rgba.a);
+    }
+    if (this.#fillPicker) {
+      this.#fillPicker.setAttribute(
+        "value",
+        JSON.stringify({
+          type: "solid",
+          color: this.hexOpaque,
+          opacity: this.alpha,
+        })
+      );
+    }
     this.#emitInputEvent();
   }
 
@@ -2309,9 +2336,17 @@ class FigInputColor extends HTMLElement {
         }
         if (this.#swatch) {
           this.#swatch.setAttribute("background", this.hexOpaque);
+          this.#swatch.setAttribute("alpha", this.rgba.a);
         }
         if (this.#fillPicker) {
-          this.#fillPicker.setAttribute("value", JSON.stringify({ type: "solid", color: this.hexOpaque }));
+          this.#fillPicker.setAttribute(
+            "value",
+            JSON.stringify({
+              type: "solid",
+              color: this.hexOpaque,
+              opacity: this.alpha,
+            })
+          );
         }
         if (this.#alphaInput) {
           this.#alphaInput.setAttribute("value", this.alpha);
@@ -2788,6 +2823,7 @@ window.customElements.define("fig-combo-input", FigComboInput);
  * @attr {string} size - Size of the chip: "small" (default) or "large"
  * @attr {boolean} selected - Whether the chip shows a selection ring
  * @attr {boolean} disabled - Whether the chip is disabled
+ * @attr {number} alpha - Opacity value (0-1) to display the color with transparency
  */
 class FigChit extends HTMLElement {
   #type = "color"; // 'color', 'gradient', 'image'
@@ -2800,11 +2836,21 @@ class FigChit extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["background", "size", "selected", "disabled"];
+    return ["background", "size", "selected", "disabled", "alpha"];
   }
 
   connectedCallback() {
     this.#render();
+    this.#updateAlpha();
+  }
+
+  #updateAlpha() {
+    const alpha = this.getAttribute("alpha");
+    if (alpha !== null) {
+      this.style.setProperty("--alpha", alpha);
+    } else {
+      this.style.removeProperty("--alpha");
+    }
   }
 
   #detectType(bg) {
@@ -2893,6 +2939,20 @@ class FigChit extends HTMLElement {
         return;
       }
       this.#render();
+    } else if (name === "alpha") {
+      this.#updateAlpha();
+    }
+  }
+
+  get alpha() {
+    return this.getAttribute("alpha");
+  }
+
+  set alpha(value) {
+    if (value === null || value === undefined) {
+      this.removeAttribute("alpha");
+    } else {
+      this.setAttribute("alpha", value);
     }
   }
 }
@@ -3949,6 +4009,10 @@ class FigFillPicker extends HTMLElement {
           this.#color = parsed.color;
         }
       }
+      // Parse opacity (0-100) and convert to alpha (0-1)
+      if (parsed.opacity !== undefined) {
+        this.#color.a = parsed.opacity / 100;
+      }
       if (parsed.gradient)
         this.#gradient = { ...this.#gradient, ...parsed.gradient };
       if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
@@ -4009,6 +4073,13 @@ class FigFillPicker extends HTMLElement {
     this.#chit.setAttribute("background", bg);
     this.#chit.style.setProperty("--chit-bg-size", bgSize);
     this.#chit.style.setProperty("--chit-bg-position", bgPosition);
+
+    // For solid colors, also update the alpha
+    if (this.#fillType === "solid") {
+      this.#chit.setAttribute("alpha", this.#color.a);
+    } else {
+      this.#chit.removeAttribute("alpha");
+    }
   }
 
   #getBackgroundSizing(scaleMode, scale) {
@@ -4044,7 +4115,7 @@ class FigFillPicker extends HTMLElement {
     requestAnimationFrame(() => {
       this.#positionDialog();
       this.#dialog.setAttribute("closedby", "any");
-      
+
       // Second RAF ensures the dialog is visible and canvas is ready
       requestAnimationFrame(() => {
         this.#drawColorArea();
@@ -4133,7 +4204,9 @@ class FigFillPicker extends HTMLElement {
 
     // Build header content - dropdown or label
     const headerContent = lockedMode
-      ? `<span class="fig-fill-picker-type-label">${lockedMode.charAt(0).toUpperCase() + lockedMode.slice(1)}</span>`
+      ? `<span class="fig-fill-picker-type-label">${
+          lockedMode.charAt(0).toUpperCase() + lockedMode.slice(1)
+        }</span>`
       : `<fig-dropdown class="fig-fill-picker-type" value="${this.#fillType}">
           <option value="solid">Solid</option>
           <option value="gradient">Gradient</option>
@@ -4193,7 +4266,7 @@ class FigFillPicker extends HTMLElement {
     const mode = this.getAttribute("mode");
     const validModes = ["solid", "gradient", "image", "video", "webcam"];
     const lockedMode = validModes.includes(mode) ? mode : null;
-    
+
     if (lockedMode && tabName !== lockedMode) {
       return; // Don't allow switching away from locked mode
     }
@@ -4292,7 +4365,7 @@ class FigFillPicker extends HTMLElement {
     colorInput.addEventListener("input", (e) => {
       // Skip if we're dragging - prevents feedback loop that loses saturation for dark colors
       if (this.#isDraggingColor) return;
-      
+
       const hex = e.target.value;
       this.#color = { ...this.#hexToHSV(hex), a: this.#color.a };
       this.#drawColorArea();
@@ -4334,7 +4407,7 @@ class FigFillPicker extends HTMLElement {
 
     const ctx = this.#colorArea.getContext("2d");
     if (!ctx) return;
-    
+
     const width = this.#colorArea.width;
     const height = this.#colorArea.height;
 

package/package.json

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