@rogieking/figui3 9.0.11 → 9.0.13

package/fig-editor.js

@@ -495,6 +495,8 @@ 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.
+ * @attr {string} menu-anchor - CSS selector for an alternate menu anchor.
+ * @property {Element|string|null} menuAnchor - Alternate menu anchor element or selector.
  * @event optionfocus - Fires with the focused option value during open-menu keyboard navigation.
  */
 class FigSelect extends HTMLElement {
@@ -521,6 +523,7 @@ class FigSelect extends HTMLElement {
   #frozenLabelRect = null;
   #frozenViewport = null;
   #syncingOptions = false;
+  #menuAnchorRef = null;
   #boundTriggerClick = this.#handleTriggerClick.bind(this);
   #boundOptionClick = this.#handleOptionClick.bind(this);
   #boundOptionPointerOver = this.#handleOptionPointerOver.bind(this);
@@ -540,6 +543,7 @@ class FigSelect extends HTMLElement {
       "open",
       "variant",
       "size",
+      "menu-anchor",
       "aria-label",
     ];
   }
@@ -562,6 +566,26 @@ class FigSelect extends HTMLElement {
     else this.removeAttribute("open");
   }
 
+  get menuAnchor() {
+    return this.#menuAnchorRef ?? this.getAttribute("menu-anchor");
+  }
+
+  set menuAnchor(value) {
+    if (value instanceof Element) {
+      if (this.hasAttribute("menu-anchor")) {
+        this.removeAttribute("menu-anchor");
+      }
+      this.#menuAnchorRef = value;
+    } else if (typeof value === "string" && value.trim()) {
+      this.#menuAnchorRef = null;
+      this.setAttribute("menu-anchor", value);
+    } else {
+      this.#menuAnchorRef = null;
+      this.removeAttribute("menu-anchor");
+    }
+    this.#syncMenuAnchor();
+  }
+
   connectedCallback() {
     if (!this.#initialized) this.#initialize();
     this.#ensurePanelSlotAttrs();
@@ -606,8 +630,14 @@ class FigSelect extends HTMLElement {
       else this.#openList();
       return;
     }
+    if (name === "menu-anchor") {
+      this.#menuAnchorRef = null;
+      this.#syncMenuAnchor();
+      return;
+    }
     if (name === "position" || name === "offset" || name === "closedby") {
       this.#syncPopupAttrs();
+      if (this.open) this.#placeOpenMenu();
     }
   }
 
@@ -875,7 +905,7 @@ class FigSelect extends HTMLElement {
     this.#labelEl = labelEl;
     this.#popup = popup;
     this.#panelSlot = panelSlot;
-    popup.anchor = button;
+    this.#syncMenuAnchor();
 
     this.#ensurePanelSlotAttrs();
     this.#installPopupPositioning();
@@ -897,7 +927,7 @@ class FigSelect extends HTMLElement {
         this.#originalPositionPopup?.();
         return;
       }
-      this.#positionPopupOverSelected();
+      this.#placeOpenMenu();
     };
     this.#popupPositionPatched = true;
   }
@@ -920,6 +950,60 @@ class FigSelect extends HTMLElement {
     return { top: 8, right: 8, bottom: 8, left: 8 };
   }
 
+  #resolveExplicitMenuAnchor() {
+    if (this.#menuAnchorRef?.isConnected) return this.#menuAnchorRef;
+
+    const selector = this.getAttribute("menu-anchor");
+    if (selector) {
+      try {
+        const localMatch = this.parentElement?.querySelector(selector);
+        if (
+          localMatch &&
+          localMatch !== this &&
+          !this.contains(localMatch)
+        ) {
+          return localMatch;
+        }
+
+        const root = this.getRootNode();
+        const rootMatch = root?.querySelector?.(selector);
+        if (
+          rootMatch &&
+          rootMatch !== this &&
+          !this.contains(rootMatch)
+        ) {
+          return rootMatch;
+        }
+      } catch {}
+    }
+
+    return null;
+  }
+
+  #resolveMenuAnchor() {
+    return this.#resolveExplicitMenuAnchor() || this.#button;
+  }
+
+  #hasMenuAnchor() {
+    return Boolean(this.#resolveExplicitMenuAnchor());
+  }
+
+  #usesMenuAnchorOverlayGeometry() {
+    return !this.#usesExplicitPosition() && this.#hasMenuAnchor();
+  }
+
+  #syncMenuAnchor() {
+    if (!this.#popup) return;
+    this.#popup.anchor = this.#resolveMenuAnchor();
+    this.#syncPopupWidth();
+    if (!this.open) return;
+    this.#freezeMenuPosition = false;
+    this.#frozenLabelRect = null;
+    this.#frozenViewport = null;
+    this.#popup.setupObservers?.();
+    this.#popup.queueReposition?.();
+  }
+
   #getTriggerAlignmentRect() {
     const labelRect = this.#labelEl?.getBoundingClientRect();
     if (labelRect?.width && labelRect?.height) return labelRect;
@@ -933,7 +1017,11 @@ class FigSelect extends HTMLElement {
   }
 
   #readLabelRectSnapshot() {
-    const rect = this.#getTriggerAlignmentRect();
+    const anchor = this.#usesMenuAnchorOverlayGeometry()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
+    const rect = anchor?.getBoundingClientRect() ??
+      this.#getTriggerAlignmentRect();
     if (!rect) return null;
     return {
       x: rect.x,
@@ -995,10 +1083,99 @@ class FigSelect extends HTMLElement {
     this.#frozenViewport = this.#readViewportSnapshot();
   }
 
+  #usesExplicitPosition() {
+    const value = this.getAttribute("position");
+    return Boolean(value && value.trim());
+  }
+
+  #clearOverlayPositionStyles() {
+    if (!this.#popup) return;
+    this.#popup.style.removeProperty("left");
+    this.#popup.style.removeProperty("top");
+    this.#popup.style.removeProperty("right");
+    this.#popup.style.removeProperty("bottom");
+  }
+
+  #placeOpenMenu() {
+    if (this.#usesExplicitPosition()) {
+      this.#freezeMenuPosition = false;
+      this.#frozenLabelRect = null;
+      this.#frozenViewport = null;
+      this.#syncPopupWidth();
+      this.#clearOverlayPositionStyles();
+      if (this.#positionExplicitMenuAnchor()) return;
+      this.#originalPositionPopup?.();
+      this.#clampMenuToViewport();
+      return;
+    }
+    this.#positionPopupOverSelected();
+  }
+
+  #positionExplicitMenuAnchor() {
+    const popup = this.#popup;
+    const menuAnchor = this.#resolveExplicitMenuAnchor();
+    if (
+      !popup ||
+      !menuAnchor ||
+      typeof popup.parsePosition !== "function" ||
+      typeof popup.parseOffset !== "function" ||
+      typeof popup.computeCoords !== "function"
+    ) {
+      return false;
+    }
+
+    const popupRect = popup.getBoundingClientRect();
+    const anchorRect = menuAnchor.getBoundingClientRect();
+    if (!popupRect.width || !popupRect.height) return false;
+    const { vertical, horizontal, shorthand } = popup.parsePosition();
+    const offset = popup.parseOffset();
+    let { left, top } = popup.computeCoords(
+      anchorRect,
+      popupRect,
+      vertical,
+      horizontal,
+      offset,
+      shorthand,
+    );
+    const margins = this.#getViewportMargins();
+    if (typeof popup.clampToViewport === "function") {
+      ({ left, top } = popup.clampToViewport(
+        { left, top },
+        popupRect,
+        margins,
+      ));
+    }
+    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");
+    return true;
+  }
+
+  #clampMenuToViewport() {
+    const popup = this.#popup;
+    if (!popup || typeof popup.clampToViewport !== "function") return;
+    const popupRect = popup.getBoundingClientRect();
+    if (!popupRect.width || !popupRect.height) return;
+    const margins = this.#getViewportMargins();
+    const { left, top } = popup.clampToViewport(
+      { left: popupRect.left, top: popupRect.top },
+      popupRect,
+      margins,
+    );
+    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");
+  }
+
   #positionPopupOverSelected() {
     // Content ResizeObserver / overflow scroll re-enter here; keep the
     // open-time alignment unless the trigger or viewport actually changed.
-    if (this.#shouldSkipFrozenPositionPass()) return;
+    if (this.#shouldSkipFrozenPositionPass()) {
+      this.#clampMenuToViewport();
+      return;
+    }
 
     const popup = this.#popup;
     const label = this.#labelEl;
@@ -1016,30 +1193,46 @@ class FigSelect extends HTMLElement {
       return;
     }
 
+    const menuAnchor = this.#usesMenuAnchorOverlayGeometry()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
+    if (menuAnchor) this.#syncPopupWidth();
+
     // Lay out with the default positioning first so option metrics are valid.
     this.#originalPositionPopup?.();
 
     const popupRect = popup.getBoundingClientRect();
-    const labelRect = this.#getTriggerAlignmentRect();
-    const optionTextRect = this.#getOptionTextRect(selected);
-    if (
-      !popupRect.width ||
-      !popupRect.height ||
-      !labelRect.width ||
-      !optionTextRect
-    ) {
+    const selectedOptionRect = selected.getBoundingClientRect();
+    if (!popupRect.width || !popupRect.height || !selectedOptionRect.height) {
       return;
     }
 
-    const selectedOffsetX = optionTextRect.left - popupRect.left;
-    const selectedOffsetY = optionTextRect.top - popupRect.top;
-    const full = figEditorBooleanAttribute(this, "full");
-    // [full]: pin menu to host width/edges. Otherwise overlay selected
-    // option text on the trigger label (blend-mode style).
-    let left = full
-      ? this.getBoundingClientRect().left
-      : labelRect.left - selectedOffsetX;
-    let top = labelRect.top - selectedOffsetY;
+    let left;
+    let top;
+    let alignmentRect;
+    if (menuAnchor) {
+      const anchorRect = menuAnchor.getBoundingClientRect();
+      alignmentRect = anchorRect;
+      left = anchorRect.left + (anchorRect.width - popupRect.width) / 2;
+      top =
+        anchorRect.top +
+        (anchorRect.height - selectedOptionRect.height) / 2 -
+        (selectedOptionRect.top - popupRect.top);
+    } else {
+      const labelRect = this.#getTriggerAlignmentRect();
+      const optionTextRect = this.#getOptionTextRect(selected);
+      if (!labelRect?.width || !optionTextRect) return;
+      alignmentRect = labelRect;
+      const selectedOffsetX = optionTextRect.left - popupRect.left;
+      const selectedOffsetY = optionTextRect.top - popupRect.top;
+      const full = figEditorBooleanAttribute(this, "full");
+      // [full]: pin menu to host width/edges. Otherwise overlay selected
+      // option text on the trigger label (blend-mode style).
+      left = full
+        ? this.getBoundingClientRect().left
+        : labelRect.left - selectedOffsetX;
+      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).
@@ -1062,15 +1255,24 @@ class FigSelect extends HTMLElement {
     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.
+    // If the panel scrolls, keep the selected row centered over a menu anchor.
+    // Standard selects retain text-to-trigger alignment.
     const panel = this.#getPanel();
-    const alignedTextRect = this.#getOptionTextRect(selected);
+    const alignedOptionRect = selected.getBoundingClientRect();
+    const alignedTextRect = menuAnchor
+      ? null
+      : this.#getOptionTextRect(selected);
     if (
-      alignedTextRect &&
       panel &&
       panel.scrollHeight > panel.clientHeight + 1
     ) {
-      const deltaY = alignedTextRect.top - labelRect.top;
+      const deltaY = menuAnchor
+        ? alignedOptionRect.top +
+          alignedOptionRect.height / 2 -
+          (alignmentRect.top + alignmentRect.height / 2)
+        : alignedTextRect
+          ? alignedTextRect.top - alignmentRect.top
+          : 0;
       if (Math.abs(deltaY) > 0.5) {
         panel.scrollTop += deltaY;
       }
@@ -1395,9 +1597,7 @@ class FigSelect extends HTMLElement {
     e.preventDefault();
     e.stopPropagation();
     const nextOpen = !this.open;
-    if (nextOpen && this.#popup && this.#button) {
-      this.#popup.anchor = this.#button;
-    }
+    if (nextOpen) this.#syncMenuAnchor();
     this.open = nextOpen;
   }
 
@@ -1448,7 +1648,7 @@ class FigSelect extends HTMLElement {
         (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")
       ) {
         e.preventDefault();
-        if (this.#popup && this.#button) this.#popup.anchor = this.#button;
+        this.#syncMenuAnchor();
         this.open = true;
         requestAnimationFrame(() => {
           const options = this.#getOptions({ enabledOnly: true });
@@ -1554,21 +1754,66 @@ class FigSelect extends HTMLElement {
     const hostWidth = Math.ceil(this.getBoundingClientRect().width);
     const triggerWidth = Math.ceil(this.#button.getBoundingClientRect().width);
     const anchorWidth = Math.max(hostWidth, triggerWidth, 96);
+    const menuAnchor = this.#hasMenuAnchor()
+      ? this.#resolveExplicitMenuAnchor()
+      : null;
 
     // Use !important — fig-select::part(listbox) width rules beat element.style.
     // Menus size to their options while remaining at least as wide as the trigger.
-    this.#popup.style.setProperty("width", "max-content", "important");
-    this.#popup.style.setProperty("min-width", `${anchorWidth}px`, "important");
-    this.#popup.style.setProperty(
-      "max-width",
-      "min(20rem, calc(100vw - 1rem))",
-      "important",
+    const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+    const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+    const rem =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const maxWidth = Math.max(
+      0,
+      Math.min(Math.floor(20 * rem), Math.floor(viewportWidth - 16)),
     );
+    const maxHeight = Math.max(0, Math.floor(viewportHeight - 16));
+    this.#popup.style.setProperty("box-sizing", "border-box", "important");
+    this.#popup.style.setProperty("padding", "0", "important");
+    this.#popup.style.setProperty("border", "0", "important");
+    this.#popup.style.setProperty("margin", "0", "important");
+    if (menuAnchor) {
+      const requestedWidth = menuAnchor.getBoundingClientRect().width;
+      // Match a normal anchor exactly. If that would make the menu narrower
+      // than its usable trigger/content width, keep the wider menu. Default
+      // overlay centers it; explicit position applies its requested alignment.
+      this.#popup.style.setProperty("width", "max-content", "important");
+      this.#popup.style.setProperty("min-width", "0", "important");
+      this.#popup.style.setProperty("max-width", `${maxWidth}px`, "important");
+      const intrinsicWidth = this.#popup.getBoundingClientRect().width;
+      const minimumWidth = Math.min(
+        maxWidth,
+        Math.max(anchorWidth, intrinsicWidth),
+      );
+      const width = Math.max(requestedWidth, minimumWidth);
+      this.#popup.style.setProperty("width", `${width}px`, "important");
+      this.#popup.style.setProperty("min-width", `${width}px`, "important");
+      this.#popup.style.setProperty("max-width", `${width}px`, "important");
+    } else {
+      this.#popup.style.setProperty(
+        "width",
+        "max-content",
+        "important",
+      );
+      this.#popup.style.setProperty("min-width", `${anchorWidth}px`, "important");
+      this.#popup.style.setProperty("max-width", `${maxWidth}px`, "important");
+    }
+    this.#popup.style.setProperty("max-height", `${maxHeight}px`, "important");
+    this.#popup.style.setProperty("height", "max-content", "important");
+    this.#popup.style.setProperty("overflow", "hidden", "important");
+    const used = this.#popup.getBoundingClientRect();
+    if (used.height > maxHeight) {
+      this.#popup.style.setProperty("height", `${maxHeight}px`, "important");
+    }
+    if (!menuAnchor && used.width > maxWidth) {
+      this.#popup.style.setProperty("width", `${maxWidth}px`, "important");
+    }
   }
 
   #openList() {
     if (!this.#popup || figEditorBooleanAttribute(this, "disabled")) return;
-    if (this.#button) this.#popup.anchor = this.#button;
+    this.#syncMenuAnchor();
     this.#installPopupPositioning();
     this.#freezeMenuPosition = false;
     this.#frozenLabelRect = null;
@@ -1580,26 +1825,33 @@ class FigSelect extends HTMLElement {
     this.#button?.setAttribute("aria-expanded", "true");
     this.#focusedIndex = -1;
     requestAnimationFrame(() => {
-      this.#syncPopupWidth();
-      this.#positionPopupOverSelected();
-      const panel = this.#getPanel();
-      const options = this.#getEnabledOptions();
-      const selectedIndex = options.findIndex(
-        (opt) => this.#optionValue(opt) === this.value,
-      );
-      if (selectedIndex >= 0) {
-        this.#focusOptionAt(selectedIndex);
-      } else if (
-        this.#button?.hasAttribute("data-focus-visible") ||
-        this.#button?.matches?.(":focus-visible")
-      ) {
-        this.#focusOptionAt(0);
-      }
-      panel?.syncOverflow?.();
-      // Freeze after open align so later positionPopup passes don't undo scroll.
-      // Window resize / trigger movement still realigns via geometry checks.
-      this.#freezeMenuPosition = true;
-      this.#rememberFrozenGeometry();
+      requestAnimationFrame(() => {
+        this.#syncPopupWidth();
+        this.#placeOpenMenu();
+        this.#syncPopupWidth();
+        this.#clampMenuToViewport();
+        const panel = this.#getPanel();
+        const options = this.#getEnabledOptions();
+        const selectedIndex = options.findIndex(
+          (opt) => this.#optionValue(opt) === this.value,
+        );
+        if (selectedIndex >= 0) {
+          this.#focusOptionAt(selectedIndex);
+        } else if (
+          this.#button?.hasAttribute("data-focus-visible") ||
+          this.#button?.matches?.(":focus-visible")
+        ) {
+          this.#focusOptionAt(0);
+        }
+        panel?.syncOverflow?.();
+        // Freeze overlay after layout settles so later positionPopup passes
+        // don't undo scroll. Still clamp if content grows past the viewport.
+        // Explicit position stays live so the popup can follow the anchor.
+        if (!this.#usesExplicitPosition()) {
+          this.#freezeMenuPosition = true;
+          this.#rememberFrozenGeometry();
+        }
+      });
     });
   }
 

package/fig.js

@@ -318,6 +318,10 @@ fig-select-options > .fig-overflow-end::before,
 .fig-menu-options > .fig-overflow-end::before {
   border-radius: 0 0 var(--radius-large) var(--radius-large);
 }
+fig-select-options.overflow-start > :is(fig-separator, fig-menu-separator)[sticky]:not([sticky="false"]),
+.fig-menu-options.overflow-start > :is(fig-separator, fig-menu-separator)[sticky]:not([sticky="false"]) {
+  top: var(--fig-vertical-overflow-size, var(--spacer-4)) !important;
+}
 `;
 
 const FIG_SHADOW_ICON_CSS = `
@@ -3933,10 +3937,12 @@ class FigPopup extends HTMLDialogElement {
     const bounds = this.getViewportBounds(m);
     const maxLeft = bounds.maxRight - popupRect.width;
     const maxTop = bounds.maxBottom - popupRect.height;
+    const clampLeftMax = Math.max(bounds.minLeft, maxLeft);
+    const clampTopMax = Math.max(bounds.minTop, maxTop);
 
     return {
-      left: Math.min(maxLeft, Math.max(bounds.minLeft, coords.left)),
-      top: Math.min(maxTop, Math.max(bounds.minTop, coords.top)),
+      left: Math.min(clampLeftMax, Math.max(bounds.minLeft, coords.left)),
+      top: Math.min(clampTopMax, Math.max(bounds.minTop, coords.top)),
     };
   }
 

package/package.json

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