@rogieking/figui3 8.2.1 → 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.js

@@ -9841,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";
@@ -9910,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" ||
@@ -9919,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 = [
@@ -9934,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;
@@ -9973,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) => {
@@ -10279,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);
     });
   };
 
@@ -10446,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,
@@ -17795,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) => {
@@ -17985,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;
 
@@ -18384,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) => {
@@ -18558,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;
@@ -18634,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();
@@ -18678,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() {
@@ -18717,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);
     }
@@ -18758,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.1",
+  "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",