@rogieking/figui3 1.7.6 → 1.7.9

package/components.css

@@ -421,6 +421,7 @@
   --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.05),
     0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px 3px 8px 0px rgba(0, 0, 0, 0.05),
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+  --handle-color: #fff;
 
   --popover-min-width: 15rem;
   --figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
@@ -770,6 +771,17 @@ fig-button {
     color: var(--figma-color-text);
   }
 
+  /* Variant: Overlay (for on top of content) */
+  &[variant="overlay"] {
+    background-color: var(--figma-color-bg);
+    color: var(--figma-color-text);
+    box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
+
+    &:active {
+      background-color: var(--figma-color-bg-secondary);
+    }
+  }
+
   /* Icon only */
   &[icon] {
     width: var(--spacer-4);
@@ -1229,10 +1241,6 @@ fig-image {
   fig-chit {
     --size: var(--image-size) !important;
   }
-  fig-button {
-    opacity: 0;
-    pointer-events: none;
-  }
   &:not([src]):not([src=""]) fig-button,
   &:hover fig-button {
     opacity: 1;
@@ -1254,6 +1262,25 @@ fig-image {
       aspect-ratio: var(--aspect-ratio) !important;
     }
   }
+  > div {
+    display: flex;
+    gap: var(--spacer-2);
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:not([src]):not([src=""]) > div,
+  &:hover > div {
+    opacity: 1;
+    pointer-events: all;
+  }
+  fig-button[type="download"] {
+    display: none;
+  }
+  &[src]:not([src=""]) {
+    fig-button[type="download"] {
+      display: inline-flex;
+    }
+  }
 }
 
 /* Combo input */
@@ -1311,7 +1338,7 @@ input[type="checkbox"].switch {
 
 input[type="checkbox"].switch:after {
   content: "";
-  background-color: var(--figma-color-icon-onbrand);
+  background-color: var(--handle-color);
   width: calc(1rem - 2px);
   height: calc(1rem - 2px);
   border-radius: 0.5rem;
@@ -1553,15 +1580,14 @@ details {
 fig-slider {
   --slider-field-height: 1.5rem;
   --slider-height: 1rem;
-  --slider-handle-color: #fff;
   --slider-thumb-size: var(--slider-height);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
   --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
-      var(--slider-handle-color),
+      var(--handle-color),
     inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
-  --slider-handle-shadow-focus: inset 0 0 0 4px var(--slider-handle-color),
+  --slider-handle-shadow-focus: inset 0 0 0 4px var(--handle-color),
     inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
@@ -1842,7 +1868,7 @@ fig-slider {
     --handle-transition: none;
     --slider-transition: none;
     --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--slider-handle-color),
+        var(--handle-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-200);
 
@@ -2391,7 +2417,6 @@ fig-segmented-control {
 
 fig-input-joystick {
   --size: 1.5rem;
-  --joystick-handle-color: #fff;
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;
@@ -2481,7 +2506,7 @@ fig-input-joystick {
     z-index: 1;
     width: 0.5rem;
     height: 0.5rem;
-    background: var(--joystick-handle-color);
+    background: var(--handle-color);
     box-shadow: var(--handle-shadow);
     border-radius: 50%;
     transform: translate(-50%, -50%);
@@ -2490,7 +2515,6 @@ fig-input-joystick {
 
 fig-input-angle {
   --size: 1.5rem;
-  --handle-color: #fff;
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;

package/example.html

@@ -280,6 +280,7 @@
         <fig-field>
             <label>Large (with upload)</label>
             <fig-image upload="true"
+                       download="true"
                        label="Upload image"
                        size="large"></fig-image>
         </fig-field>

package/fig.js

@@ -220,6 +220,8 @@ customElements.define("fig-dropdown", FigDropdown);
 class FigTooltip extends HTMLElement {
   #boundHideOnChromeOpen;
   #boundHideOnDragStart;
+  #touchTimeout;
+  #isTouching = false;
   constructor() {
     super();
     this.action = this.getAttribute("action") || "hover";
@@ -245,6 +247,15 @@ class FigTooltip extends HTMLElement {
     );
     // Remove mousedown listener
     this.removeEventListener("mousedown", this.#boundHideOnDragStart);
+
+    // Clean up touch-related timers and listeners
+    clearTimeout(this.#touchTimeout);
+    if (this.action === "hover") {
+      this.removeEventListener("touchstart", this.#handleTouchStart);
+      this.removeEventListener("touchend", this.#handleTouchEnd);
+    } else if (this.action === "click") {
+      this.removeEventListener("touchstart", this.showDelayedPopup);
+    }
   }
 
   setup() {
@@ -286,12 +297,25 @@ class FigTooltip extends HTMLElement {
       this.addEventListener("pointerleave", this.hidePopup.bind(this));
       // Add mousedown listener instead of dragstart
       this.addEventListener("mousedown", this.#boundHideOnDragStart);
+
+      // Touch support for mobile hover simulation
+      this.addEventListener("touchstart", this.#handleTouchStart.bind(this), {
+        passive: true,
+      });
+      this.addEventListener("touchend", this.#handleTouchEnd.bind(this), {
+        passive: true,
+      });
     } else if (this.action === "click") {
       this.addEventListener("click", this.showDelayedPopup.bind(this));
       document.body.addEventListener(
         "click",
         this.hidePopupOutsideClick.bind(this)
       );
+
+      // Touch support for better mobile responsiveness
+      this.addEventListener("touchstart", this.showDelayedPopup.bind(this), {
+        passive: true,
+      });
     }
 
     // Add listener for chrome interactions
@@ -352,6 +376,7 @@ class FigTooltip extends HTMLElement {
 
   hidePopup() {
     clearTimeout(this.timeout);
+    clearTimeout(this.#touchTimeout);
     this.popup.style.opacity = "0";
     this.popup.style.display = "block";
     this.popup.style.pointerEvents = "none";
@@ -364,6 +389,27 @@ class FigTooltip extends HTMLElement {
       this.hidePopup();
     }
   }
+
+  // Touch event handlers for mobile support
+  #handleTouchStart(event) {
+    if (this.action === "hover") {
+      this.#isTouching = true;
+      // Show popup on touch start for hover action
+      this.showDelayedPopup();
+    }
+  }
+
+  #handleTouchEnd(event) {
+    if (this.action === "hover" && this.#isTouching) {
+      this.#isTouching = false;
+      // Hide popup after a short delay to allow for taps
+      clearTimeout(this.#touchTimeout);
+      this.#touchTimeout = setTimeout(() => {
+        this.hidePopup();
+      }, 100);
+    }
+  }
+
   static get observedAttributes() {
     return ["action", "delay", "open"];
   }
@@ -1836,22 +1882,29 @@ class FigImage extends HTMLElement {
   #getInnerHTML() {
     return `<fig-chit type="image" size="large" ${
       this.src ? `src="${this.src}"` : ""
-    } disabled="true"></fig-chit>${
+    } disabled="true"></fig-chit><div>${
       this.upload
-        ? `<fig-button variant="primary" type="upload">
+        ? `<fig-button variant="overlay" type="upload">
           ${this.label} 
           <input type="file" accept="image/*" />
         </fig-button>`
         : ""
-    }`;
+    } ${
+      this.download
+        ? `<fig-button variant="overlay" icon="true" type="download">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 13C17.7761 13 18 13.2239 18 13.5V16.5C18 17.3284 17.3284 18 16.5 18H7.5C6.67157 18 6 17.3284 6 16.5V13.5C6 13.2239 6.22386 13 6.5 13C6.77614 13 7 13.2239 7 13.5V16.5C7 16.7761 7.22386 17 7.5 17H16.5C16.7761 17 17 16.7761 17 16.5V13.5C17 13.2239 17.2239 13 17.5 13ZM12 6C12.2761 6 12.5 6.22386 12.5 6.5V12.293L14.6465 10.1465C14.8417 9.95122 15.1583 9.95122 15.3535 10.1465C15.5488 10.3417 15.5488 10.6583 15.3535 10.8535L12.3535 13.8535C12.2597 13.9473 12.1326 14 12 14C11.9006 14 11.8042 13.9704 11.7227 13.916L11.6465 13.8535L8.64648 10.8535C8.45122 10.6583 8.45122 10.3417 8.64648 10.1465C8.84175 9.95122 9.15825 9.95122 9.35352 10.1465L11.5 12.293V6.5C11.5 6.22386 11.7239 6 12 6Z" fill="black"/>
+</svg></fig-button>`
+        : ""
+    }</div>`;
   }
   connectedCallback() {
     this.src = this.getAttribute("src") || "";
     this.upload = this.getAttribute("upload") === "true";
+    this.download = this.getAttribute("download") === "true";
     this.label = this.getAttribute("label") || "Upload";
     this.size = this.getAttribute("size") || "small";
     this.innerHTML = this.#getInnerHTML();
-    this.#updateRefs();
   }
   disconnectedCallback() {
     this.fileInput.removeEventListener(
@@ -1864,16 +1917,38 @@ class FigImage extends HTMLElement {
     requestAnimationFrame(() => {
       this.chit = this.querySelector("fig-chit");
       if (this.upload) {
-        this.uploadButton = this.querySelector("fig-button");
+        this.uploadButton = this.querySelector("fig-button[type='upload']");
         this.fileInput = this.uploadButton?.querySelector("input");
-
+        this.fileInput.removeEventListener(
+          "change",
+          this.#handleFileInput.bind(this)
+        );
         this.fileInput.addEventListener(
           "change",
           this.#handleFileInput.bind(this)
         );
       }
+      if (this.download) {
+        console.log("binding download");
+        this.downloadButton = this.querySelector("fig-button[type='download']");
+        this.downloadButton.removeEventListener(
+          "click",
+          this.#handleDownload.bind(this)
+        );
+        this.downloadButton.addEventListener(
+          "click",
+          this.#handleDownload.bind(this)
+        );
+      }
     });
   }
+  #handleDownload() {
+    //force blob download
+    const link = document.createElement("a");
+    link.href = this.blob;
+    link.download = "image.png";
+    link.click();
+  }
   async #loadImage(src) {
     // Get blob from canvas
     await new Promise((resolve) => {
@@ -1967,8 +2042,9 @@ class FigImage extends HTMLElement {
         this.#loadImage(this.#src);
       }
     }
-    if (name === "upload") {
+    if (name === "upload" || name === "download") {
       this.upload = newValue.toLowerCase() === "true";
+      this.download = newValue.toLowerCase() === "true";
       this.innerHTML = this.#getInnerHTML();
       this.#updateRefs();
     }

package/package.json

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