@rogieking/figui3 2.13.0 → 2.13.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 (4) hide show
  1. package/components.css +9 -0
  2. package/fig.js +6 -6
  3. package/index.html +33 -6
  4. package/package.json +1 -1
package/components.css CHANGED
@@ -2487,6 +2487,15 @@ fig-segmented-control {
2487
2487
  border-radius: calc(var(--radius-medium) - 1px);
2488
2488
  box-shadow: 0 0 0 1px var(--figma-color-border);
2489
2489
  }
2490
+
2491
+ svg {
2492
+ *[fill] {
2493
+ fill: currentColor;
2494
+ }
2495
+ *[stroke]:not([stroke="none"]) {
2496
+ stroke: currentColor;
2497
+ }
2498
+ }
2490
2499
  }
2491
2500
  }
2492
2501
 
package/fig.js CHANGED
@@ -1368,14 +1368,14 @@ class FigSegmentedControl extends HTMLElement {
1368
1368
  }
1369
1369
 
1370
1370
  handleClick(event) {
1371
- const target = event.target;
1372
- if (target.nodeName.toLowerCase() === "fig-segment") {
1371
+ const segment = event.target.closest("fig-segment");
1372
+ if (segment) {
1373
1373
  const segments = this.querySelectorAll("fig-segment");
1374
- for (const segment of segments) {
1375
- if (segment === target) {
1376
- this.selectedSegment = segment;
1374
+ for (const seg of segments) {
1375
+ if (seg === segment) {
1376
+ this.selectedSegment = seg;
1377
1377
  } else {
1378
- segment.removeAttribute("selected");
1378
+ seg.removeAttribute("selected");
1379
1379
  }
1380
1380
  }
1381
1381
  }
package/index.html CHANGED
@@ -688,11 +688,16 @@
688
688
  </fig-field>
689
689
  <fig-field direction="horizontal">
690
690
  <label>Number</label>
691
- <fig-input-number value="50" min="0" max="100" units="px"></fig-input-number>
691
+ <fig-input-number value="50"
692
+ min="0"
693
+ max="100"
694
+ units="px"></fig-input-number>
692
695
  </fig-field>
693
696
  <fig-field direction="horizontal">
694
697
  <label>Slider</label>
695
- <fig-slider value="50" min="0" max="100"></fig-slider>
698
+ <fig-slider value="50"
699
+ min="0"
700
+ max="100"></fig-slider>
696
701
  </fig-field>
697
702
  <fig-field direction="horizontal">
698
703
  <label>Checkbox</label>
@@ -749,11 +754,14 @@
749
754
  <p>This dialog is positioned at a specific corner.</p>
750
755
  <fig-field direction="horizontal">
751
756
  <label>Number</label>
752
- <fig-input-number value="100" units="%"></fig-input-number>
757
+ <fig-input-number value="100"
758
+ units="%"></fig-input-number>
753
759
  </fig-field>
754
760
  <fig-field direction="horizontal">
755
761
  <label>Slider</label>
756
- <fig-slider value="50" min="0" max="100"></fig-slider>
762
+ <fig-slider value="50"
763
+ min="0"
764
+ max="100"></fig-slider>
757
765
  </fig-field>
758
766
  </fig-content>
759
767
  <footer>
@@ -800,11 +808,16 @@
800
808
  </ul>
801
809
  <fig-field direction="horizontal">
802
810
  <label>Number</label>
803
- <fig-input-number value="45" units="°" min="0" max="360"></fig-input-number>
811
+ <fig-input-number value="45"
812
+ units="°"
813
+ min="0"
814
+ max="360"></fig-input-number>
804
815
  </fig-field>
805
816
  <fig-field direction="horizontal">
806
817
  <label>Slider</label>
807
- <fig-slider value="50" min="0" max="100"></fig-slider>
818
+ <fig-slider value="50"
819
+ min="0"
820
+ max="100"></fig-slider>
808
821
  </fig-field>
809
822
  <details>
810
823
  <summary>More options</summary>
@@ -2525,6 +2538,20 @@
2525
2538
  <fig-segment>Right</fig-segment>
2526
2539
  </fig-segmented-control>
2527
2540
 
2541
+ <h3>With Icons</h3>
2542
+ <fig-segmented-control>
2543
+ <fig-segment selected>
2544
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2545
+ <path d="M8.5 5.59686C8.80936 5.41829 9.19064 5.41829 9.5 5.59686L15 8.77264C15.6185 9.12984 15.9998 9.78984 16 10.5041V16.8557C15.9999 17.2128 15.8093 17.5433 15.5 17.7219C15.1907 17.9003 14.8093 17.9003 14.5 17.7219L14.2988 17.6057L14.1025 17.4924L13.9111 17.381L13.7236 17.2736L13.541 17.1672L13.3613 17.0637L13.1846 16.9621L13.0117 16.8625L12.8418 16.7639L12.6738 16.6672L12.5078 16.5715L12.3438 16.4767L12.1816 16.383L12.0205 16.2902L11.8613 16.1974L11.7012 16.1057L11.543 16.0139L11.0654 15.7385L10.9053 15.6457L10.7432 15.5519L10.5801 15.4582L10.416 15.3635L10.249 15.2668L10.0801 15.1691L9.9082 15.0705L9.73438 14.9699L9.55664 14.8674L9.375 14.7619L9.18945 14.6555L9.00098 14.5461C8.38287 14.1892 8.00002 13.5289 8 12.8137V6.46307C8 6.10581 8.1906 5.7755 8.5 5.59686ZM9 12.8137C9.00001 13.1709 9.1916 13.5012 9.50098 13.6799C11.542 14.8584 12.8291 15.6022 15 16.8557V10.5051C15 10.1925 14.8541 9.89983 14.6104 9.7121L14.5 9.63885L9 6.46307V12.8137Z" fill="black" fill-opacity="0.9"/>
2546
+ </svg>
2547
+ </fig-segment>
2548
+ <fig-segment>
2549
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2550
+ <path d="M14.4998 5.5968C14.8091 5.41823 15.1904 5.41823 15.4998 5.5968C15.8092 5.77543 15.9998 6.10575 15.9998 6.46301V12.8136C15.9997 13.5281 15.6185 14.1888 14.9998 14.546L9.49976 17.7218C9.19046 17.9003 8.80905 17.9003 8.49976 17.7218C8.19043 17.5432 7.99986 17.2127 7.99976 16.8556V10.504C7.99995 9.78978 8.38122 9.12978 8.99976 8.77258L14.4998 5.5968ZM9.49976 9.63879L9.3894 9.71204C9.14564 9.89977 8.99977 10.1924 8.99976 10.505V16.8556L14.4998 13.6798C14.7704 13.5235 14.9502 13.2513 14.991 12.9464L14.9998 12.8136V6.46301L9.49976 9.63879Z" fill="black" fill-opacity="0.9"/>
2551
+ </svg>
2552
+ </fig-segment>
2553
+ </fig-segmented-control>
2554
+
2528
2555
  <h3>Many Options</h3>
2529
2556
  <fig-segmented-control>
2530
2557
  <fig-segment>XS</fig-segment>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "2.13.0",
3
+ "version": "2.13.1",
4
4
  "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
5
5
  "author": "Rogie King",
6
6
  "license": "MIT",