@rogieking/figui3 6.5.1 → 6.6.1

package/fig.js

@@ -3319,7 +3319,14 @@ class FigTabs extends HTMLElement {
   #ensureScroller() {
     if (this.#isStructuring) return;
     const existing = this.querySelector(":scope > [data-fig-tabs-scroll]");
-    if (existing && existing === this.#scroller) return;
+    const directNodes = existing
+      ? Array.from(this.childNodes).filter((node) => {
+          if (node === existing) return false;
+          if (node.nodeType !== Node.ELEMENT_NODE) return true;
+          return !node.hasAttribute("data-fig-tabs-nav");
+        })
+      : null;
+    if (existing && existing === this.#scroller && !directNodes?.length) return;
 
     this.#isStructuring = true;
     try {
@@ -3332,11 +3339,13 @@ class FigTabs extends HTMLElement {
       scroller.className = "fig-tabs-scroll";
       scroller.dataset.figTabsScroll = "";
 
-      const nodes = Array.from(this.childNodes).filter((node) => {
-        if (node === scroller) return false;
-        if (node.nodeType !== Node.ELEMENT_NODE) return true;
-        return !node.hasAttribute("data-fig-tabs-nav");
-      });
+      const nodes =
+        directNodes ??
+        Array.from(this.childNodes).filter((node) => {
+          if (node === scroller) return false;
+          if (node.nodeType !== Node.ELEMENT_NODE) return true;
+          return !node.hasAttribute("data-fig-tabs-nav");
+        });
 
       for (const node of nodes) {
         scroller.appendChild(node);
@@ -3444,26 +3453,45 @@ class FigTabs extends HTMLElement {
       this.querySelectorAll("fig-tab").forEach((tab) => tab.removeAttribute("selected"));
       this.selectedTab = tabs[newIndex];
       tabs[newIndex].setAttribute("selected", "true");
-      const val = tabs[newIndex].getAttribute("value");
+      const val = this.#resolveTabValue(tabs[newIndex]);
       if (val) this.setAttribute("value", val);
+      else this.removeAttribute("value");
       tabs[newIndex].focus();
       this.#syncTabIndexes();
       this.#scrollSelectedTabIntoView(tabs[newIndex]);
+      this.#emitSelectionEvents();
     }
   }
 
   get value() {
-    return this.selectedTab?.getAttribute("value") || "";
+    return this.#resolveTabValue(this.selectedTab);
   }
 
   set value(val) {
     this.setAttribute("value", val);
   }
 
+  #emitSelectionEvents() {
+    const val = this.value;
+    this.dispatchEvent(
+      new CustomEvent("input", { detail: val, bubbles: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: val, bubbles: true }),
+    );
+  }
+
+  #resolveTabValue(tab) {
+    if (!tab) return "";
+    const attrValue = tab.getAttribute("value");
+    if (attrValue !== null) return attrValue;
+    return tab.textContent?.trim() || "";
+  }
+
   #selectByValue(value) {
     const tabs = this.querySelectorAll("fig-tab");
     for (const tab of tabs) {
-      if (tab.getAttribute("value") === value) {
+      if (this.#resolveTabValue(tab) === value) {
         this.selectedTab = tab;
         tab.setAttribute("selected", "true");
       } else {
@@ -3491,6 +3519,8 @@ class FigTabs extends HTMLElement {
     if (this.hasAttribute("disabled")) return;
     const target = event.target.closest("fig-tab");
     if (!target || !this.contains(target)) return;
+    const previousTab = this.selectedTab;
+    const previousValue = this.value;
     const tabs = this.querySelectorAll("fig-tab");
     for (const tab of tabs) {
       if (tab === target) {
@@ -3500,10 +3530,14 @@ class FigTabs extends HTMLElement {
         tab.removeAttribute("selected");
       }
     }
-    const val = target.getAttribute("value");
+    const val = this.#resolveTabValue(target);
     if (val) this.setAttribute("value", val);
+    else this.removeAttribute("value");
     this.#syncTabIndexes();
     this.#scrollSelectedTabIntoView(target);
+    if (previousTab !== target || previousValue !== this.value) {
+      this.#emitSelectionEvents();
+    }
   }
 }
 customElements.define("fig-tabs", FigTabs);
@@ -14237,6 +14271,7 @@ customElements.define("fig-choice", FigChoice);
  * A selection controller for a list of choice elements.
  * @attr {string} choice-element - CSS selector for child choices (default: "fig-choice")
  * @attr {string} layout - Layout mode: "vertical" (default), "horizontal", "grid"
+ * @attr {number} columns - Number of columns when layout="grid" (default: 2)
  * @attr {string} value - Value of the currently selected choice
  * @attr {boolean} disabled - Whether the chooser is disabled
  */
@@ -14262,7 +14297,9 @@ class FigChooser extends HTMLElement {
       "value",
       "disabled",
       "choice-element",
+      "columns",
       "drag",
+      "layout",
       "overflow",
       "loop",
     ];
@@ -14283,6 +14320,16 @@ class FigChooser extends HTMLElement {
     return this.getAttribute("choice-element") || "fig-choice";
   }
 
+  #syncGridColumns() {
+    const raw = this.getAttribute("columns");
+    const columns = raw === null ? NaN : Number(raw);
+    if (Number.isInteger(columns) && columns > 0) {
+      this.style.setProperty("--fig-chooser-grid-columns", String(columns));
+    } else {
+      this.style.removeProperty("--fig-chooser-grid-columns");
+    }
+  }
+
   get choices() {
     return Array.from((this.#scroller || this).querySelectorAll(this.#choiceSelector));
   }
@@ -14360,6 +14407,7 @@ class FigChooser extends HTMLElement {
 
   connectedCallback() {
     this.setAttribute("role", "listbox");
+    this.#syncGridColumns();
     this.#ensureScroller();
     this.addEventListener("click", this.#boundHandleClick);
     this.addEventListener("keydown", this.#boundHandleKeyDown);
@@ -14436,6 +14484,9 @@ class FigChooser extends HTMLElement {
     if (name === "choice-element") {
       requestAnimationFrame(() => this.#syncSelection());
     }
+    if (name === "columns") {
+      this.#syncGridColumns();
+    }
     if (name === "drag") {
       if (this.#dragEnabled) {
         this.#setupDrag();
@@ -14446,6 +14497,10 @@ class FigChooser extends HTMLElement {
     if (name === "overflow") {
       this.#applyOverflowMode();
     }
+    if (name === "layout") {
+      this.#applyOverflowMode();
+      requestAnimationFrame(() => this.#syncOverflow());
+    }
   }
 
   #syncSelection() {

package/package.json

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