@rogieking/figui3 1.0.97 → 1.0.99

package/example.html

@@ -64,15 +64,66 @@
         <option selected>Fourhundred sixty two</option>
     </fig-dropdown>
     <br /><br />
-    <fig-slider min="0"
-                max="1"
-                transform="100"
-                variant="minimal"
-                step="0.01"
-                text="true"
-                style="width:300px;"
-                value="0.5">
-    </fig-slider>
+    <fig-field style="width:300px;">
+        <label>Range slider</label>
+        <fig-slider min="0"
+                    max="1"
+                    transform="100"
+                    variant="minimal"
+                    step="0.01"
+                    text="true"
+                    style="width:300px;"
+                    value="0.5">
+        </fig-slider>
+    </fig-field>
+    <fig-field style="width:300px;">
+        <label>Opacity slider</label>
+        <fig-slider type="opacity"
+                    variant="minimal"
+                    value="0.75"
+                    color="#ff0000"
+                    units="%"
+                    text="true"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Hue slider</label>
+        <fig-slider type="hue"
+                    variant="minimal"
+                    value="55"></fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Stepper slider</label>
+        <fig-slider type="stepper"
+                    variant="minimal"
+                    value="25"
+                    default="50"
+                    step="25">
+            <datalist id="markers">
+                <option value="0"></option>
+                <option value="25"></option>
+                <option value="50"></option>
+                <option value="75"></option>
+                <option value="100"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
+
+    <fig-field style="width:300px;">
+        <label>Delta slider</label>
+        <fig-slider type="delta"
+                    variant="minimal"
+                    value=".25"
+                    default="0"
+                    step="0.25"
+                    max="5"
+                    min="-5">
+            <datalist id="markers">
+                <option value="0"></option>
+            </datalist>
+        </fig-slider>
+    </fig-field>
     <br />
     <fig-input-text min="0"
                     max="1"

package/fig.css

@@ -1429,6 +1429,7 @@ details {
 /* Sliders */
 .fig-slider,
 fig-slider {
+  --slider-field-height: 1.5rem;
   --slider-height: 1rem;
   --slider-thumb-size: var(--slider-height);
   --slider-percent: calc(var(--slider-complete) * 100%);
@@ -1442,16 +1443,20 @@ fig-slider {
     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),
     0 0 0 1px var(--figma-color-border-selected);
+  --slider-transition: all 0.1s ease-in-out;
 
   display: inline-flex;
   align-items: center;
   position: relative;
+  height: var(--slider-field-height);
+  transition: var(--slider-transition);
 
   .fig-slider-input-container {
     height: var(--slider-height);
     position: relative;
     display: block;
     width: 100%;
+    transition: var(--slider-transition);
 
     /* Track */
     &::before {
@@ -1548,6 +1553,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:active::-webkit-slider-thumb {
       cursor: grabbing;
@@ -1561,6 +1567,7 @@ fig-slider {
     &::-webkit-slider-thumb {
       appearance: none;
       -webkit-appearance: none;
+      transition: var(--slider-transition);
       border-radius: 100%;
       height: var(--slider-thumb-size);
       width: var(--slider-thumb-size);
@@ -1594,6 +1601,7 @@ fig-slider {
     &::-webkit-slider-runnable-track {
       height: var(--slider-height);
       background-color: transparent;
+      transition: var(--slider-transition);
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
@@ -1618,6 +1626,7 @@ fig-slider {
     display: block;
     width: 100%;
     background-color: transparent;
+    transition: var(--slider-transition);
 
     &:focus {
       outline: none;
@@ -1640,6 +1649,7 @@ fig-slider {
       cursor: grab;
       cursor: -moz-grab;
       box-shadow: var(--slider-handle-shadow);
+      transition: var(--slider-transition);
     }
 
     &:disabled {
@@ -1665,6 +1675,7 @@ fig-slider {
       border-radius: calc(var(--slider-height) / 2);
       box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
       background: var(--figma-color-bg-secondary);
+      transition: var(--slider-transition);
     }
 
     &.hue::-moz-range-track {
@@ -1680,7 +1691,9 @@ fig-slider {
   datalist {
     position: absolute;
     inset: 0;
+    top: calc((var(--slider-field-height) - var(--slider-height))/2);
     display: flex;
+    transition: var(--slider-transition);
     background: transparent;
     align-items: center;
     margin: 0;
@@ -1709,13 +1722,12 @@ fig-slider {
       }
     }
   }
-  &[variant="minimal"]{
-    transition: all 0.2s ease-in-out;
-  }
+
   &[variant="minimal"] {
     --slider-height: 0.25rem;
     --slider-thumb-size: 0.5rem;
-    height: 1.5rem;
+    --slider-tick-size: calc(var(--slider-height) / 2);
+
     .fig-slider-input-container {
       height: var(--slider-height);
       position: relative;
@@ -1742,14 +1754,21 @@ fig-slider {
     &:focus-within {
       --slider-height: 1rem;
       --slider-thumb-size: 1rem;
+      --slider-tick-size: calc(var(--slider-height) / 4);
       .fig-slider-input-container {
-      &::before {
-          background: var(--figma-color-bg-brand);
+        &::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;
         }
-      }
-      fig-input-text {
-        height: auto;
-      }
     }
   }
 }
@@ -2169,6 +2188,7 @@ fig-field,
     flex: 0;
     padding: var(--spacer-1) 0;
     display: flex;
+    justify-content: space-between;
     min-height: calc(1rem + var(--spacer-1) * 2);
     align-items: center;
   }

package/fig.js

@@ -842,9 +842,18 @@ class FigSlider extends HTMLElement {
 window.customElements.define("fig-slider", FigSlider);
 
 class FigInputText extends HTMLElement {
+  #boundMouseMove;
+  #boundMouseUp;
+  #boundMouseDown;
+
   constructor() {
     super();
+    // Pre-bind the event handlers once
+    this.#boundMouseMove = this.#handleMouseMove.bind(this);
+    this.#boundMouseUp = this.#handleMouseUp.bind(this);
+    this.#boundMouseDown = this.#handleMouseDown.bind(this);
   }
+
   connectedCallback() {
     this.multiline = this.hasAttribute("multiline") || false;
     this.value = this.getAttribute("value") || "";
@@ -904,6 +913,7 @@ class FigInputText extends HTMLElement {
         if (this.getAttribute("step")) {
           this.input.setAttribute("step", this.#transformNumber(this.step));
         }
+        this.addEventListener("pointerdown", this.#boundMouseDown);
       }
       this.input.addEventListener("input", this.#handleInput.bind(this));
     });
@@ -912,15 +922,47 @@ class FigInputText extends HTMLElement {
     this.input.focus();
   }
   #transformNumber(value) {
-    return value * (this.transform || 1);
+    return Number(value) * (this.transform || 1);
   }
   #handleInput(e) {
     let value = e.target.value;
     if (this.type === "number") {
-      this.value = value / (this.transform || 1);
-    } else {
-      this.value = value;
+      if (this.min) {
+        value = Math.min(this.min, value);
+      }
+      if (this.max) {
+        value = Math.max(this.max, value);
+      }
+      value = value / (this.transform || 1);
     }
+    this.value = value;
+  }
+  #handleMouseMove(e) {
+    if (e.altKey) {
+      const step = (this.step || 1) * e.movementX;
+      const value = Number(this.input.value) + step;
+      this.setAttribute("value", value / this.transform);
+    }
+  }
+  #handleMouseDown(e) {
+    if (e.altKey) {
+      this.input.style.cursor =
+        this.style.cursor =
+        document.body.style.cursor =
+          "ew-resize";
+      // Use the pre-bound handlers
+      window.addEventListener("pointermove", this.#boundMouseMove);
+      window.addEventListener("pointerup", this.#boundMouseUp);
+    }
+  }
+  #handleMouseUp(e) {
+    this.input.style.cursor =
+      this.style.cursor =
+      document.body.style.cursor =
+        "";
+    // Remove the pre-bound handlers
+    window.removeEventListener("pointermove", this.#boundMouseMove);
+    window.removeEventListener("pointerup", this.#boundMouseUp);
   }
 
   static get observedAttributes() {
@@ -1461,7 +1503,7 @@ class FigChit extends HTMLElement {
     this.src = this.getAttribute("src") || "";
     this.value = this.getAttribute("value") || "";
     this.size = this.getAttribute("size") || "small";
-    this.disabled = this.getAttribute("disabled") === "true" ? true : false;
+    this.disabled = this.getAttribute("disabled") === "true";
     this.innerHTML = `<input type="color" value="${this.value}" />`;
     this.#updateSrc(this.src);
 

package/package.json

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