@rogieking/figui3 6.17.0 → 6.18.1

package/fig-lab.css

@@ -276,10 +276,6 @@ propskit-select {
       background: transparent;
       box-shadow: none;
 
-      &::after {
-        right: 0;
-      }
-
       --fig-select-trigger-width: auto;
     }
   }
@@ -644,6 +640,14 @@ propskit-slider {
 
       &[type="stepper"] {
         --slider-thumb-travel-offset: 0px;
+        datalist{
+          opacity: 0;
+        }
+        &:hover, &:focus-within {
+          datalist{
+            opacity: 1;
+          }
+        }
       }
 
       &[type="stepper"] .fig-slider-input-container input[type="range"] {
@@ -1258,6 +1262,8 @@ fig-select {
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
+    color: var(--figma-color-text-tertiary);
+
     &::after {
       background-color: var(--figma-color-icon-disabled);
     }
@@ -1293,7 +1299,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

@@ -455,7 +455,7 @@ class PropskitSelect extends HTMLElement {
   #boundHandleClick = this.#handleClick.bind(this);
 
   static get observedAttributes() {
-    return ["label", "direction", "aria-label"];
+    return ["label", "direction", "aria-label", "options", "value"];
   }
 
   connectedCallback() {
@@ -473,10 +473,11 @@ class PropskitSelect extends HTMLElement {
 
         for (const mutation of mutations) {
           if (mutation.type !== "attributes") continue;
+          const name = mutation.attributeName;
           if (
-            mutation.attributeName === "label" ||
-            mutation.attributeName === "direction" ||
-            mutation.attributeName === "aria-label"
+            name === "label" ||
+            name === "direction" ||
+            name === "aria-label"
           ) {
             syncField = true;
           } else {
@@ -502,34 +503,18 @@ class PropskitSelect extends HTMLElement {
     if (oldValue === newValue || !this.#field) return;
     if (name === "label" || name === "direction" || name === "aria-label") {
       this.#syncField();
+      return;
+    }
+    if (name === "options" || name === "value") {
+      this.#syncSelectAttributes();
     }
   }
 
   #initialize() {
-    const initialChildren = Array.from(this.childNodes).filter(
-      (node) =>
-        node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()),
-    );
-    const customLabel = initialChildren.find(
-      (node) => node.nodeType === Node.ELEMENT_NODE && node.matches("label"),
-    );
+    const customLabel = this.querySelector(":scope > label");
     const field = document.createElement("fig-field");
     const label = customLabel || document.createElement("label");
     const select = document.createElement("fig-select");
-    const existingPanel = initialChildren.find(
-      (node) =>
-        node.nodeType === Node.ELEMENT_NODE &&
-        node.tagName === "FIG-SELECT-OPTIONS",
-    );
-    const panel =
-      existingPanel || document.createElement("fig-select-options");
-    panel.setAttribute("slot", "panel");
-
-    for (const node of initialChildren) {
-      if (node === customLabel || node === existingPanel) continue;
-      panel.appendChild(node);
-    }
-    select.append(panel);
     field.append(label, select);
     this.#field = field;
     this.#label = label;
@@ -586,7 +571,14 @@ class PropskitSelect extends HTMLElement {
 
   #syncSelectAttributes() {
     if (!this.#select) return;
-    const selectAttrs = this.#getForwardedSelectAttrNames();
+    const selectAttrs = this.#getForwardedSelectAttrNames().sort((a, b) => {
+      // Build options before applying value so fig-select can resolve selection.
+      if (a === "options") return -1;
+      if (b === "options") return 1;
+      if (a === "value") return 1;
+      if (b === "value") return -1;
+      return 0;
+    });
     const nextManaged = new Set(selectAttrs);
 
     for (const attrName of this.#managedSelectAttrs) {
@@ -4743,6 +4735,38 @@ function figLabUniqueId(prefix = "fig-select") {
   return `${prefix}-${figLabSelectId}`;
 }
 
+/** Parse options attr — same formats as fig-options / propskit-select. */
+function figLabParseOptionsAttribute(raw) {
+  const text = raw || "";
+  if (text.startsWith("[")) {
+    try {
+      const parsed = JSON.parse(text);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      /* fall through */
+    }
+  }
+  const delimiter = text.includes("\n") ? "\n" : ",";
+  return text
+    .split(delimiter)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function figLabOptionEntryValue(opt) {
+  if (opt && typeof opt === "object") {
+    return String(opt.value ?? opt.label ?? "");
+  }
+  return String(opt ?? "");
+}
+
+function figLabOptionEntryLabel(opt) {
+  if (opt && typeof opt === "object") {
+    return String(opt.label ?? opt.value ?? "");
+  }
+  return String(opt ?? "");
+}
+
 class FigSelectOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected"];
@@ -4960,6 +4984,7 @@ class FigSelect extends HTMLElement {
   #originalPositionPopup = null;
   /** After open align, stop repositioning so overflow scroll isn't yanked back. */
   #freezeMenuPosition = false;
+  #syncingOptions = false;
   #boundTriggerClick = this.#handleTriggerClick.bind(this);
   #boundOptionClick = this.#handleOptionClick.bind(this);
   #boundKeydown = this.#handleKeydown.bind(this);
@@ -4967,7 +4992,16 @@ class FigSelect extends HTMLElement {
   #boundSlotChange = this.#handleSlotChange.bind(this);
 
   static get observedAttributes() {
-    return ["value", "disabled", "label", "position", "offset", "closedby", "open"];
+    return [
+      "value",
+      "disabled",
+      "label",
+      "options",
+      "position",
+      "offset",
+      "closedby",
+      "open",
+    ];
   }
 
   get value() {
@@ -4991,6 +5025,7 @@ class FigSelect extends HTMLElement {
   connectedCallback() {
     if (!this.#initialized) this.#initialize();
     this.#ensurePanelSlotAttrs();
+    this.#syncOptionsFromAttribute();
     this.#syncDisabled();
     this.#syncPopupAttrs();
     this.#syncValue();
@@ -5007,6 +5042,11 @@ class FigSelect extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue || !this.#initialized) return;
+    if (name === "options") {
+      this.#syncOptionsFromAttribute();
+      this.#syncValue();
+      return;
+    }
     if (name === "value" || name === "label") {
       this.#syncValue();
       return;
@@ -5057,6 +5097,65 @@ class FigSelect extends HTMLElement {
     return this.querySelector(":scope > fig-select-options");
   }
 
+  #hasAuthoredOptions() {
+    return Boolean(
+      this.querySelector(
+        ":scope > fig-select-option:not([data-fig-generated]), :scope > fig-select-options > fig-select-option:not([data-fig-generated])",
+      ),
+    );
+  }
+
+  #ensureOptionsPanel() {
+    let panel = this.#getPanel();
+    if (panel) {
+      if (!panel.hasAttribute("slot")) panel.setAttribute("slot", "panel");
+      return panel;
+    }
+    panel = document.createElement("fig-select-options");
+    panel.setAttribute("slot", "panel");
+    panel.setAttribute("data-fig-generated", "");
+    this.appendChild(panel);
+    return panel;
+  }
+
+  /**
+   * When no authored fig-select-option exists, build panel/options from the
+   * options attribute (comma / newline / JSON — same as fig-options).
+   */
+  #syncOptionsFromAttribute() {
+    if (this.#hasAuthoredOptions()) return;
+
+    const hasOptionsAttr = this.hasAttribute("options");
+    const panel = hasOptionsAttr
+      ? this.#ensureOptionsPanel()
+      : this.#getPanel();
+    if (!panel) return;
+
+    this.#syncingOptions = true;
+    try {
+      for (const opt of panel.querySelectorAll(
+        ":scope > fig-select-option[data-fig-generated]",
+      )) {
+        opt.remove();
+      }
+
+      if (!hasOptionsAttr) return;
+
+      const parsed = figLabParseOptionsAttribute(this.getAttribute("options"));
+      const endBtn = panel.querySelector(":scope > .fig-overflow-end");
+      for (const entry of parsed) {
+        const el = document.createElement("fig-select-option");
+        el.setAttribute("data-fig-generated", "");
+        el.setAttribute("value", figLabOptionEntryValue(entry));
+        el.textContent = figLabOptionEntryLabel(entry);
+        if (endBtn) panel.insertBefore(el, endBtn);
+        else panel.appendChild(el);
+      }
+    } finally {
+      this.#syncingOptions = false;
+    }
+  }
+
   #initialize() {
     this.#initialized = true;
     const shadow = this.attachShadow({ mode: "open" });
@@ -5107,6 +5206,10 @@ class FigSelect extends HTMLElement {
           outline: var(--figma-focus-outline);
           outline-offset: var(--figma-focus-outline-offset);
         }
+        :host([disabled]:not([disabled="false"])) .fig-select-trigger,
+        :host([disabled]:not([disabled="false"])) .fig-select-label {
+          color: var(--figma-color-text-tertiary);
+        }
         .fig-select-label {
           display: block;
           width: 100%;
@@ -5251,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));
+    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));
+    }
 
-    popup.style.left = `${Math.round(left)}px`;
-    popup.style.top = `${Math.round(top)}px`;
+    // !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();
@@ -5305,7 +5418,7 @@ class FigSelect extends HTMLElement {
   #setupObserver() {
     if (this.#observer) return;
     this.#observer = new MutationObserver((mutations) => {
-      if (this.#syncingValue) return;
+      if (this.#syncingValue || this.#syncingOptions) return;
       let needsSync = false;
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
@@ -5432,6 +5545,14 @@ class FigSelect extends HTMLElement {
 
       if (!match) {
         if (hasValueAttr) {
+          // Options may not be built yet (options attr sync). Keep value until then.
+          if (!options.length) {
+            if (this.#labelEl) {
+              this.#labelEl.textContent =
+                previousValue || this.getAttribute("label") || "";
+            }
+            return;
+          }
           // Value orphaned (option removed / value attr changed) — clamp or clear.
           match = this.#pickFallbackOption(options);
           if (match) {

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;
@@ -7145,7 +7169,20 @@ class FigField extends HTMLElement {
       !(node instanceof Element && node.classList.contains("fig-field-chevron")),
     );
 
-    this.#toggleable = !!(this.input && "open" in this.input);
+    // Popup/menu hosts also expose `open`, but that is overlay state — not a
+    // fig-field disclosure. Only treat true expand/collapse children as toggleable.
+    const inputTag = this.input?.localName ?? "";
+    const popupOpenHost =
+      inputTag === "fig-select" ||
+      inputTag === "fig-menu" ||
+      inputTag === "fig-dropdown" ||
+      inputTag === "fig-tooltip" ||
+      (this.input instanceof HTMLDialogElement);
+    this.#toggleable = !!(
+      this.input &&
+      "open" in this.input &&
+      !popupOpenHost
+    );
 
     if (this.#toggleable && this.label) {
       if (!this.#chevron || !this.#chevron.isConnected) {
@@ -7158,12 +7195,21 @@ class FigField extends HTMLElement {
 
       this.#chevron.addEventListener("click", this.#boundToggle);
       this.label.addEventListener("click", this.#boundToggle);
-    } else if (this.input && this.label) {
-      const nativeInputs = this.input.querySelectorAll("input, select, textarea");
-      // A label with a `for` target already focuses and activates its control.
-      // Only use the composite fallback when there is no single native target.
-      if (nativeInputs.length !== 1) {
-        this.label.addEventListener("click", this.#boundFocus);
+    } else {
+      if (this.#chevron) {
+        this.#chevron.removeEventListener("click", this.#boundToggle);
+        this.#chevron.remove();
+        this.#chevron = null;
+      }
+      if (this.input && this.label) {
+        const nativeInputs = this.input.querySelectorAll(
+          "input, select, textarea",
+        );
+        // A label with a `for` target already focuses and activates its control.
+        // Only use the composite fallback when there is no single native target.
+        if (nativeInputs.length !== 1) {
+          this.label.addEventListener("click", this.#boundFocus);
+        }
       }
     }
 

package/package.json

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