@rogieking/figui3 9.0.8 → 9.0.10

package/fig-editor.css

@@ -318,7 +318,7 @@ fig-fill-picker {
     grid-template-columns: unset;
     grid-template-areas: unset;
     padding-right: var(--spacer-2);
-    padding-left: var(--spacer-3);
+    padding-left: var(--spacer-2);
     gap: var(--spacer-2);
 
     > *:not(.fig-field-chevron):not(label) {

package/fig-editor.js

@@ -495,6 +495,7 @@ figEditorDefineElement("fig-select-options", FigSelectOptions);
  * A dropdown-styled select.
  * @attr {string} variant - Visual style. Use `ghost` for a borderless control.
  * @attr {string} size - Control size. Use `large` for a 32px-tall control.
+ * @event optionfocus - Fires with the focused option value during open-menu keyboard navigation.
  */
 class FigSelect extends HTMLElement {
   #button = null;
@@ -1467,20 +1468,20 @@ class FigSelect extends HTMLElement {
       case "ArrowDown":
         e.preventDefault();
         this.#syncFocusedIndex();
-        this.#focusOptionAt(this.#focusedIndex + 1);
+        this.#focusOptionAt(this.#focusedIndex + 1, true);
         break;
       case "ArrowUp":
         e.preventDefault();
         this.#syncFocusedIndex();
-        this.#focusOptionAt(this.#focusedIndex - 1);
+        this.#focusOptionAt(this.#focusedIndex - 1, true);
         break;
       case "Home":
         e.preventDefault();
-        this.#focusOptionAt(0);
+        this.#focusOptionAt(0, true);
         break;
       case "End":
         e.preventDefault();
-        this.#focusOptionAt(options.length - 1);
+        this.#focusOptionAt(options.length - 1, true);
         break;
       case "Escape":
         e.preventDefault();
@@ -1529,12 +1530,23 @@ class FigSelect extends HTMLElement {
     this.#focusedIndex = index >= 0 ? index : this.#focusedIndex;
   }
 
-  #focusOptionAt(index) {
+  #focusOptionAt(index, emitEvent = false) {
     const options = this.#getEnabledOptions();
     if (!options.length) return;
     const next = ((index % options.length) + options.length) % options.length;
+    const option = options[next];
+    const changed = document.activeElement !== option;
     this.#focusedIndex = next;
-    options[next]?.focus();
+    option?.focus();
+    if (emitEvent && changed) {
+      this.dispatchEvent(
+        new CustomEvent("optionfocus", {
+          detail: this.#optionValue(option),
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
   }
 
   #syncPopupWidth() {
@@ -3505,6 +3517,7 @@ class FigFillPicker extends HTMLElement {
         className: "fig-fill-picker-gradient-type",
         label: "Gradient type",
         value: this.#gradient.type,
+        variant: "ghost",
       },
       figEditorCreateElement(
         "fig-select-options",
@@ -3591,7 +3604,7 @@ class FigFillPicker extends HTMLElement {
             className: "fig-fill-picker-gradient-stops-header",
             borderless: true,
           },
-          [figEditorCreateElement("span", {}, "Stops"), addButton],
+          [figEditorCreateElement("h3", {}, "Stops"), addButton],
         ),
         figEditorCreateElement(
           "div",

package/fig.js

@@ -18978,6 +18978,7 @@ class FigHandle extends HTMLElement {
     this.#syncDrag();
     this.#syncHitArea();
     this.addEventListener("click", this.#handleSelect);
+    this.addEventListener("blur", this.#handleBlur);
     document.addEventListener("pointerdown", this.#handleDeselect);
     document.addEventListener("keydown", this.#handleKeyDown);
     const initial = this.getAttribute("value");
@@ -18995,6 +18996,7 @@ class FigHandle extends HTMLElement {
       this.#hitAreaEl = null;
     }
     this.removeEventListener("click", this.#handleSelect);
+    this.removeEventListener("blur", this.#handleBlur);
     document.removeEventListener("pointerdown", this.#handleDeselect);
     document.removeEventListener("keydown", this.#handleKeyDown);
   }
@@ -19029,7 +19031,12 @@ class FigHandle extends HTMLElement {
     this.deselect();
   };
 
+  #handleBlur = () => {
+    this.removeAttribute("data-fig-pointer-focus");
+  };
+
   #handleKeyDown = (e) => {
+    this.removeAttribute("data-fig-pointer-focus");
     if (e.defaultPrevented) return;
     if (
       e.target === this &&
@@ -19215,6 +19222,7 @@ class FigHandle extends HTMLElement {
   #onPointerDown(e) {
     if (!this.#dragEnabled || figBooleanAttribute(this, "disabled")) return;
     e.preventDefault();
+    this.setAttribute("data-fig-pointer-focus", "");
     this.focus();
     this.select();
     const container = this.#getContainer();

package/package.json

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