@rogieking/figui3 2.0.6 → 2.0.8

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 (6) hide show
  1. package/components.css +384 -67
  2. package/example.html +245 -76
  3. package/fig.js +1795 -84
  4. package/package.json +1 -1
  5. package/end-point-line.svg +0 -3
  6. package/end-points.zip +0 -0
package/example.html CHANGED
@@ -171,6 +171,7 @@
171
171
  <a href="#dialog">Dialog</a>
172
172
  <a href="#dropdown">Dropdown</a>
173
173
  <a href="#field">Field</a>
174
+ <a href="#fill-picker">Fill Picker</a>
174
175
  <a href="#header">Header</a>
175
176
  <a href="#image">Image</a>
176
177
  <a href="#input-angle">Input Angle</a>
@@ -191,6 +192,7 @@
191
192
  <a href="#tooltip">Tooltip</a>
192
193
  <hr>
193
194
  <h1>Basics</h1>
195
+ <a href="#icons">Icons</a>
194
196
  <a href="#hstack">HStack</a>
195
197
  <a href="#vstack">VStack</a>
196
198
  <a href="#hr">HR</a>
@@ -557,62 +559,50 @@
557
559
  <fig-field direction="horizontal">
558
560
  <label>Color</label>
559
561
  <hstack>
560
- <fig-chit type="color"
561
- value="#FF0000"></fig-chit>
562
- <fig-chit type="color"
563
- value="#00FF00"></fig-chit>
564
- <fig-chit type="color"
565
- value="#0000FF"></fig-chit>
566
- <fig-chit type="color"
567
- value="#000000"></fig-chit>
562
+ <fig-chit background="#FF0000"></fig-chit>
563
+ <fig-chit background="#00FF00"></fig-chit>
564
+ <fig-chit background="#0000FF"></fig-chit>
565
+ <fig-chit background="#000000"></fig-chit>
568
566
  </hstack>
569
567
  </fig-field>
570
568
  <fig-field direction="horizontal">
571
569
  <label>Gradient (linear)</label>
572
- <fig-chit type="gradient"
573
- variant="linear"></fig-chit>
570
+ <fig-chit background="linear-gradient(180deg, #ff90ff, #0000ff)"></fig-chit>
574
571
  </fig-field>
575
572
  <fig-field direction="horizontal">
576
573
  <label>Gradient (angular)</label>
577
- <fig-chit type="gradient"
578
- variant="angular"></fig-chit>
574
+ <fig-chit background="conic-gradient(from 180deg, #ff90ff, #0000ff)"></fig-chit>
579
575
  </fig-field>
580
576
  <fig-field direction="horizontal">
581
577
  <label>Gradient (radial)</label>
582
- <fig-chit type="gradient"
583
- variant="radial"></fig-chit>
578
+ <fig-chit background="radial-gradient(circle, #ff90ff, #0000ff)"></fig-chit>
584
579
  </fig-field>
585
580
  <fig-field direction="horizontal">
586
581
  <label>Image</label>
587
- <fig-chit type="image"
588
- src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
582
+ <fig-chit background="url(https://avatars.githubusercontent.com/u/12345678?v=4)"></fig-chit>
589
583
  </fig-field>
590
584
 
591
585
  <h3>Sizes</h3>
592
586
  <fig-field direction="horizontal">
593
587
  <label>Default</label>
594
- <fig-chit type="color"
595
- value="#9747FF"></fig-chit>
588
+ <fig-chit background="#9747FF"></fig-chit>
596
589
  </fig-field>
597
590
  <fig-field direction="horizontal">
598
591
  <label>Large</label>
599
- <fig-chit type="color"
600
- value="#9747FF"
592
+ <fig-chit background="#9747FF"
601
593
  size="large"></fig-chit>
602
594
  </fig-field>
603
595
 
604
596
  <h3>States</h3>
605
597
  <fig-field direction="horizontal">
606
598
  <label>Selected</label>
607
- <fig-chit type="color"
608
- value="#0D99FF"
609
- selected="true"></fig-chit>
599
+ <fig-chit background="#0D99FF"
600
+ selected></fig-chit>
610
601
  </fig-field>
611
602
  <fig-field direction="horizontal">
612
603
  <label>Disabled</label>
613
- <fig-chit type="color"
614
- value="#0D99FF"
615
- disabled="true"></fig-chit>
604
+ <fig-chit background="#0D99FF"
605
+ disabled></fig-chit>
616
606
  </fig-field>
617
607
  </section>
618
608
  <hr>
@@ -648,20 +638,8 @@
648
638
  <fig-header>
649
639
  <h3>Dialog Title</h3>
650
640
  <fig-tooltip text="Close">
651
- <fig-button variant="ghost"
652
- icon="true"
653
- close-dialog>
654
- <svg width="24"
655
- height="24"
656
- viewBox="0 0 24 24"
657
- fill="none"
658
- xmlns="http://www.w3.org/2000/svg">
659
- <path fill-rule="evenodd"
660
- clip-rule="evenodd"
661
- d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
662
- fill="currentColor"
663
- fill-opacity="0.9" />
664
- </svg>
641
+ <fig-button variant="ghost" icon="true" close-dialog>
642
+ <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
665
643
  </fig-button>
666
644
  </fig-tooltip>
667
645
  </fig-header>
@@ -703,20 +681,8 @@
703
681
  <fig-header>
704
682
  <h3>Positioned Dialog</h3>
705
683
  <fig-tooltip text="Close">
706
- <fig-button variant="ghost"
707
- icon="true"
708
- close-dialog>
709
- <svg width="24"
710
- height="24"
711
- viewBox="0 0 24 24"
712
- fill="none"
713
- xmlns="http://www.w3.org/2000/svg">
714
- <path fill-rule="evenodd"
715
- clip-rule="evenodd"
716
- d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
717
- fill="currentColor"
718
- fill-opacity="0.9" />
719
- </svg>
684
+ <fig-button variant="ghost" icon="true" close-dialog>
685
+ <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
720
686
  </fig-button>
721
687
  </fig-tooltip>
722
688
  </fig-header>
@@ -727,6 +693,46 @@
727
693
  <fig-button close-dialog>Close</fig-button>
728
694
  </footer>
729
695
  </dialog>
696
+
697
+ <h3>Handle Attribute</h3>
698
+ <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 12px;">
699
+ Use the <code>handle</code> attribute to restrict dragging to a specific element.
700
+ Pass a CSS selector like <code>handle="fig-header"</code>. Dragging will only work
701
+ when initiated from within that element. Interactive elements (buttons, inputs) within
702
+ the handle are still excluded from triggering drag.
703
+ </p>
704
+ <pre><code>&lt;dialog is="fig-dialog" drag="true" handle="fig-header"&gt;
705
+ &lt;fig-header&gt;Drag only here&lt;/fig-header&gt;
706
+ &lt;fig-content&gt;Content won't trigger drag&lt;/fig-content&gt;
707
+ &lt;/dialog&gt;</code></pre>
708
+ <fig-button onclick="document.getElementById('handle-demo-dialog').showModal()">Open Handle
709
+ Demo</fig-button>
710
+
711
+ <dialog id="handle-demo-dialog"
712
+ is="fig-dialog"
713
+ drag="true"
714
+ handle="fig-header"
715
+ position="center center">
716
+ <fig-header>
717
+ <h3>Drag Handle Demo</h3>
718
+ <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>
721
+ </fig-button>
722
+ </fig-tooltip>
723
+ </fig-header>
724
+ <fig-content>
725
+ <p><strong>Try dragging from:</strong></p>
726
+ <ul style="font-size: 12px; margin: 8px 0; padding-left: 20px;">
727
+ <li>✓ The header area (works)</li>
728
+ <li>✗ This content area (won't drag)</li>
729
+ <li>✗ The footer below (won't drag)</li>
730
+ </ul>
731
+ </fig-content>
732
+ <footer>
733
+ <fig-button close-dialog>Close</fig-button>
734
+ </footer>
735
+ </dialog>
730
736
  </section>
731
737
  <hr>
732
738
 
@@ -863,6 +869,65 @@
863
869
  </section>
864
870
  <hr>
865
871
 
872
+ <!-- Fill Picker -->
873
+ <section id="fill-picker">
874
+ <h2>Fill Picker</h2>
875
+ <p class="description">A comprehensive fill picker supporting solid colors, gradients, images, video, and
876
+ webcam.</p>
877
+
878
+ <h3>Default (Auto-creates fig-chit)</h3>
879
+ <fig-fill-picker></fig-fill-picker>
880
+
881
+ <h3>With Initial Color</h3>
882
+ <fig-fill-picker value='{"type":"solid","color":"#FF6B6B"}'></fig-fill-picker>
883
+
884
+ <h3>With Gradient</h3>
885
+ <fig-fill-picker
886
+ value='{"type":"gradient","gradient":{"type":"linear","angle":90,"stops":[{"position":0,"color":"#667eea","opacity":100},{"position":100,"color":"#764ba2","opacity":100}]}}'></fig-fill-picker>
887
+
888
+ <h3>With fig-chit Child</h3>
889
+ <fig-fill-picker value='{"type":"solid","color":"#4ECDC4"}'>
890
+ <fig-chit background="#4ECDC4"></fig-chit>
891
+ </fig-fill-picker>
892
+
893
+ <h3>Custom Trigger</h3>
894
+ <fig-fill-picker value='{"type":"solid","color":"#95E1D3"}'>
895
+ <fig-button>Edit Fill</fig-button>
896
+ </fig-fill-picker>
897
+
898
+ <h3>Without Alpha</h3>
899
+ <fig-fill-picker alpha="false"
900
+ value='{"type":"solid","color":"#F38181"}'></fig-fill-picker>
901
+
902
+ <h3>Disabled</h3>
903
+ <fig-fill-picker disabled
904
+ value='{"type":"solid","color":"#AA96DA"}'></fig-fill-picker>
905
+
906
+ <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
+
909
+ <h4>Solid Only</h4>
910
+ <fig-fill-picker mode="solid"></fig-fill-picker>
911
+
912
+ <h4>Gradient Only</h4>
913
+ <fig-fill-picker mode="gradient"></fig-fill-picker>
914
+
915
+ <h4>Image Only</h4>
916
+ <fig-fill-picker mode="image"></fig-fill-picker>
917
+
918
+ <h3>Event Listening</h3>
919
+ <fig-fill-picker id="fill-picker-events"
920
+ value='{"type":"solid","color":"#FCBAD3"}'></fig-fill-picker>
921
+ <p class="description"
922
+ id="fill-picker-output">Click the swatch above and change the color to see events.</p>
923
+ <script>
924
+ document.getElementById('fill-picker-events').addEventListener('input', (e) => {
925
+ document.getElementById('fill-picker-output').textContent = 'Input: ' + JSON.stringify(e.detail);
926
+ });
927
+ </script>
928
+ </section>
929
+ <hr>
930
+
866
931
  <!-- Header -->
867
932
  <section id="header">
868
933
  <h2>Header</h2>
@@ -996,6 +1061,24 @@
996
1061
  <fig-input-color value="#FF00FF"></fig-input-color>
997
1062
  <fig-input-color value="#00FFFF"></fig-input-color>
998
1063
  </hstack>
1064
+
1065
+ <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
+
1068
+ <h4>Native Picker (default)</h4>
1069
+ <fig-input-color value="#9747FF" text="true"></fig-input-color>
1070
+
1071
+ <h4>Figma Picker</h4>
1072
+ <fig-input-color value="#9747FF" text="true" picker="figma"></fig-input-color>
1073
+
1074
+ <h4>Figma Picker with Alpha</h4>
1075
+ <fig-input-color value="#9747FF" text="true" alpha="true" picker="figma"></fig-input-color>
1076
+
1077
+ <h4>No Picker (text input only)</h4>
1078
+ <fig-input-color value="#9747FF" text="true" picker="false"></fig-input-color>
1079
+
1080
+ <h4>No Picker with Alpha</h4>
1081
+ <fig-input-color value="#9747FF" text="true" alpha="true" picker="false"></fig-input-color>
999
1082
  </section>
1000
1083
  <hr>
1001
1084
 
@@ -2180,20 +2263,8 @@
2180
2263
  is="fig-toast">
2181
2264
  <p>File uploaded successfully.</p>
2182
2265
  <hr vertical />
2183
- <fig-button variant="ghost"
2184
- icon="true"
2185
- close-toast>
2186
- <svg width="24"
2187
- height="24"
2188
- viewBox="0 0 24 24"
2189
- fill="none"
2190
- xmlns="http://www.w3.org/2000/svg">
2191
- <path fill-rule="evenodd"
2192
- clip-rule="evenodd"
2193
- d="M17.3536 6.64645C17.5488 6.84171 17.5488 7.15829 17.3536 7.35355L12.7071 12L17.3536 16.6464C17.5488 16.8417 17.5488 17.1583 17.3536 17.3536C17.1583 17.5488 16.8417 17.5488 16.6464 17.3536L12 12.7071L7.35355 17.3536C7.15829 17.5488 6.84171 17.5488 6.64645 17.3536C6.45118 17.1583 6.45118 16.8417 6.64645 16.6464L11.2929 12L6.64645 7.35365C6.45119 7.15839 6.45118 6.84181 6.64644 6.64654C6.84171 6.45128 7.15829 6.45128 7.35355 6.64654L12 11.2929L16.6464 6.64645C16.8417 6.45118 17.1583 6.45118 17.3536 6.64645Z"
2194
- fill="currentColor"
2195
- fill-opacity="0.9" />
2196
- </svg>
2266
+ <fig-button variant="ghost" icon="true" close-toast>
2267
+ <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
2197
2268
  </fig-button>
2198
2269
  </dialog>
2199
2270
 
@@ -2321,6 +2392,108 @@
2321
2392
  </section>
2322
2393
  <hr>
2323
2394
 
2395
+ <!-- Icons -->
2396
+ <section id="icons">
2397
+ <h2>Icons</h2>
2398
+ <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>
2399
+
2400
+ <h3>Usage</h3>
2401
+ <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>
2402
+
2403
+ <pre><code>&lt;span class="fig-mask-icon" style="--icon: var(--icon-add)"&gt;&lt;/span&gt;</code></pre>
2404
+
2405
+ <h3>Available Icons</h3>
2406
+ <hstack style="gap: 16px; flex-wrap: wrap;">
2407
+ <vstack style="align-items: center; gap: 4px;">
2408
+ <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2409
+ <code>--icon-add</code>
2410
+ </vstack>
2411
+ <vstack style="align-items: center; gap: 4px;">
2412
+ <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
2413
+ <code>--icon-minus</code>
2414
+ </vstack>
2415
+ <vstack style="align-items: center; gap: 4px;">
2416
+ <span class="fig-mask-icon" style="--icon: var(--icon-back)"></span>
2417
+ <code>--icon-back</code>
2418
+ </vstack>
2419
+ <vstack style="align-items: center; gap: 4px;">
2420
+ <span class="fig-mask-icon" style="--icon: var(--icon-forward)"></span>
2421
+ <code>--icon-forward</code>
2422
+ </vstack>
2423
+ <vstack style="align-items: center; gap: 4px;">
2424
+ <span class="fig-mask-icon" style="--icon: var(--icon-close)"></span>
2425
+ <code>--icon-close</code>
2426
+ </vstack>
2427
+ <vstack style="align-items: center; gap: 4px;">
2428
+ <span class="fig-mask-icon" style="--icon: var(--icon-rotate)"></span>
2429
+ <code>--icon-rotate</code>
2430
+ </vstack>
2431
+ <vstack style="align-items: center; gap: 4px;">
2432
+ <span class="fig-mask-icon" style="--icon: var(--icon-swap)"></span>
2433
+ <code>--icon-swap</code>
2434
+ </vstack>
2435
+ <vstack style="align-items: center; gap: 4px;">
2436
+ <span class="fig-mask-icon" style="--icon: var(--icon-checkmark)"></span>
2437
+ <code>--icon-checkmark</code>
2438
+ </vstack>
2439
+ <vstack style="align-items: center; gap: 4px;">
2440
+ <span class="fig-mask-icon" style="--icon: var(--icon-eyedropper); --size: 1.5rem"></span>
2441
+ <code>--icon-eyedropper</code>
2442
+ </vstack>
2443
+ <vstack style="align-items: center; gap: 4px;">
2444
+ <span class="fig-mask-icon" style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
2445
+ <code>--icon-steppers</code>
2446
+ </vstack>
2447
+ </hstack>
2448
+
2449
+ <h3>Custom Size</h3>
2450
+ <p class="description">Use the <code>--size</code> variable to adjust icon dimensions.</p>
2451
+ <hstack style="gap: 16px; align-items: end;">
2452
+ <vstack style="align-items: center; gap: 4px;">
2453
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 12px"></span>
2454
+ <code>12px</code>
2455
+ </vstack>
2456
+ <vstack style="align-items: center; gap: 4px;">
2457
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 16px"></span>
2458
+ <code>16px</code>
2459
+ </vstack>
2460
+ <vstack style="align-items: center; gap: 4px;">
2461
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 24px"></span>
2462
+ <code>24px</code>
2463
+ </vstack>
2464
+ <vstack style="align-items: center; gap: 4px;">
2465
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); --size: 32px"></span>
2466
+ <code>32px</code>
2467
+ </vstack>
2468
+ </hstack>
2469
+
2470
+ <h3>Color Inheritance</h3>
2471
+ <p class="description">Icons inherit <code>currentColor</code>, so they match the parent's text color.</p>
2472
+ <hstack style="gap: 16px;">
2473
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text)"></span>
2474
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-secondary)"></span>
2475
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-brand)"></span>
2476
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-danger)"></span>
2477
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-success)"></span>
2478
+ <span class="fig-mask-icon" style="--icon: var(--icon-add); color: var(--figma-color-text-warning)"></span>
2479
+ </hstack>
2480
+
2481
+ <h3>Inside Buttons</h3>
2482
+ <hstack>
2483
+ <fig-button icon variant="ghost">
2484
+ <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2485
+ </fig-button>
2486
+ <fig-button icon variant="ghost">
2487
+ <span class="fig-mask-icon" style="--icon: var(--icon-minus)"></span>
2488
+ </fig-button>
2489
+ <fig-button>
2490
+ <span class="fig-mask-icon" style="--icon: var(--icon-add)"></span>
2491
+ Add Item
2492
+ </fig-button>
2493
+ </hstack>
2494
+ </section>
2495
+ <hr>
2496
+
2324
2497
  <!-- HStack -->
2325
2498
  <section id="hstack">
2326
2499
  <h2>HStack</h2>
@@ -2355,14 +2528,10 @@
2355
2528
 
2356
2529
  <h3>With Chips/Chits</h3>
2357
2530
  <hstack>
2358
- <fig-chit type="color"
2359
- value="#FF5733"></fig-chit>
2360
- <fig-chit type="color"
2361
- value="#33FF57"></fig-chit>
2362
- <fig-chit type="color"
2363
- value="#3357FF"></fig-chit>
2364
- <fig-chit type="color"
2365
- value="#FF33F5"></fig-chit>
2531
+ <fig-chit background="#FF5733"></fig-chit>
2532
+ <fig-chit background="#33FF57"></fig-chit>
2533
+ <fig-chit background="#3357FF"></fig-chit>
2534
+ <fig-chit background="#FF33F5"></fig-chit>
2366
2535
  </hstack>
2367
2536
  </section>
2368
2537
  <hr>