@rogieking/figui3 2.0.2 → 2.0.3

package/components.css

@@ -290,8 +290,8 @@
     rgba(255, 0, 48, 1)
   );
 
-  /* Icons - light theme defaults */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  /* Icons - colorless shapes for use with mask-image */
+  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --icon-checkmark: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
   --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
 
@@ -309,11 +309,10 @@
   --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
 }
 
-/* Dark theme overrides for non-color values (icons, shadows, elevations) */
-/* These cannot use light-dark() as they are not color values */
+/* Dark theme overrides for non-color values (shadows, elevations) */
+/* These cannot use light-dark() as they are complex values */
 @media (prefers-color-scheme: dark) {
   :root {
-    --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
     --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
     --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
@@ -332,7 +331,6 @@
 
 /* Class-based dark theme override (for manual theme switching) */
 :root.figma-dark {
-  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
   --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
   --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
@@ -613,15 +611,6 @@ input[type="text"][list] {
   }
 }
 
-input[type="text"][list]:hover,
-input[type="text"][list]:active,
-input[type="text"][list]:focus,
-select {
-  background-image: var(--icon-chevron);
-  background-position: calc(100% - 0.25rem) center;
-  background-repeat: no-repeat;
-}
-
 input[type="text"][list],
 select {
   padding-right: 1.5rem;
@@ -640,6 +629,23 @@ fig-dropdown,
     display: block;
     width: 100%;
   }
+
+  /* Chevron icon using mask-image for light-dark support */
+  &::after {
+    content: "";
+    position: absolute;
+    right: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1rem;
+    height: 1rem;
+    mask-image: var(--icon-chevron);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: var(--figma-color-icon);
+    pointer-events: none;
+  }
 }
 
 /* Button */
@@ -1546,7 +1552,7 @@ fig-slider {
   --slider-tick-size: calc(var(--slider-height) / 4);
   --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
       var(--handle-color),
-    var(--handle-shadow);
+    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
   --slider-handle-shadow-focus: inset 0 0 0 4px var(--handle-color),
     inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--handle-shadow),
     0 0 0 1px var(--figma-color-border-selected);
@@ -2241,11 +2247,23 @@ fig-input-number {
   justify-content: center;
   user-select: all;
   gap: 0;
+  min-width: 0;
+  width: 8rem; /* Default width */
+  flex-shrink: 1;
+  flex-grow: 0;
   color: var(--figma-color-text);
 
+  /* When inside a flex container (like fig-field), grow to fill */
+  fig-field &,
+  [style*="flex"] &,
+  [style*="display: flex"] & {
+    width: auto;
+    flex: 1 1 auto;
+  }
+
   &[multiline] {
-    display: block;
     display: flex;
+    width: 100%; /* Multiline defaults to full width */
   }
   &[autoresize] input,
   &[autoresize] textarea {
@@ -2442,6 +2460,17 @@ fig-input-joystick {
   display: inline-flex;
   gap: var(--spacer-2);
   user-select: none;
+
+  /* When inside horizontal fig-field, grow to fill and let inputs expand */
+  fig-field[direction="horizontal"] & {
+    flex: 1;
+    min-width: 0;
+
+    fig-input-number {
+      flex: 1;
+      width: auto;
+    }
+  }
   .fig-input-joystick-plane-container {
     display: flex;
     width: 1.5rem;
@@ -2541,6 +2570,17 @@ fig-input-angle {
   gap: var(--spacer-2);
   user-select: none;
 
+  /* When inside horizontal fig-field, grow to fill and let inputs expand */
+  fig-field[direction="horizontal"] & {
+    flex: 1;
+    min-width: 0;
+
+    fig-input-number {
+      flex: 1;
+      width: auto;
+    }
+  }
+
   .fig-input-angle-plane {
     display: inline-grid;
     place-items: center;

package/example.html

@@ -768,22 +768,6 @@
                 </optgroup>
             </fig-dropdown>
 
-            <h3>Variants</h3>
-            <div class="example-row">
-                <label>Default</label>
-                <fig-dropdown>
-                    <option>Default Style</option>
-                    <option>Option Two</option>
-                </fig-dropdown>
-            </div>
-            <div class="example-row">
-                <label>Neue</label>
-                <fig-dropdown variant="neue">
-                    <option>Neue Style</option>
-                    <option>Option Two</option>
-                </fig-dropdown>
-            </div>
-
             <h3>Full Width</h3>
             <fig-dropdown full>
                 <option>Full Width Dropdown</option>
@@ -811,29 +795,65 @@
                  style="margin-top: 24px;">
                 <label>Horizontal</label>
             </div>
-            <fig-field direction="horizontal">
+            <fig-field direction="horizontal" style="width: 240px;">
                 <label>Field Label</label>
                 <fig-input-text placeholder="Enter text"></fig-input-text>
             </fig-field>
 
-            <h3>With Different Inputs</h3>
-            <fig-field direction="horizontal">
+            <h3>Horizontal Fields with Different Inputs</h3>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Text Input</label>
+                <fig-input-text placeholder="Enter text"></fig-input-text>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Number Input</label>
+                <fig-input-number value="100"
+                                  units="px"></fig-input-number>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
                 <label>Dropdown</label>
                 <fig-dropdown>
                     <option>Option One</option>
                     <option>Option Two</option>
+                    <option>Option Three</option>
                 </fig-dropdown>
             </fig-field>
-            <fig-field direction="horizontal">
+            <fig-field direction="horizontal" style="width: 240px;">
                 <label>Slider</label>
                 <fig-slider value="50"
                             text="true"></fig-slider>
             </fig-field>
-            <fig-field direction="horizontal">
+            <fig-field direction="horizontal" style="width: 240px;">
                 <label>Color</label>
                 <fig-input-color value="#0D99FF"
                                  text="true"></fig-input-color>
             </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Angle</label>
+                <fig-input-angle value="45"
+                                 text="true"></fig-input-angle>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Joystick</label>
+                <fig-input-joystick text="true"
+                                    value="50,50"></fig-input-joystick>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Switch</label>
+                <fig-switch></fig-switch>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Checkbox</label>
+                <fig-checkbox></fig-checkbox>
+            </fig-field>
+            <fig-field direction="horizontal" style="width: 240px;">
+                <label>Segmented</label>
+                <fig-segmented-control>
+                    <fig-segment value="left">Left</fig-segment>
+                    <fig-segment value="center">Center</fig-segment>
+                    <fig-segment value="right">Right</fig-segment>
+                </fig-segmented-control>
+            </fig-field>
         </section>
         <hr>
 
@@ -978,16 +998,34 @@
             <h2>Input Joystick</h2>
             <p class="description">A 2D joystick input for X/Y coordinate values.</p>
 
-            <h3>Default</h3>
-            <fig-input-joystick></fig-input-joystick>
+            <h3>Default (centered)</h3>
+            <fig-input-joystick value="50,50"></fig-input-joystick>
 
             <h3>With Text Display</h3>
             <fig-input-joystick text="true"
                                 value="0,0"></fig-input-joystick>
 
-            <h3>With Initial Value</h3>
+            <h3>With Initial Value (25%, 75%)</h3>
             <fig-input-joystick text="true"
-                                value="0.5,0.5"></fig-input-joystick>
+                                value="25,75"></fig-input-joystick>
+
+            <h3>Screen Coordinates (default: 0,0 = top-left)</h3>
+            <fig-input-joystick text="true"
+                                coordinates="screen"
+                                value="0,0"></fig-input-joystick>
+
+            <h3>Math Coordinates (0,0 = bottom-left)</h3>
+            <fig-input-joystick text="true"
+                                coordinates="math"
+                                value="0,0"></fig-input-joystick>
+
+            <h3>With Field Label</h3>
+            <fig-field direction="horizontal"
+                       style="width: 240px;">
+                <label>Origin</label>
+                <fig-input-joystick text="true"
+                                    value="50,50"></fig-input-joystick>
+            </fig-field>
         </section>
         <hr>
 

package/fig.js

@@ -2635,10 +2635,15 @@ class FigComboInput extends HTMLElement {
     }
     if (name === "placeholder") {
       this.placeholder = newValue;
+      if (this.input) {
+        this.input.setAttribute("placeholder", newValue);
+      }
     }
     if (name === "value") {
       this.value = newValue;
-      this.input.setAttribute("value", newValue);
+      if (this.input) {
+        this.input.setAttribute("value", newValue);
+      }
     }
   }
 }
@@ -2918,15 +2923,20 @@ class FigInputJoystick extends HTMLElement {
   constructor() {
     super();
 
-    this.position = { x: 0.5, y: 0.5 };
-    this.value = [0.5, 0.5];
+    this.position = { x: 0.5, y: 0.5 }; // Internal position (0-1)
     this.isDragging = false;
     this.isShiftHeld = false;
     this.plane = null;
     this.cursor = null;
     this.xInput = null;
     this.yInput = null;
+    this.coordinates = "screen"; // "screen" (0,0 top-left) or "math" (0,0 bottom-left)
+    this.#initialized = false;
+  }
+
+  #initialized = false;
 
+  connectedCallback() {
     // Initialize position
     requestAnimationFrame(() => {
       this.precision = this.getAttribute("precision") || 3;
@@ -2934,24 +2944,19 @@ class FigInputJoystick extends HTMLElement {
       this.transform = this.getAttribute("transform") || 1;
       this.transform = Number(this.transform);
       this.text = this.getAttribute("text") === "true";
+      this.coordinates = this.getAttribute("coordinates") || "screen";
 
       this.#render();
-
       this.#setupListeners();
-
       this.#syncHandlePosition();
-      if (this.text && this.xInput && this.yInput) {
-        this.xInput.setAttribute(
-          "value",
-          this.position.x.toFixed(this.precision)
-        );
-        this.yInput.setAttribute(
-          "value",
-          this.position.y.toFixed(this.precision)
-        );
-      }
+      this.#initialized = true;
     });
   }
+
+  // Convert Y for display (CSS uses top-down, math uses bottom-up)
+  #displayY(y) {
+    return this.coordinates === "math" ? 1 - y : y;
+  }
   disconnectedCallback() {
     this.#cleanupListeners();
   }
@@ -2969,24 +2974,24 @@ class FigInputJoystick extends HTMLElement {
           </div>
           ${
             this.text
-              ? `<fig-input-text 
-                  type="number"
+              ? `<fig-input-number
                   name="x"
-                  step="0.01"
-                  value="${this.position.x}"
+                  step="1"
+                  value="${this.position.x * 100}"
                   min="0"
-                  max="1">
+                  max="100"
+                  units="%">
                   <span slot="prepend">X</span>
-                </fig-input-text>
-                <fig-input-text 
-                  type="number" 
-                  name="y" 
-                  step="0.01" 
-                  min="0" 
-                  max="1"
-                  value="${this.position.y}"> 
+                </fig-input-number>
+                <fig-input-number
+                  name="y"
+                  step="1"
+                  min="0"
+                  max="100"
+                  value="${this.position.y * 100}"
+                  units="%">
                   <span slot="prepend">Y</span>
-                </fig-input-text>`
+                </fig-input-number>`
               : ""
           }
         `;
@@ -2995,8 +3000,8 @@ class FigInputJoystick extends HTMLElement {
   #setupListeners() {
     this.plane = this.querySelector(".fig-input-joystick-plane");
     this.cursor = this.querySelector(".fig-input-joystick-handle");
-    this.xInput = this.querySelector("fig-input-text[name='x']");
-    this.yInput = this.querySelector("fig-input-text[name='y']");
+    this.xInput = this.querySelector("fig-input-number[name='x']");
+    this.yInput = this.querySelector("fig-input-number[name='y']");
     this.plane.addEventListener("mousedown", this.#handleMouseDown.bind(this));
     this.plane.addEventListener(
       "touchstart",
@@ -3011,7 +3016,10 @@ class FigInputJoystick extends HTMLElement {
   }
 
   #cleanupListeners() {
-    this.plane.removeEventListener("mousedown", this.#handleMouseDown);
+    if (this.plane) {
+      this.plane.removeEventListener("mousedown", this.#handleMouseDown);
+      this.plane.removeEventListener("touchstart", this.#handleTouchStart);
+    }
     window.removeEventListener("keydown", this.#handleKeyDown);
     window.removeEventListener("keyup", this.#handleKeyUp);
     if (this.text && this.xInput && this.yInput) {
@@ -3022,7 +3030,7 @@ class FigInputJoystick extends HTMLElement {
 
   #handleXInput(e) {
     e.stopPropagation();
-    this.position.x = Number(e.target.value);
+    this.position.x = Number(e.target.value) / 100; // Convert from percentage to decimal
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
@@ -3030,7 +3038,7 @@ class FigInputJoystick extends HTMLElement {
 
   #handleYInput(e) {
     e.stopPropagation();
-    this.position.y = Number(e.target.value);
+    this.position.y = Number(e.target.value) / 100; // Convert from percentage to decimal
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
@@ -3055,7 +3063,13 @@ class FigInputJoystick extends HTMLElement {
   #updatePosition(e) {
     const rect = this.plane.getBoundingClientRect();
     let x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    let y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    let screenY = Math.max(
+      0,
+      Math.min(1, (e.clientY - rect.top) / rect.height)
+    );
+
+    // Convert screen Y to internal Y (flip for math coordinates)
+    let y = this.coordinates === "math" ? 1 - screenY : screenY;
 
     x = this.#snapToGuide(x);
     y = this.#snapToGuide(y);
@@ -3063,11 +3077,12 @@ class FigInputJoystick extends HTMLElement {
     const snapped = this.#snapToDiagonal(x, y);
     this.position = snapped;
 
+    const displayY = this.#displayY(snapped.y);
     this.cursor.style.left = `${snapped.x * 100}%`;
-    this.cursor.style.top = `${snapped.y * 100}%`; // Invert Y for display
+    this.cursor.style.top = `${displayY * 100}%`;
     if (this.text && this.xInput && this.yInput) {
-      this.xInput.setAttribute("value", snapped.x.toFixed(3));
-      this.yInput.setAttribute("value", snapped.y.toFixed(3));
+      this.xInput.setAttribute("value", Math.round(snapped.x * 100));
+      this.yInput.setAttribute("value", Math.round(snapped.y * 100));
     }
 
     this.#emitInputEvent();
@@ -3092,9 +3107,15 @@ class FigInputJoystick extends HTMLElement {
   }
 
   #syncHandlePosition() {
+    const displayY = this.#displayY(this.position.y);
     if (this.cursor) {
       this.cursor.style.left = `${this.position.x * 100}%`;
-      this.cursor.style.top = `${this.position.y * 100}%`;
+      this.cursor.style.top = `${displayY * 100}%`;
+    }
+    // Also sync text inputs if they exist (convert to percentage 0-100)
+    if (this.text && this.xInput && this.yInput) {
+      this.xInput.setAttribute("value", Math.round(this.position.x * 100));
+      this.yInput.setAttribute("value", Math.round(this.position.y * 100));
     }
   }
 
@@ -3153,15 +3174,28 @@ class FigInputJoystick extends HTMLElement {
     if (e.key === "Shift") this.isShiftHeld = false;
   }
   static get observedAttributes() {
-    return ["value", "precision", "transform", "text"];
+    return ["value", "precision", "transform", "text", "coordinates"];
   }
   get value() {
-    return [this.position.x, this.position.y];
+    // Return as percentage values (0-100)
+    return [
+      Math.round(this.position.x * 100),
+      Math.round(this.position.y * 100),
+    ];
   }
   set value(value) {
-    let v = value.toString().split(",").map(Number);
-    this.position = { x: v[0], y: v[1] };
-    this.#syncHandlePosition();
+    // Parse value, strip % symbols if present, convert from 0-100 to 0-1
+    const v = value
+      .toString()
+      .split(",")
+      .map((s) => {
+        const num = parseFloat(s.replace(/%/g, "").trim());
+        return isNaN(num) ? 0.5 : num / 100; // Convert from percentage to decimal, default to 0.5 if invalid
+      });
+    this.position = { x: v[0] ?? 0.5, y: v[1] ?? 0.5 };
+    if (this.#initialized) {
+      this.#syncHandlePosition();
+    }
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "value") {
@@ -3177,6 +3211,10 @@ class FigInputJoystick extends HTMLElement {
       this.text = newValue.toLowerCase() === "true";
       this.#render();
     }
+    if (name === "coordinates") {
+      this.coordinates = newValue || "screen";
+      this.#syncHandlePosition();
+    }
   }
 }
 

package/package.json

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