@rogieking/figui3 8.2.0 → 8.3.0

package/fig-editor.css

@@ -702,7 +702,7 @@ fig-select-options,
 
 }
 
-fig-select-options > fig-separator {
+fig-select-options > :is(fig-separator, fig-menu-separator) {
   /* Align labels with select option text after the checkmark column. */
   &[label]:not([label=""]) {
     --fig-menu-inline-padding: 0 var(--spacer-2) 0 var(--spacer-5);

package/fig-lab.js

@@ -4267,7 +4267,7 @@ class PropskitSlider extends HTMLElement {
   }
 
   #pushExternalValueToSlider() {
-    if (!this.#slider) return;
+    if (!this.#slider || !this.hasAttribute("value")) return;
     const next = this.getAttribute("value") ?? "";
     if (String(this.#slider.value) !== next) {
       this.#slider.value = next;

package/fig.js

@@ -5173,7 +5173,6 @@ figDefineElement("fig-options", FigOptions);
 class FigSlider extends HTMLElement {
   #isInteracting = false;
   #pendingRegeneration = false;
-  #showEmptyTextValue = false;
   #isSyncingValueAttribute = false;
   #value = "";
   #a11yAttributes = [
@@ -5278,10 +5277,6 @@ class FigSlider extends HTMLElement {
       : this.type === "delta"
         ? 0
         : this.min;
-    this.#showEmptyTextValue =
-      this.type !== "range" &&
-      (rawValue === null ||
-        (typeof rawValue === "string" && rawValue.trim() === ""));
     this.value = this.#normalizeSliderValue(rawValue);
   }
 
@@ -5321,10 +5316,7 @@ class FigSlider extends HTMLElement {
       this.figInputNumber.setAttribute("max", String(this.max));
       this.figInputNumber.setAttribute("transform", String(this.transform));
       this.figInputNumber.setAttribute("step", String(this.step));
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : String(this.value),
-      );
+      this.figInputNumber.setAttribute("value", String(this.value));
       if (this.units) this.figInputNumber.setAttribute("units", this.units);
       else this.figInputNumber.removeAttribute("units");
       if (this.precision !== null) {
@@ -5411,7 +5403,7 @@ class FigSlider extends HTMLElement {
                         max="${this.max}"
                         transform="${this.transform}"
                         step="${this.step}"
-                        value="${this.#showEmptyTextValue ? "" : this.value}"
+                        value="${this.value}"
                         ${this.units ? `units="${figEscapeAttribute(this.units)}"` : ""}
                         ${this.precision !== null ? `precision="${this.precision}"` : ""}>
                     </fig-input-number>`;
@@ -5487,8 +5479,6 @@ class FigSlider extends HTMLElement {
 
   set value(value) {
     const rawValue = value === null || value === undefined ? "" : String(value);
-    this.#showEmptyTextValue =
-      this.type !== "range" && rawValue.trim() === "";
     const hasParsedBounds = this.min !== undefined || this.max !== undefined;
     const normalized = hasParsedBounds
       ? String(this.#normalizeSliderValue(rawValue))
@@ -5504,10 +5494,7 @@ class FigSlider extends HTMLElement {
       this.input.setAttribute("aria-valuenow", normalized);
     }
     if (this.figInputNumber) {
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : normalized,
-      );
+      this.figInputNumber.setAttribute("value", normalized);
     }
     if (this.input) this.#syncProperties();
   }
@@ -5537,10 +5524,6 @@ class FigSlider extends HTMLElement {
   #handleTextInput() {
     if (this.figInputNumber) {
       const rawTextValue = this.figInputNumber.value;
-      this.#showEmptyTextValue =
-        rawTextValue === null ||
-        rawTextValue === undefined ||
-        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
       const normalized = this.#normalizeSliderValue(rawTextValue);
       this.value = normalized;
       this.input.value = String(normalized);
@@ -5624,10 +5607,7 @@ class FigSlider extends HTMLElement {
     // Update ARIA value
     this.input.setAttribute("aria-valuenow", val);
     if (this.figInputNumber) {
-      this.figInputNumber.setAttribute(
-        "value",
-        this.#showEmptyTextValue ? "" : val,
-      );
+      this.figInputNumber.setAttribute("value", val);
     }
   }
   #syncInputA11yAttributes() {
@@ -5665,7 +5645,6 @@ class FigSlider extends HTMLElement {
   }
 
   #handleInput() {
-    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("input", { detail: this.value, bubbles: true }),
@@ -5674,7 +5653,6 @@ class FigSlider extends HTMLElement {
 
   #handleChange() {
     this.#isInteracting = false;
-    this.#showEmptyTextValue = false;
     this.#syncValue();
     this.dispatchEvent(
       new CustomEvent("change", { detail: this.value, bubbles: true }),
@@ -5690,7 +5668,6 @@ class FigSlider extends HTMLElement {
     }
 
     event.preventDefault();
-    this.#showEmptyTextValue = false;
 
     const direction =
       event.key === "ArrowRight" || event.key === "ArrowUp" ? 1 : -1;
@@ -5712,10 +5689,6 @@ class FigSlider extends HTMLElement {
   #handleTextChange() {
     if (this.figInputNumber) {
       const rawTextValue = this.figInputNumber.value;
-      this.#showEmptyTextValue =
-        rawTextValue === null ||
-        rawTextValue === undefined ||
-        (typeof rawTextValue === "string" && rawTextValue.trim() === "");
       const normalized = this.#normalizeSliderValue(rawTextValue);
       this.value = normalized;
       this.input.value = String(normalized);
@@ -9868,6 +9841,30 @@ class FigInputGradient extends HTMLElement {
     );
   }
 
+  #activeStopHandle() {
+    if (!this.#track) return null;
+    const selected = this.#track.querySelector(
+      "fig-handle[selected]:not(.fig-input-gradient-ghost)",
+    );
+    if (selected) return selected;
+    const active = document.activeElement;
+    if (!(active instanceof Element) || !this.#track.contains(active)) {
+      return null;
+    }
+    return active.closest("fig-handle:not(.fig-input-gradient-ghost)");
+  }
+
+  #activateStopHandle(handle) {
+    if (!handle || !this.#track) return;
+    this.#track
+      .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
+      .forEach((other) => {
+        if (other !== handle) other.deselect();
+      });
+    handle.select();
+    handle.focus();
+  }
+
   #syncFocusTarget() {
     const disabled =
       this.hasAttribute("disabled") && this.getAttribute("disabled") !== "false";
@@ -9937,7 +9934,15 @@ class FigInputGradient extends HTMLElement {
 
   #onKeyDown = (e) => {
     const active = document.activeElement;
-    if (!(active instanceof Node) || !this.contains(active)) return;
+    const activeIsInside = active instanceof Node && this.contains(active);
+    const selectedHandle = this.#track?.querySelector(
+      "fig-handle[selected]:not(.fig-input-gradient-ghost)",
+    );
+    const focusLostToBody =
+      !active ||
+      active === document.body ||
+      active === document.documentElement;
+    if (!activeIsInside && !(selectedHandle && focusLostToBody)) return;
     const isTyping =
       active &&
       (active.tagName === "INPUT" ||
@@ -9946,9 +9951,7 @@ class FigInputGradient extends HTMLElement {
     if (!this.#track) return;
 
     if (e.key === "Tab" && !isTyping) {
-      const selected = this.#track.querySelector(
-        "fig-handle[selected]:not(.fig-input-gradient-ghost)",
-      );
+      const selected = this.#activeStopHandle();
       if (!selected) return;
       e.preventDefault();
       const handles = [
@@ -9961,14 +9964,12 @@ class FigInputGradient extends HTMLElement {
         ? (curIdx - 1 + handles.length) % handles.length
         : (curIdx + 1) % handles.length;
       selected.deselect();
-      handles[next].select();
+      this.#activateStopHandle(handles[next]);
       return;
     }
 
     if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && !isTyping) {
-      const selected = this.#track.querySelector(
-        "fig-handle[selected]:not(.fig-input-gradient-ghost)",
-      );
+      const selected = this.#activeStopHandle();
       if (!selected) return;
       const idx = parseInt(selected.dataset.stopIndex, 10);
       if (isNaN(idx) || !this.#gradient.stops[idx]) return;
@@ -10000,19 +10001,21 @@ class FigInputGradient extends HTMLElement {
     if (e.key !== "Delete" && e.key !== "Backspace") return;
     if (isTyping) return;
     if (this.#gradient.stops.length <= 2) return;
-    const selected = this.#track.querySelector(
-      "fig-handle[selected]:not(.fig-input-gradient-ghost)",
-    );
+    const selected = this.#activeStopHandle();
     if (!selected) return;
     const idx = parseInt(selected.dataset.stopIndex, 10);
     if (isNaN(idx) || !this.#gradient.stops[idx]) return;
     e.preventDefault();
-    selected.removeAttribute("selected");
     this.#gradient.stops.splice(idx, 1);
     this.#syncHandles();
     this.#syncSwatch();
     this.#emitInput();
     this.#emitChange();
+    const nextIdx = Math.min(idx, this.#gradient.stops.length - 1);
+    const next = this.#track.querySelectorAll(
+      "fig-handle:not(.fig-input-gradient-ghost)",
+    )[nextIdx];
+    this.#activateStopHandle(next);
   };
 
   #onPickerKeyDown = (e) => {
@@ -10306,7 +10309,7 @@ class FigInputGradient extends HTMLElement {
         "fig-handle:not(.fig-input-gradient-ghost)",
       );
       const newHandle = handles[newIndex];
-      if (newHandle) newHandle.click();
+      if (newHandle) this.#activateStopHandle(newHandle);
     });
   };
 
@@ -10473,12 +10476,7 @@ class FigInputGradient extends HTMLElement {
       );
       const newHandle = handles[newIndex];
       if (newHandle) {
-        this.#track
-          .querySelectorAll("fig-handle:not(.fig-input-gradient-ghost)")
-          .forEach((h) => {
-            if (h !== newHandle) h.deselect();
-          });
-        newHandle.select();
+        this.#activateStopHandle(newHandle);
         newHandle.dispatchEvent(
           new PointerEvent("pointerdown", {
             bubbles: true,
@@ -17822,15 +17820,14 @@ class FigHandle extends HTMLElement {
       this.#didDrag = false;
       return;
     }
+    this.select();
     if (
       this.getAttribute("type") === "color" &&
       this.#canOpenColorPicker &&
       !this.#tipMode
     ) {
       this.#openDirectColorPicker();
-      return;
     }
-    this.select();
   };
 
   #handleDeselect = (e) => {
@@ -18012,6 +18009,8 @@ class FigHandle extends HTMLElement {
   #onPointerDown(e) {
     if (!this.#dragEnabled || figBooleanAttribute(this, "disabled")) return;
     e.preventDefault();
+    this.focus();
+    this.select();
     const container = this.#getContainer();
     if (!container) return;
 
@@ -18411,17 +18410,19 @@ class FigHandle extends HTMLElement {
     e.stopPropagation();
     const detail = this.#detailFromNativeColor(e.target.value);
     this.setAttribute("color", this.#colorWithOpacity(detail.color, detail.opacity));
-    this.removeAttribute("selected");
     this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
         detail,
       }),
     );
+    if (this.isConnected) this.focus();
   };
 
   #handleDirectColorPickerClose = () => {
-    this.removeAttribute("selected");
+    if (!this.isConnected) return;
+    this.setAttribute("selected", "");
+    this.focus();
   };
 
   #handleColorTipInput = (e) => {
@@ -18585,6 +18586,19 @@ class FigSeparator extends HTMLElement {
 }
 figDefineElement("fig-separator", FigSeparator);
 
+// Backwards-compatible alias. Custom element constructors cannot be registered
+// under multiple tag names, so the legacy tag uses an otherwise empty subclass.
+class FigMenuSeparator extends FigSeparator {}
+figDefineElement("fig-menu-separator", FigMenuSeparator);
+
+const FIG_MENU_CHILD_SELECTOR =
+  ":scope > fig-menu-item, :scope > fig-separator, :scope > fig-menu-separator";
+const FIG_MENU_CHILD_TAGS = new Set([
+  "FIG-MENU-ITEM",
+  "FIG-SEPARATOR",
+  "FIG-MENU-SEPARATOR",
+]);
+
 class FigMenu extends HTMLElement {
   #popup = null;
   #panel = null;
@@ -18661,9 +18675,7 @@ class FigMenu extends HTMLElement {
     if (this.#popup) {
       this.#popup.removeEventListener("close", this.#boundPopupClose);
       const items = Array.from(
-        this.#panel?.querySelectorAll(
-          ":scope > fig-menu-item, :scope > fig-separator",
-        ) ?? [],
+        this.#panel?.querySelectorAll(FIG_MENU_CHILD_SELECTOR) ?? [],
       );
       for (const item of items) this.insertBefore(item, this.#popup);
       this.#popup.remove();
@@ -18705,7 +18717,9 @@ class FigMenu extends HTMLElement {
   #detectTrigger() {
     this.#trigger =
       this.querySelector("[fig-menu-trigger]") ||
-      this.querySelector(":scope > :not(fig-menu-item):not(fig-separator)");
+      this.querySelector(
+        ":scope > :not(fig-menu-item):not(fig-separator):not(fig-menu-separator)",
+      );
   }
 
   #usesContextMenuTrigger() {
@@ -18744,9 +18758,7 @@ class FigMenu extends HTMLElement {
 
   #moveItemsToPopup() {
     if (!this.#panel) return;
-    const items = Array.from(this.querySelectorAll(
-      ":scope > fig-menu-item, :scope > fig-separator"
-    ));
+    const items = Array.from(this.querySelectorAll(FIG_MENU_CHILD_SELECTOR));
     for (const item of items) {
       this.#panel.appendChild(item);
     }
@@ -18785,8 +18797,7 @@ class FigMenu extends HTMLElement {
         for (const node of mutation.addedNodes) {
           if (node.nodeType !== 1 || node === this.#popup) continue;
           if (
-            (node.tagName === "FIG-MENU-ITEM" ||
-              node.tagName === "FIG-SEPARATOR") &&
+            FIG_MENU_CHILD_TAGS.has(node.tagName) &&
             node.parentElement === this
           ) {
             this.#panel?.appendChild(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.2.0",
+  "version": "8.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",