@rogieking/figui3 1.2.7 → 1.2.9

package/example.html

@@ -23,14 +23,17 @@
         <h2>UI3 Components</h2>
     </fig-header>
     <fig-content>
-
-        <h2>Details</h2>
+        <fig-input-joystick text="true"></fig-input-joystick>
+        <fig-header>
+            <h2>Details</h2>
+        </fig-header>
         <details>
             <summary>Advanced settings</summary>
             <p>Some more content here</p>
         </details>
-
-        <h2>Avatar</h2>
+        <fig-header>
+            <h2>Avatar</h2>
+        </fig-header>
         <fig-field>
             <label>Default</label>
             <fig-avatar src="https://avatars.githubusercontent.com/u/12345678?v=4"
@@ -53,15 +56,18 @@
                         name="Rogie King"></fig-avatar>
         </fig-field>
 
-        <h2>Tabs</h2>
+        <fig-header>
+            <h2>Tabs</h2>
+        </fig-header>
         <fig-field>
             <fig-tabs>
                 <fig-tab selected>Tab #1</fig-tab>
                 <fig-tab>Tab #2</fig-tab>
             </fig-tabs>
         </fig-field>
-        <h2>Segmented control</h2>
-
+        <fig-header>
+            <h2>Segmented control</h2>
+        </fig-header>
         <fig-field>
             <fig-segmented-control>
                 <fig-segment selected>One</fig-segment>
@@ -69,7 +75,9 @@
                 <fig-segment>Three</fig-segment>
             </fig-segmented-control>
         </fig-field>
-        <h2>Image</h2>
+        <fig-header>
+            <h2>Image</h2>
+        </fig-header>
         <fig-field>
             <label>Default</label>
             <fig-image src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-image>
@@ -86,7 +94,9 @@
                        size="large"></fig-image>
         </fig-field>
         <br /><br />
-        <h2>Button</h2>
+        <fig-header>
+            <h2>Button</h2>
+        </fig-header>
         <fig-field>
             <label>Primary Button</label>
             <fig-button>Primary</fig-button>
@@ -127,8 +137,9 @@
                           fill="currentColor"></path>
                 </svg></fig-button>
         </fig-field>
-
-        <h2>Combo button</h2>
+        <fig-header>
+            <h2>Combo button</h2>
+        </fig-header>
         <fig-field>
             <label>Primary (compact dropdown</label>
             <fig-button-combo>
@@ -315,8 +326,9 @@
                 <fig-button>Save</fig-button>
             </footer>
         </fig-dialog>
-
-        <h2>Dropdown</h2>
+        <fig-header>
+            <h2>Dropdown</h2>
+        </fig-header>
         <fig-field>
             <label>Dropdown</label>
             <fig-dropdown>
@@ -392,7 +404,9 @@
                 <span slot="prepend">X</span>
             </fig-input-text>
         </fig-field>
-        <h2>Color input</h2>
+        <fig-header>
+            <h2>Color input</h2>
+        </fig-header>
         <fig-field>
             <label>Color swatch</label>
             <fig-input-color value="#FF000066"></fig-input-color>
@@ -408,11 +422,15 @@
                              alpha="true"
                              text="true"></fig-input-color>
         </fig-field>
-        <h2>Checkbox</h2>
+        <fig-header>
+            <h2>Checkbox</h2>
+        </fig-header>
         <fig-field>
             <fig-checkbox label="Checkbox"></fig-checkbox>
         </fig-field>
-        <h2>Radio</h2>
+        <fig-header>
+            <h2>Radio</h2>
+        </fig-header>
         <fig-field>
             <label>Radio buttons</label>
             <fig-radio label="Radio #1"
@@ -420,7 +438,9 @@
             <fig-radio label="Radio #2"
                        name="r1"></fig-radio>
         </fig-field>
-        <h2>Switch</h2>
+        <fig-header>
+            <h2>Switch</h2>
+        </fig-header>
         <fig-field>
             <label>Switches</label>
             <fig-switch on="true"
@@ -430,7 +450,9 @@
             <fig-switch disabled
                         label="Disabled"></fig-switch>
         </fig-field>
-        <h2>Chit</h2>
+        <fig-header>
+            <h2>Chit</h2>
+        </fig-header>
         <fig-field>
             <label>Chit</label>
             <hstack>
@@ -473,13 +495,17 @@
             </hstack>
         </fig-field>
 
-        <h2>Tooltip</h2>
+        <fig-header>
+            <h2>Tooltip</h2>
+        </fig-header>
         <p>Some paragraph text here with a
             <fig-tooltip text="Tooltip text">
                 <em>Tooltip</em>
             </fig-tooltip> for more information.
         </p>
-        <h2>Field</h2>
+        <fig-header>
+            <h2>Field</h2>
+        </fig-header>
         <fig-field direction="horizontal">
             <label>Horizontal</label>
             <fig-input-text value=""
@@ -490,7 +516,9 @@
             <fig-input-text value=""
                             placeholder="Field placeholder"></fig-input-text>
         </fig-field>
-        <h2>Slider</h2>
+        <fig-header>
+            <h2>Slider</h2>
+        </fig-header>
         <fig-field>
             <label>Default slider</label>
             <fig-slider default="25"
@@ -524,7 +552,7 @@
             <label>Stepper slider</label>
             <fig-slider type="stepper"
                         value="25"
-                        default="50"
+                        default="75"
                         step="25">
                 <datalist>
                     <option value="0"></option>
@@ -538,9 +566,8 @@
         <fig-field direction="horizontal">
             <label>Stepper slider (auto)</label>
             <fig-slider type="stepper"
-                        value="0"
-                        default="5"
-                        min="0"
+                        value="3"
+                        min="1"
                         max="10"
                         step="1"
                         text="true">
@@ -560,10 +587,14 @@
                 </datalist>
             </fig-slider>
         </fig-field>
-        <h2>Spinner</h2>
+        <fig-header>
+            <h2>Spinner</h2>
+        </fig-header>
         <fig-spinner></fig-spinner>
 
-        <h2>Misc.</h2>
+        <fig-header>
+            <h2>Misc.</h2>
+        </fig-header>
         <hstack>
             <fig-tooltip text="Tooltip"
                          delay="0">

package/fig.css

@@ -444,7 +444,7 @@
 @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 rgba(255, 255, 255, 0.1),
+    --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-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
     --figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
@@ -1224,7 +1224,7 @@ input[type="checkbox"].switch:after {
   height: calc(1rem - 2px);
   border-radius: 0.5rem;
   margin: 1px;
-  transform: translate(calc(-0.5rem - 1px));
+  transform: translate(calc(-0.5rem));
   transition: var(--input-transition);
   box-shadow: var(--handle-shadow);
 }
@@ -1247,6 +1247,9 @@ input[type="checkbox"].switch:checked:after {
 input[type="checkbox"].switch:disabled {
   background-color: var(--figma-color-bg-tertiary);
   cursor: not-allowed;
+  &:after {
+    background-color: var(--figma-color-bg);
+  }
 }
 
 input[type="checkbox"].switch:focus {
@@ -1494,18 +1497,6 @@ fig-slider {
       &::before {
         display: none;
       }
-      /* Default tick */
-      &::after {
-        content: "";
-        display: block;
-        width: var(--slider-tick-size);
-        height: var(--slider-tick-size);
-        border-radius: 100%;
-        background: var(--figma-color-icon);
-        position: absolute;
-        left: calc(var(--default) * 100% - var(--slider-tick-size) / 2);
-        top: calc(50% - var(--slider-tick-size) / 2);
-      }
     }
   }
 
@@ -1729,6 +1720,9 @@ fig-slider {
       font-size: 0;
       background: var(--figma-color-icon-tertiary);
       display: block;
+      &[default] {
+        background: var(--figma-color-icon);
+      }
 
       &:first-child:last-child {
         margin: 0 auto;
@@ -2280,3 +2274,87 @@ fig-segmented-control {
     transform: rotate(360deg);
   }
 }
+
+fig-input-joystick {
+  --size: 1.5rem;
+  display: inline-flex;
+  gap: var(--spacer-2);
+  .fig-input-joystick-plane-container {
+    display: flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    place-items: center;
+  }
+  .fig-input-joystick-plane {
+    display: inline-grid;
+    place-items: center;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+    flex-shrink: 0;
+    &:hover {
+      cursor: grab;
+      --size: 3rem;
+    }
+  }
+  .fig-input-joystick-plane > * {
+    grid-area: 1/1;
+  }
+  .fig-input-joystick-guides {
+    position: absolute;
+    width: var(--size);
+    height: var(--size);
+    border: 1px solid var(--figma-color-border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    background: var(--figma-color-bg-secondary);
+
+    &:before {
+      content: "";
+      position: absolute;
+      height: 0;
+      border-left: 1px solid var(--figma-color-border);
+      height: 100%;
+      top: 0;
+      left: calc(50% - 0.5px);
+      pointer-events: none;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      height: 0;
+      border-top: 1px solid var(--figma-color-border);
+      width: 100%;
+      top: calc(50% - 0.5px);
+      left: 0;
+      pointer-events: none;
+    }
+  }
+  .fig-input-joystick-plane:hover .fig-input-joystick-guides {
+    background: linear-gradient(
+        45deg,
+        transparent calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% + 0.5px),
+        transparent calc(50% + 0.5px)
+      ),
+      linear-gradient(
+        -45deg,
+        transparent calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% - 0.5px),
+        var(--figma-color-border) calc(50% + 0.5px),
+        transparent calc(50% + 0.5px)
+      ),
+      var(--figma-color-bg-secondary);
+  }
+  .fig-input-joystick-handle {
+    position: absolute;
+    z-index: 1;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--figma-color-icon-onbrand);
+    box-shadow: var(--handle-shadow);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/fig.js

@@ -673,7 +673,6 @@ class FigSlider extends HTMLElement {
   }
   #regenerateInnerHTML() {
     this.value = Number(this.getAttribute("value") || 0);
-    this.default = this.getAttribute("default") || null;
     this.type = this.getAttribute("type") || "range";
     this.text = this.getAttribute("text") || false;
     this.units = this.getAttribute("units") || "";
@@ -685,6 +684,7 @@ class FigSlider extends HTMLElement {
     this.max = Number(this.getAttribute("max") || defaults.max);
     this.step = Number(this.getAttribute("step") || defaults.step);
     this.color = this.getAttribute("color") || defaults?.color;
+    this.default = this.getAttribute("default") || this.min;
 
     if (this.color) {
       this.style.setProperty("--color", this.color);
@@ -758,6 +758,14 @@ class FigSlider extends HTMLElement {
         this.inputContainer.append(this.datalist);
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
+      if (this.datalist) {
+        let defaultOption = this.datalist.querySelector(
+          `option[value='${this.default}']`
+        );
+        if (defaultOption) {
+          defaultOption.setAttribute("default", "true");
+        }
+      }
       if (this.figInputText) {
         this.figInputText.removeEventListener("input", this.handleTextInput);
         this.figInputText.addEventListener(
@@ -843,15 +851,14 @@ class FigSlider extends HTMLElement {
     }
   }
   #calculateNormal(value) {
-    let min = Number(this.input.min);
-    let max = Number(this.input.max);
-    let val = value;
-    return (val - min) / (max - min);
+    let min = Number(this.min);
+    let max = Number(this.max);
+    return (Number(value) - min) / (max - min);
   }
   #syncProperties() {
     let complete = this.#calculateNormal(this.value);
-    let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--slider-complete", complete);
+    let defaultValue = this.#calculateNormal(this.default);
     this.style.setProperty("--default", defaultValue);
     this.style.setProperty("--unchanged", complete === defaultValue ? 1 : 0);
   }
@@ -885,6 +892,8 @@ class FigInputText extends HTMLElement {
     this.value = this.getAttribute("value") || "";
     this.type = this.getAttribute("type") || "text";
     this.placeholder = this.getAttribute("placeholder") || "";
+    this.name = this.getAttribute("name") || null;
+
     if (this.type === "number") {
       if (this.getAttribute("step")) {
         this.step = Number(this.getAttribute("step"));
@@ -903,6 +912,7 @@ class FigInputText extends HTMLElement {
 
     let html = `<input 
       type="${this.type}" 
+      ${this.name ? `name="${this.name}"` : ""}
       placeholder="${this.placeholder}"
       value="${
         this.type === "number" ? this.#transformNumber(this.value) : this.value
@@ -1031,6 +1041,7 @@ class FigInputText extends HTMLElement {
       "min",
       "max",
       "transform",
+      "name",
     ];
   }
 
@@ -1071,8 +1082,12 @@ class FigInputText extends HTMLElement {
             this.input.setAttribute(name, newValue);
           }
           break;
+        case "name":
+          this[name] = this.input[name] = newValue;
+          this.input.setAttribute("name", newValue);
+          break;
         default:
-          this[name] = this.input[name] = value;
+          this[name] = this.input[name] = newValue;
           break;
       }
     }
@@ -1696,3 +1711,171 @@ class FigImage extends HTMLElement {
   }
 }
 window.customElements.define("fig-image", FigImage);
+
+class FigInputJoystick extends HTMLElement {
+  constructor() {
+    super();
+
+    this.position = { x: 0.5, y: 0.5 };
+    this.value = [0.5, 0.5];
+    this.isDragging = false;
+    this.isShiftHeld = false;
+
+    // Initialize position
+    requestAnimationFrame(() => {
+      this.precision = this.getAttribute("precision") || 3;
+      this.precision = parseInt(this.precision);
+      this.transform = this.getAttribute("transform") || 1;
+      this.transform = Number(this.transform);
+      this.text = this.getAttribute("text") === "true";
+
+      this.render();
+
+      this.setupListeners();
+
+      this.cursor.style.left = `${this.position.x * 100}%`;
+      this.cursor.style.top = `${this.position.y * 100}%`;
+      if (this.text) {
+        this.xInput.value = this.position.x.toFixed(this.precision);
+        this.yInput.value = this.position.y.toFixed(this.precision);
+      }
+    });
+  }
+
+  render() {
+    this.innerHTML = `        
+          <div class="fig-input-joystick-plane-container">
+            <div class="fig-input-joystick-plane">
+              <div class="fig-input-joystick-guides"></div>
+              <div class="fig-input-joystick-handle"></div>
+            </div>
+          </div>
+          ${
+            this.text
+              ? `<fig-input-text 
+                  type="number"
+                  name="x"
+                  step="0.01"
+                  value="${this.position.x}"
+                  min="0"
+                  max="1">
+                  <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}"> 
+                  <span slot="prepend">Y</span>
+                </fig-input-text>`
+              : ""
+          }
+        `;
+  }
+
+  setupListeners() {
+    this.plane = this.querySelector(".fig-input-joystick-plane");
+    this.cursor = this.querySelector(".fig-input-joystick-handle");
+    if (this.text) {
+      this.xInput = this.querySelector("fig-input-text[name='x']");
+      this.yInput = this.querySelector("fig-input-text[name='y']");
+    }
+
+    this.plane.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    window.addEventListener("keydown", this.handleKeyDown.bind(this));
+    window.addEventListener("keyup", this.handleKeyUp.bind(this));
+
+    this.xInput.addEventListener("input", this.handleXInput.bind(this));
+    this.yInput.addEventListener("input", this.handleYInput.bind(this));
+  }
+
+  handleXInput(e) {
+    this.position.x = e.target.value;
+    this.#syncHandlePosition();
+  }
+
+  handleYInput(e) {
+    this.position.y = e.target.value;
+    this.#syncHandlePosition();
+  }
+
+  snapToGuide(value) {
+    if (!this.isShiftHeld) return value;
+    if (value < 0.1) return 0;
+    if (value > 0.9) return 1;
+    if (value > 0.4 && value < 0.6) return 0.5;
+    return value;
+  }
+
+  snapToDiagonal(x, y) {
+    if (!this.isShiftHeld) return { x, y };
+    const diff = Math.abs(x - y);
+    if (diff < 0.1) return { x: (x + y) / 2, y: (x + y) / 2 };
+    if (Math.abs(1 - x - y) < 0.1) return { x, y: 1 - x };
+    return { x, y };
+  }
+
+  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));
+
+    // Invert Y coordinate to match typical coordinate system
+    y = 1 - y;
+
+    x = this.snapToGuide(x);
+    y = this.snapToGuide(y);
+
+    const snapped = this.snapToDiagonal(x, y);
+    this.position = snapped;
+    this.value = [snapped.x, snapped.y];
+
+    this.cursor.style.left = `${snapped.x * 100}%`;
+    this.cursor.style.top = `${(1 - snapped.y) * 100}%`; // Invert Y for display
+    if (this.text) {
+      this.xInput.setAttribute("value", snapped.x.toFixed(3));
+      this.yInput.setAttribute("value", snapped.y.toFixed(3));
+    }
+
+    this.dispatchEvent(new CustomEvent("input", { detail: this.position }));
+  }
+
+  #syncHandlePosition() {
+    this.cursor.style.left = `${this.position.x * 100}%`;
+    this.cursor.style.top = `${(1 - this.position.y) * 100}%`;
+  }
+
+  handleMouseDown(e) {
+    this.isDragging = true;
+    this.updatePosition(e);
+
+    this.plane.style.cursor = "grabbing";
+
+    const handleMouseMove = (e) => {
+      if (this.isDragging) this.updatePosition(e);
+    };
+
+    const handleMouseUp = () => {
+      this.isDragging = false;
+      this.plane.style.cursor = "";
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      this.dispatchEvent(new CustomEvent("change", { detail: this.position }));
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  }
+
+  handleKeyDown(e) {
+    if (e.key === "Shift") this.isShiftHeld = true;
+  }
+
+  handleKeyUp(e) {
+    if (e.key === "Shift") this.isShiftHeld = false;
+  }
+}
+
+customElements.define("fig-input-joystick", FigInputJoystick);

package/package.json

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