@rogieking/figui3 6.8.5 → 6.8.7

package/fig.js

@@ -35,6 +35,65 @@ function figNextFrame(host, callback) {
   });
 }
 
+function figNormalizeTextOnlyInputSlots(host) {
+  host
+    .querySelectorAll(':scope > [slot="prepend"], :scope > [slot="append"]')
+    .forEach((node) => {
+      if (node.children.length > 0) {
+        figClearInputSlotTooltip(node);
+        return;
+      }
+      const text = node.textContent.trim();
+      if (!text) {
+        figClearInputSlotTooltip(node);
+        return;
+      }
+      const previousFullText = node.dataset.figInputSlotFullText || "";
+      const previousShortText = previousFullText
+        ? Array.from(previousFullText)[0]?.toUpperCase()
+        : "";
+      const fullText = text === previousShortText ? previousFullText : text;
+      const first = Array.from(text)[0];
+      const normalized = first.toUpperCase();
+      if (node.textContent !== normalized) node.textContent = normalized;
+      if (fullText && fullText !== normalized) {
+        node.dataset.figInputSlotFullText = fullText;
+        node.setAttribute("aria-label", fullText);
+        figBindInputSlotTooltip(node);
+      } else {
+        figClearInputSlotTooltip(node);
+      }
+    });
+}
+
+function figBindInputSlotTooltip(node) {
+  if (node.dataset.figInputSlotTooltipBound === "true") return;
+  node.dataset.figInputSlotTooltipBound = "true";
+  node.addEventListener("pointerenter", figShowInputSlotTooltip);
+  node.addEventListener("pointerleave", figHideInputSlotTooltip);
+  node.addEventListener("focus", figShowInputSlotTooltip);
+  node.addEventListener("blur", figHideInputSlotTooltip);
+}
+
+function figClearInputSlotTooltip(node) {
+  figHideInputSlotTooltip({ currentTarget: node });
+  delete node.dataset.figInputSlotFullText;
+  node.removeAttribute("aria-label");
+}
+
+function figShowInputSlotTooltip(event) {
+  const node = event.currentTarget;
+  const text = node?.dataset?.figInputSlotFullText;
+  if (!node || !text) return;
+  FigTooltip.show(node, text);
+}
+
+function figHideInputSlotTooltip(event) {
+  const node = event.currentTarget;
+  if (!node) return;
+  FigTooltip.hide(node);
+}
+
 function createFigOverflowButtons({
   owner,
   onStart,
@@ -751,6 +810,7 @@ class FigTooltip extends HTMLElement {
   static #warmupWindow = 1000;
   static #hoverOpen = null;
   static #documentExitListenersReady = false;
+  static #programmaticAnchors = new Set();
 
   #boundHideOnChromeOpen;
   #boundHidePopupOutsideClick;
@@ -958,6 +1018,7 @@ class FigTooltip extends HTMLElement {
 
   destroy() {
     if (this.popup) {
+      this.#removeDescribedBy(this.popup.id);
       this.popup.hidePopup?.();
       this.popup.remove();
       this.popup = null;
@@ -970,6 +1031,18 @@ class FigTooltip extends HTMLElement {
       );
     }
   }
+  #removeDescribedBy(id) {
+    const trigger = this.firstElementChild;
+    if (!trigger || !id) return;
+    const value = trigger.getAttribute("aria-describedby");
+    if (!value) return;
+    const next = value
+      .split(/\s+/)
+      .filter((token) => token && token !== id)
+      .join(" ");
+    if (next) trigger.setAttribute("aria-describedby", next);
+    else trigger.removeAttribute("aria-describedby");
+  }
   isTouchDevice() {
     return (
       "ontouchstart" in window ||
@@ -1206,6 +1279,9 @@ class FigTooltip extends HTMLElement {
     const handlePointerLeftDocument = () => {
       FigTooltip.#dismissHoverTooltipsOnDocumentExit();
     };
+    const handleViewportChange = () => {
+      FigTooltip.#dismissTooltipsOnViewportChange();
+    };
 
     document.documentElement.addEventListener(
       "mouseleave",
@@ -1215,6 +1291,17 @@ class FigTooltip extends HTMLElement {
       if (event.relatedTarget) return;
       handlePointerLeftDocument();
     });
+    document.addEventListener("scroll", handleViewportChange, {
+      capture: true,
+      passive: true,
+    });
+    window.addEventListener("scroll", handleViewportChange, { passive: true });
+    window.visualViewport?.addEventListener("scroll", handleViewportChange, {
+      passive: true,
+    });
+    window.visualViewport?.addEventListener("resize", handleViewportChange, {
+      passive: true,
+    });
 
     // Same-origin embed: leaving the iframe element (e.g. into a parent dialog).
     try {
@@ -1235,15 +1322,26 @@ class FigTooltip extends HTMLElement {
     for (const node of document.querySelectorAll("fig-tooltip")) {
       if (!(node instanceof FigTooltip)) continue;
       if (node.action !== "hover") continue;
-      if (node.hasAttribute("show") && node.getAttribute("show") !== "false")
-        continue;
+      if (node.#showPersisted) continue;
       if (node.isOpen || node.timeout) node.hidePopup();
     }
   }
 
   static #programmatic = new WeakMap();
 
+  static #dismissTooltipsOnViewportChange() {
+    for (const node of document.querySelectorAll("fig-tooltip")) {
+      if (!(node instanceof FigTooltip)) continue;
+      if (node.#showPersisted) continue;
+      if (node.isOpen || node.timeout) node.hidePopup();
+    }
+    for (const anchor of Array.from(FigTooltip.#programmaticAnchors)) {
+      FigTooltip.hide(anchor);
+    }
+  }
+
   static show(anchor, text, options = {}) {
+    FigTooltip.#ensureDocumentExitListeners();
     FigTooltip.hide(anchor);
     const delay = options.delay ?? 500;
     const warm =
@@ -1252,6 +1350,7 @@ class FigTooltip extends HTMLElement {
 
     const state = { timeout: null, popup: null };
     FigTooltip.#programmatic.set(anchor, state);
+    FigTooltip.#programmaticAnchors.add(anchor);
 
     state.timeout = setTimeout(() => {
       const supportsPopover =
@@ -1292,8 +1391,12 @@ class FigTooltip extends HTMLElement {
     const state = FigTooltip.#programmatic.get(anchor);
     if (!state) return;
     clearTimeout(state.timeout);
-    if (state.popup) state.popup.remove();
+    if (state.popup) {
+      state.popup.remove();
+      FigTooltip.#lastHiddenAt = Date.now();
+    }
     FigTooltip.#programmatic.delete(anchor);
+    FigTooltip.#programmaticAnchors.delete(anchor);
   }
 }
 
@@ -5424,6 +5527,9 @@ class FigInputText extends HTMLElement {
   #boundInputChange;
   #boundNativeInput;
   #boundFocusControl;
+  #boundAdornmentClick;
+  #mutationObserver = null;
+  #syncRaf = 0;
   #a11yAttributes = [
     "aria-label",
     "aria-labelledby",
@@ -5447,6 +5553,7 @@ class FigInputText extends HTMLElement {
       this.#syncSearchClearVisibility();
     };
     this.#boundFocusControl = this.focus.bind(this);
+    this.#boundAdornmentClick = this.#handleAdornmentClick.bind(this);
   }
 
   connectedCallback() {
@@ -5482,6 +5589,8 @@ class FigInputText extends HTMLElement {
     this.#syncSearchClear();
     this.#syncSearchClearVisibility();
     this.#syncPasswordToggle();
+    figNormalizeTextOnlyInputSlots(this);
+    this.#startObserver();
 
     if (this.type === "number") {
       if (this.getAttribute("min")) {
@@ -5495,6 +5604,8 @@ class FigInputText extends HTMLElement {
       }
       this.addEventListener("pointerdown", this.#boundMouseDown);
     }
+    this.removeEventListener("click", this.#boundAdornmentClick);
+    this.addEventListener("click", this.#boundAdornmentClick);
     this.input.removeEventListener("change", this.#boundInputChange);
     this.input.addEventListener("change", this.#boundInputChange);
     this.input.removeEventListener("input", this.#boundNativeInput);
@@ -5506,10 +5617,17 @@ class FigInputText extends HTMLElement {
       this.input.removeEventListener("change", this.#boundInputChange);
       this.input.removeEventListener("input", this.#boundNativeInput);
     }
+    this.removeEventListener("click", this.#boundAdornmentClick);
     this.removeEventListener("pointerdown", this.#boundMouseDown);
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
     window.removeEventListener("blur", this.#boundWindowBlur);
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    if (this.#syncRaf) {
+      cancelAnimationFrame(this.#syncRaf);
+      this.#syncRaf = 0;
+    }
   }
 
   focus() {
@@ -5523,37 +5641,61 @@ class FigInputText extends HTMLElement {
         ? existing.tagName === "TEXTAREA"
         : existing.tagName === "INPUT";
       if (matches) return existing;
+      existing.remove();
     }
 
-    let html = `<input 
-      type="${this.type}" 
-      ${this.name ? `name="${this.name}"` : ""}
-      placeholder="${this.placeholder}"
-      value="${
-        this.type === "number" ? this.#transformNumber(this.value) : this.value
-      }" />`;
+    let control;
     if (wantsTextarea) {
-      html = `<textarea  
-      placeholder="${this.placeholder}">${this.value}</textarea>`;
+      control = document.createElement("textarea");
+      control.value = this.value;
+    } else {
+      control = document.createElement("input");
+      control.type = this.type;
+      control.value =
+        this.type === "number" ? this.#transformNumber(this.value) : this.value;
     }
+    control.setAttribute("data-generated", "input-control");
+    if (this.name) control.name = this.name;
+    control.placeholder = this.placeholder;
+    this.insertBefore(control, this.querySelector('[slot="append"]'));
 
-    const append = this.querySelector("[slot=append]");
-    const prepend = this.querySelector("[slot=prepend]");
-
-    this.innerHTML = html;
-
-    if (prepend) {
-      prepend.removeEventListener("click", this.#boundFocusControl);
-      prepend.addEventListener("click", this.#boundFocusControl);
-      this.prepend(prepend);
-    }
-    if (append) {
-      append.removeEventListener("click", this.#boundFocusControl);
-      append.addEventListener("click", this.#boundFocusControl);
-      this.append(append);
+    return control;
+  }
+  #handleAdornmentClick(event) {
+    const adornment = event.target?.closest?.("[slot]");
+    if (!adornment || adornment.parentElement !== this) return;
+    this.focus();
+  }
+  #startObserver() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = new MutationObserver(() => this.#scheduleLightDomSync());
+    this.#mutationObserver.observe(this, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+  #scheduleLightDomSync() {
+    if (this.#syncRaf) return;
+    this.#syncRaf = requestAnimationFrame(() => {
+      this.#syncRaf = 0;
+      if (!this.isConnected) return;
+      this.#syncLightDom();
+    });
+  }
+  #syncLightDom() {
+    if (!this.input || !this.contains(this.input)) {
+      this.input = this.#ensureInputControl();
+      this.input.readOnly = this.readonly;
+      this.input.addEventListener("change", this.#boundInputChange);
+      this.input.addEventListener("input", this.#boundNativeInput);
     }
-
-    return this.querySelector("input,textarea");
+    this.#syncInputA11yAttributes();
+    this.#syncSearchPrefix();
+    this.#syncSearchClear();
+    this.#syncSearchClearVisibility();
+    this.#syncPasswordToggle();
+    figNormalizeTextOnlyInputSlots(this);
   }
   #syncInputA11yAttributes() {
     if (!this.input) return;
@@ -5574,8 +5716,11 @@ class FigInputText extends HTMLElement {
       generated?.remove();
       return;
     }
-    const prepend = this.querySelector('[slot="prepend"]');
-    if (prepend && prepend !== generated) return;
+    const prepend = this.querySelector('[slot="prepend"]:not([data-generated])');
+    if (prepend) {
+      generated?.remove();
+      return;
+    }
     if (generated) {
       const icon = generated.querySelector("fig-icon");
       if (icon && icon.getAttribute("name") !== "search") {
@@ -5599,8 +5744,11 @@ class FigInputText extends HTMLElement {
       generated?.remove();
       return;
     }
-    const append = this.querySelector('[slot="append"]');
-    if (append && append !== generated) return;
+    const append = this.querySelector('[slot="append"]:not([data-generated])');
+    if (append) {
+      generated?.remove();
+      return;
+    }
     if (generated) {
       const icon = generated.querySelector("fig-icon");
       if (icon && icon.getAttribute("name") !== "close") {
@@ -5659,8 +5807,11 @@ class FigInputText extends HTMLElement {
       this.#passwordVisible = false;
       return;
     }
-    const append = this.querySelector('[slot="append"]');
-    if (append && append !== generated) return;
+    const append = this.querySelector('[slot="append"]:not([data-generated])');
+    if (append) {
+      generated?.remove();
+      return;
+    }
     if (generated) {
       this.#updatePasswordToggle(generated);
       return;
@@ -5930,6 +6081,7 @@ class FigInputNumber extends HTMLElement {
   #boundBlur;
   #boundKeyDown;
   #boundFocusControl;
+  #boundAdornmentClick;
   #units;
   #rawUnits;
   #unitsDisallow;
@@ -5937,6 +6089,8 @@ class FigInputNumber extends HTMLElement {
   #precision;
   #isInteracting = false;
   #stepperEl = null;
+  #mutationObserver = null;
+  #syncRaf = 0;
   #a11yAttributes = [
     "aria-label",
     "aria-labelledby",
@@ -6056,6 +6210,7 @@ class FigInputNumber extends HTMLElement {
       this.#handleKeyDown(e);
     };
     this.#boundFocusControl = this.focus.bind(this);
+    this.#boundAdornmentClick = this.#handleAdornmentClick.bind(this);
   }
 
   connectedCallback() {
@@ -6114,8 +6269,12 @@ class FigInputNumber extends HTMLElement {
     }
     this.#syncStepperState();
     this.#syncSpinbuttonAria();
+    figNormalizeTextOnlyInputSlots(this);
 
     this.addEventListener("pointerdown", this.#boundMouseDown);
+    this.removeEventListener("click", this.#boundAdornmentClick);
+    this.addEventListener("click", this.#boundAdornmentClick);
+    this.#startObserver();
     this.input.removeEventListener("change", this.#boundInputChange);
     this.input.addEventListener("change", this.#boundInputChange);
     this.input.removeEventListener("input", this.#boundInput);
@@ -6136,10 +6295,17 @@ class FigInputNumber extends HTMLElement {
       this.input.removeEventListener("blur", this.#boundBlur);
       this.input.removeEventListener("keydown", this.#boundKeyDown);
     }
+    this.removeEventListener("click", this.#boundAdornmentClick);
     this.removeEventListener("pointerdown", this.#boundMouseDown);
     window.removeEventListener("pointermove", this.#boundMouseMove);
     window.removeEventListener("pointerup", this.#boundMouseUp);
     window.removeEventListener("blur", this.#boundWindowBlur);
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    if (this.#syncRaf) {
+      cancelAnimationFrame(this.#syncRaf);
+      this.#syncRaf = 0;
+    }
   }
 
   focus() {
@@ -6150,30 +6316,62 @@ class FigInputNumber extends HTMLElement {
     const existing = this.querySelector("input");
     if (existing) return existing;
 
-    const html = `<input 
-      type="text"
-      inputmode="decimal"
-      ${this.name ? `name="${this.name}"` : ""}
-      placeholder="${this.placeholder}"
-      value="${this.#formatWithUnit(this.value)}" />`;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.inputMode = "decimal";
+    input.setAttribute("data-generated", "input-control");
+    if (this.name) input.name = this.name;
+    input.placeholder = this.placeholder;
+    input.value = this.#formatWithUnit(this.value);
+    this.insertBefore(input, this.querySelector('[slot="append"]'));
 
-    const append = this.querySelector("[slot=append]");
-    const prepend = this.querySelector("[slot=prepend]");
+    return input;
+  }
 
-    this.innerHTML = html;
+  #handleAdornmentClick(event) {
+    const adornment = event.target?.closest?.("[slot]");
+    if (!adornment || adornment.parentElement !== this) return;
+    this.focus();
+  }
 
-    if (prepend) {
-      prepend.removeEventListener("click", this.#boundFocusControl);
-      prepend.addEventListener("click", this.#boundFocusControl);
-      this.prepend(prepend);
+  #startObserver() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = new MutationObserver(() => this.#scheduleLightDomSync());
+    this.#mutationObserver.observe(this, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+
+  #scheduleLightDomSync() {
+    if (this.#syncRaf) return;
+    this.#syncRaf = requestAnimationFrame(() => {
+      this.#syncRaf = 0;
+      if (!this.isConnected) return;
+      this.#syncLightDom();
+    });
+  }
+
+  #syncLightDom() {
+    if (!this.input || !this.contains(this.input)) {
+      this.input = this.#ensureInputControl();
+      this.input.addEventListener("change", this.#boundInputChange);
+      this.input.addEventListener("input", this.#boundInput);
+      this.input.addEventListener("focus", this.#boundFocus);
+      this.input.addEventListener("blur", this.#boundBlur);
+      this.input.addEventListener("keydown", this.#boundKeyDown);
     }
-    if (append) {
-      append.removeEventListener("click", this.#boundFocusControl);
-      append.addEventListener("click", this.#boundFocusControl);
-      this.append(append);
+    const hasSteppers =
+      this.hasAttribute("steppers") &&
+      this.getAttribute("steppers") !== "false";
+    if (this.#stepperEl && !this.contains(this.#stepperEl)) {
+      this.#stepperEl = null;
     }
-
-    return this.querySelector("input");
+    this.#syncSteppers(hasSteppers);
+    this.#syncInputA11yAttributes();
+    this.#syncSpinbuttonAria();
+    figNormalizeTextOnlyInputSlots(this);
   }
 
   #syncInputA11yAttributes() {
@@ -13963,6 +14161,7 @@ class FigInputJoystick extends HTMLElement {
     const y = this.coordinates === "math" ? 1 - yScreen : yScreen;
     this.position = { x, y };
     if (syncHandle) this.#syncHandlePosition();
+    this.#syncFields();
     this.#syncValueAttribute();
   }
 
@@ -14019,7 +14218,11 @@ class FigInputJoystick extends HTMLElement {
     if (this.cursor) {
       this.cursor.value = `${this.position.x * 100}% ${displayY * 100}%`;
     }
-    // Also sync text inputs if they exist (convert to percentage 0-100)
+    this.#syncFields();
+  }
+
+  // Sync the X/Y number fields to the current position (percentage 0-100).
+  #syncFields() {
     if (this.#fieldsEnabled && this.xInput && this.yInput) {
       this.xInput.setAttribute("value", Math.round(this.position.x * 100));
       this.yInput.setAttribute("value", Math.round(this.position.y * 100));
@@ -15101,6 +15304,7 @@ class FigChooser extends HTMLElement {
     }
     if (name === "columns") {
       this.#syncGridColumns();
+      this.#resettleSelectedChoice();
     }
     if (name === "drag") {
       if (this.#dragEnabled) {
@@ -15111,10 +15315,16 @@ class FigChooser extends HTMLElement {
     }
     if (name === "overflow") {
       this.#applyOverflowMode();
+      requestAnimationFrame(() => this.#syncOverflow());
     }
     if (name === "layout") {
       this.#applyOverflowMode();
-      requestAnimationFrame(() => this.#syncOverflow());
+      if (newValue === "horizontal") {
+        this.scrollTop = 0;
+      } else {
+        this.scrollLeft = 0;
+      }
+      this.#resettleSelectedChoice();
     }
   }
 
@@ -15260,6 +15470,7 @@ class FigChooser extends HTMLElement {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = new ResizeObserver(() => {
       this.#syncOverflow();
+      this.#resettleSelectedChoice();
     });
     this.#resizeObserver.observe(this);
   }
@@ -15447,6 +15658,11 @@ class FigChooser extends HTMLElement {
     figScrollOverflowPage(this, isHorizontal ? "x" : "y", direction);
   }
 
+  #resettleSelectedChoice() {
+    if (!this.#selectedChoice) return;
+    this.#scrollToChoice(this.#selectedChoice, "auto");
+  }
+
   #scrollToChoice(el, behavior = "smooth") {
     if (!el) return;
     requestAnimationFrame(() => {
@@ -15459,58 +15675,25 @@ class FigChooser extends HTMLElement {
       const hostRect = this.getBoundingClientRect();
       const options = { behavior };
       let shouldScroll = false;
-      const threshold = 2;
 
       if (overflowY) {
-        const fullyVisible =
-          choiceRect.top >= hostRect.top - 1 &&
-          choiceRect.bottom <= hostRect.bottom + 1;
-        const topVisible = choiceRect.top >= hostRect.top - 1;
-        const bottomVisible = choiceRect.bottom <= hostRect.bottom + 1;
-        const atScrollStart = this.scrollTop <= threshold;
-        const needsScroll =
-          !fullyVisible &&
-          (!topVisible ||
-            (!bottomVisible && !atScrollStart) ||
-            choiceRect.top >= hostRect.bottom - 1);
-        if (needsScroll) {
-          const choiceTop = choiceRect.top - hostRect.top + this.scrollTop;
-          const maxScroll = this.scrollHeight - this.clientHeight;
-          options.top = Math.max(
-            0,
-            Math.min(
-              choiceTop + choiceRect.height / 2 - this.clientHeight / 2,
-              maxScroll,
-            ),
-          );
-          shouldScroll = true;
-        }
+        const choiceTop = choiceRect.top - hostRect.top + this.scrollTop;
+        const maxScroll = this.scrollHeight - this.clientHeight;
+        options.top = Math.max(
+          0,
+          Math.min(choiceTop + choiceRect.height / 2 - this.clientHeight / 2, maxScroll),
+        );
+        shouldScroll = true;
       }
 
       if (overflowX) {
-        const fullyVisible =
-          choiceRect.left >= hostRect.left - 1 &&
-          choiceRect.right <= hostRect.right + 1;
-        const startVisible = choiceRect.left >= hostRect.left - 1;
-        const endVisible = choiceRect.right <= hostRect.right + 1;
-        const atScrollStart = this.scrollLeft <= threshold;
-        const needsScroll =
-          !fullyVisible &&
-          (!startVisible ||
-            (!endVisible && !atScrollStart) ||
-            choiceRect.left >= hostRect.right - 1);
-        if (needsScroll) {
-          const choiceLeft = choiceRect.left - hostRect.left + this.scrollLeft;
-          const maxScroll = this.scrollWidth - this.clientWidth;
-          options.left = Math.max(
-            0,
-            Math.min(
-              choiceLeft + choiceRect.width / 2 - this.clientWidth / 2,
-              maxScroll,
-            ),
-          );
-          shouldScroll = true;
-        }
+        const choiceLeft = choiceRect.left - hostRect.left + this.scrollLeft;
+        const maxScroll = this.scrollWidth - this.clientWidth;
+        options.left = Math.max(
+          0,
+          Math.min(choiceLeft + choiceRect.width / 2 - this.clientWidth / 2, maxScroll),
+        );
+        shouldScroll = true;
       }
 
       if (shouldScroll) {

package/package.json

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