@rogieking/figui3 4.3.0 → 4.4.0

package/components.css

@@ -1045,11 +1045,18 @@ fig-tab,
   &:hover {
     background-color: var(--figma-color-bg-secondary);
   }
+
+  &[disabled]:not([disabled="false"]) {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
+  }
 }
 
 fig-tabs,
 .tabs {
   display: flex;
+  width: 100%;
   gap: var(--spacer-1);
   padding: var(--spacer-1) var(--spacer-2);
 }
@@ -1057,6 +1064,7 @@ fig-tabs,
 fig-tab-content,
 .fig-tab-content {
   display: none;
+  width: 100%;
 }
 
 /* Avatar */

package/fig.js

@@ -537,7 +537,11 @@ class FigTooltip extends HTMLElement {
     this.#boundHandleTouchMove = this.#handleTouchMove.bind(this);
     this.#boundHandleTouchEnd = this.#handleTouchEnd.bind(this);
     this.#boundHandleTouchCancel = this.#handleTouchCancel.bind(this);
-    this.#boundHandleDialogClose = () => this.hidePopup();
+    this.#boundHandleDialogClose = () => {
+      clearTimeout(this.timeout);
+      this.destroy();
+      this.isOpen = false;
+    };
   }
   connectedCallback() {
     this.setup();
@@ -549,6 +553,7 @@ class FigTooltip extends HTMLElement {
   }
 
   disconnectedCallback() {
+    clearTimeout(this.timeout);
     this.destroy();
     document.removeEventListener(
       "mousedown",
@@ -708,6 +713,7 @@ class FigTooltip extends HTMLElement {
   }
 
   showPopup() {
+    if (this.#parentDialog && !this.#parentDialog.open) return;
     if (!this.popup) this.render();
     this.popup.style.display = "block";
     this.popup.style.visibility = "hidden";
@@ -2531,6 +2537,7 @@ class FigTab extends HTMLElement {
     this.removeEventListener("click", this.#boundHandleClick);
   }
   handleClick() {
+    if (this.hasAttribute("disabled")) return;
     this.selected = true;
     if (this.content) {
       this.content.style.display = "block";
@@ -2636,7 +2643,9 @@ class FigTabs extends HTMLElement {
     if (newIndex !== currentIndex && tabs[newIndex]) {
       tabs.forEach((tab) => tab.removeAttribute("selected"));
       this.selectedTab = tabs[newIndex];
-      this.setAttribute("value", tabs[newIndex].getAttribute("value") || "");
+      tabs[newIndex].setAttribute("selected", "true");
+      const val = tabs[newIndex].getAttribute("value");
+      if (val) this.setAttribute("value", val);
       tabs[newIndex].focus();
     }
   }
@@ -2676,19 +2685,19 @@ class FigTabs extends HTMLElement {
 
   handleClick(event) {
     if (this.hasAttribute("disabled")) return;
-    const target = event.target;
-    if (target.nodeName.toLowerCase() === "fig-tab") {
-      const tabs = this.querySelectorAll("fig-tab");
-      for (const tab of tabs) {
-        if (tab === target) {
-          this.selectedTab = tab;
-          tab.setAttribute("selected", "true");
-          this.setAttribute("value", tab.getAttribute("value") || "");
-        } else {
-          tab.removeAttribute("selected");
-        }
+    const target = event.target.closest("fig-tab");
+    if (!target || !this.contains(target)) return;
+    const tabs = this.querySelectorAll("fig-tab");
+    for (const tab of tabs) {
+      if (tab === target) {
+        this.selectedTab = tab;
+        tab.setAttribute("selected", "true");
+      } else {
+        tab.removeAttribute("selected");
       }
     }
+    const val = target.getAttribute("value");
+    if (val) this.setAttribute("value", val);
   }
 }
 customElements.define("fig-tabs", FigTabs);
@@ -11030,6 +11039,25 @@ customElements.define("fig-header", FigHeader);
 class FigFooter extends HTMLElement {}
 customElements.define("fig-footer", FigFooter);
 
+/* Presentational elements (CSS-only, no behavior) */
+class FigSpinner extends HTMLElement {}
+customElements.define("fig-spinner", FigSpinner);
+
+class FigIcon extends HTMLElement {}
+customElements.define("fig-icon", FigIcon);
+
+class FigContent extends HTMLElement {}
+customElements.define("fig-content", FigContent);
+
+class FigTabContent extends HTMLElement {}
+customElements.define("fig-tab-content", FigTabContent);
+
+class FigButtonCombo extends HTMLElement {}
+customElements.define("fig-button-combo", FigButtonCombo);
+
+class FigInputCombo extends HTMLElement {}
+customElements.define("fig-input-combo", FigInputCombo);
+
 // FigFillPicker
 /**
  * A comprehensive fill picker component supporting solid colors, gradients, images, video, and webcam.

package/package.json

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