@rogieking/figui3 6.18.0 → 6.18.2

package/fig-lab.css

@@ -168,6 +168,11 @@ propskit-color {
       background-color: transparent;
       box-shadow: none;
 
+      /* Field ::after owns hover chrome — don't double-outline the color control. */
+      &:hover:not(:focus):not(:focus-within):not(.has-popup-open) {
+        outline: none !important;
+      }
+
       > .input-combo {
         flex: 0 0 auto;
         width: auto;
@@ -1299,7 +1304,8 @@ fig-select::part(listbox) {
 
   z-index: var(--z-index);
   position: fixed;
-  inset: auto;
+  /* Do not set inset here — ::part inset beats inline left/top and
+     prevents edge clamping from moving the menu back into view. */
   margin: 0;
   border: 0;
   outline: 0;

package/fig-lab.js

@@ -5354,16 +5354,26 @@ class FigSelect extends HTMLElement {
     let left = labelRect.left - selectedOffsetX;
     let top = labelRect.top - selectedOffsetY;
 
+    // Keep the whole menu in-view when aligning over the selected option
+    // would otherwise push it past a viewport edge (corners / far sides).
     const margins = this.#getViewportMargins();
-    const minLeft = margins.left;
-    const minTop = margins.top;
-    const maxLeft = window.innerWidth - popupRect.width - margins.right;
-    const maxTop = window.innerHeight - popupRect.height - margins.bottom;
-    left = Math.min(Math.max(left, minLeft), Math.max(minLeft, maxLeft));
-    top = Math.min(Math.max(top, minTop), Math.max(minTop, maxTop));
-
-    popup.style.left = `${Math.round(left)}px`;
-    popup.style.top = `${Math.round(top)}px`;
+    if (typeof popup.clampToViewport === "function") {
+      ({ left, top } = popup.clampToViewport({ left, top }, popupRect, margins));
+    } else {
+      const minLeft = margins.left;
+      const minTop = margins.top;
+      const maxLeft = window.innerWidth - popupRect.width - margins.right;
+      const maxTop = window.innerHeight - popupRect.height - margins.bottom;
+      left = Math.min(Math.max(left, minLeft), Math.max(minLeft, maxLeft));
+      top = Math.min(Math.max(top, minTop), Math.max(minTop, maxTop));
+    }
+
+    // !important: fig-select::part(listbox) and dialog UA rules can otherwise
+    // keep the menu at its static/anchor position past the viewport edge.
+    popup.style.setProperty("right", "auto", "important");
+    popup.style.setProperty("bottom", "auto", "important");
+    popup.style.setProperty("left", `${Math.round(left)}px`, "important");
+    popup.style.setProperty("top", `${Math.round(top)}px`, "important");
 
     // Nudge the panel scroller so the selected label stays over the trigger.
     const panel = this.#getPanel();

package/fig.js

@@ -1600,6 +1600,11 @@ class FigDialog extends HTMLDialogElement {
 
     this._ensureHeader();
 
+    // Markup `<dialog open>` (non-modal) never calls show() — still need a stack bump.
+    if (this.open && !this.matches?.(":modal")) {
+      this._assignStackingOrder();
+    }
+
     figNextFrame(this, () => {
       this._addCloseListeners();
       this._setupDragListeners();
@@ -1641,18 +1646,37 @@ class FigDialog extends HTMLDialogElement {
     requestAnimationFrame(() => target.focus?.());
   }
 
+  _assignStackingOrder() {
+    this.style.zIndex = String(figGetHighestZIndex() + 1);
+  }
+
+  _clearStackingOrder() {
+    this.style.zIndex = "";
+  }
+
   show() {
     this._captureFocusBeforeOpen();
+    // Non-modal dialogs are position:fixed in normal paint order — bump above
+    // other FigUI overlays (same helper as fig-popup).
+    this._assignStackingOrder();
     this.addEventListener("close", this._boundRestoreFocus, { once: true });
     return super.show();
   }
 
   showModal() {
     this._captureFocusBeforeOpen();
+    // Top layer owns stacking; clear any prior non-modal inline z-index.
+    this._clearStackingOrder();
     this.addEventListener("close", this._boundRestoreFocus, { once: true });
     return super.showModal();
   }
 
+  close(...args) {
+    const result = super.close(...args);
+    this._clearStackingOrder();
+    return result;
+  }
+
   _handleIframeMouseLeave(event) {
     const iframe = event?.currentTarget;
     if (!(iframe instanceof HTMLIFrameElement)) return;

package/package.json

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