@rogieking/figui3 2.12.1 → 2.13.0

package/components.css

@@ -1523,7 +1523,7 @@ details {
     display: flex;
     align-items: center;
     padding: 0 1rem 0 0;
-    height: var(--spacer-6);
+    height: var(--spacer-5);
     user-select: none;
     color: var(--figma-color-text-secondary);
 

package/fig.js

@@ -719,12 +719,15 @@ customElements.define("fig-popover", FigPopover);
  */
 class FigDialog extends HTMLDialogElement {
   #isDragging = false;
+  #dragPending = false;
+  #dragStartPos = { x: 0, y: 0 };
   #dragOffset = { x: 0, y: 0 };
   #boundPointerDown;
   #boundPointerMove;
   #boundPointerUp;
   #offset = 16; // 1rem in pixels
   #positionInitialized = false;
+  #dragThreshold = 3; // pixels before drag starts
 
   constructor() {
     super();
@@ -844,6 +847,8 @@ class FigDialog extends HTMLDialogElement {
       "textarea",
       "a",
       "label",
+      "details",
+      "summary",
       '[contenteditable="true"]',
       "[tabindex]",
     ];
@@ -886,7 +891,12 @@ class FigDialog extends HTMLDialogElement {
   }
 
   #handlePointerDown(e) {
-    if (!this.drag || this.#isInteractiveElement(e.target)) {
+    if (!this.drag) {
+      return;
+    }
+
+    // Don't interfere with interactive elements (inputs, sliders, buttons, etc.)
+    if (this.#isInteractiveElement(e.target)) {
       return;
     }
 
@@ -901,31 +911,48 @@ class FigDialog extends HTMLDialogElement {
     }
     // No handle specified = drag from anywhere (original behavior)
 
-    this.#isDragging = true;
-    this.setPointerCapture(e.pointerId);
+    // Don't prevent default yet - just set up pending drag
+    // This allows clicks on non-interactive elements like <details> to work
+    this.#dragPending = true;
+    this.#dragStartPos.x = e.clientX;
+    this.#dragStartPos.y = e.clientY;
 
     // Get current position from computed style
     const rect = this.getBoundingClientRect();
 
-    // Convert to pixel-based top/left positioning for dragging
-    // (clears margin: auto centering)
-    this.style.top = `${rect.top}px`;
-    this.style.left = `${rect.left}px`;
-    this.style.bottom = "auto";
-    this.style.right = "auto";
-    this.style.margin = "0";
-
     // Store offset from pointer to dialog top-left corner
     this.#dragOffset.x = e.clientX - rect.left;
     this.#dragOffset.y = e.clientY - rect.top;
 
     document.addEventListener("pointermove", this.#boundPointerMove);
     document.addEventListener("pointerup", this.#boundPointerUp);
-
-    e.preventDefault();
   }
 
   #handlePointerMove(e) {
+    // Check if we should start dragging (threshold exceeded)
+    if (this.#dragPending && !this.#isDragging) {
+      const dx = Math.abs(e.clientX - this.#dragStartPos.x);
+      const dy = Math.abs(e.clientY - this.#dragStartPos.y);
+
+      if (dx > this.#dragThreshold || dy > this.#dragThreshold) {
+        // Start actual drag
+        this.#isDragging = true;
+        this.#dragPending = false;
+        this.setPointerCapture(e.pointerId);
+
+        // Get current position from computed style
+        const rect = this.getBoundingClientRect();
+
+        // Convert to pixel-based top/left positioning for dragging
+        // (clears margin: auto centering)
+        this.style.top = `${rect.top}px`;
+        this.style.left = `${rect.left}px`;
+        this.style.bottom = "auto";
+        this.style.right = "auto";
+        this.style.margin = "0";
+      }
+    }
+
     if (!this.#isDragging) return;
 
     // Calculate new position based on pointer position minus offset
@@ -940,10 +967,13 @@ class FigDialog extends HTMLDialogElement {
   }
 
   #handlePointerUp(e) {
-    if (!this.#isDragging) return;
+    // Clean up pending or active drag
+    if (this.#isDragging) {
+      this.releasePointerCapture(e.pointerId);
+    }
 
     this.#isDragging = false;
-    this.releasePointerCapture(e.pointerId);
+    this.#dragPending = false;
 
     document.removeEventListener("pointermove", this.#boundPointerMove);
     document.removeEventListener("pointerup", this.#boundPointerUp);

package/index.html

@@ -683,9 +683,28 @@
                 <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">
+                            <label>Advanced</label>
+                            <fig-input-text placeholder="Advanced setting"></fig-input-text>
+                        </fig-field>
+                    </details>
                 </fig-content>
                 <footer>
                     <fig-button variant="secondary"
@@ -728,6 +747,14 @@
                 </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>
@@ -771,6 +798,21 @@
                         <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">
+                            <label>Advanced</label>
+                            <fig-input-text placeholder="Advanced setting"></fig-input-text>
+                        </fig-field>
+                    </details>
                 </fig-content>
                 <footer>
                     <fig-button close-dialog>Close</fig-button>
@@ -3351,48 +3393,45 @@ button.addEventListener('click', () => {
             <p class="description">A disclosure widget for expandable/collapsible content.</p>
 
             <h3>Default (Closed)</h3>
-            <details style="font-size: 13px; color: var(--figma-color-text);">
-                <summary style="cursor: pointer; padding: 8px 0;">Click to expand</summary>
-                <p style="padding: 8px 0 8px 16px; margin: 0; color: var(--figma-color-text-secondary);">
+            <details>
+                <summary>Click to expand</summary>
+                <p>
                     This is the hidden content that appears when the details element is expanded.
                 </p>
             </details>
 
             <h3>Default Open</h3>
-            <details open
-                     style="font-size: 13px; color: var(--figma-color-text);">
+            <details open>
                 <summary style="cursor: pointer; padding: 8px 0;">Already expanded</summary>
-                <p style="padding: 8px 0 8px 16px; margin: 0; color: var(--figma-color-text-secondary);">
+                <p>
                     This content is visible by default because of the <code>open</code> attribute.
                 </p>
             </details>
 
             <h3>Multiple Sections</h3>
             <vstack style="gap: 0;">
-                <details
-                         style="font-size: 13px; color: var(--figma-color-text); border-bottom: 1px solid var(--figma-color-border);">
+                <details>
                     <summary style="cursor: pointer; padding: 8px 0;">Section One</summary>
-                    <p style="padding: 8px 0 8px 16px; margin: 0; color: var(--figma-color-text-secondary);">
+                    <p>
                         Content for section one.
                     </p>
                 </details>
-                <details
-                         style="font-size: 13px; color: var(--figma-color-text); border-bottom: 1px solid var(--figma-color-border);">
+                <details>
                     <summary style="cursor: pointer; padding: 8px 0;">Section Two</summary>
-                    <p style="padding: 8px 0 8px 16px; margin: 0; color: var(--figma-color-text-secondary);">
+                    <p>
                         Content for section two.
                     </p>
                 </details>
-                <details style="font-size: 13px; color: var(--figma-color-text);">
+                <details>
                     <summary style="cursor: pointer; padding: 8px 0;">Section Three</summary>
-                    <p style="padding: 8px 0 8px 16px; margin: 0; color: var(--figma-color-text-secondary);">
+                    <p>
                         Content for section three.
                     </p>
                 </details>
             </vstack>
 
             <h3>With Rich Content</h3>
-            <details style="font-size: 13px; color: var(--figma-color-text);">
+            <details>
                 <summary style="cursor: pointer; padding: 8px 0;">Advanced Settings</summary>
                 <vstack style="padding: 8px 0 8px 16px;">
                     <fig-field direction="horizontal"

package/package.json

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