@rogieking/figui3 1.7.0 → 1.7.1

package/components.css

@@ -982,6 +982,11 @@ fig-tabs,
   gap: var(--spacer-2);
 }
 
+fig-tab-content,
+.fig-tab-content {
+  display: none;
+}
+
 /* Avatar */
 fig-avatar,
 .fig-avatar {

package/example.html

@@ -240,9 +240,16 @@
         </fig-header>
         <fig-field>
             <fig-tabs>
-                <fig-tab selected>Tab #1</fig-tab>
-                <fig-tab>Tab #2</fig-tab>
+                <fig-tab selected
+                         content="#tab-1-content">Tab #1</fig-tab>
+                <fig-tab content="#tab-2-content">Tab #2</fig-tab>
             </fig-tabs>
+            <fig-tab-content id="tab-1-content">
+                Content for Tab #1
+            </fig-tab-content>
+            <fig-tab-content id="tab-2-content">
+                Content for Tab #2
+            </fig-tab-content>
         </fig-field>
         <fig-header>
             <h2>Segmented control</h2>

package/fig.js

@@ -529,18 +529,53 @@ window.customElements.define("fig-popover-2", FigPopover2);
  * @attr {boolean} selected - Whether the tab is currently selected
  */
 class FigTab extends HTMLElement {
+  #selected;
   constructor() {
     super();
+    this.content = null;
+    this.#selected = false;
   }
   connectedCallback() {
     this.setAttribute("label", this.innerText);
     this.addEventListener("click", this.handleClick.bind(this));
+
+    requestAnimationFrame(() => {
+      if (typeof this.getAttribute("content") === "string") {
+        this.content = document.querySelector(this.getAttribute("content"));
+        if (this.#selected) {
+          this.content.style.display = "block";
+        } else {
+          this.content.style.display = "none";
+        }
+      }
+    });
+  }
+  get selected() {
+    return this.#selected;
+  }
+  set selected(value) {
+    this.setAttribute("selected", value ? "true" : "false");
   }
   disconnectedCallback() {
     this.removeEventListener("click", this.handleClick);
   }
   handleClick() {
-    this.setAttribute("selected", "true");
+    this.selected = true;
+    if (this.content) {
+      this.content.style.display = "block";
+    }
+  }
+
+  static get observedAttributes() {
+    return ["selected"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "selected") {
+      this.#selected = newValue !== null && newValue !== "false";
+      if (this?.content) {
+        this.content.style.display = this.#selected ? "block" : "none";
+      }
+    }
   }
 }
 window.customElements.define("fig-tab", FigTab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {