@rogieking/figui3 1.3.3 → 1.3.5

package/example.html

@@ -25,7 +25,7 @@
     <fig-content>
         <fig-input-angle text="true"
                          value="0"
-                         onInput="console.log(event.target.value)"></fig-input-angle>
+                         onInput="console.log(event.target.adjacent, event.target.opposite)"></fig-input-angle>
         <br /><br />
         <fig-input-joystick></fig-input-joystick>
         <br /><br />

package/fig.css

@@ -413,9 +413,9 @@
   --body-medium-strong-fontWeight: 550;
   --body-large-strong-fontWeight: 500;
   --body-medium-fontWeight: 450;
-  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+  --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);
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
 
   --popover-min-width: 15rem;
   --figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
@@ -1211,7 +1211,7 @@ input[type="checkbox"].switch {
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
-  background-color: var(--figma-color-bg-tertiary);
+  background-color: var(--figma-color-bg-secondary);
   transition: var(--input-transition);
   box-sizing: border-box;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
@@ -1245,7 +1245,7 @@ input[type="checkbox"].switch:checked:after {
 }
 
 input[type="checkbox"].switch:disabled {
-  background-color: var(--figma-color-bg-tertiary);
+  background-color: var(--figma-color-bg-secondary);
   cursor: not-allowed;
   &:after {
     background-color: var(--figma-color-bg);
@@ -1288,9 +1288,10 @@ input[type="checkbox"]:not(.switch) {
     }
   }
 }
-
-.figma-light input[type="checkbox"]:not(.switch):hover {
-  background-image: 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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+@media (prefers-color-scheme: light) {
+  input[type="checkbox"]:not(.switch):hover {
+    background-image: 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='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
+  }
 }
 
 label.checkbox:has([type="checkbox"]) {
@@ -1335,6 +1336,7 @@ input[type="radio"] {
     &::after {
       transform: scale(1);
       opacity: 0.25;
+      background-color: var(--figma-color-icon);
     }
   }
 
@@ -1343,7 +1345,7 @@ input[type="radio"] {
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 100%;
-    background-color: var(--figma-color-text-onbrand);
+    background-color: var(--figma-color-icon-onbrand);
     transform: scale(0);
     box-shadow: 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),
@@ -1533,7 +1535,7 @@ fig-slider {
         position: absolute;
         left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
         top: calc(50% - var(--slider-tick-size) / 2);
-        background: var(--figma-color-icon-tertiary);
+        background: var(--figma-color-icon-onbrand);
       }
     }
   }
@@ -1741,11 +1743,12 @@ fig-slider {
       display: block;
       width: 100%;
       box-shadow: none;
+      background: var(--figma-color-bg-tertiary);
 
       /* Track */
       &::before {
         box-shadow: none;
-        background: var(--figma-color-text-onbrand-tertiary);
+        background: var(--figma-color-text-tertiary);
       }
 
       input[type="range"] {
@@ -1764,6 +1767,7 @@ fig-slider {
       --slider-thumb-size: 1rem;
       --slider-tick-size: calc(var(--slider-height) / 4);
       .fig-slider-input-container {
+        background: var(--figma-color-bg-secondary);
         &::before {
           box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
           background: var(--figma-color-bg-brand);
@@ -2258,7 +2262,7 @@ fig-segmented-control {
     &[selected="true"] {
       background-color: var(--figma-color-bg);
       border-radius: calc(var(--radius-medium) - 1px);
-      box-shadow: var(--handle-shadow);
+      box-shadow: 0 0 0 1px var(--figma-color-border);
     }
   }
 }
@@ -2267,6 +2271,7 @@ fig-input-joystick {
   --size: 1.5rem;
   display: inline-flex;
   gap: var(--spacer-2);
+  user-select: none;
   .fig-input-joystick-plane-container {
     display: flex;
     width: 1.5rem;
@@ -2276,6 +2281,9 @@ fig-input-joystick {
     flex-grow: 0;
     align-items: center;
     justify-content: center;
+    &:focus {
+      outline: 0;
+    }
   }
   .fig-input-joystick-plane {
     display: inline-grid;
@@ -2297,7 +2305,7 @@ fig-input-joystick {
     position: absolute;
     width: var(--size);
     height: var(--size);
-    border: 1px solid var(--figma-color-border);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border);
     border-radius: var(--radius-medium);
     overflow: hidden;
     background: var(--figma-color-bg-secondary);
@@ -2307,8 +2315,8 @@ fig-input-joystick {
       position: absolute;
       height: 0;
       border-left: 1px solid var(--figma-color-border);
-      height: 100%;
-      top: 0;
+      height: calc(100% - 2px);
+      top: 1px;
       left: calc(50% - 0.5px);
       pointer-events: none;
     }
@@ -2317,9 +2325,9 @@ fig-input-joystick {
       position: absolute;
       height: 0;
       border-top: 1px solid var(--figma-color-border);
-      width: 100%;
+      width: calc(100% - 2px);
       top: calc(50% - 0.5px);
-      left: 0;
+      left: 1px;
       pointer-events: none;
     }
   }
@@ -2339,7 +2347,12 @@ fig-input-joystick {
         transparent calc(50% + 0.5px)
       ),
       var(--figma-color-bg-secondary);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
   }
+  .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
+  }
+
   .fig-input-joystick-handle {
     position: absolute;
     z-index: 1;
@@ -2356,6 +2369,7 @@ fig-input-angle {
   --size: 1.5rem;
   display: inline-flex;
   gap: var(--spacer-2);
+  user-select: none;
 
   .fig-input-angle-plane {
     display: inline-grid;
@@ -2367,10 +2381,10 @@ fig-input-angle {
     background-color: var(--figma-color-bg-secondary);
     border-radius: 100%;
     box-shadow: inset 0 0 0 1px var(--figma-color-border);
+    &:focus,
     &.dragging {
-      cursor: grab;
-      --size: 3rem;
-      z-index: 2;
+      outline: 0;
+      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
     }
   }
   .fig-input-angle-handle {

package/fig.js

@@ -1767,7 +1767,7 @@ class FigInputJoystick extends HTMLElement {
   }
   #getInnerHTML() {
     return `        
-          <div class="fig-input-joystick-plane-container">
+          <div class="fig-input-joystick-plane-container" tabindex="0">
             <div class="fig-input-joystick-plane">
               <div class="fig-input-joystick-guides"></div>
               <div class="fig-input-joystick-handle"></div>
@@ -1801,6 +1801,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.plane.addEventListener("mousedown", this.#handleMouseDown.bind(this));
     this.plane.addEventListener(
       "touchstart",
@@ -1938,6 +1940,7 @@ class FigInputJoystick extends HTMLElement {
 
     const handleTouchEnd = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);
       this.#emitChangeEvent();
@@ -1989,12 +1992,20 @@ customElements.define("fig-input-joystick", FigInputJoystick);
  * @attr {number} value - The current angle of the handle in degrees.
  * @attr {number} precision - The number of decimal places for the output.
  * @attr {boolean} text - Whether to display a text input for the angle value.
+ * @attr {number} adjacent - The adjacent value of the angle.
+ * @attr {number} opposite - The opposite value of the angle.
  */
 class FigInputAngle extends HTMLElement {
+  // Declare private fields first
+  #adjacent;
+  #opposite;
+
   constructor() {
     super();
 
     this.angle = 0; // Angle in degrees
+    this.#adjacent = 1;
+    this.#opposite = 0;
     this.isDragging = false;
     this.isShiftHeld = false;
     this.handle = null;
@@ -2031,7 +2042,7 @@ class FigInputAngle extends HTMLElement {
 
   #getInnerHTML() {
     return `
-        <div class="fig-input-angle-plane">
+        <div class="fig-input-angle-plane" tabindex="0">
           <div class="fig-input-angle-handle"></div>
         </div>
         ${
@@ -2083,11 +2094,18 @@ class FigInputAngle extends HTMLElement {
   #handleAngleInput(e) {
     e.stopPropagation();
     this.angle = Number(e.target.value);
+    this.#calculateAdjacentAndOpposite();
     this.#syncHandlePosition();
     this.#emitInputEvent();
     this.#emitChangeEvent();
   }
 
+  #calculateAdjacentAndOpposite() {
+    const radians = (this.angle * Math.PI) / 180;
+    this.#adjacent = Math.cos(radians);
+    this.#opposite = Math.sin(radians);
+  }
+
   #snapToIncrement(angle) {
     if (!this.isShiftHeld) return angle;
     const increment = 45;
@@ -2105,6 +2123,8 @@ class FigInputAngle extends HTMLElement {
     angle = this.#snapToIncrement(angle);
     this.angle = angle;
 
+    this.#calculateAdjacentAndOpposite();
+
     this.#syncHandlePosition();
     if (this.text && this.angleInput) {
       this.angleInput.setAttribute("value", this.angle.toFixed(this.precision));
@@ -2146,11 +2166,13 @@ class FigInputAngle extends HTMLElement {
     this.#updateAngle(e);
 
     const handleMouseMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updateAngle(e);
     };
 
     const handleMouseUp = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
       this.#emitChangeEvent();
@@ -2166,11 +2188,13 @@ class FigInputAngle extends HTMLElement {
     this.#updateAngle(e.touches[0]);
 
     const handleTouchMove = (e) => {
+      this.plane.classList.add("dragging");
       if (this.isDragging) this.#updateAngle(e.touches[0]);
     };
 
     const handleTouchEnd = () => {
       this.isDragging = false;
+      this.plane.classList.remove("dragging");
       window.removeEventListener("touchmove", handleTouchMove);
       window.removeEventListener("touchend", handleTouchEnd);
       this.#emitChangeEvent();
@@ -2196,12 +2220,21 @@ class FigInputAngle extends HTMLElement {
     return this.angle;
   }
 
+  get adjacent() {
+    return this.#adjacent;
+  }
+
+  get opposite() {
+    return this.#opposite;
+  }
+
   set value(value) {
     if (isNaN(value)) {
       console.error("Invalid value: must be a number.");
       return;
     }
     this.angle = value;
+    this.#calculateAdjacentAndOpposite();
     this.#syncHandlePosition();
   }
 

package/package.json

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