@rogieking/figui3 6.16.0 → 6.18.0

package/fig.js

@@ -2845,10 +2845,16 @@ class FigPopup extends HTMLDialogElement {
     if (closedby === "none" || closedby === "closerequest") return;
     const target = event.target;
     if (!(target instanceof Node)) return;
+
+    // Prefer composedPath so slotted light-DOM content (e.g. fig-select options)
+    // counts as inside — Node.contains() is false for slotted nodes.
+    const path =
+      typeof event.composedPath === "function" ? event.composedPath() : [];
+    if (path.includes(this)) return;
     if (this.contains(target)) return;
 
     const anchor = this.resolveAnchor();
-    if (anchor?.contains && anchor.contains(target)) return;
+    if (anchor && (path.includes(anchor) || anchor.contains?.(target))) return;
 
     if (this.isInsideDescendantPopup(target)) return;
 
@@ -7139,7 +7145,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) {
@@ -7152,12 +7171,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);
+        }
       }
     }
 
@@ -17186,11 +17214,40 @@ class FigMenuItem extends HTMLElement {
 }
 customElements.define("fig-menu-item", FigMenuItem);
 
+/**
+ * Visual divider between menu item groups.
+ * @attr {string} label - Optional group label shown in secondary text under the line.
+ */
 class FigMenuSeparator extends HTMLElement {
+  static get observedAttributes() {
+    return ["label"];
+  }
+
+  get label() {
+    return this.getAttribute("label") ?? "";
+  }
+
+  set label(value) {
+    if (value == null || value === "") this.removeAttribute("label");
+    else this.setAttribute("label", String(value));
+  }
+
   connectedCallback() {
+    this.#sync();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.#sync();
+  }
+
+  #sync() {
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "separator");
     }
+    const label = this.label.trim();
+    if (label) this.setAttribute("aria-label", label);
+    else this.removeAttribute("aria-label");
   }
 }
 customElements.define("fig-menu-separator", FigMenuSeparator);

package/package.json

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