@rogieking/figui3 6.27.0 → 6.28.1

package/fig-lab.js

@@ -724,6 +724,7 @@ class PropskitSelect extends HTMLElement {
   #managedSelectAttrs = new Set();
   #boundHandleInput = null;
   #boundHandleChange = null;
+  #boundHandleOptionHover = null;
   #boundHandleClick = this.#handleClick.bind(this);
   #boundHandlePointerDown = this.#handlePointerDown.bind(this);
   /** True when pointerdown saw the menu open — skip click-to-open after light-dismiss. */
@@ -883,8 +884,13 @@ class PropskitSelect extends HTMLElement {
     if (!this.#select) return;
     this.#boundHandleInput ??= this.#forwardSelectEvent.bind(this, "input");
     this.#boundHandleChange ??= this.#forwardSelectEvent.bind(this, "change");
+    this.#boundHandleOptionHover ??= this.#forwardSelectEvent.bind(
+      this,
+      "optionhover",
+    );
     this.#select.addEventListener("input", this.#boundHandleInput);
     this.#select.addEventListener("change", this.#boundHandleChange);
+    this.#select.addEventListener("optionhover", this.#boundHandleOptionHover);
   }
 
   #unbindSelectEvents() {
@@ -895,13 +901,19 @@ class PropskitSelect extends HTMLElement {
     if (this.#boundHandleChange) {
       this.#select.removeEventListener("change", this.#boundHandleChange);
     }
+    if (this.#boundHandleOptionHover) {
+      this.#select.removeEventListener(
+        "optionhover",
+        this.#boundHandleOptionHover,
+      );
+    }
   }
 
   #forwardSelectEvent(type, event) {
     if (event.target !== this.#select) return;
     event.stopImmediatePropagation();
     const value = this.#select?.value ?? "";
-    this.setAttribute("value", String(value));
+    if (type !== "optionhover") this.setAttribute("value", String(value));
     const detail =
       event instanceof CustomEvent && event.detail !== undefined
         ? event.detail

package/fig.js

@@ -5349,6 +5349,7 @@ class FigSelect extends HTMLElement {
   #syncingOptions = false;
   #boundTriggerClick = this.#handleTriggerClick.bind(this);
   #boundOptionClick = this.#handleOptionClick.bind(this);
+  #boundOptionPointerOver = this.#handleOptionPointerOver.bind(this);
   #boundKeydown = this.#handleKeydown.bind(this);
   #boundPopupClose = this.#handlePopupClose.bind(this);
   #boundSlotChange = this.#handleSlotChange.bind(this);
@@ -5855,6 +5856,7 @@ class FigSelect extends HTMLElement {
     this.#button?.addEventListener("keydown", this.#boundKeydown);
     // Host click: slotted options stay in light DOM (not dialog.contains).
     this.addEventListener("click", this.#boundOptionClick);
+    this.addEventListener("pointerover", this.#boundOptionPointerOver);
     this.#popup?.addEventListener("keydown", this.#boundKeydown);
     this.#popup?.addEventListener("close", this.#boundPopupClose);
     this.#panelSlot?.addEventListener("slotchange", this.#boundSlotChange);
@@ -5864,6 +5866,7 @@ class FigSelect extends HTMLElement {
     this.#button?.removeEventListener("click", this.#boundTriggerClick);
     this.#button?.removeEventListener("keydown", this.#boundKeydown);
     this.removeEventListener("click", this.#boundOptionClick);
+    this.removeEventListener("pointerover", this.#boundOptionPointerOver);
     this.#popup?.removeEventListener("keydown", this.#boundKeydown);
     this.#popup?.removeEventListener("close", this.#boundPopupClose);
     this.#panelSlot?.removeEventListener("slotchange", this.#boundSlotChange);
@@ -6113,6 +6116,32 @@ class FigSelect extends HTMLElement {
     this.#selectOption(option);
   }
 
+  /**
+   * Fires `optionhover` with the enabled option's value in `event.detail`
+   * without changing the current selection.
+   */
+  #handleOptionPointerOver(e) {
+    const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+    const option = path.find(
+      (node) => node?.tagName === "FIG-SELECT-OPTION",
+    );
+    if (!option || !this.contains(option)) return;
+    if (figBooleanAttribute(option, "disabled")) return;
+    if (
+      e.relatedTarget instanceof Node &&
+      option.contains(e.relatedTarget)
+    ) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("optionhover", {
+        detail: this.#optionValue(option),
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   #handleKeydown(e) {
     if (e.currentTarget === document && e.key !== "Escape") return;
 
@@ -10958,6 +10987,7 @@ class FigInputGradient extends HTMLElement {
   #arrowTooltipTimer = null;
   #colorObserver = null;
   #repositionRAF = null;
+  #pickerDefinitionPromise = null;
   #gradient = {
     type: "linear",
     angle: 90,
@@ -11031,11 +11061,22 @@ class FigInputGradient extends HTMLElement {
   connectedCallback() {
     this.#parseValue();
     this.#render();
+    this.#renderPickerWhenAvailable();
     this.removeEventListener("keydown", this.#onPickerKeyDown);
     this.addEventListener("keydown", this.#onPickerKeyDown);
     if (this.#isEditable) document.addEventListener("keydown", this.#onKeyDown);
   }
 
+  #renderPickerWhenAvailable() {
+    if (this.#editMode !== "picker" || hasFigFillPicker()) return;
+    this.#pickerDefinitionPromise ??= customElements
+      .whenDefined("fig-fill-picker")
+      .then(() => {
+        if (!this.isConnected || this.#editMode !== "picker") return;
+        this.#render();
+      });
+  }
+
   disconnectedCallback() {
     document.removeEventListener("keydown", this.#onKeyDown);
     this.removeEventListener("keydown", this.#onPickerKeyDown);
@@ -11822,6 +11863,7 @@ class FigInputGradient extends HTMLElement {
         break;
       case "edit":
         this.#render();
+        this.#renderPickerWhenAvailable();
         if (this.#isEditable) {
           document.addEventListener("keydown", this.#onKeyDown);
         } else {

package/package.json

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