@rogieking/figui3 3.1.0 → 3.3.0

package/components.css

@@ -367,6 +367,10 @@ textarea,
 input[type="text"],
 input[type="number"],
 input[type="password"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="tel"],
 .input {
   background-color: var(--figma-color-bg-secondary);
   border: 0;
@@ -395,28 +399,47 @@ input[type="password"],
   }
 }
 
-fig-input-text,
-fig-input-number {
-  &:has([slot="append"]) input[type="number"] {
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      display: none;
-      color-scheme: inherit;
-      margin: 0;
-      opacity: 0;
+fig-input-number .fig-steppers {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+  overflow: hidden;
+
+  & button {
+    display: block;
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: 1.5rem;
+    flex: 1;
+    background-color: var(--figma-color-text-secondary);
+    cursor: pointer;
+    mask-size: 1rem;
+    mask-repeat: no-repeat;
+    mask-position: center -3.5px;
+
+    &:hover {
+      background-color: var(--figma-color-text);
     }
-  }
-  &[steppers="true"] {
-    input[type="number"]::-webkit-inner-spin-button {
-      display: block;
-      opacity: 1;
-      height: 1.5rem;
-      width: 1.5rem;
-      margin-right: calc(var(--spacer-2) * -1);
-      background-color: var(--figma-color-text-secondary);
-      mask-image: var(--icon-steppers);
+    &:active {
+      background-color: var(--figma-color-text-tertiary);
     }
   }
+
+  fig-input-number[disabled]:not([disabled="false"]) & button {
+    pointer-events: none;
+    background-color: var(--figma-color-text-disabled);
+  }
+
+  & .fig-stepper-up {
+    mask-image: var(--icon-chevron);
+    rotate: 180deg;
+  }
+  & .fig-stepper-down {
+    mask-image: var(--icon-chevron);
+  }
 }
 
 /* Textarea */
@@ -2681,6 +2704,7 @@ dialog[is="fig-toast"] {
   justify-content: center;
   min-width: 0;
   color: var(--figma-color-text);
+  background-color: var(--figma-color-bg);
 
   &[open] {
     display: flex;
@@ -2703,32 +2727,34 @@ dialog[is="fig-toast"] {
 
   /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
   &[theme="dark"] {
-    background-color: #2c2c2c;
-    color: rgba(255, 255, 255, 0.9);
     color-scheme: dark;
   }
 
   /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
   &[theme="light"] {
-    background-color: #ffffff;
-    color: rgba(0, 0, 0, 0.9);
-    box-shadow: var(--figma-elevation-500-modal-window);
     color-scheme: light;
   }
 
   /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
   &[theme="danger"] {
-    background-color: #f24822;
-    color: #ffffff;
+    background-color: var(--figma-color-bg-danger);
     color-scheme: dark;
   }
 
   /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
   &[theme="brand"] {
-    background-color: #0d99ff;
-    color: #ffffff;
+    background-color: var(--figma-color-bg-brand);
+    color-scheme: dark;
+  }
+
+  &[theme="success"] {
+    background-color: var(--figma-color-bg-success);
     color-scheme: dark;
   }
+
+  &[theme="auto"] {
+    /* color-scheme is resolved at runtime by FigToast JS */
+  }
 }
 
 /* Tooltip */
@@ -2958,9 +2984,13 @@ fig-input-number {
   flex: 1;
   color: var(--figma-color-text);
 
+  &[full]:not([full="false"]) {
+    display: flex;
+    width: 100%;
+  }
   &[multiline] {
     display: flex;
-    width: 100%; /* Multiline defaults to full width */
+    width: 100%;
   }
   &[autoresize] input,
   &[autoresize] textarea {
@@ -3064,8 +3094,7 @@ fig-input-fill {
     }
   }
 
-  fig-field[direction="horizontal"] &,
-  fig-field[direction="row"] & {
+  fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
   }
@@ -3082,8 +3111,7 @@ fig-slider {
     flex-basis: 5rem;
   }
 
-  fig-field[direction="horizontal"] &,
-  fig-field[direction="row"] & {
+  fig-field[direction="horizontal"] & {
     flex: 1;
     min-width: 0;
   }
@@ -3099,7 +3127,6 @@ fig-field,
   gap: 0;
   align-items: start;
 
-  &[direction="row"],
   &[direction="horizontal"] {
     flex-direction: row;
     align-items: center;
@@ -3121,10 +3148,13 @@ fig-field,
     width: 100%;
   }
 
-  &[direction="row"] > label,
   &[direction="horizontal"] > label {
     width: auto;
     min-width: var(--field-label-width);
+    max-width: var(--field-label-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &[direction="horizontal"] {

package/fig.js

@@ -2253,15 +2253,15 @@ class FigTabs extends HTMLElement {
     this.setAttribute("role", "tablist");
     this.addEventListener("click", this.handleClick.bind(this));
     this.addEventListener("keydown", this.#handleKeyDown.bind(this));
-    // Set initial selected tab based on value
-    const value = this.getAttribute("value");
-    if (value) {
-      this.#selectByValue(value);
-    }
-    // Apply disabled state
-    if (this.hasAttribute("disabled")) {
-      this.#applyDisabled(true);
-    }
+    requestAnimationFrame(() => {
+      const value = this.getAttribute("value");
+      if (value) {
+        this.#selectByValue(value);
+      }
+      if (this.hasAttribute("disabled")) {
+        this.#applyDisabled(true);
+      }
+    });
   }
 
   #applyDisabled(disabled) {
@@ -2333,6 +2333,7 @@ class FigTabs extends HTMLElement {
     for (const tab of tabs) {
       if (tab.getAttribute("value") === value) {
         this.selectedTab = tab;
+        tab.setAttribute("selected", "true");
       } else {
         tab.removeAttribute("selected");
       }
@@ -2353,7 +2354,6 @@ class FigTabs extends HTMLElement {
   }
 
   handleClick(event) {
-    // Ignore clicks when disabled
     if (this.hasAttribute("disabled")) return;
     const target = event.target;
     if (target.nodeName.toLowerCase() === "fig-tab") {
@@ -2361,6 +2361,7 @@ class FigTabs extends HTMLElement {
       for (const tab of tabs) {
         if (tab === target) {
           this.selectedTab = tab;
+          tab.setAttribute("selected", "true");
           this.setAttribute("value", tab.getAttribute("value") || "");
         } else {
           tab.removeAttribute("selected");
@@ -3459,20 +3460,46 @@ class FigInputNumber extends HTMLElement {
   #unitPosition;
   #precision;
   #isInteracting = false;
+  #stepperEl = null;
+
+  #syncSteppers(hasSteppers) {
+    if (hasSteppers && !this.#stepperEl) {
+      this.#stepperEl = document.createElement("span");
+      this.#stepperEl.className = "fig-steppers";
+      this.#stepperEl.innerHTML =
+        `<button class="fig-stepper-up" tabindex="-1" aria-label="Increase"></button>` +
+        `<button class="fig-stepper-down" tabindex="-1" aria-label="Decrease"></button>`;
+      this.#stepperEl.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const btn = e.target.closest("button");
+        if (!btn || this.disabled) return;
+        const dir = btn.classList.contains("fig-stepper-up") ? 1 : -1;
+        this.#stepValue(dir);
+        this.input.focus();
+      });
+      this.append(this.#stepperEl);
+    } else if (!hasSteppers && this.#stepperEl) {
+      this.#stepperEl.remove();
+      this.#stepperEl = null;
+    }
+  }
 
-  #syncNativeNumberAttributes() {
-    if (!this.input || this.input.type !== "number") return;
-
-    ["min", "max", "step"].forEach((name) => {
-      const attrValue = this.getAttribute(name);
-      if (attrValue === null || attrValue === "") {
-        this.input.removeAttribute(name);
-        this.input[name] = "";
-        return;
-      }
-      this.input.setAttribute(name, attrValue);
-      this.input[name] = attrValue;
-    });
+  #stepValue(direction) {
+    const step = this.step || 1;
+    let numericValue = this.#getNumericValue(this.input.value);
+    let value =
+      (numericValue !== "" ? Number(numericValue) / (this.transform || 1) : 0) +
+      step * direction;
+    value = this.#sanitizeInput(value, false);
+    this.value = value;
+    this.input.value = this.#formatWithUnit(this.value);
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: this.value, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value, bubbles: true }),
+    );
   }
 
   constructor() {
@@ -3528,19 +3555,12 @@ class FigInputNumber extends HTMLElement {
       this.hasAttribute("steppers") &&
       this.getAttribute("steppers") !== "false";
 
-    // Use type="number" when steppers are enabled (for native spin buttons)
-    const inputType = hasSteppers ? "number" : "text";
-    const inputMode = hasSteppers ? "" : 'inputmode="decimal"';
-    const inputValue = hasSteppers
-      ? this.#transformNumber(this.value)
-      : this.#formatWithUnit(this.value);
-
     let html = `<input 
-      type="${inputType}"
-      ${inputMode}
+      type="text"
+      inputmode="decimal"
       ${this.name ? `name="${this.name}"` : ""}
       placeholder="${this.placeholder}"
-      value="${inputValue}" />`;
+      value="${this.#formatWithUnit(this.value)}" />`;
 
     //child nodes hack
     requestAnimationFrame(() => {
@@ -3569,7 +3589,8 @@ class FigInputNumber extends HTMLElement {
       if (this.getAttribute("step")) {
         this.step = Number(this.getAttribute("step"));
       }
-      this.#syncNativeNumberAttributes();
+
+      this.#syncSteppers(hasSteppers);
 
       // Set disabled state if present
       if (this.hasAttribute("disabled")) {
@@ -3845,24 +3866,15 @@ class FigInputNumber extends HTMLElement {
           break;
         case "units":
           this.#units = newValue || "";
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "unit-position":
           this.#unitPosition = newValue || "suffix";
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "transform":
           this.transform = Number(newValue) || 1;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "value":
           if (this.#isInteracting) break;
@@ -3872,41 +3884,25 @@ class FigInputNumber extends HTMLElement {
             value = this.#sanitizeInput(value, false);
           }
           this.value = value;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "min":
         case "max":
         case "step":
           if (newValue === null || newValue === "") {
             this[name] = undefined;
-            this.#syncNativeNumberAttributes();
             break;
           }
           this[name] = Number(newValue);
-          this.#syncNativeNumberAttributes();
           break;
         case "steppers": {
           const hasSteppers = newValue !== null && newValue !== "false";
-          this.input.type = hasSteppers ? "number" : "text";
-          if (hasSteppers) {
-            this.input.removeAttribute("inputmode");
-            this.#syncNativeNumberAttributes();
-            this.input.value = this.#transformNumber(this.value);
-          } else {
-            this.input.setAttribute("inputmode", "decimal");
-            this.input.value = this.#formatWithUnit(this.value);
-          }
+          this.#syncSteppers(hasSteppers);
           break;
         }
         case "precision":
           this.#precision = newValue !== null ? Number(newValue) : 2;
-          this.input.value =
-            this.input.type === "number"
-              ? this.#transformNumber(this.value)
-              : this.#formatWithUnit(this.value);
+          this.input.value = this.#formatWithUnit(this.value);
           break;
         case "name":
           this[name] = this.input[name] = newValue;
@@ -5425,10 +5421,18 @@ class FigToast extends HTMLDialogElement {
     }
   }
 
+  #resolveAutoTheme() {
+    if (this.getAttribute("theme") !== "auto") return;
+    const cs = getComputedStyle(document.documentElement).colorScheme || "";
+    const isDark = cs.includes("dark");
+    this.style.colorScheme = isDark ? "light" : "dark";
+  }
+
   /**
    * Show the toast notification (non-modal)
    */
   showToast() {
+    this.#resolveAutoTheme();
     this.show(); // Non-modal show
     this.applyPosition();
     this.startAutoClose();
@@ -5460,6 +5464,14 @@ class FigToast extends HTMLDialogElement {
         this.hideToast();
       }
     }
+
+    if (name === "theme") {
+      if (newValue === "auto") {
+        this.#resolveAutoTheme();
+      } else {
+        this.style.removeProperty("color-scheme");
+      }
+    }
   }
 }
 figDefineCustomizedBuiltIn("fig-toast", FigToast, { extends: "dialog" });

package/package.json

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