@rogieking/figui3 2.17.2 → 2.17.4

package/components.css

@@ -2060,6 +2060,20 @@ dialog[is="fig-popup"] {
     display: block;
   }
 
+  &[theme="dark"] {
+    color-scheme: dark;
+  }
+
+  &[theme="light"] {
+    color-scheme: light;
+  }
+
+  &[theme="menu"] {
+    background-color: var(--figma-color-bg-menu);
+    color: var(--figma-color-text-menu);
+    color-scheme: dark;
+  }
+
   &[variant="popover"] {
     overflow: visible;
     box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);

package/fig.js

@@ -1057,6 +1057,7 @@ customElements.define("fig-dialog", FigDialog, { extends: "dialog" });
  * @attr {string} position - Preferred placement as "vertical horizontal" (default: "top center").
  * @attr {string} offset - Horizontal and vertical offset as "x y" (default: "0 0").
  * @attr {string} variant - Visual variant. Use variant="popover" to show an anchor beak.
+ * @attr {string} theme - Visual theme: "light", "dark", or "menu".
  * @attr {boolean|string} open - Open when present and not "false".
  */
 class FigPopup extends HTMLDialogElement {
@@ -1078,7 +1079,7 @@ class FigPopup extends HTMLDialogElement {
   }
 
   static get observedAttributes() {
-    return ["open", "anchor", "position", "offset", "variant"];
+    return ["open", "anchor", "position", "offset", "variant", "theme"];
   }
 
   get open() {
@@ -4539,18 +4540,37 @@ customElements.define("fig-toast", FigToast, { extends: "dialog" });
  * @attr {string} value - The current input value
  */
 class FigComboInput extends HTMLElement {
+  #usesCustomDropdown = false;
+  #boundHandleSelectInput = null;
+
   constructor() {
     super();
+    this.#boundHandleSelectInput = this.handleSelectInput.bind(this);
   }
   getOptionsFromAttribute() {
     return (this.getAttribute("options") || "").split(",");
   }
   connectedCallback() {
+    const customDropdown =
+      Array.from(this.children).find((child) => child.tagName === "FIG-DROPDOWN") ||
+      null;
+    this.#usesCustomDropdown = customDropdown !== null;
+    if (customDropdown) {
+      customDropdown.remove();
+    }
+
     this.options = this.getOptionsFromAttribute();
     this.placeholder = this.getAttribute("placeholder") || "";
     this.value = this.getAttribute("value") || "";
     const experimental = this.getAttribute("experimental");
     const expAttr = experimental ? `experimental="${experimental}"` : "";
+    const dropdownHTML = this.#usesCustomDropdown
+      ? ""
+      : `<fig-dropdown type="dropdown" ${expAttr}>
+                              ${this.options
+                                .map((option) => `<option>${option}</option>`)
+                                .join("")}
+                            </fig-dropdown>`;
     this.innerHTML = `<div class="input-combo">
                         <fig-input-text placeholder="${this.placeholder}">
                         </fig-input-text> 
@@ -4558,21 +4578,30 @@ class FigComboInput extends HTMLElement {
                             <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
   <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
 </svg>
-                            <fig-dropdown type="dropdown" ${expAttr}>
-                              ${this.options
-                                .map((option) => `<option>${option}</option>`)
-                                .join("")}
-                            </fig-dropdown>
+                            ${dropdownHTML}
                         </fig-button>
                     </div>`;
     requestAnimationFrame(() => {
       this.input = this.querySelector("fig-input-text");
+      const button = this.querySelector("fig-button");
+
+      if (this.#usesCustomDropdown && customDropdown && button) {
+        if (!customDropdown.hasAttribute("type")) {
+          customDropdown.setAttribute("type", "dropdown");
+        }
+        if (experimental) {
+          customDropdown.setAttribute("experimental", experimental);
+        }
+        button.append(customDropdown);
+      }
       this.dropdown = this.querySelector("fig-dropdown");
 
-      this.dropdown.addEventListener(
-        "input",
-        this.handleSelectInput.bind(this)
-      );
+      this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
+      this.dropdown?.addEventListener("input", this.#boundHandleSelectInput);
+
+      if (this.input) {
+        this.input.setAttribute("value", this.value);
+      }
 
       // Apply initial disabled state
       if (this.hasAttribute("disabled")) {
@@ -4580,6 +4609,9 @@ class FigComboInput extends HTMLElement {
       }
     });
   }
+  disconnectedCallback() {
+    this.dropdown?.removeEventListener("input", this.#boundHandleSelectInput);
+  }
   handleSelectInput(e) {
     this.setAttribute("value", e.target.closest("fig-dropdown").value);
   }
@@ -4613,7 +4645,7 @@ class FigComboInput extends HTMLElement {
     switch (name) {
       case "options":
         this.options = newValue.split(",");
-        if (this.dropdown) {
+        if (this.dropdown && !this.#usesCustomDropdown) {
           this.dropdown.innerHTML = this.options
             .map((option) => `<option>${option}</option>`)
             .join("");
@@ -4638,7 +4670,7 @@ class FigComboInput extends HTMLElement {
         if (this.dropdown) {
           if (newValue) {
             this.dropdown.setAttribute("experimental", newValue);
-          } else {
+          } else if (!this.#usesCustomDropdown) {
             this.dropdown.removeAttribute("experimental");
           }
         }

package/index.html

@@ -2682,7 +2682,14 @@
 
             <h3>Popover Variant (with Arrow)</h3>
             <p class="description">Use <code>variant="popover"</code> to show the beak and automatically point it at the
-                anchor.</p>
+                anchor. Use <code>theme="menu"</code> for menu-style dark surfaces.</p>
+            <fig-segmented-control id="popup-theme-control">
+                <fig-segment id="popup-theme-default">Default</fig-segment>
+                <fig-segment id="popup-theme-dark">Dark</fig-segment>
+                <fig-segment id="popup-theme-light">Light</fig-segment>
+                <fig-segment id="popup-theme-menu"
+                             selected>Menu</fig-segment>
+            </fig-segmented-control>
             <hstack>
                 <fig-button id="popup-open-popover">Open Popover Variant</fig-button>
                 <fig-button id="popup-close-popover"
@@ -2692,7 +2699,8 @@
                     is="fig-popup"
                     anchor="#popup-open-popover"
                     position="top center"
-                    variant="popover">
+                    variant="popover"
+                    theme="menu">
                 <vstack style="min-width: 12rem;">
                     <strong style="padding: 0 var(--spacer-1);">Popover Beak</strong>
                     <fig-field direction="horizontal">
@@ -2705,7 +2713,8 @@
 &lt;dialog is="fig-popup"
         anchor="#popup-open-popover"
         position="top center"
-        variant="popover"&gt;
+        variant="popover"
+        theme="menu"&gt;
   ...
 &lt;/dialog&gt;</code></pre>
 
@@ -4166,6 +4175,8 @@ button.addEventListener('click', () => {
         const popupDefault = document.getElementById('popup-default');
         const popupPreferred = document.getElementById('popup-preferred');
         const popupProp = document.getElementById('popup-prop');
+        const popupPopover = document.getElementById('popup-popover');
+        const popupThemeControl = document.getElementById('popup-theme-control');
 
         document.getElementById('popup-open-default')?.addEventListener('click', () => {
             popupDefault?.setAttribute('open', 'true');
@@ -4188,6 +4199,23 @@ button.addEventListener('click', () => {
             if (popupProp) popupProp.open = false;
         });
 
+        popupThemeControl?.addEventListener('click', () => {
+            if (!popupPopover) return;
+            if (document.getElementById('popup-theme-default')?.hasAttribute('selected')) {
+                popupPopover.removeAttribute('theme');
+                return;
+            }
+            if (document.getElementById('popup-theme-dark')?.hasAttribute('selected')) {
+                popupPopover.setAttribute('theme', 'dark');
+                return;
+            }
+            if (document.getElementById('popup-theme-light')?.hasAttribute('selected')) {
+                popupPopover.setAttribute('theme', 'light');
+                return;
+            }
+            popupPopover.setAttribute('theme', 'menu');
+        });
+
         const popupExamples = [
             ['popup-open-popover', 'popup-close-popover', 'popup-popover'],
             ['popup-open-top-left', 'popup-close-top-left', 'popup-top-left'],

package/package.json

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