@rogieking/figui3 1.7.0 → 1.7.2

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 {
@@ -2257,6 +2262,14 @@ fig-input-text {
     box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
     outline: 0;
   }
+  /* Disabled */
+  &[disabled]:not([disabled="false"]) {
+    background-color: var(--figma-color-bg);
+    pointer-events: none;
+    cursor: not-allowed;
+    color: var(--figma-color-text-disabled);
+    box-shadow: inset 0 0 0 1px var(--figma-color-border-disabled);
+  }
 }
 
 fig-input-color {

package/example.html

@@ -26,6 +26,9 @@
         <h2><label>Effects/</label>UI3 Components</h2>
     </fig-header>
 
+    <fig-input-text disabled
+                    value="Disabled"></fig-input-text>
+
     <fig-popover action="manual"
                  open="true"
                  size="large">
@@ -240,9 +243,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.2",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {