@rogieking/figui3 1.7.9 → 1.8.1

package/components.css

@@ -1877,20 +1877,6 @@ fig-slider {
       position: relative;
       display: block;
       width: 100%;
-      box-shadow: none;
-      background: var(--figma-color-bg-tertiary);
-
-      /* Track */
-      &::before {
-        box-shadow: none;
-        background: var(--figma-color-text-tertiary);
-      }
-
-      input[type="range"] {
-        &::-webkit-slider-runnable-track {
-          box-shadow: none;
-        }
-      }
     }
     fig-input-text {
       height: calc(var(--slider-height) * 2);
@@ -1899,18 +1885,6 @@ fig-slider {
 
     &:hover,
     &:focus-within {
-      .fig-slider-input-container {
-        background: var(--figma-color-bg-secondary);
-        &::before {
-          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-          background: var(--figma-color-bg-brand);
-        }
-      }
-      input[type="range"] {
-        &::-webkit-slider-runnable-track {
-          box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-        }
-      }
       fig-input-text {
         height: auto;
       }

package/example.html

@@ -493,6 +493,7 @@
                 is="fig-dialog">
             <fig-header>
                 <h3>Dialog</h3>
+
                 <fig-button variant="ghost"
                             icon="true"
                             close-dialog>
@@ -511,6 +512,12 @@
                 </fig-button>
             </fig-header>
             <fig-content>
+                <fig-tooltip text="Close dialog">
+                    <fig-button variant="ghost"
+                                close-dialog>
+                        Close
+                    </fig-button>
+                </fig-tooltip>
                 <p>Some content here</p>
                 <fig-field direction="horizontal">
                     <label for="colorLevels">Color Levels</label>

package/fig.js

@@ -252,7 +252,9 @@ class FigTooltip extends HTMLElement {
     clearTimeout(this.#touchTimeout);
     if (this.action === "hover") {
       this.removeEventListener("touchstart", this.#handleTouchStart);
+      this.removeEventListener("touchmove", this.#handleTouchMove);
       this.removeEventListener("touchend", this.#handleTouchEnd);
+      this.removeEventListener("touchcancel", this.#handleTouchCancel);
     } else if (this.action === "click") {
       this.removeEventListener("touchstart", this.showDelayedPopup);
     }
@@ -290,11 +292,23 @@ class FigTooltip extends HTMLElement {
     }
     document.body.addEventListener("click", this.hidePopupOutsideClick);
   }
+  isTouchDevice() {
+    return (
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0
+    );
+  }
 
   setupEventListeners() {
     if (this.action === "hover") {
-      this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
-      this.addEventListener("pointerleave", this.hidePopup.bind(this));
+      if (!this.isTouchDevice()) {
+        this.addEventListener("pointerenter", this.showDelayedPopup.bind(this));
+        this.addEventListener(
+          "pointerleave",
+          this.#handlePointerLeave.bind(this)
+        );
+      }
       // Add mousedown listener instead of dragstart
       this.addEventListener("mousedown", this.#boundHideOnDragStart);
 
@@ -302,9 +316,15 @@ class FigTooltip extends HTMLElement {
       this.addEventListener("touchstart", this.#handleTouchStart.bind(this), {
         passive: true,
       });
+      this.addEventListener("touchmove", this.#handleTouchMove.bind(this), {
+        passive: true,
+      });
       this.addEventListener("touchend", this.#handleTouchEnd.bind(this), {
         passive: true,
       });
+      this.addEventListener("touchcancel", this.#handleTouchCancel.bind(this), {
+        passive: true,
+      });
     } else if (this.action === "click") {
       this.addEventListener("click", this.showDelayedPopup.bind(this));
       document.body.addEventListener(
@@ -390,23 +410,52 @@ class FigTooltip extends HTMLElement {
     }
   }
 
+  // Pointer event handlers
+  #handlePointerLeave(event) {
+    // Don't hide immediately if we're in a touch interaction
+    if (!this.#isTouching) {
+      this.hidePopup();
+    }
+  }
+
   // Touch event handlers for mobile support
   #handleTouchStart(event) {
     if (this.action === "hover") {
       this.#isTouching = true;
+      // Clear any existing touch timeout
+      clearTimeout(this.#touchTimeout);
       // Show popup on touch start for hover action
       this.showDelayedPopup();
     }
   }
 
+  #handleTouchMove(event) {
+    if (this.action === "hover" && this.#isTouching) {
+      // If user is scrolling/moving, cancel the tooltip after a delay
+      clearTimeout(this.#touchTimeout);
+      this.#touchTimeout = setTimeout(() => {
+        this.#isTouching = false;
+        this.hidePopup();
+      }, 150);
+    }
+  }
+
   #handleTouchEnd(event) {
     if (this.action === "hover" && this.#isTouching) {
-      this.#isTouching = false;
-      // Hide popup after a short delay to allow for taps
+      // Delay setting isTouching to false to prevent pointerleave from hiding immediately
       clearTimeout(this.#touchTimeout);
       this.#touchTimeout = setTimeout(() => {
+        this.#isTouching = false;
         this.hidePopup();
-      }, 100);
+      }, 300); // Increased delay for better mobile UX
+    }
+  }
+
+  #handleTouchCancel(event) {
+    if (this.action === "hover" && this.#isTouching) {
+      this.#isTouching = false;
+      clearTimeout(this.#touchTimeout);
+      this.hidePopup();
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.7.9",
+  "version": "1.8.1",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {