@rogieking/figui3 2.0.3 → 2.0.4

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 (4) hide show
  1. package/components.css +58 -1
  2. package/example.html +282 -227
  3. package/fig.js +74 -2
  4. package/package.json +1 -1
package/components.css CHANGED
@@ -2371,7 +2371,7 @@ fig-slider {
2371
2371
 
2372
2372
  & fig-input-text[type="number"],
2373
2373
  & fig-input-number {
2374
- width: 3rem;
2374
+ width: 5rem;
2375
2375
  }
2376
2376
  }
2377
2377
 
@@ -2480,6 +2480,7 @@ fig-input-joystick {
2480
2480
  flex-grow: 0;
2481
2481
  align-items: center;
2482
2482
  justify-content: center;
2483
+ position: relative;
2483
2484
  &:focus {
2484
2485
  outline: 0;
2485
2486
  }
@@ -2495,6 +2496,10 @@ fig-input-joystick {
2495
2496
  cursor: grab;
2496
2497
  --size: 3rem;
2497
2498
  z-index: 2;
2499
+ position: absolute;
2500
+ top: 50%;
2501
+ left: 50%;
2502
+ transform: translate(-50%, -50%);
2498
2503
  }
2499
2504
  }
2500
2505
  .fig-input-joystick-plane > * {
@@ -2615,6 +2620,49 @@ fig-input-angle {
2615
2620
  }
2616
2621
  }
2617
2622
 
2623
+ /* Shimmer */
2624
+ fig-shimmer {
2625
+ display: contents;
2626
+ --shimmer-angle: 90deg;
2627
+ --shimmer-size: 250% 100%;
2628
+ --shimmer-duration: 1.5s;
2629
+
2630
+ &[direction="vertical"] {
2631
+ --shimmer-angle: 180deg;
2632
+ --shimmer-size: 100% 250%;
2633
+ }
2634
+ &[direction="diagonal"] {
2635
+ --shimmer-angle: 135deg;
2636
+ --shimmer-size: 250% 250%;
2637
+ }
2638
+
2639
+ /* When not playing, remove shimmer effect entirely */
2640
+ &[playing="false"] > * {
2641
+ background: none;
2642
+ -webkit-background-clip: unset;
2643
+ background-clip: unset;
2644
+ -webkit-text-fill-color: unset;
2645
+ animation: none;
2646
+ }
2647
+ }
2648
+
2649
+ /* Only apply shimmer when playing (default) or playing="true" */
2650
+ fig-shimmer:not([playing="false"]) > * {
2651
+ background: linear-gradient(
2652
+ var(--shimmer-angle),
2653
+ var(--figma-color-text-tertiary) 0%,
2654
+ var(--figma-color-text-tertiary) 40%,
2655
+ var(--figma-color-text) 50%,
2656
+ var(--figma-color-text-tertiary) 60%,
2657
+ var(--figma-color-text-tertiary) 100%
2658
+ );
2659
+ background-size: var(--shimmer-size);
2660
+ -webkit-background-clip: text;
2661
+ background-clip: text;
2662
+ -webkit-text-fill-color: transparent;
2663
+ animation: fig-shimmer var(--shimmer-duration) linear infinite;
2664
+ }
2665
+
2618
2666
  /* Utilities */
2619
2667
 
2620
2668
  @keyframes fig-spinner-spin {
@@ -2626,3 +2674,12 @@ fig-input-angle {
2626
2674
  transform: rotate(360deg);
2627
2675
  }
2628
2676
  }
2677
+
2678
+ @keyframes fig-shimmer {
2679
+ 0% {
2680
+ background-position: 100% 100%;
2681
+ }
2682
+ 100% {
2683
+ background-position: 0% 0%;
2684
+ }
2685
+ }
package/example.html CHANGED
@@ -19,6 +19,7 @@
19
19
  margin: 0;
20
20
  min-height: 100vh;
21
21
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
22
+ overflow-x: hidden;
22
23
  }
23
24
 
24
25
  nav {
@@ -147,19 +148,6 @@
147
148
  gap: 8px;
148
149
  }
149
150
 
150
- .example-row {
151
- display: flex;
152
- align-items: center;
153
- gap: 16px;
154
- margin-bottom: 12px;
155
- }
156
-
157
- .example-row>label {
158
- min-width: 140px;
159
- font-size: 12px;
160
- color: var(--figma-color-text-secondary);
161
- }
162
-
163
151
  code {
164
152
  font-family: "SF Mono", Monaco, Consolas, monospace;
165
153
  font-size: 11px;
@@ -193,6 +181,7 @@
193
181
  <a href="#popover">Popover</a>
194
182
  <a href="#radio">Radio</a>
195
183
  <a href="#segmented-control">Segmented Control</a>
184
+ <a href="#shimmer">Shimmer</a>
196
185
  <a href="#slider">Slider</a>
197
186
  <a href="#spinner">Spinner</a>
198
187
  <a href="#switch">Switch</a>
@@ -244,28 +233,28 @@
244
233
  <p class="description">Displays a user's profile image or initials.</p>
245
234
 
246
235
  <h3>Sizes</h3>
247
- <div class="example-row">
236
+ <fig-field direction="horizontal">
248
237
  <label>Default</label>
249
238
  <fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
250
239
  name="John Doe"></fig-avatar>
251
- </div>
252
- <div class="example-row">
240
+ </fig-field>
241
+ <fig-field direction="horizontal">
253
242
  <label>Large</label>
254
243
  <fig-avatar size="large"
255
244
  src="https://avatars.githubusercontent.com/u/12345678?v=4"
256
245
  name="John Doe"></fig-avatar>
257
- </div>
246
+ </fig-field>
258
247
 
259
248
  <h3>Fallback (Initials)</h3>
260
- <div class="example-row">
249
+ <fig-field direction="horizontal">
261
250
  <label>No image</label>
262
251
  <fig-avatar name="John Doe"></fig-avatar>
263
- </div>
264
- <div class="example-row">
252
+ </fig-field>
253
+ <fig-field direction="horizontal">
265
254
  <label>No image (large)</label>
266
255
  <fig-avatar size="large"
267
256
  name="Jane Smith"></fig-avatar>
268
- </div>
257
+ </fig-field>
269
258
  </section>
270
259
  <hr>
271
260
 
@@ -275,60 +264,60 @@
275
264
  <p class="description">A custom button element supporting variants, types, sizes, and states.</p>
276
265
 
277
266
  <h3>Variants</h3>
278
- <div class="example-row">
267
+ <fig-field direction="horizontal">
279
268
  <label>Primary (default)</label>
280
269
  <fig-button>Primary</fig-button>
281
- </div>
282
- <div class="example-row">
270
+ </fig-field>
271
+ <fig-field direction="horizontal">
283
272
  <label>Secondary</label>
284
273
  <fig-button variant="secondary">Secondary</fig-button>
285
- </div>
286
- <div class="example-row">
274
+ </fig-field>
275
+ <fig-field direction="horizontal">
287
276
  <label>Ghost</label>
288
277
  <fig-button variant="ghost">Ghost</fig-button>
289
- </div>
290
- <div class="example-row">
278
+ </fig-field>
279
+ <fig-field direction="horizontal">
291
280
  <label>Link</label>
292
281
  <fig-button variant="link">Link Button</fig-button>
293
- </div>
282
+ </fig-field>
294
283
 
295
284
  <h3>Sizes</h3>
296
- <div class="example-row">
285
+ <fig-field direction="horizontal">
297
286
  <label>Default</label>
298
287
  <fig-button>Default Size</fig-button>
299
- </div>
300
- <div class="example-row">
288
+ </fig-field>
289
+ <fig-field direction="horizontal">
301
290
  <label>Large</label>
302
291
  <fig-button size="large">Large Size</fig-button>
303
- </div>
304
- <div class="example-row">
292
+ </fig-field>
293
+ <fig-field direction="horizontal">
305
294
  <label>Compact</label>
306
295
  <fig-button size="compact">Compact</fig-button>
307
- </div>
296
+ </fig-field>
308
297
 
309
298
  <h3>States</h3>
310
- <div class="example-row">
299
+ <fig-field direction="horizontal">
311
300
  <label>Disabled (primary)</label>
312
301
  <fig-button disabled>Disabled</fig-button>
313
- </div>
314
- <div class="example-row">
302
+ </fig-field>
303
+ <fig-field direction="horizontal">
315
304
  <label>Disabled (secondary)</label>
316
305
  <fig-button variant="secondary"
317
306
  disabled>Disabled</fig-button>
318
- </div>
319
- <div class="example-row">
307
+ </fig-field>
308
+ <fig-field direction="horizontal">
320
309
  <label>Disabled (ghost)</label>
321
310
  <fig-button variant="ghost"
322
311
  disabled>Disabled</fig-button>
323
- </div>
324
- <div class="example-row">
312
+ </fig-field>
313
+ <fig-field direction="horizontal">
325
314
  <label>Disabled (link)</label>
326
315
  <fig-button variant="link"
327
316
  disabled>Disabled</fig-button>
328
- </div>
317
+ </fig-field>
329
318
 
330
319
  <h3>Icon Buttons</h3>
331
- <div class="example-row">
320
+ <fig-field direction="horizontal">
332
321
  <label>Icon only</label>
333
322
  <fig-button icon="true">
334
323
  <svg width="16"
@@ -342,8 +331,8 @@
342
331
  fill="currentColor" />
343
332
  </svg>
344
333
  </fig-button>
345
- </div>
346
- <div class="example-row">
334
+ </fig-field>
335
+ <fig-field direction="horizontal">
347
336
  <label>Icon (secondary)</label>
348
337
  <fig-button variant="secondary"
349
338
  icon="true">
@@ -358,8 +347,8 @@
358
347
  fill="currentColor" />
359
348
  </svg>
360
349
  </fig-button>
361
- </div>
362
- <div class="example-row">
350
+ </fig-field>
351
+ <fig-field direction="horizontal">
363
352
  <label>Icon (ghost)</label>
364
353
  <fig-button variant="ghost"
365
354
  icon="true">
@@ -374,8 +363,8 @@
374
363
  fill="currentColor" />
375
364
  </svg>
376
365
  </fig-button>
377
- </div>
378
- <div class="example-row">
366
+ </fig-field>
367
+ <fig-field direction="horizontal">
379
368
  <label>Icon (link)</label>
380
369
  <fig-button variant="link"
381
370
  icon="true">
@@ -390,8 +379,8 @@
390
379
  fill="currentColor" />
391
380
  </svg>
392
381
  </fig-button>
393
- </div>
394
- <div class="example-row">
382
+ </fig-field>
383
+ <fig-field direction="horizontal">
395
384
  <label>Icon disabled</label>
396
385
  <fig-button variant="secondary"
397
386
  icon="true"
@@ -407,10 +396,10 @@
407
396
  fill="currentColor" />
408
397
  </svg>
409
398
  </fig-button>
410
- </div>
399
+ </fig-field>
411
400
 
412
401
  <h3>Button Types</h3>
413
- <div class="example-row">
402
+ <fig-field direction="horizontal">
414
403
  <label>Select (with dropdown)</label>
415
404
  <fig-button type="select">
416
405
  Select
@@ -420,8 +409,8 @@
420
409
  <option>Option Three</option>
421
410
  </fig-dropdown>
422
411
  </fig-button>
423
- </div>
424
- <div class="example-row">
412
+ </fig-field>
413
+ <fig-field direction="horizontal">
425
414
  <label>Toggle</label>
426
415
  <fig-button variant="ghost"
427
416
  type="toggle"
@@ -435,8 +424,8 @@
435
424
  d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z" />
436
425
  </svg>
437
426
  </fig-button>
438
- </div>
439
- <div class="example-row">
427
+ </fig-field>
428
+ <fig-field direction="horizontal">
440
429
  <label>Toggle (selected)</label>
441
430
  <fig-button variant="ghost"
442
431
  type="toggle"
@@ -451,24 +440,24 @@
451
440
  d="M8 3h2c1.933 0 3.5 1.567 3.5 3.5 0 1.933-1.567 3.5-3.5 3.5H4.707l2.147 2.146-.708.708-3-3-.353-.354.353-.354 3-3 .708.708L4.707 9H10c1.38 0 2.5-1.12 2.5-2.5C12.5 5.12 11.38 4 10 4H8z" />
452
441
  </svg>
453
442
  </fig-button>
454
- </div>
455
- <div class="example-row">
443
+ </fig-field>
444
+ <fig-field direction="horizontal">
456
445
  <label>Upload</label>
457
446
  <fig-button variant="secondary"
458
447
  type="upload">
459
448
  Upload
460
449
  <input type="file" />
461
450
  </fig-button>
462
- </div>
463
- <div class="example-row">
451
+ </fig-field>
452
+ <fig-field direction="horizontal">
464
453
  <label>Link</label>
465
454
  <fig-button type="link"
466
455
  href="https://www.figma.com"
467
456
  target="_blank">Visit Figma</fig-button>
468
- </div>
457
+ </fig-field>
469
458
 
470
459
  <h3>Button Combo</h3>
471
- <div class="example-row">
460
+ <fig-field direction="horizontal">
472
461
  <label>Primary combo</label>
473
462
  <fig-button-combo>
474
463
  <fig-button>Primary</fig-button>
@@ -492,8 +481,8 @@
492
481
  </fig-dropdown>
493
482
  </fig-button>
494
483
  </fig-button-combo>
495
- </div>
496
- <div class="example-row">
484
+ </fig-field>
485
+ <fig-field direction="horizontal">
497
486
  <label>Secondary combo</label>
498
487
  <fig-button-combo>
499
488
  <fig-button variant="secondary">Secondary</fig-button>
@@ -517,14 +506,14 @@
517
506
  </fig-dropdown>
518
507
  </fig-button>
519
508
  </fig-button-combo>
520
- </div>
521
- <div class="example-row">
509
+ </fig-field>
510
+ <fig-field direction="horizontal">
522
511
  <label>Disabled combo</label>
523
512
  <fig-button-combo>
524
513
  <fig-button disabled>Disabled</fig-button>
525
514
  <fig-button disabled>Action</fig-button>
526
515
  </fig-button-combo>
527
- </div>
516
+ </fig-field>
528
517
  </section>
529
518
  <hr>
530
519
 
@@ -534,26 +523,26 @@
534
523
  <p class="description">A checkbox input for boolean selections.</p>
535
524
 
536
525
  <h3>States</h3>
537
- <div class="example-row">
526
+ <fig-field direction="horizontal">
538
527
  <label>Unchecked</label>
539
528
  <fig-checkbox label="Unchecked"></fig-checkbox>
540
- </div>
541
- <div class="example-row">
529
+ </fig-field>
530
+ <fig-field direction="horizontal">
542
531
  <label>Checked</label>
543
532
  <fig-checkbox label="Checked"
544
533
  checked="true"></fig-checkbox>
545
- </div>
546
- <div class="example-row">
534
+ </fig-field>
535
+ <fig-field direction="horizontal">
547
536
  <label>Disabled</label>
548
537
  <fig-checkbox label="Disabled"
549
538
  disabled></fig-checkbox>
550
- </div>
551
- <div class="example-row">
539
+ </fig-field>
540
+ <fig-field direction="horizontal">
552
541
  <label>Disabled checked</label>
553
542
  <fig-checkbox label="Disabled checked"
554
543
  checked="true"
555
544
  disabled></fig-checkbox>
556
- </div>
545
+ </fig-field>
557
546
  </section>
558
547
  <hr>
559
548
 
@@ -563,7 +552,7 @@
563
552
  <p class="description">A small visual indicator for colors, gradients, or images.</p>
564
553
 
565
554
  <h3>Types</h3>
566
- <div class="example-row">
555
+ <fig-field direction="horizontal">
567
556
  <label>Color</label>
568
557
  <hstack>
569
558
  <fig-chit type="color"
@@ -575,54 +564,54 @@
575
564
  <fig-chit type="color"
576
565
  value="#000000"></fig-chit>
577
566
  </hstack>
578
- </div>
579
- <div class="example-row">
567
+ </fig-field>
568
+ <fig-field direction="horizontal">
580
569
  <label>Gradient (linear)</label>
581
570
  <fig-chit type="gradient"
582
571
  variant="linear"></fig-chit>
583
- </div>
584
- <div class="example-row">
572
+ </fig-field>
573
+ <fig-field direction="horizontal">
585
574
  <label>Gradient (angular)</label>
586
575
  <fig-chit type="gradient"
587
576
  variant="angular"></fig-chit>
588
- </div>
589
- <div class="example-row">
577
+ </fig-field>
578
+ <fig-field direction="horizontal">
590
579
  <label>Gradient (radial)</label>
591
580
  <fig-chit type="gradient"
592
581
  variant="radial"></fig-chit>
593
- </div>
594
- <div class="example-row">
582
+ </fig-field>
583
+ <fig-field direction="horizontal">
595
584
  <label>Image</label>
596
585
  <fig-chit type="image"
597
586
  src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
598
- </div>
587
+ </fig-field>
599
588
 
600
589
  <h3>Sizes</h3>
601
- <div class="example-row">
590
+ <fig-field direction="horizontal">
602
591
  <label>Default</label>
603
592
  <fig-chit type="color"
604
593
  value="#9747FF"></fig-chit>
605
- </div>
606
- <div class="example-row">
594
+ </fig-field>
595
+ <fig-field direction="horizontal">
607
596
  <label>Large</label>
608
597
  <fig-chit type="color"
609
598
  value="#9747FF"
610
599
  size="large"></fig-chit>
611
- </div>
600
+ </fig-field>
612
601
 
613
602
  <h3>States</h3>
614
- <div class="example-row">
603
+ <fig-field direction="horizontal">
615
604
  <label>Selected</label>
616
605
  <fig-chit type="color"
617
606
  value="#0D99FF"
618
607
  selected="true"></fig-chit>
619
- </div>
620
- <div class="example-row">
608
+ </fig-field>
609
+ <fig-field direction="horizontal">
621
610
  <label>Disabled</label>
622
611
  <fig-chit type="color"
623
612
  value="#0D99FF"
624
613
  disabled="true"></fig-chit>
625
- </div>
614
+ </fig-field>
626
615
  </section>
627
616
  <hr>
628
617
 
@@ -656,21 +645,23 @@
656
645
  position="center center">
657
646
  <fig-header>
658
647
  <h3>Dialog Title</h3>
659
- <fig-button variant="ghost"
660
- icon="true"
661
- close-dialog>
662
- <svg width="24"
663
- height="24"
664
- viewBox="0 0 24 24"
665
- fill="none"
666
- xmlns="http://www.w3.org/2000/svg">
667
- <path fill-rule="evenodd"
668
- clip-rule="evenodd"
669
- 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"
670
- fill="currentColor"
671
- fill-opacity="0.9" />
672
- </svg>
673
- </fig-button>
648
+ <fig-tooltip text="Close">
649
+ <fig-button variant="ghost"
650
+ icon="true"
651
+ close-dialog>
652
+ <svg width="24"
653
+ height="24"
654
+ viewBox="0 0 24 24"
655
+ fill="none"
656
+ xmlns="http://www.w3.org/2000/svg">
657
+ <path fill-rule="evenodd"
658
+ clip-rule="evenodd"
659
+ 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"
660
+ fill="currentColor"
661
+ fill-opacity="0.9" />
662
+ </svg>
663
+ </fig-button>
664
+ </fig-tooltip>
674
665
  </fig-header>
675
666
  <fig-content>
676
667
  <p>This is a draggable dialog. You can drag it by the header.</p>
@@ -709,21 +700,23 @@
709
700
  drag="true">
710
701
  <fig-header>
711
702
  <h3>Positioned Dialog</h3>
712
- <fig-button variant="ghost"
713
- icon="true"
714
- close-dialog>
715
- <svg width="24"
716
- height="24"
717
- viewBox="0 0 24 24"
718
- fill="none"
719
- xmlns="http://www.w3.org/2000/svg">
720
- <path fill-rule="evenodd"
721
- clip-rule="evenodd"
722
- 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"
723
- fill="currentColor"
724
- fill-opacity="0.9" />
725
- </svg>
726
- </fig-button>
703
+ <fig-tooltip text="Close">
704
+ <fig-button variant="ghost"
705
+ icon="true"
706
+ close-dialog>
707
+ <svg width="24"
708
+ height="24"
709
+ viewBox="0 0 24 24"
710
+ fill="none"
711
+ xmlns="http://www.w3.org/2000/svg">
712
+ <path fill-rule="evenodd"
713
+ clip-rule="evenodd"
714
+ 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"
715
+ fill="currentColor"
716
+ fill-opacity="0.9" />
717
+ </svg>
718
+ </fig-button>
719
+ </fig-tooltip>
727
720
  </fig-header>
728
721
  <fig-content>
729
722
  <p>This dialog is positioned at a specific corner.</p>
@@ -783,34 +776,38 @@
783
776
  <p class="description">A form field container with label support.</p>
784
777
 
785
778
  <h3>Directions</h3>
786
- <div class="example-row">
779
+ <fig-field direction="horizontal">
787
780
  <label>Vertical (default)</label>
788
- </div>
781
+ </fig-field>
789
782
  <fig-field>
790
783
  <label>Field Label</label>
791
784
  <fig-input-text placeholder="Enter text"></fig-input-text>
792
785
  </fig-field>
793
786
 
794
- <div class="example-row"
795
- style="margin-top: 24px;">
787
+ <fig-field direction="horizontal"
788
+ style="margin-top: 24px;">
796
789
  <label>Horizontal</label>
797
- </div>
798
- <fig-field direction="horizontal" style="width: 240px;">
790
+ </fig-field>
791
+ <fig-field direction="horizontal"
792
+ style="width: 240px;">
799
793
  <label>Field Label</label>
800
794
  <fig-input-text placeholder="Enter text"></fig-input-text>
801
795
  </fig-field>
802
796
 
803
797
  <h3>Horizontal Fields with Different Inputs</h3>
804
- <fig-field direction="horizontal" style="width: 240px;">
798
+ <fig-field direction="horizontal"
799
+ style="width: 240px;">
805
800
  <label>Text Input</label>
806
801
  <fig-input-text placeholder="Enter text"></fig-input-text>
807
802
  </fig-field>
808
- <fig-field direction="horizontal" style="width: 240px;">
803
+ <fig-field direction="horizontal"
804
+ style="width: 240px;">
809
805
  <label>Number Input</label>
810
806
  <fig-input-number value="100"
811
807
  units="px"></fig-input-number>
812
808
  </fig-field>
813
- <fig-field direction="horizontal" style="width: 240px;">
809
+ <fig-field direction="horizontal"
810
+ style="width: 240px;">
814
811
  <label>Dropdown</label>
815
812
  <fig-dropdown>
816
813
  <option>Option One</option>
@@ -818,35 +815,42 @@
818
815
  <option>Option Three</option>
819
816
  </fig-dropdown>
820
817
  </fig-field>
821
- <fig-field direction="horizontal" style="width: 240px;">
818
+ <fig-field direction="horizontal"
819
+ style="width: 240px;">
822
820
  <label>Slider</label>
823
821
  <fig-slider value="50"
824
822
  text="true"></fig-slider>
825
823
  </fig-field>
826
- <fig-field direction="horizontal" style="width: 240px;">
824
+ <fig-field direction="horizontal"
825
+ style="width: 240px;">
827
826
  <label>Color</label>
828
827
  <fig-input-color value="#0D99FF"
829
828
  text="true"></fig-input-color>
830
829
  </fig-field>
831
- <fig-field direction="horizontal" style="width: 240px;">
830
+ <fig-field direction="horizontal"
831
+ style="width: 240px;">
832
832
  <label>Angle</label>
833
833
  <fig-input-angle value="45"
834
834
  text="true"></fig-input-angle>
835
835
  </fig-field>
836
- <fig-field direction="horizontal" style="width: 240px;">
836
+ <fig-field direction="horizontal"
837
+ style="width: 240px;">
837
838
  <label>Joystick</label>
838
839
  <fig-input-joystick text="true"
839
840
  value="50,50"></fig-input-joystick>
840
841
  </fig-field>
841
- <fig-field direction="horizontal" style="width: 240px;">
842
+ <fig-field direction="horizontal"
843
+ style="width: 240px;">
842
844
  <label>Switch</label>
843
845
  <fig-switch></fig-switch>
844
846
  </fig-field>
845
- <fig-field direction="horizontal" style="width: 240px;">
847
+ <fig-field direction="horizontal"
848
+ style="width: 240px;">
846
849
  <label>Checkbox</label>
847
850
  <fig-checkbox></fig-checkbox>
848
851
  </fig-field>
849
- <fig-field direction="horizontal" style="width: 240px;">
852
+ <fig-field direction="horizontal"
853
+ style="width: 240px;">
850
854
  <label>Segmented</label>
851
855
  <fig-segmented-control>
852
856
  <fig-segment value="left">Left</fig-segment>
@@ -905,20 +909,20 @@
905
909
  <p class="description">An image component with upload and download capabilities.</p>
906
910
 
907
911
  <h3>Sizes</h3>
908
- <div class="example-row">
912
+ <fig-field direction="horizontal">
909
913
  <label>Default</label>
910
914
  <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
911
- </div>
912
- <div class="example-row">
915
+ </fig-field>
916
+ <fig-field direction="horizontal">
913
917
  <label>Medium</label>
914
918
  <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
915
919
  size="medium"></fig-image>
916
- </div>
917
- <div class="example-row">
920
+ </fig-field>
921
+ <fig-field direction="horizontal">
918
922
  <label>Large</label>
919
923
  <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"
920
924
  size="large"></fig-image>
921
- </div>
925
+ </fig-field>
922
926
 
923
927
  <h3>With Upload</h3>
924
928
  <fig-image upload="true"
@@ -1038,32 +1042,32 @@
1038
1042
  <fig-input-number value="100"></fig-input-number>
1039
1043
 
1040
1044
  <h3>With Units</h3>
1041
- <div class="example-row">
1045
+ <fig-field direction="horizontal">
1042
1046
  <label>Percentage</label>
1043
1047
  <fig-input-number value="50"
1044
1048
  units="%"></fig-input-number>
1045
- </div>
1046
- <div class="example-row">
1049
+ </fig-field>
1050
+ <fig-field direction="horizontal">
1047
1051
  <label>Degrees</label>
1048
1052
  <fig-input-number value="45"
1049
1053
  units="°"
1050
1054
  min="0"
1051
1055
  max="360"></fig-input-number>
1052
- </div>
1053
- <div class="example-row">
1056
+ </fig-field>
1057
+ <fig-field direction="horizontal">
1054
1058
  <label>Pixels</label>
1055
1059
  <fig-input-number value="24"
1056
1060
  units="px"
1057
1061
  min="0"
1058
1062
  max="1000"></fig-input-number>
1059
- </div>
1060
- <div class="example-row">
1063
+ </fig-field>
1064
+ <fig-field direction="horizontal">
1061
1065
  <label>Currency (prefix)</label>
1062
1066
  <fig-input-number value="99.99"
1063
1067
  units="$"
1064
1068
  unit-position="prefix"
1065
1069
  step="0.01"></fig-input-number>
1066
- </div>
1070
+ </fig-field>
1067
1071
 
1068
1072
  <h3>With Transform</h3>
1069
1073
  <fig-input-number value="0.5"
@@ -1081,33 +1085,33 @@
1081
1085
  step="5"></fig-input-number>
1082
1086
 
1083
1087
  <h3>States</h3>
1084
- <div class="example-row">
1088
+ <fig-field direction="horizontal">
1085
1089
  <label>Disabled</label>
1086
1090
  <fig-input-number value="75"
1087
1091
  units="%"
1088
1092
  disabled></fig-input-number>
1089
- </div>
1090
- <div class="example-row">
1093
+ </fig-field>
1094
+ <fig-field direction="horizontal">
1091
1095
  <label>With placeholder</label>
1092
1096
  <fig-input-number placeholder="Enter value"
1093
1097
  units="%"></fig-input-number>
1094
- </div>
1098
+ </fig-field>
1095
1099
 
1096
1100
  <h3>With Slots</h3>
1097
- <div class="example-row">
1101
+ <fig-field direction="horizontal">
1098
1102
  <label>Append slot</label>
1099
1103
  <fig-input-number value="50"
1100
1104
  min="0"
1101
1105
  max="100">
1102
1106
  <span slot="append">%</span>
1103
1107
  </fig-input-number>
1104
- </div>
1105
- <div class="example-row">
1108
+ </fig-field>
1109
+ <fig-field direction="horizontal">
1106
1110
  <label>Prepend slot</label>
1107
1111
  <fig-input-number value="100">
1108
1112
  <span slot="prepend">X</span>
1109
1113
  </fig-input-number>
1110
- </div>
1114
+ </fig-field>
1111
1115
  </section>
1112
1116
  <hr>
1113
1117
 
@@ -1123,21 +1127,21 @@
1123
1127
  <fig-input-text value="Hello World"></fig-input-text>
1124
1128
 
1125
1129
  <h3>Types</h3>
1126
- <div class="example-row">
1130
+ <fig-field direction="horizontal">
1127
1131
  <label>Text (default)</label>
1128
1132
  <fig-input-text placeholder="Text input"></fig-input-text>
1129
- </div>
1130
- <div class="example-row">
1133
+ </fig-field>
1134
+ <fig-field direction="horizontal">
1131
1135
  <label>Password</label>
1132
1136
  <fig-input-text type="password"
1133
1137
  placeholder="Password"></fig-input-text>
1134
- </div>
1135
- <div class="example-row">
1138
+ </fig-field>
1139
+ <fig-field direction="horizontal">
1136
1140
  <label>Number</label>
1137
1141
  <fig-input-text type="number"
1138
1142
  placeholder="Number"
1139
1143
  steppers="true"></fig-input-text>
1140
- </div>
1144
+ </fig-field>
1141
1145
 
1142
1146
  <h3>Multiline</h3>
1143
1147
  <fig-input-text multiline="true"
@@ -1146,25 +1150,25 @@
1146
1150
  resizable="true"></fig-input-text>
1147
1151
 
1148
1152
  <h3>States</h3>
1149
- <div class="example-row">
1153
+ <fig-field direction="horizontal">
1150
1154
  <label>Disabled</label>
1151
1155
  <fig-input-text value="Disabled"
1152
1156
  disabled></fig-input-text>
1153
- </div>
1157
+ </fig-field>
1154
1158
 
1155
1159
  <h3>With Slots</h3>
1156
- <div class="example-row">
1160
+ <fig-field direction="horizontal">
1157
1161
  <label>Append</label>
1158
1162
  <fig-input-text value="90">
1159
1163
  <span slot="append">°</span>
1160
1164
  </fig-input-text>
1161
- </div>
1162
- <div class="example-row">
1165
+ </fig-field>
1166
+ <fig-field direction="horizontal">
1163
1167
  <label>Prepend</label>
1164
1168
  <fig-input-text placeholder="Search">
1165
1169
  <span slot="prepend">🔍</span>
1166
1170
  </fig-input-text>
1167
- </div>
1171
+ </fig-field>
1168
1172
 
1169
1173
  <h3>Full Width</h3>
1170
1174
  <fig-input-text placeholder="Full width input"
@@ -1177,23 +1181,42 @@
1177
1181
  <h2>Popover</h2>
1178
1182
  <p class="description">A floating panel that appears on hover or click.</p>
1179
1183
 
1180
- <h3>Default (Hover)</h3>
1181
- <fig-popover>
1184
+ <h3>Hover Trigger</h3>
1185
+ <fig-popover action="hover">
1182
1186
  <fig-button>Hover me</fig-button>
1183
1187
  <div popover>
1184
- <p style="margin: 0; padding: 8px;">This is popover content</p>
1188
+ <fig-header>
1189
+ <h3>Quick Info</h3>
1190
+ </fig-header>
1191
+ <fig-content>
1192
+ <fig-field direction="horizontal">
1193
+ <label>Status</label>
1194
+ <span style="color: var(--figma-color-text-success)">Active</span>
1195
+ </fig-field>
1196
+ <fig-field direction="horizontal">
1197
+ <label>Type</label>
1198
+ <span>Component</span>
1199
+ </fig-field>
1200
+ </fig-content>
1185
1201
  </div>
1186
1202
  </fig-popover>
1187
1203
 
1188
- <h3>Manual Trigger</h3>
1189
- <fig-popover action="manual">
1204
+ <h3>Click Trigger</h3>
1205
+ <fig-popover action="click">
1190
1206
  <fig-button>Click me</fig-button>
1191
1207
  <div popover>
1192
1208
  <fig-header>
1193
1209
  <h3>Popover Title</h3>
1194
1210
  </fig-header>
1195
1211
  <fig-content>
1196
- <p>Click the button again to close.</p>
1212
+ <fig-field direction="horizontal">
1213
+ <label>Name</label>
1214
+ <fig-input-text placeholder="Enter name"></fig-input-text>
1215
+ </fig-field>
1216
+ <fig-field direction="horizontal">
1217
+ <label>Enabled</label>
1218
+ <fig-switch></fig-switch>
1219
+ </fig-field>
1197
1220
  </fig-content>
1198
1221
  </div>
1199
1222
  </fig-popover>
@@ -1298,6 +1321,38 @@
1298
1321
  </section>
1299
1322
  <hr>
1300
1323
 
1324
+ <!-- Shimmer -->
1325
+ <section id="shimmer">
1326
+ <h2>Shimmer</h2>
1327
+ <p class="description">An animated gradient text effect for loading states or visual emphasis.</p>
1328
+
1329
+ <h3>Horizontal (Default)</h3>
1330
+ <fig-shimmer>
1331
+ <span>Loading content...</span>
1332
+ </fig-shimmer>
1333
+
1334
+ <h3>Vertical</h3>
1335
+ <fig-shimmer direction="vertical">
1336
+ <span>Loading content...</span>
1337
+ </fig-shimmer>
1338
+
1339
+ <h3>Diagonal</h3>
1340
+ <fig-shimmer direction="diagonal">
1341
+ <span>Loading content...</span>
1342
+ </fig-shimmer>
1343
+
1344
+ <h3>Custom Duration (3s)</h3>
1345
+ <fig-shimmer duration="3s">
1346
+ <span>Slow shimmer effect</span>
1347
+ </fig-shimmer>
1348
+
1349
+ <h3>Paused</h3>
1350
+ <fig-shimmer playing="false">
1351
+ <span>No animation</span>
1352
+ </fig-shimmer>
1353
+ </section>
1354
+ <hr>
1355
+
1301
1356
  <!-- Slider -->
1302
1357
  <section id="slider">
1303
1358
  <h2>Slider</h2>
@@ -1322,40 +1377,40 @@
1322
1377
  units="%"></fig-slider>
1323
1378
 
1324
1379
  <h3>Variants</h3>
1325
- <div class="example-row">
1380
+ <fig-field direction="horizontal">
1326
1381
  <label>Default</label>
1327
1382
  <fig-slider min="0"
1328
1383
  max="100"
1329
1384
  value="50"
1330
1385
  text="true"></fig-slider>
1331
- </div>
1332
- <div class="example-row">
1386
+ </fig-field>
1387
+ <fig-field direction="horizontal">
1333
1388
  <label>Neue</label>
1334
1389
  <fig-slider min="0"
1335
1390
  max="100"
1336
1391
  value="50"
1337
1392
  text="true"
1338
1393
  variant="neue"></fig-slider>
1339
- </div>
1340
- <div class="example-row">
1394
+ </fig-field>
1395
+ <fig-field direction="horizontal">
1341
1396
  <label>Minimal</label>
1342
1397
  <fig-slider min="0"
1343
1398
  max="100"
1344
1399
  value="50"
1345
1400
  text="true"
1346
1401
  variant="minimal"></fig-slider>
1347
- </div>
1402
+ </fig-field>
1348
1403
 
1349
1404
  <h3>Opacity Type</h3>
1350
- <div class="example-row">
1405
+ <fig-field direction="horizontal">
1351
1406
  <label>Default</label>
1352
1407
  <fig-slider type="opacity"
1353
1408
  value="0.75"
1354
1409
  color="#ff0000"
1355
1410
  units="%"
1356
1411
  text="true"></fig-slider>
1357
- </div>
1358
- <div class="example-row">
1412
+ </fig-field>
1413
+ <fig-field direction="horizontal">
1359
1414
  <label>Neue</label>
1360
1415
  <fig-slider type="opacity"
1361
1416
  value="0.75"
@@ -1363,8 +1418,8 @@
1363
1418
  units="%"
1364
1419
  text="true"
1365
1420
  variant="neue"></fig-slider>
1366
- </div>
1367
- <div class="example-row">
1421
+ </fig-field>
1422
+ <fig-field direction="horizontal">
1368
1423
  <label>Minimal</label>
1369
1424
  <fig-slider type="opacity"
1370
1425
  value="0.75"
@@ -1372,29 +1427,29 @@
1372
1427
  units="%"
1373
1428
  text="true"
1374
1429
  variant="minimal"></fig-slider>
1375
- </div>
1430
+ </fig-field>
1376
1431
 
1377
1432
  <h3>Hue Type</h3>
1378
- <div class="example-row">
1433
+ <fig-field direction="horizontal">
1379
1434
  <label>Default</label>
1380
1435
  <fig-slider type="hue"
1381
1436
  value="180"></fig-slider>
1382
- </div>
1383
- <div class="example-row">
1437
+ </fig-field>
1438
+ <fig-field direction="horizontal">
1384
1439
  <label>Neue</label>
1385
1440
  <fig-slider type="hue"
1386
1441
  value="180"
1387
1442
  variant="neue"></fig-slider>
1388
- </div>
1389
- <div class="example-row">
1443
+ </fig-field>
1444
+ <fig-field direction="horizontal">
1390
1445
  <label>Minimal</label>
1391
1446
  <fig-slider type="hue"
1392
1447
  value="180"
1393
1448
  variant="minimal"></fig-slider>
1394
- </div>
1449
+ </fig-field>
1395
1450
 
1396
1451
  <h3>Stepper Type</h3>
1397
- <div class="example-row">
1452
+ <fig-field direction="horizontal">
1398
1453
  <label>Default</label>
1399
1454
  <fig-slider type="stepper"
1400
1455
  value="50"
@@ -1408,8 +1463,8 @@
1408
1463
  <option value="100"></option>
1409
1464
  </datalist>
1410
1465
  </fig-slider>
1411
- </div>
1412
- <div class="example-row">
1466
+ </fig-field>
1467
+ <fig-field direction="horizontal">
1413
1468
  <label>Neue</label>
1414
1469
  <fig-slider type="stepper"
1415
1470
  value="50"
@@ -1424,8 +1479,8 @@
1424
1479
  <option value="100"></option>
1425
1480
  </datalist>
1426
1481
  </fig-slider>
1427
- </div>
1428
- <div class="example-row">
1482
+ </fig-field>
1483
+ <fig-field direction="horizontal">
1429
1484
  <label>Minimal</label>
1430
1485
  <fig-slider type="stepper"
1431
1486
  value="50"
@@ -1440,10 +1495,10 @@
1440
1495
  <option value="100"></option>
1441
1496
  </datalist>
1442
1497
  </fig-slider>
1443
- </div>
1498
+ </fig-field>
1444
1499
 
1445
1500
  <h3>Delta Type</h3>
1446
- <div class="example-row">
1501
+ <fig-field direction="horizontal">
1447
1502
  <label>Default</label>
1448
1503
  <fig-slider type="delta"
1449
1504
  value="0"
@@ -1456,8 +1511,8 @@
1456
1511
  <option value="0"></option>
1457
1512
  </datalist>
1458
1513
  </fig-slider>
1459
- </div>
1460
- <div class="example-row">
1514
+ </fig-field>
1515
+ <fig-field direction="horizontal">
1461
1516
  <label>Neue</label>
1462
1517
  <fig-slider type="delta"
1463
1518
  value="0"
@@ -1471,8 +1526,8 @@
1471
1526
  <option value="0"></option>
1472
1527
  </datalist>
1473
1528
  </fig-slider>
1474
- </div>
1475
- <div class="example-row">
1529
+ </fig-field>
1530
+ <fig-field direction="horizontal">
1476
1531
  <label>Minimal</label>
1477
1532
  <fig-slider type="delta"
1478
1533
  value="0"
@@ -1486,7 +1541,7 @@
1486
1541
  <option value="0"></option>
1487
1542
  </datalist>
1488
1543
  </fig-slider>
1489
- </div>
1544
+ </fig-field>
1490
1545
 
1491
1546
  <h3>With Transform</h3>
1492
1547
  <fig-slider min="0"
@@ -1528,46 +1583,46 @@
1528
1583
  <p class="description">A toggle switch for on/off states.</p>
1529
1584
 
1530
1585
  <h3>States</h3>
1531
- <div class="example-row">
1586
+ <fig-field direction="horizontal">
1532
1587
  <label>Off</label>
1533
1588
  <fig-switch label="Off"
1534
1589
  checked="false"></fig-switch>
1535
- </div>
1536
- <div class="example-row">
1590
+ </fig-field>
1591
+ <fig-field direction="horizontal">
1537
1592
  <label>On</label>
1538
1593
  <fig-switch label="On"
1539
1594
  checked="true"></fig-switch>
1540
- </div>
1541
- <div class="example-row">
1595
+ </fig-field>
1596
+ <fig-field direction="horizontal">
1542
1597
  <label>Indeterminate</label>
1543
1598
  <fig-switch label="Indeterminate"
1544
1599
  indeterminate="true"></fig-switch>
1545
- </div>
1546
- <div class="example-row">
1600
+ </fig-field>
1601
+ <fig-field direction="horizontal">
1547
1602
  <label>Disabled</label>
1548
1603
  <fig-switch label="Disabled"
1549
1604
  disabled></fig-switch>
1550
- </div>
1551
- <div class="example-row">
1605
+ </fig-field>
1606
+ <fig-field direction="horizontal">
1552
1607
  <label>Disabled (on)</label>
1553
1608
  <fig-switch label="Disabled On"
1554
1609
  checked="true"
1555
1610
  disabled></fig-switch>
1556
- </div>
1611
+ </fig-field>
1557
1612
 
1558
1613
  <h3>Without Labels</h3>
1559
- <div class="example-row">
1614
+ <fig-field direction="horizontal">
1560
1615
  <label>Off</label>
1561
1616
  <fig-switch checked="false"></fig-switch>
1562
- </div>
1563
- <div class="example-row">
1617
+ </fig-field>
1618
+ <fig-field direction="horizontal">
1564
1619
  <label>On</label>
1565
1620
  <fig-switch checked="true"></fig-switch>
1566
- </div>
1567
- <div class="example-row">
1621
+ </fig-field>
1622
+ <fig-field direction="horizontal">
1568
1623
  <label>Disabled</label>
1569
1624
  <fig-switch disabled></fig-switch>
1570
- </div>
1625
+ </fig-field>
1571
1626
  </section>
1572
1627
  <hr>
1573
1628
 
package/fig.js CHANGED
@@ -5,6 +5,25 @@
5
5
  function figUniqueId() {
6
6
  return Date.now().toString(36) + Math.random().toString(36).substring(2);
7
7
  }
8
+
9
+ /**
10
+ * Gets the highest z-index currently in use on the page
11
+ * @returns {number} The highest z-index found, minimum of 1000
12
+ */
13
+ function figGetHighestZIndex() {
14
+ let highest = 1000; // Baseline minimum
15
+
16
+ // Check all elements with inline z-index or computed z-index
17
+ const elements = document.querySelectorAll("*");
18
+ for (const el of elements) {
19
+ const zIndex = parseInt(getComputedStyle(el).zIndex, 10);
20
+ if (!isNaN(zIndex) && zIndex > highest) {
21
+ highest = zIndex;
22
+ }
23
+ }
24
+
25
+ return highest;
26
+ }
8
27
  /**
9
28
  * Checks if the browser supports the native popover API
10
29
  * @returns {boolean} True if popover is supported
@@ -326,7 +345,15 @@ class FigTooltip extends HTMLElement {
326
345
  this.popup.style.pointerEvents = "none";
327
346
  this.popup.append(content);
328
347
  content.innerText = this.getAttribute("text");
329
- document.body.append(this.popup);
348
+
349
+ // If tooltip is inside a dialog, append to dialog to stay in top layer
350
+ const parentDialog = this.closest("dialog");
351
+ if (parentDialog && parentDialog.open) {
352
+ parentDialog.append(this.popup);
353
+ } else {
354
+ document.body.append(this.popup);
355
+ }
356
+
330
357
  const text = content.childNodes[0];
331
358
  if (text) {
332
359
  const range = document.createRange();
@@ -451,7 +478,7 @@ class FigTooltip extends HTMLElement {
451
478
  this.popup.style.visibility = "visible";
452
479
  this.popup.style.display = "block";
453
480
  this.popup.style.pointerEvents = "all";
454
- this.popup.style.zIndex = parseInt(new Date().getTime() / 1000);
481
+ this.popup.style.zIndex = figGetHighestZIndex() + 1;
455
482
 
456
483
  this.isOpen = true;
457
484
  }
@@ -2695,6 +2722,9 @@ class FigChit extends HTMLElement {
2695
2722
  this.#src = value;
2696
2723
  this.setAttribute("src", value);
2697
2724
  }
2725
+ focus() {
2726
+ this.input?.focus();
2727
+ }
2698
2728
  attributeChangedCallback(name, oldValue, newValue) {
2699
2729
  switch (name) {
2700
2730
  case "src":
@@ -3173,6 +3203,10 @@ class FigInputJoystick extends HTMLElement {
3173
3203
  #handleKeyUp(e) {
3174
3204
  if (e.key === "Shift") this.isShiftHeld = false;
3175
3205
  }
3206
+ focus() {
3207
+ const container = this.querySelector(".fig-input-joystick-plane-container");
3208
+ container?.focus();
3209
+ }
3176
3210
  static get observedAttributes() {
3177
3211
  return ["value", "precision", "transform", "text", "coordinates"];
3178
3212
  }
@@ -3444,6 +3478,10 @@ class FigInputAngle extends HTMLElement {
3444
3478
  if (e.key === "Shift") this.isShiftHeld = false;
3445
3479
  }
3446
3480
 
3481
+ focus() {
3482
+ this.plane?.focus();
3483
+ }
3484
+
3447
3485
  static get observedAttributes() {
3448
3486
  return ["value", "precision", "text"];
3449
3487
  }
@@ -3484,3 +3522,37 @@ class FigInputAngle extends HTMLElement {
3484
3522
  }
3485
3523
  }
3486
3524
  customElements.define("fig-input-angle", FigInputAngle);
3525
+
3526
+ // FigShimmer
3527
+ class FigShimmer extends HTMLElement {
3528
+ connectedCallback() {
3529
+ const duration = this.getAttribute("duration");
3530
+ if (duration) {
3531
+ this.style.setProperty("--shimmer-duration", duration);
3532
+ }
3533
+ }
3534
+
3535
+ static get observedAttributes() {
3536
+ return ["duration", "playing"];
3537
+ }
3538
+
3539
+ get playing() {
3540
+ return this.getAttribute("playing") !== "false";
3541
+ }
3542
+
3543
+ set playing(value) {
3544
+ if (value) {
3545
+ this.removeAttribute("playing"); // Default is playing
3546
+ } else {
3547
+ this.setAttribute("playing", "false");
3548
+ }
3549
+ }
3550
+
3551
+ attributeChangedCallback(name, oldValue, newValue) {
3552
+ if (name === "duration") {
3553
+ this.style.setProperty("--shimmer-duration", newValue || "1.5s");
3554
+ }
3555
+ // playing is handled purely by CSS attribute selectors
3556
+ }
3557
+ }
3558
+ customElements.define("fig-shimmer", FigShimmer);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "module": "index.ts",
5
5
  "type": "module",
6
6
  "devDependencies": {