@rogieking/figui3 11.4.0 → 11.4.2

package/fig-editor.css

@@ -141,13 +141,9 @@ dialog[is="fig-toast"] {
 
 /* Palette Editor */
 .fig-palette-editor-popup {
-  width: 15rem;
+  width: 12rem;
   padding: 0;
   pointer-events: auto;
-
-  & > fig-content {
-    padding-top: 0;
-  }
 }
 
 fig-palette-editor {

package/fig-editor.js

@@ -539,6 +539,17 @@ class FigPaletteEditor extends HTMLElement {
     this.#emit("change");
   };
 
+  #focusColorValue(index) {
+    requestAnimationFrame(() => {
+      if (!this.isConnected) return;
+      const input = this.querySelector(
+        `.fig-palette-editor-color-row[data-index="${index}"] .fig-palette-editor-color fig-input-text input`,
+      );
+      input?.focus();
+      input?.select();
+    });
+  }
+
   #render() {
     const reorder = figEditorCreateElement(
       "fig-reorder",
@@ -567,6 +578,7 @@ class FigPaletteEditor extends HTMLElement {
       );
       addButton.addEventListener("click", () => {
         if (this.#disabled || this.#colors.length >= this.#max) return;
+        const addedIndex = this.#colors.length;
         this.#colors.push(
           figEditorAveragePaletteEntries(
             this.#colors.at(-2),
@@ -577,6 +589,7 @@ class FigPaletteEditor extends HTMLElement {
         this.#render();
         this.#emit("input");
         this.#emit("change");
+        this.#focusColorValue(addedIndex);
       });
       children.push(figEditorCreateElement("fig-field", {}, addButton));
     }

package/fig.js

@@ -11181,9 +11181,9 @@ class FigInputPalette extends HTMLElement {
 
     const popup = document.createElement("dialog", { is: "fig-popup" });
     popup.setAttribute("is", "fig-popup");
-    popup.setAttribute("title", "Edit palette");
-    popup.setAttribute("position", "center left");
-    popup.setAttribute("offset", "8 0");
+    popup.setAttribute("aria-label", "Edit palette");
+    popup.setAttribute("position", "bottom left");
+    popup.setAttribute("offset", "0 8");
     popup.setAttribute("viewport-margin", "8");
     popup.setAttribute("popover", "manual");
     popup.className = "fig-palette-editor-popup";
@@ -11224,9 +11224,6 @@ class FigInputPalette extends HTMLElement {
     popup.addEventListener("toggle", this.#boundPickerClosed);
 
     (figGetOverlayRoot() ?? document.body).append(popup);
-    popup
-      .querySelector(":scope > fig-header")
-      ?.setAttribute("borderless", "");
     this.#pickerPopup = popup;
     this.#pickerEditor = editor;
     this.querySelector(".palette-colors-inline")?.setAttribute(

package/package.json

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