@rogieking/figui3 6.37.1 → 6.39.0

package/fig-lab.css

@@ -1293,6 +1293,13 @@ propskit-slider {
         flex: 0 0 auto;
         text-align: right;
         color: var(--field-text-color);
+        cursor: default;
+        touch-action: none;
+
+        &:focus {
+          cursor: text;
+          touch-action: auto;
+        }
       }
     }
   }
@@ -1330,6 +1337,22 @@ propskit-slider {
   }
 }
 
+:is(
+  propskit-switch,
+  propskit-color,
+  propskit-gradient,
+  propskit-select,
+  propskit-text,
+  propskit-number,
+  propskit-slider
+) fig-field:not([direction="vertical"]) > label {
+  display: block;
+  max-width: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Canvas Control */
 body {
   --fig-lab-cursor: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_20065_231516)"><g filter="url(%23filter0_d_20065_231516)"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z" fill="white"/></g><path fill-rule="evenodd" clip-rule="evenodd" d="M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z" fill="black"/></g><defs><filter id="filter0_d_20065_231516" x="-0.5" y="0.5" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1.5"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_20065_231516"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_20065_231516" result="shape"/></filter><clipPath id="clip0_20065_231516"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>') 3 3, default;

package/fig-lab.js

@@ -2299,11 +2299,20 @@ class PropskitSlider extends HTMLElement {
   #elasticRangeRect = null;
   #elasticHostWidth = 0;
   #elasticPointerId = null;
+  #numberPointerId = null;
+  #numberPointerStartX = 0;
+  #numberPointerStartY = 0;
+  #isNumberScrubbing = false;
+  #suppressNumberClick = false;
+  #numberClickResetTimer = 0;
   #boundHandleSliderInput = null;
   #boundHandleSliderChange = null;
   #boundHandleElasticPointerDown = this.#handleElasticPointerDown.bind(this);
   #boundHandleElasticPointerMove = this.#handleElasticPointerMove.bind(this);
   #boundHandleElasticPointerEnd = this.#handleElasticPointerEnd.bind(this);
+  #boundHandleNumberPointerDown = this.#handleNumberPointerDown.bind(this);
+  #boundHandleNumberPointerMove = this.#handleNumberPointerMove.bind(this);
+  #boundHandleNumberPointerEnd = this.#handleNumberPointerEnd.bind(this);
   #boundHandleRangeDoubleClick = this.#handleRangeDoubleClick.bind(this);
   #boundHandleContextMenu = this.#handleContextMenu.bind(this);
   #boundHandleContextMenuChange = this.#handleContextMenuChange.bind(this);
@@ -2343,6 +2352,12 @@ class PropskitSlider extends HTMLElement {
       capture: true,
       passive: true,
     });
+    this.removeEventListener("pointerdown", this.#boundHandleNumberPointerDown, {
+      capture: true,
+    });
+    this.addEventListener("pointerdown", this.#boundHandleNumberPointerDown, {
+      capture: true,
+    });
     this.removeEventListener("contextmenu", this.#boundHandleContextMenu);
     this.addEventListener("contextmenu", this.#boundHandleContextMenu);
     this.removeEventListener("click", this.#boundHandleClick, true);
@@ -2410,6 +2425,9 @@ class PropskitSlider extends HTMLElement {
       this.#focusSyncFrame = 0;
     }
     this.#clearPendingClick();
+    this.#stopNumberTracking();
+    clearTimeout(this.#numberClickResetTimer);
+    this.#numberClickResetTimer = 0;
     this.#stopElasticTracking();
     this.#resetElasticPull();
     this.#unbindRangeInput();
@@ -2417,6 +2435,9 @@ class PropskitSlider extends HTMLElement {
     this.removeEventListener("pointerdown", this.#boundHandleElasticPointerDown, {
       capture: true,
     });
+    this.removeEventListener("pointerdown", this.#boundHandleNumberPointerDown, {
+      capture: true,
+    });
     this.removeEventListener("contextmenu", this.#boundHandleContextMenu);
     this.removeEventListener("click", this.#boundHandleClick, true);
     this.#contextMenu?.removeEventListener("change", this.#boundHandleContextMenuChange);
@@ -2652,6 +2673,14 @@ class PropskitSlider extends HTMLElement {
       event.target instanceof Element &&
       event.target.closest("fig-input-number, fig-menu")
     ) {
+      if (
+        this.#suppressNumberClick &&
+        event.target.closest("fig-input-number")
+      ) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.#suppressNumberClick = false;
+      }
       return;
     }
     this.#queueRangeFocus();
@@ -2690,6 +2719,89 @@ class PropskitSlider extends HTMLElement {
     this.#resetToDefault();
   }
 
+  #handleNumberPointerDown(event) {
+    if (
+      event.button !== 0 ||
+      event.altKey ||
+      figLabBooleanAttribute(this, "disabled") ||
+      !(event.target instanceof Element)
+    ) {
+      return;
+    }
+    const input = event.target.closest("fig-input-number input");
+    if (!input || input === document.activeElement) return;
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.#stopNumberTracking();
+    this.#numberPointerId = event.pointerId;
+    this.#numberPointerStartX = event.clientX;
+    this.#numberPointerStartY = event.clientY;
+    this.#isNumberScrubbing = false;
+    window.addEventListener("pointermove", this.#boundHandleNumberPointerMove);
+    window.addEventListener("pointerup", this.#boundHandleNumberPointerEnd, {
+      once: true,
+    });
+    window.addEventListener("pointercancel", this.#boundHandleNumberPointerEnd, {
+      once: true,
+    });
+    window.addEventListener("blur", this.#boundHandleNumberPointerEnd, {
+      once: true,
+    });
+  }
+
+  #handleNumberPointerMove(event) {
+    if (event.pointerId !== this.#numberPointerId) return;
+    if (event.buttons === 0) {
+      this.#handleNumberPointerEnd(event);
+      return;
+    }
+    if (!this.#isNumberScrubbing) {
+      const distance = Math.hypot(
+        event.clientX - this.#numberPointerStartX,
+        event.clientY - this.#numberPointerStartY,
+      );
+      if (distance < 4) return;
+      this.#isNumberScrubbing = true;
+      this.setAttribute("data-number-scrubbing", "");
+    }
+    this.#setSliderValue(this.#valueFromPointer(event), "input");
+  }
+
+  #handleNumberPointerEnd(event) {
+    if (
+      event?.pointerId !== undefined &&
+      this.#numberPointerId !== null &&
+      event.pointerId !== this.#numberPointerId
+    ) {
+      return;
+    }
+    const wasScrubbing = this.#isNumberScrubbing;
+    this.#stopNumberTracking();
+    if (wasScrubbing) {
+      this.#setSliderValue(this.#slider?.value, "change");
+      this.#suppressNumberClick = true;
+      clearTimeout(this.#numberClickResetTimer);
+      this.#numberClickResetTimer = window.setTimeout(() => {
+        this.#suppressNumberClick = false;
+        this.#numberClickResetTimer = 0;
+      }, 0);
+      this.#queueRangeFocus();
+      return;
+    }
+    this.#slider?.querySelector("fig-input-number input")?.focus();
+  }
+
+  #stopNumberTracking() {
+    window.removeEventListener("pointermove", this.#boundHandleNumberPointerMove);
+    window.removeEventListener("pointerup", this.#boundHandleNumberPointerEnd);
+    window.removeEventListener("pointercancel", this.#boundHandleNumberPointerEnd);
+    window.removeEventListener("blur", this.#boundHandleNumberPointerEnd);
+    this.#numberPointerId = null;
+    this.#isNumberScrubbing = false;
+    this.removeAttribute("data-number-scrubbing");
+  }
+
   #handleElasticPointerDown(event) {
     if (event.button !== 0 || figLabBooleanAttribute(this, "disabled")) return;
     if (this.getAttribute("elastic") === "false") return;

package/fig.js

@@ -6659,6 +6659,8 @@ class FigSlider extends HTMLElement {
 
   set value(value) {
     const rawValue = value === null || value === undefined ? "" : String(value);
+    this.#showEmptyTextValue =
+      this.type !== "range" && rawValue.trim() === "";
     const hasParsedBounds = this.min !== undefined || this.max !== undefined;
     const normalized = hasParsedBounds
       ? String(this.#normalizeSliderValue(rawValue))
@@ -7004,18 +7006,8 @@ class FigSlider extends HTMLElement {
           break;
         case "value":
           if (this.#isInteracting) break;
-          this.#showEmptyTextValue =
-            newValue === null ||
-            (typeof newValue === "string" && newValue.trim() === "");
-          this.value = this.#normalizeSliderValue(newValue);
-          this.input.value = String(this.value);
+          this.value = newValue;
           this.#syncValue();
-          if (this.figInputNumber) {
-            this.figInputNumber.setAttribute(
-              "value",
-              this.#showEmptyTextValue ? "" : this.value,
-            );
-          }
           break;
         case "transform":
           this.transform = Number(newValue) || 1;

package/package.json

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