@rogieking/figui3 2.38.3 → 3.0.0

package/README.md

@@ -46,14 +46,14 @@ import "@rogieking/figui3/fig.js";
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/@rogieking/figui3@latest/fig.css" />
-<script src="https://unpkg.com/@rogieking/figui3@latest/fig.js"></script>
+<script type="module" src="https://unpkg.com/@rogieking/figui3@latest/fig.js"></script>
 ```
 
 Or via esm.sh:
 
 ```html
 <link rel="stylesheet" href="https://esm.sh/@rogieking/figui3@latest/fig.css" />
-<script src="https://esm.sh/@rogieking/figui3@latest/fig.js"></script>
+<script type="module" src="https://esm.sh/@rogieking/figui3@latest/fig.js"></script>
 ```
 
 ### Development
@@ -665,24 +665,25 @@ An image display or upload component.
 
 ---
 
-### Input Joystick (`<fig-input-joystick>`)
+### Joystick (`<fig-joystick>`)
 
 A 2D position input control.
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `value` | string | — | Position: `"x,y"` (0-1 range) |
+| `value` | string | `"50% 50%"` | Position as percentages (for example `"50% 50%"` or `"25% 80%"`) |
 | `precision` | number | — | Decimal places |
 | `transform` | number | — | Output scaling |
-| `text` | boolean | `false` | Show X/Y inputs |
+| `fields` | boolean | `false` | Show X/Y inputs |
 | `coordinates` | string | `"screen"` | Coordinate system: `"screen"` (0,0 top-left) or `"math"` (0,0 bottom-left) |
+| `aspect-ratio` | string | `"1 / 1"` | Plane container ratio (for example `16 / 9`) |
 
 ```html
-<fig-input-joystick value="0.5,0.5"></fig-input-joystick>
-<fig-input-joystick value="0.5,0.5" text="true" precision="2"></fig-input-joystick>
+<fig-joystick value="50% 50%"></fig-joystick>
+<fig-joystick value="50% 50%" fields="true" precision="2"></fig-joystick>
 
 <!-- Math coordinates (Y-axis inverted: 0,0 at bottom-left) -->
-<fig-input-joystick value="0.5,0.5" coordinates="math" text="true"></fig-input-joystick>
+<fig-joystick value="50% 50%" coordinates="math" fields="true"></fig-joystick>
 ```
 
 ---
@@ -892,6 +893,8 @@ function ColorPicker({ value, onChange }) {
 ```
 
 > **Note:** Avoid setting the `value` prop directly on web components in JSX during re-renders, as `attributeChangedCallback` may trigger events that cause infinite loops. Use refs to control updates.
+>
+> **SSR note (Next.js/Remix/Astro):** import `@rogieking/figui3/fig.js` only on the client (for example in a client-only entry/module). This keeps server rendering safe while still allowing FigUI3 to auto-load its WebKit/iOS customized built-in polyfill when needed.
 
 ### Vue
 

package/components.css

@@ -1791,7 +1791,8 @@ fig-origin-grid {
 
     &.overflow-right {
       --origin-overflow-nudge-x: calc(
-        var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale) * -1
+        var(--origin-overflow-nudge-base) *
+          var(--origin-overflow-nudge-x-scale) * -1
       );
     }
 
@@ -1803,7 +1804,8 @@ fig-origin-grid {
 
     &.overflow-down {
       --origin-overflow-nudge-y: calc(
-        var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale) * -1
+        var(--origin-overflow-nudge-base) *
+          var(--origin-overflow-nudge-y-scale) * -1
       );
     }
   }
@@ -3234,11 +3236,14 @@ fig-segmented-control {
   }
 }
 
-fig-input-joystick {
-  --size: 1.5rem;
-  display: inline-flex;
+fig-joystick {
+  --size: 100%;
+  --aspect-ratio: 1 / 1;
+  display: flex;
+  flex-direction: column;
   gap: var(--spacer-2);
   user-select: none;
+  width: var(--size);
 
   /* When inside horizontal fig-field, grow to fill and let inputs expand */
   fig-field[direction="horizontal"] & {
@@ -3250,10 +3255,21 @@ fig-input-joystick {
       width: auto;
     }
   }
+
+  .joystick-values {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-2);
+  }
+
+  .joystick-values > fig-input-number {
+    width: 100%;
+  }
+
   .fig-input-joystick-plane-container {
     display: flex;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 100%;
+    aspect-ratio: var(--aspect-ratio);
     place-items: center;
     flex-shrink: 0;
     flex-grow: 0;
@@ -3264,22 +3280,61 @@ fig-input-joystick {
       outline: 0;
     }
   }
+
+  .fig-joystick-axis-label {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    user-select: none;
+    color: var(--figma-color-text-tertiary);
+    font-size: 10px;
+    line-height: 1;
+    letter-spacing: 0.01em;
+    font-weight: 700;
+    text-shadow:
+      1px 0 0 var(--figma-color-bg-secondary),
+      -1px 0 0 var(--figma-color-bg-secondary),
+      0 1px 0 var(--figma-color-bg-secondary),
+      0 -1px 0 var(--figma-color-bg-secondary);
+
+    &.top {
+      top: var(--spacer-2);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.bottom {
+      bottom: var(--spacer-2);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.left {
+      left: var(--spacer-2);
+      top: 50%;
+      transform: translateY(-50%) rotate(-90deg);
+      transform-origin: center;
+
+      &.no-rotate {
+        transform: translateY(-50%);
+      }
+    }
+
+    &.right {
+      right: var(--spacer-2);
+      top: 50%;
+      transform: translateY(-50%) rotate(90deg);
+      transform-origin: center;
+    }
+  }
+
   .fig-input-joystick-plane {
     display: inline-grid;
     place-items: center;
     position: relative;
-    width: var(--size);
-    height: var(--size);
+    width: 100%;
+    height: 100%;
     flex-shrink: 0;
-    &.dragging {
-      cursor: grab;
-      --size: 3rem;
-      z-index: 2;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
   }
   .fig-input-joystick-plane > * {
     grid-area: 1/1;
@@ -3288,7 +3343,6 @@ fig-input-joystick {
     position: absolute;
     width: var(--size);
     height: var(--size);
-    box-shadow: inset 0 0 0 1px var(--figma-color-border);
     border-radius: var(--radius-medium);
     overflow: hidden;
     background: var(--figma-color-bg-secondary);
@@ -3340,12 +3394,22 @@ fig-input-joystick {
   .fig-input-joystick-handle {
     position: absolute;
     z-index: 1;
-    width: 0.5rem;
-    height: 0.5rem;
-    background: var(--handle-color);
-    box-shadow: var(--handle-shadow);
+    width: 1rem;
+    height: 1rem;
+    background: var(--figma-color-bg-brand);
+    box-shadow:
+      inset 0 0 0 0.125rem var(--handle-color),
+      0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+      var(--figma-elevation-200);
     border-radius: 50%;
     transform: translate(-50%, -50%);
+    transition: box-shadow var(--slider-transition);
+    &:hover {
+      box-shadow:
+        inset 0 0 0 0.25rem var(--handle-color),
+        0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+        var(--figma-elevation-200);
+    }
   }
 }