@rogieking/figui3 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/example.html +153 -63
  2. package/fig.js +88 -15
  3. package/package.json +1 -1
package/example.html CHANGED
@@ -565,6 +565,19 @@
565
565
  <fig-chit background="#000000"></fig-chit>
566
566
  </hstack>
567
567
  </fig-field>
568
+ <fig-field direction="horizontal">
569
+ <label>Color (50% opacity)</label>
570
+ <hstack>
571
+ <fig-chit background="#FF0000"
572
+ alpha="0.5"></fig-chit>
573
+ <fig-chit background="#00FF00"
574
+ alpha="0.5"></fig-chit>
575
+ <fig-chit background="#0000FF"
576
+ alpha="0.5"></fig-chit>
577
+ <fig-chit background="#000000"
578
+ alpha="0.5"></fig-chit>
579
+ </hstack>
580
+ </fig-field>
568
581
  <fig-field direction="horizontal">
569
582
  <label>Gradient (linear)</label>
570
583
  <fig-chit background="linear-gradient(180deg, #ff90ff, #0000ff)"></fig-chit>
@@ -638,8 +651,11 @@
638
651
  <fig-header>
639
652
  <h3>Dialog Title</h3>
640
653
  <fig-tooltip text="Close">
641
- <fig-button variant="ghost" icon="true" close-dialog>
642
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
654
+ <fig-button variant="ghost"
655
+ icon="true"
656
+ close-dialog>
657
+ <span class="fig-mask-icon"
658
+ style="--icon: var(--icon-close)"></span>
643
659
  </fig-button>
644
660
  </fig-tooltip>
645
661
  </fig-header>
@@ -681,8 +697,11 @@
681
697
  <fig-header>
682
698
  <h3>Positioned Dialog</h3>
683
699
  <fig-tooltip text="Close">
684
- <fig-button variant="ghost" icon="true" close-dialog>
685
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
700
+ <fig-button variant="ghost"
701
+ icon="true"
702
+ close-dialog>
703
+ <span class="fig-mask-icon"
704
+ style="--icon: var(--icon-close)"></span>
686
705
  </fig-button>
687
706
  </fig-tooltip>
688
707
  </fig-header>
@@ -716,8 +735,11 @@
716
735
  <fig-header>
717
736
  <h3>Drag Handle Demo</h3>
718
737
  <fig-tooltip text="Close">
719
- <fig-button variant="ghost" icon="true" close-dialog>
720
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
738
+ <fig-button variant="ghost"
739
+ icon="true"
740
+ close-dialog>
741
+ <span class="fig-mask-icon"
742
+ style="--icon: var(--icon-close)"></span>
721
743
  </fig-button>
722
744
  </fig-tooltip>
723
745
  </fig-header>
@@ -904,14 +926,15 @@
904
926
  value='{"type":"solid","color":"#AA96DA"}'></fig-fill-picker>
905
927
 
906
928
  <h3>Mode Lockdown</h3>
907
- <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>
908
-
929
+ <p class="description">Use the <code>mode</code> attribute to lock the picker to a single fill type. The
930
+ dropdown is replaced with a label and tab switching is disabled.</p>
931
+
909
932
  <h4>Solid Only</h4>
910
933
  <fig-fill-picker mode="solid"></fig-fill-picker>
911
-
934
+
912
935
  <h4>Gradient Only</h4>
913
936
  <fig-fill-picker mode="gradient"></fig-fill-picker>
914
-
937
+
915
938
  <h4>Image Only</h4>
916
939
  <fig-fill-picker mode="image"></fig-fill-picker>
917
940
 
@@ -1063,26 +1086,38 @@
1063
1086
  </hstack>
1064
1087
 
1065
1088
  <h3>Picker Attribute</h3>
1066
- <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>
1067
-
1089
+ <p class="description">Use <code>picker="figma"</code> to use the FigFillPicker instead of the native color
1090
+ picker. Default is <code>picker="native"</code>.</p>
1091
+
1068
1092
  <h4>Native Picker (default)</h4>
1069
- <fig-input-color value="#9747FF" text="true"></fig-input-color>
1070
-
1093
+ <fig-input-color value="#9747FF"
1094
+ text="true"></fig-input-color>
1095
+
1071
1096
  <h4>Figma Picker</h4>
1072
- <fig-input-color value="#9747FF" text="true" picker="figma"></fig-input-color>
1073
-
1097
+ <fig-input-color value="#9747FF"
1098
+ text="true"
1099
+ picker="figma"></fig-input-color>
1100
+
1074
1101
  <h4>Figma Picker with Alpha</h4>
1075
- <fig-input-color value="#9747FF" text="true" alpha="true" picker="figma"></fig-input-color>
1076
-
1102
+ <fig-input-color value="#9747FF"
1103
+ text="true"
1104
+ alpha="true"
1105
+ picker="figma"></fig-input-color>
1106
+
1077
1107
  <h4>No Picker (text input only)</h4>
1078
- <fig-input-color value="#9747FF" text="true" picker="false"></fig-input-color>
1079
-
1108
+ <fig-input-color value="#9747FF"
1109
+ text="true"
1110
+ picker="false"></fig-input-color>
1111
+
1080
1112
  <h4>No Picker with Alpha</h4>
1081
- <fig-input-color value="#9747FF" text="true" alpha="true" picker="false"></fig-input-color>
1113
+ <fig-input-color value="#9747FF"
1114
+ text="true"
1115
+ alpha="true"
1116
+ picker="false"></fig-input-color>
1082
1117
 
1083
1118
  <h3>Width Test (Resizable)</h3>
1084
1119
  <p class="description">Drag the right edge of each container to test at different widths.</p>
1085
-
1120
+
1086
1121
  <style>
1087
1122
  .resize-test {
1088
1123
  resize: horizontal;
@@ -1095,9 +1130,11 @@
1095
1130
  width: 200px;
1096
1131
  border-radius: 4px;
1097
1132
  }
1133
+
1098
1134
  .resize-test fig-input-color {
1099
1135
  width: 100%;
1100
1136
  }
1137
+
1101
1138
  .resize-test-label {
1102
1139
  font-size: 0.7rem;
1103
1140
  color: var(--figma-color-text-tertiary);
@@ -1115,61 +1152,83 @@
1115
1152
  <h4>Text Only</h4>
1116
1153
  <div class="resize-test">
1117
1154
  <div class="resize-test-label">text="true"</div>
1118
- <fig-input-color value="#33FF57" text="true"></fig-input-color>
1155
+ <fig-input-color value="#33FF57"
1156
+ text="true"></fig-input-color>
1119
1157
  </div>
1120
1158
 
1121
1159
  <h4>Text + Alpha</h4>
1122
1160
  <div class="resize-test">
1123
1161
  <div class="resize-test-label">text="true" alpha="true"</div>
1124
- <fig-input-color value="#3357FF" text="true" alpha="true"></fig-input-color>
1162
+ <fig-input-color value="#3357FF"
1163
+ text="true"
1164
+ alpha="true"></fig-input-color>
1125
1165
  </div>
1126
1166
 
1127
1167
  <h4>Picker="figma"</h4>
1128
1168
  <div class="resize-test">
1129
1169
  <div class="resize-test-label">picker="figma"</div>
1130
- <fig-input-color value="#FF33A1" picker="figma"></fig-input-color>
1170
+ <fig-input-color value="#FF33A1"
1171
+ picker="figma"></fig-input-color>
1131
1172
  </div>
1132
1173
 
1133
1174
  <h4>Picker="figma" + Text</h4>
1134
1175
  <div class="resize-test">
1135
1176
  <div class="resize-test-label">picker="figma" text="true"</div>
1136
- <fig-input-color value="#A133FF" picker="figma" text="true"></fig-input-color>
1177
+ <fig-input-color value="#A133FF"
1178
+ picker="figma"
1179
+ text="true"></fig-input-color>
1137
1180
  </div>
1138
1181
 
1139
1182
  <h4>Picker="figma" + Text + Alpha</h4>
1140
1183
  <div class="resize-test">
1141
1184
  <div class="resize-test-label">picker="figma" text="true" alpha="true"</div>
1142
- <fig-input-color value="#33FFA1" picker="figma" text="true" alpha="true"></fig-input-color>
1185
+ <fig-input-color value="#33FFA1"
1186
+ picker="figma"
1187
+ text="true"
1188
+ alpha="true"></fig-input-color>
1143
1189
  </div>
1144
1190
 
1145
1191
  <h4>Picker="false" + Text</h4>
1146
1192
  <div class="resize-test">
1147
1193
  <div class="resize-test-label">picker="false" text="true"</div>
1148
- <fig-input-color value="#FFD700" picker="false" text="true"></fig-input-color>
1194
+ <fig-input-color value="#FFD700"
1195
+ picker="false"
1196
+ text="true"></fig-input-color>
1149
1197
  </div>
1150
1198
 
1151
1199
  <h4>Picker="false" + Text + Alpha</h4>
1152
1200
  <div class="resize-test">
1153
1201
  <div class="resize-test-label">picker="false" text="true" alpha="true"</div>
1154
- <fig-input-color value="#00CED1" picker="false" text="true" alpha="true"></fig-input-color>
1202
+ <fig-input-color value="#00CED1"
1203
+ picker="false"
1204
+ text="true"
1205
+ alpha="true"></fig-input-color>
1155
1206
  </div>
1156
1207
 
1157
1208
  <h4>Full Attribute</h4>
1158
1209
  <div class="resize-test">
1159
1210
  <div class="resize-test-label">text="true" alpha="true" full</div>
1160
- <fig-input-color value="#DC143C" text="true" alpha="true" full></fig-input-color>
1211
+ <fig-input-color value="#DC143C"
1212
+ text="true"
1213
+ alpha="true"
1214
+ full></fig-input-color>
1161
1215
  </div>
1162
1216
 
1163
1217
  <h4>With Alpha in Value (#RRGGBBAA)</h4>
1164
1218
  <div class="resize-test">
1165
1219
  <div class="resize-test-label">value="#8B008B80" text="true" alpha="true"</div>
1166
- <fig-input-color value="#8B008B80" text="true" alpha="true"></fig-input-color>
1220
+ <fig-input-color value="#8B008B80"
1221
+ text="true"
1222
+ alpha="true"></fig-input-color>
1167
1223
  </div>
1168
1224
 
1169
1225
  <h4>Picker="native" + Text + Alpha</h4>
1170
1226
  <div class="resize-test">
1171
1227
  <div class="resize-test-label">picker="native" text="true" alpha="true"</div>
1172
- <fig-input-color value="#20B2AA" picker="native" text="true" alpha="true"></fig-input-color>
1228
+ <fig-input-color value="#20B2AA"
1229
+ picker="native"
1230
+ text="true"
1231
+ alpha="true"></fig-input-color>
1173
1232
  </div>
1174
1233
  </section>
1175
1234
  <hr>
@@ -2355,8 +2414,11 @@
2355
2414
  is="fig-toast">
2356
2415
  <p>File uploaded successfully.</p>
2357
2416
  <hr vertical />
2358
- <fig-button variant="ghost" icon="true" close-toast>
2359
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
2417
+ <fig-button variant="ghost"
2418
+ icon="true"
2419
+ close-toast>
2420
+ <span class="fig-mask-icon"
2421
+ style="--icon: var(--icon-close)"></span>
2360
2422
  </fig-button>
2361
2423
  </dialog>
2362
2424
 
@@ -2487,53 +2549,66 @@
2487
2549
  <!-- Icons -->
2488
2550
  <section id="icons">
2489
2551
  <h2>Icons</h2>
2490
- <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>
2552
+ <p class="description">CSS mask-based icons using the <code>.fig-mask-icon</code> utility class. Icons
2553
+ inherit <code>currentColor</code> and can be sized with the <code>--size</code> variable.</p>
2491
2554
 
2492
2555
  <h3>Usage</h3>
2493
- <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>
2494
-
2495
- <pre><code>&lt;span class="fig-mask-icon" style="--icon: var(--icon-add)"&gt;&lt;/span&gt;</code></pre>
2556
+ <p class="description">Set the <code>--icon</code> CSS variable to any icon variable. Icons use
2557
+ <code>currentColor</code> so they inherit text color.
2558
+ </p>
2559
+
2560
+ <pre><code>&lt;span class="fig-mask-icon" style="--icon: var(--icon-add)"&gt;&lt;/span&gt;</code></pre>
2496
2561
 
2497
2562
  <h3>Available Icons</h3>
2498
2563
  <hstack style="gap: 16px; flex-wrap: wrap;">
2499
2564
  <vstack style="align-items: center; gap: 4px;">
2500
- <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2565
+ <span class="fig-mask-icon"
2566
+ style="--icon: var(--icon-add)"></span>
2501
2567
  <code>--icon-add</code>
2502
2568
  </vstack>
2503
2569
  <vstack style="align-items: center; gap: 4px;">
2504
- <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
2570
+ <span class="fig-mask-icon"
2571
+ style="--icon: var(--icon-minus)"></span>
2505
2572
  <code>--icon-minus</code>
2506
2573
  </vstack>
2507
2574
  <vstack style="align-items: center; gap: 4px;">
2508
- <span class="fig-mask-icon" style="--icon: var(--icon-back)"></span>
2575
+ <span class="fig-mask-icon"
2576
+ style="--icon: var(--icon-back)"></span>
2509
2577
  <code>--icon-back</code>
2510
2578
  </vstack>
2511
2579
  <vstack style="align-items: center; gap: 4px;">
2512
- <span class="fig-mask-icon" style="--icon: var(--icon-forward)"></span>
2580
+ <span class="fig-mask-icon"
2581
+ style="--icon: var(--icon-forward)"></span>
2513
2582
  <code>--icon-forward</code>
2514
2583
  </vstack>
2515
2584
  <vstack style="align-items: center; gap: 4px;">
2516
- <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
2585
+ <span class="fig-mask-icon"
2586
+ style="--icon: var(--icon-close)"></span>
2517
2587
  <code>--icon-close</code>
2518
2588
  </vstack>
2519
2589
  <vstack style="align-items: center; gap: 4px;">
2520
- <span class="fig-mask-icon" style="--icon: var(--icon-rotate)"></span>
2590
+ <span class="fig-mask-icon"
2591
+ style="--icon: var(--icon-rotate)"></span>
2521
2592
  <code>--icon-rotate</code>
2522
2593
  </vstack>
2523
2594
  <vstack style="align-items: center; gap: 4px;">
2524
- <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
2595
+ <span class="fig-mask-icon"
2596
+ style="--icon: var(--icon-swap)"></span>
2525
2597
  <code>--icon-swap</code>
2526
2598
  </vstack>
2527
2599
  <vstack style="align-items: center; gap: 4px;">
2528
- <span class="fig-mask-icon" style="--icon: var(--icon-checkmark)"></span>
2600
+ <span class="fig-mask-icon"
2601
+ style="--icon: var(--icon-checkmark)"></span>
2529
2602
  <code>--icon-checkmark</code>
2530
2603
  </vstack>
2531
2604
  <vstack style="align-items: center; gap: 4px;">
2532
- <span class="fig-mask-icon" style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
2605
+ <span class="fig-mask-icon"
2606
+ style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
2533
2607
  <code>--icon-eyedropper</code>
2534
2608
  </vstack>
2535
2609
  <vstack style="align-items: center; gap: 4px;">
2536
- <span class="fig-mask-icon" style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
2610
+ <span class="fig-mask-icon"
2611
+ style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
2537
2612
  <code>--icon-steppers</code>
2538
2613
  </vstack>
2539
2614
  </hstack>
@@ -2542,19 +2617,23 @@
2542
2617
  <p class="description">Use the <code>--size</code> variable to adjust icon dimensions.</p>
2543
2618
  <hstack style="gap: 16px; align-items: end;">
2544
2619
  <vstack style="align-items: center; gap: 4px;">
2545
- <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 12px"></span>
2620
+ <span class="fig-mask-icon"
2621
+ style="--icon: var(--icon-add); --size: 12px"></span>
2546
2622
  <code>12px</code>
2547
2623
  </vstack>
2548
2624
  <vstack style="align-items: center; gap: 4px;">
2549
- <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 16px"></span>
2625
+ <span class="fig-mask-icon"
2626
+ style="--icon: var(--icon-add); --size: 16px"></span>
2550
2627
  <code>16px</code>
2551
2628
  </vstack>
2552
2629
  <vstack style="align-items: center; gap: 4px;">
2553
- <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 24px"></span>
2630
+ <span class="fig-mask-icon"
2631
+ style="--icon: var(--icon-add); --size: 24px"></span>
2554
2632
  <code>24px</code>
2555
2633
  </vstack>
2556
2634
  <vstack style="align-items: center; gap: 4px;">
2557
- <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 32px"></span>
2635
+ <span class="fig-mask-icon"
2636
+ style="--icon: var(--icon-add); --size: 32px"></span>
2558
2637
  <code>32px</code>
2559
2638
  </vstack>
2560
2639
  </hstack>
@@ -2562,24 +2641,35 @@
2562
2641
  <h3>Color Inheritance</h3>
2563
2642
  <p class="description">Icons inherit <code>currentColor</code>, so they match the parent's text color.</p>
2564
2643
  <hstack style="gap: 16px;">
2565
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
2566
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
2567
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
2568
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
2569
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
2570
- <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
2644
+ <span class="fig-mask-icon"
2645
+ style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
2646
+ <span class="fig-mask-icon"
2647
+ style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
2648
+ <span class="fig-mask-icon"
2649
+ style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
2650
+ <span class="fig-mask-icon"
2651
+ style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
2652
+ <span class="fig-mask-icon"
2653
+ style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
2654
+ <span class="fig-mask-icon"
2655
+ style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
2571
2656
  </hstack>
2572
2657
 
2573
2658
  <h3>Inside Buttons</h3>
2574
2659
  <hstack>
2575
- <fig-button icon variant="ghost">
2576
- <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2660
+ <fig-button icon
2661
+ variant="ghost">
2662
+ <span class="fig-mask-icon"
2663
+ style="--icon: var(--icon-add)"></span>
2577
2664
  </fig-button>
2578
- <fig-button icon variant="ghost">
2579
- <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
2665
+ <fig-button icon
2666
+ variant="ghost">
2667
+ <span class="fig-mask-icon"
2668
+ style="--icon: var(--icon-minus)"></span>
2580
2669
  </fig-button>
2581
2670
  <fig-button>
2582
- <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2671
+ <span class="fig-mask-icon"
2672
+ style="--icon: var(--icon-add)"></span>
2583
2673
  Add Item
2584
2674
  </fig-button>
2585
2675
  </hstack>
package/fig.js CHANGED
@@ -2122,14 +2122,18 @@ class FigInputColor extends HTMLElement {
2122
2122
  </fig-input-number>
2123
2123
  </fig-tooltip>`;
2124
2124
  }
2125
-
2125
+
2126
2126
  let swatchElement = "";
2127
2127
  if (!hidePicker) {
2128
2128
  swatchElement = useFigmaPicker
2129
- ? `<fig-fill-picker mode="solid" ${showAlpha ? "" : 'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}"}'></fig-fill-picker>`
2130
- : `<fig-chit background="${this.hexOpaque}"></fig-chit>`;
2129
+ ? `<fig-fill-picker mode="solid" ${
2130
+ showAlpha ? "" : 'alpha="false"'
2131
+ } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
2132
+ this.alpha
2133
+ }}'></fig-fill-picker>`
2134
+ : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
2131
2135
  }
2132
-
2136
+
2133
2137
  html = `<div class="input-combo">
2134
2138
  ${swatchElement}
2135
2139
  ${label}
@@ -2140,8 +2144,12 @@ class FigInputColor extends HTMLElement {
2140
2144
  html = ``;
2141
2145
  } else {
2142
2146
  html = useFigmaPicker
2143
- ? `<fig-fill-picker mode="solid" ${showAlpha ? "" : 'alpha="false"'} value='{"type":"solid","color":"${this.hexOpaque}"}'></fig-fill-picker>`
2144
- : `<fig-chit background="${this.hexOpaque}"></fig-chit>`;
2147
+ ? `<fig-fill-picker mode="solid" ${
2148
+ showAlpha ? "" : 'alpha="false"'
2149
+ } value='{"type":"solid","color":"${this.hexOpaque}","opacity":${
2150
+ this.alpha
2151
+ }}'></fig-fill-picker>`
2152
+ : `<fig-chit background="${this.hexOpaque}" alpha="${this.rgba.a}"></fig-chit>`;
2145
2153
  }
2146
2154
  }
2147
2155
  this.innerHTML = html;
@@ -2163,8 +2171,14 @@ class FigInputColor extends HTMLElement {
2163
2171
  if (this.hasAttribute("disabled")) {
2164
2172
  this.#fillPicker.setAttribute("disabled", "");
2165
2173
  }
2166
- this.#fillPicker.addEventListener("input", this.#handleFillPickerInput.bind(this));
2167
- this.#fillPicker.addEventListener("change", this.#handleChange.bind(this));
2174
+ this.#fillPicker.addEventListener(
2175
+ "input",
2176
+ this.#handleFillPickerInput.bind(this)
2177
+ );
2178
+ this.#fillPicker.addEventListener(
2179
+ "change",
2180
+ this.#handleChange.bind(this)
2181
+ );
2168
2182
  }
2169
2183
 
2170
2184
  if (this.#textInput) {
@@ -2233,6 +2247,19 @@ class FigInputColor extends HTMLElement {
2233
2247
  const alpha = Math.round((alphaValue / 100) * 255);
2234
2248
  const alphaHex = alpha.toString(16).padStart(2, "0");
2235
2249
  this.#setValues(this.hexOpaque + alphaHex);
2250
+ if (this.#swatch) {
2251
+ this.#swatch.setAttribute("alpha", this.rgba.a);
2252
+ }
2253
+ if (this.#fillPicker) {
2254
+ this.#fillPicker.setAttribute(
2255
+ "value",
2256
+ JSON.stringify({
2257
+ type: "solid",
2258
+ color: this.hexOpaque,
2259
+ opacity: this.alpha,
2260
+ })
2261
+ );
2262
+ }
2236
2263
  this.#emitInputEvent();
2237
2264
  }
2238
2265
 
@@ -2309,9 +2336,17 @@ class FigInputColor extends HTMLElement {
2309
2336
  }
2310
2337
  if (this.#swatch) {
2311
2338
  this.#swatch.setAttribute("background", this.hexOpaque);
2339
+ this.#swatch.setAttribute("alpha", this.rgba.a);
2312
2340
  }
2313
2341
  if (this.#fillPicker) {
2314
- this.#fillPicker.setAttribute("value", JSON.stringify({ type: "solid", color: this.hexOpaque }));
2342
+ this.#fillPicker.setAttribute(
2343
+ "value",
2344
+ JSON.stringify({
2345
+ type: "solid",
2346
+ color: this.hexOpaque,
2347
+ opacity: this.alpha,
2348
+ })
2349
+ );
2315
2350
  }
2316
2351
  if (this.#alphaInput) {
2317
2352
  this.#alphaInput.setAttribute("value", this.alpha);
@@ -2788,6 +2823,7 @@ window.customElements.define("fig-combo-input", FigComboInput);
2788
2823
  * @attr {string} size - Size of the chip: "small" (default) or "large"
2789
2824
  * @attr {boolean} selected - Whether the chip shows a selection ring
2790
2825
  * @attr {boolean} disabled - Whether the chip is disabled
2826
+ * @attr {number} alpha - Opacity value (0-1) to display the color with transparency
2791
2827
  */
2792
2828
  class FigChit extends HTMLElement {
2793
2829
  #type = "color"; // 'color', 'gradient', 'image'
@@ -2800,11 +2836,21 @@ class FigChit extends HTMLElement {
2800
2836
  }
2801
2837
 
2802
2838
  static get observedAttributes() {
2803
- return ["background", "size", "selected", "disabled"];
2839
+ return ["background", "size", "selected", "disabled", "alpha"];
2804
2840
  }
2805
2841
 
2806
2842
  connectedCallback() {
2807
2843
  this.#render();
2844
+ this.#updateAlpha();
2845
+ }
2846
+
2847
+ #updateAlpha() {
2848
+ const alpha = this.getAttribute("alpha");
2849
+ if (alpha !== null) {
2850
+ this.style.setProperty("--alpha", alpha);
2851
+ } else {
2852
+ this.style.removeProperty("--alpha");
2853
+ }
2808
2854
  }
2809
2855
 
2810
2856
  #detectType(bg) {
@@ -2893,6 +2939,20 @@ class FigChit extends HTMLElement {
2893
2939
  return;
2894
2940
  }
2895
2941
  this.#render();
2942
+ } else if (name === "alpha") {
2943
+ this.#updateAlpha();
2944
+ }
2945
+ }
2946
+
2947
+ get alpha() {
2948
+ return this.getAttribute("alpha");
2949
+ }
2950
+
2951
+ set alpha(value) {
2952
+ if (value === null || value === undefined) {
2953
+ this.removeAttribute("alpha");
2954
+ } else {
2955
+ this.setAttribute("alpha", value);
2896
2956
  }
2897
2957
  }
2898
2958
  }
@@ -3949,6 +4009,10 @@ class FigFillPicker extends HTMLElement {
3949
4009
  this.#color = parsed.color;
3950
4010
  }
3951
4011
  }
4012
+ // Parse opacity (0-100) and convert to alpha (0-1)
4013
+ if (parsed.opacity !== undefined) {
4014
+ this.#color.a = parsed.opacity / 100;
4015
+ }
3952
4016
  if (parsed.gradient)
3953
4017
  this.#gradient = { ...this.#gradient, ...parsed.gradient };
3954
4018
  if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
@@ -4009,6 +4073,13 @@ class FigFillPicker extends HTMLElement {
4009
4073
  this.#chit.setAttribute("background", bg);
4010
4074
  this.#chit.style.setProperty("--chit-bg-size", bgSize);
4011
4075
  this.#chit.style.setProperty("--chit-bg-position", bgPosition);
4076
+
4077
+ // For solid colors, also update the alpha
4078
+ if (this.#fillType === "solid") {
4079
+ this.#chit.setAttribute("alpha", this.#color.a);
4080
+ } else {
4081
+ this.#chit.removeAttribute("alpha");
4082
+ }
4012
4083
  }
4013
4084
 
4014
4085
  #getBackgroundSizing(scaleMode, scale) {
@@ -4044,7 +4115,7 @@ class FigFillPicker extends HTMLElement {
4044
4115
  requestAnimationFrame(() => {
4045
4116
  this.#positionDialog();
4046
4117
  this.#dialog.setAttribute("closedby", "any");
4047
-
4118
+
4048
4119
  // Second RAF ensures the dialog is visible and canvas is ready
4049
4120
  requestAnimationFrame(() => {
4050
4121
  this.#drawColorArea();
@@ -4133,7 +4204,9 @@ class FigFillPicker extends HTMLElement {
4133
4204
 
4134
4205
  // Build header content - dropdown or label
4135
4206
  const headerContent = lockedMode
4136
- ? `<span class="fig-fill-picker-type-label">${lockedMode.charAt(0).toUpperCase() + lockedMode.slice(1)}</span>`
4207
+ ? `<span class="fig-fill-picker-type-label">${
4208
+ lockedMode.charAt(0).toUpperCase() + lockedMode.slice(1)
4209
+ }</span>`
4137
4210
  : `<fig-dropdown class="fig-fill-picker-type" value="${this.#fillType}">
4138
4211
  <option value="solid">Solid</option>
4139
4212
  <option value="gradient">Gradient</option>
@@ -4193,7 +4266,7 @@ class FigFillPicker extends HTMLElement {
4193
4266
  const mode = this.getAttribute("mode");
4194
4267
  const validModes = ["solid", "gradient", "image", "video", "webcam"];
4195
4268
  const lockedMode = validModes.includes(mode) ? mode : null;
4196
-
4269
+
4197
4270
  if (lockedMode && tabName !== lockedMode) {
4198
4271
  return; // Don't allow switching away from locked mode
4199
4272
  }
@@ -4292,7 +4365,7 @@ class FigFillPicker extends HTMLElement {
4292
4365
  colorInput.addEventListener("input", (e) => {
4293
4366
  // Skip if we're dragging - prevents feedback loop that loses saturation for dark colors
4294
4367
  if (this.#isDraggingColor) return;
4295
-
4368
+
4296
4369
  const hex = e.target.value;
4297
4370
  this.#color = { ...this.#hexToHSV(hex), a: this.#color.a };
4298
4371
  this.#drawColorArea();
@@ -4334,7 +4407,7 @@ class FigFillPicker extends HTMLElement {
4334
4407
 
4335
4408
  const ctx = this.#colorArea.getContext("2d");
4336
4409
  if (!ctx) return;
4337
-
4410
+
4338
4411
  const width = this.#colorArea.width;
4339
4412
  const height = this.#colorArea.height;
4340
4413
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "module": "index.ts",
5
5
  "type": "module",
6
6
  "devDependencies": {