@rogieking/figui3 3.6.0 → 3.7.0

package/components.css

@@ -1777,6 +1777,7 @@ fig-origin-grid {
     --origin-overflow-nudge-base: var(--spacer-2-5);
     --origin-overflow-nudge-x: 0px;
     --origin-overflow-nudge-y: 0px;
+    --origin-grid-handle-radius: var(--radius-small);
     --origin-overflow-nudge-x-scale: calc((100cqb / 100cqi) * -1);
     --origin-overflow-nudge-y-scale: calc((100cqb / 100cqi) * -1);
     position: absolute;
@@ -1784,10 +1785,11 @@ fig-origin-grid {
     top: 50%;
     width: var(--origin-grid-handle-size);
     height: var(--origin-grid-handle-size);
-    border-radius: var(--radius-small);
+    border-radius: var(--origin-grid-handle-radius);
     background: var(--figma-color-bg-brand);
     box-shadow:
-      0 0 0 1px var(--figma-color-bg),
+      inset 0 0 0 0.09375rem var(--handle-color),
+      0px 0 0 0.5px rgba(0, 0, 0, 0.1),
       var(--elevation-100-canvas);
     transform: translate(
         calc(-50% + var(--origin-overflow-nudge-x)),
@@ -1808,6 +1810,7 @@ fig-origin-grid {
       -webkit-mask-size: 24px 24px;
       mask-size: 24px 24px;
       border-radius: 0;
+      box-shadow: none;
     }
 
     &.beyond-bounds-x.overflow-right {
@@ -2199,6 +2202,8 @@ fig-slider {
   --slider-thumb-color: var(--handle-color);
   --slider-thumb-radius: calc(var(--slider-thumb-width) / 2);
   --slider-thumb-opacity: 1;
+  --slider-thumb-outline: none;
+  --slider-thumb-outline-offset: 2px;
   --slider-tick-opacity: 1;
   --slider-tick-radius: 100%;
   --slider-border-radius: calc(var(--slider-height) / 2);
@@ -2334,6 +2339,9 @@ fig-slider {
       margin-top: calc(
         var(--slider-height) / 2 - var(--slider-thumb-height) / 2
       );
+      outline: var(--slider-thumb-outline);
+      outline-offset: var(--slider-thumb-outline-offset);
+
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -2409,6 +2417,8 @@ fig-slider {
       border-radius: var(--slider-thumb-radius);
       height: var(--slider-thumb-height);
       width: var(--slider-thumb-width);
+      outline: var(--slider-thumb-outline);
+      outline-offset: var(--slider-thumb-outline-offset);
       aspect-ratio: 1;
       border: none;
       position: relative;
@@ -3326,10 +3336,18 @@ fig-field-slider {
       --slider-tick-height: var(--spacer-2);
       --slider-tick-radius: var(--radius-medium);
       --slider-stepper-padding: 0;
+      --slider-handle-shadow: inset 0 0 0 var(--slider-thumb-height)
+        var(--slider-thumb-color) !important;
       --slider-thumb-opacity: calc(
         min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
       );
       --slider-tick-opacity: 1;
+
+      &:has(input[type="range"]:focus-within) {
+        --slider-thumb-outline: 1.5px solid var(--figma-color-border-selected) !important;
+        --slider-thumb-outline-offset: 2px !important;
+      }
+
       .fig-slider-input-container {
         box-shadow: none !important;
         &:hover,
@@ -3401,6 +3419,7 @@ fig-field-slider {
       min-width: fit-content;
       max-width: max-content;
       flex: 0 0 auto;
+      border-radius: var(--radius-small);
 
       &:hover,
       &:has(input:focus) {
@@ -3411,6 +3430,7 @@ fig-field-slider {
       }
       input {
         field-sizing: content;
+        border-radius: var(--radius-small);
         width: auto;
         flex: 0 0 auto;
         text-align: right;
@@ -3650,11 +3670,11 @@ fig-joystick {
   .fig-input-joystick-handle {
     position: absolute;
     z-index: 2;
-    width: 1rem;
-    height: 1rem;
+    width: 0.75rem;
+    height: 0.75rem;
     background: var(--figma-color-bg-brand);
     box-shadow:
-      inset 0 0 0 0.125rem var(--handle-color),
+      inset 0 0 0 0.09375rem var(--handle-color),
       0px 0 0 0.5px rgba(0, 0, 0, 0.1),
       var(--elevation-100-canvas);
     border-radius: 50%;

package/fig.js

@@ -4019,6 +4019,7 @@ class FigFieldSlider extends HTMLElement {
   #slider = null;
   #observer = null;
   #managedSliderAttrs = new Set();
+  #steppersSyncFrame = 0;
   #boundHandleSliderInput = null;
   #boundHandleSliderChange = null;
   #ignoredSliderAttrs = new Set(["variant", "color", "text", "full"]);
@@ -4070,6 +4071,10 @@ class FigFieldSlider extends HTMLElement {
 
   disconnectedCallback() {
     this.#observer?.disconnect();
+    if (this.#steppersSyncFrame) {
+      cancelAnimationFrame(this.#steppersSyncFrame);
+      this.#steppersSyncFrame = 0;
+    }
     this.#unbindSliderEvents();
   }
 
@@ -4180,15 +4185,49 @@ class FigFieldSlider extends HTMLElement {
     }
 
     this.#managedSliderAttrs = nextManaged;
+    this.#queueSteppersSync();
   }
 
   #getForwardedSliderAttrNames() {
-    const reserved = new Set(["label", "direction", "oninput", "onchange"]);
+    const reserved = new Set([
+      "label",
+      "direction",
+      "oninput",
+      "onchange",
+      "steppers",
+    ]);
     return this.getAttributeNames().filter(
       (name) => !reserved.has(name) && !this.#ignoredSliderAttrs.has(name),
     );
   }
 
+  #queueSteppersSync() {
+    if (this.#steppersSyncFrame) {
+      cancelAnimationFrame(this.#steppersSyncFrame);
+    }
+    this.#steppersSyncFrame = requestAnimationFrame(() => {
+      this.#steppersSyncFrame = 0;
+      this.#syncSteppersToNumberInput();
+    });
+  }
+
+  #syncSteppersToNumberInput() {
+    if (!this.#slider) return;
+    const numberInput = this.#slider.querySelector("fig-input-number");
+    if (!numberInput) return;
+
+    const hasSteppers =
+      this.hasAttribute("steppers") &&
+      this.getAttribute("steppers") !== "false";
+    if (!hasSteppers) {
+      numberInput.removeAttribute("steppers");
+      return;
+    }
+
+    const steppersValue = this.getAttribute("steppers");
+    numberInput.setAttribute("steppers", steppersValue ?? "");
+  }
+
   #bindSliderEvents() {
     if (!this.#slider) return;
     if (!this.#boundHandleSliderInput) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",