@rogieking/figui3 8.9.20 → 8.9.21

package/fig-editor.js

@@ -2228,6 +2228,8 @@ class FigFillPicker extends HTMLElement {
     if (this.#isDisabled()) return;
     if (!this.#dialog) {
       this.#createDialog();
+    } else {
+      this.#dialog.anchor = this.anchorElement || this.#trigger;
     }
 
     this.#valueAtOpen = JSON.stringify(this.value);

package/fig-lab.css

@@ -658,20 +658,41 @@ propskit-gradient {
 }
 
 :is(propskit-color, propskit-fill, propskit-gradient) {
+  outline: none;
+
   fig-field:not([direction="vertical"]) {
     outline: none;
+  }
 
-    &:focus-within {
-      outline: var(--figma-focus-outline);
-      outline-offset: var(--figma-focus-outline-offset);
+  &:focus-within fig-field:not([direction="vertical"]),
+  &.has-popup-open fig-field:not([direction="vertical"]) {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  /* Same split as fig-input-gradient: chrome outlines, inner focus does not. */
+  :is(fig-swatch, fig-chit, fig-input-gradient, fig-input-fill, fig-fill-picker) {
+    --selected: 0 !important;
+
+    &:hover,
+    &:focus,
+    &:active {
+      outline: 0 !important;
     }
 
-    :is(fig-swatch, fig-input-gradient, fig-input-fill, fig-fill-picker) {
-      &:is(:hover, :focus, :focus-visible, :focus-within),
-      &.has-popup-open {
-        outline: none !important;
-      }
+    &:focus-within:not(:focus) {
+      outline: 0 !important;
     }
+
+    &:focus-within:not(:focus) :is(input, fig-swatch, fig-chit) {
+      outline: 0 !important;
+      outline-offset: 0 !important;
+    }
+  }
+
+  input[type="color"]:is(:focus, :focus-visible) {
+    outline: 0 !important;
+    outline-offset: 0 !important;
   }
 }
 

package/fig-lab.js

@@ -922,6 +922,7 @@ class PropskitColor extends HTMLElement {
     const label = customLabel || document.createElement("label");
     const picker = document.createElement("fig-fill-picker");
     const swatch = document.createElement("fig-swatch");
+    picker.anchorElement = this;
     picker.append(swatch);
     swatch.setAttribute("tabindex", "0");
     for (const node of initialChildren) {
@@ -1278,6 +1279,7 @@ class PropskitFill extends HTMLElement {
     const label = customLabel || document.createElement("label");
     const picker = document.createElement("fig-fill-picker");
     const swatch = document.createElement("fig-swatch");
+    picker.anchorElement = this;
     picker.append(swatch);
     swatch.setAttribute("tabindex", "0");
     for (const node of initialChildren) {
@@ -1646,6 +1648,7 @@ class PropskitGradient extends HTMLElement {
     const field = document.createElement("fig-field");
     const label = customLabel || document.createElement("label");
     const input = document.createElement("fig-input-gradient");
+    input.anchorElement = this;
 
     field.append(label, input);
     this.#field = field;

package/fig.js

@@ -10363,6 +10363,7 @@ class FigInputGradient extends HTMLElement {
   #colorObserver = null;
   #repositionRAF = null;
   #pickerDefinitionPromise = null;
+  anchorElement = null;
   #gradient = {
     type: "linear",
     angle: 90,
@@ -10733,7 +10734,7 @@ class FigInputGradient extends HTMLElement {
   #setupPickerEvents() {
     const picker = this.querySelector("fig-fill-picker");
     if (!picker) return;
-    picker.anchorElement = this;
+    picker.anchorElement = this.anchorElement || this;
 
     const syncFromPicker = (e) => {
       e.stopPropagation();

package/package.json

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