@rogieking/figui3 2.12.2 → 2.13.1

package/components.css

@@ -2487,6 +2487,15 @@ fig-segmented-control {
       border-radius: calc(var(--radius-medium) - 1px);
       box-shadow: 0 0 0 1px var(--figma-color-border);
     }
+
+    svg {
+      *[fill] {
+        fill: currentColor;
+      }
+      *[stroke]:not([stroke="none"]) {
+        stroke: currentColor;
+      }
+    }
   }
 }
 

package/fig.js

@@ -847,6 +847,8 @@ class FigDialog extends HTMLDialogElement {
       "textarea",
       "a",
       "label",
+      "details",
+      "summary",
       '[contenteditable="true"]',
       "[tabindex]",
     ];
@@ -893,6 +895,11 @@ class FigDialog extends HTMLDialogElement {
       return;
     }
 
+    // Don't interfere with interactive elements (inputs, sliders, buttons, etc.)
+    if (this.#isInteractiveElement(e.target)) {
+      return;
+    }
+
     // If handle attribute is specified, only allow drag from within that element
     // Otherwise, allow dragging from anywhere on the dialog (except interactive elements)
     const handleSelector = this.getAttribute("handle");
@@ -905,7 +912,7 @@ class FigDialog extends HTMLDialogElement {
     // No handle specified = drag from anywhere (original behavior)
 
     // Don't prevent default yet - just set up pending drag
-    // This allows clicks on interactive elements like <details> to work
+    // This allows clicks on non-interactive elements like <details> to work
     this.#dragPending = true;
     this.#dragStartPos.x = e.clientX;
     this.#dragStartPos.y = e.clientY;
@@ -1361,14 +1368,14 @@ class FigSegmentedControl extends HTMLElement {
   }
 
   handleClick(event) {
-    const target = event.target;
-    if (target.nodeName.toLowerCase() === "fig-segment") {
+    const segment = event.target.closest("fig-segment");
+    if (segment) {
       const segments = this.querySelectorAll("fig-segment");
-      for (const segment of segments) {
-        if (segment === target) {
-          this.selectedSegment = segment;
+      for (const seg of segments) {
+        if (seg === segment) {
+          this.selectedSegment = seg;
         } else {
-          segment.removeAttribute("selected");
+          seg.removeAttribute("selected");
         }
       }
     }

package/index.html

@@ -683,9 +683,26 @@
                 <fig-content>
                     <p>This is a draggable dialog. You can drag it by the header.</p>
                     <fig-field direction="horizontal">
-                        <label>Example Field</label>
+                        <label>Text</label>
                         <fig-input-text placeholder="Enter text"></fig-input-text>
                     </fig-field>
+                    <fig-field direction="horizontal">
+                        <label>Number</label>
+                        <fig-input-number value="50"
+                                          min="0"
+                                          max="100"
+                                          units="px"></fig-input-number>
+                    </fig-field>
+                    <fig-field direction="horizontal">
+                        <label>Slider</label>
+                        <fig-slider value="50"
+                                    min="0"
+                                    max="100"></fig-slider>
+                    </fig-field>
+                    <fig-field direction="horizontal">
+                        <label>Checkbox</label>
+                        <fig-checkbox checked="true">Enable feature</fig-checkbox>
+                    </fig-field>
                     <details>
                         <summary>More options</summary>
                         <fig-field direction="horizontal">
@@ -735,6 +752,17 @@
                 </fig-header>
                 <fig-content>
                     <p>This dialog is positioned at a specific corner.</p>
+                    <fig-field direction="horizontal">
+                        <label>Number</label>
+                        <fig-input-number value="100"
+                                          units="%"></fig-input-number>
+                    </fig-field>
+                    <fig-field direction="horizontal">
+                        <label>Slider</label>
+                        <fig-slider value="50"
+                                    min="0"
+                                    max="100"></fig-slider>
+                    </fig-field>
                 </fig-content>
                 <footer>
                     <fig-button close-dialog>Close</fig-button>
@@ -778,6 +806,19 @@
                         <li>✗ This content area (won't drag)</li>
                         <li>✗ The footer below (won't drag)</li>
                     </ul>
+                    <fig-field direction="horizontal">
+                        <label>Number</label>
+                        <fig-input-number value="45"
+                                          units="°"
+                                          min="0"
+                                          max="360"></fig-input-number>
+                    </fig-field>
+                    <fig-field direction="horizontal">
+                        <label>Slider</label>
+                        <fig-slider value="50"
+                                    min="0"
+                                    max="100"></fig-slider>
+                    </fig-field>
                     <details>
                         <summary>More options</summary>
                         <fig-field direction="horizontal">
@@ -2497,6 +2538,20 @@
                 <fig-segment>Right</fig-segment>
             </fig-segmented-control>
 
+            <h3>With Icons</h3>
+            <fig-segmented-control>
+                <fig-segment selected>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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"/>
+                    </svg>
+                </fig-segment>
+                <fig-segment>
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <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"/>
+                    </svg>
+                </fig-segment>
+            </fig-segmented-control>
+
             <h3>Many Options</h3>
             <fig-segmented-control>
                 <fig-segment>XS</fig-segment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.12.2",
+  "version": "2.13.1",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",