@rogieking/figui3 1.0.5 → 1.0.7

package/fig.css

@@ -529,17 +529,8 @@ fig-segmented-control {
     appearance: none;
     padding: 0 var(--spacer-2);
 
-    & [type=radio] {
-      position: absolute;
-      inset: 0;
-      border-radius: 0;
-      opacity: 0;
-      z-index: 1;
-      width: 100%;
-      height: 100%;
-    }
-
-    &:has(:checked) {
+    &[selected]:not([selected=false]),
+    &[selected=true] {
       background-color: var(--figma-color-bg);
       border-radius: calc(var(--radius-medium) - 1px);
       box-shadow: var(--handle-shadow);

package/fig.js

@@ -406,6 +406,9 @@ class FigTab extends HTMLElement {
         this.setAttribute("label", this.innerText)
         this.addEventListener("click", this.handleClick.bind(this))
     }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
     handleClick() {
         this.setAttribute("selected", "true")
     }
@@ -420,13 +423,17 @@ class FigTabs extends HTMLElement {
         this.name = this.getAttribute("name") || "tabs"
         this.addEventListener("click", this.handleClick.bind(this))
     }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
     handleClick(event) {
         const target = event.target;
         if (target.nodeName.toLowerCase() === "fig-tab") {
             const tabs = this.querySelectorAll("fig-tab")
-            console.log("change", target, tabs, target.nodeName)
             for (const tab of tabs) {
-                if (tab !== target) {
+                if (tab === target) {
+                    this.selectedTab = tab
+                } else {
                     tab.removeAttribute("selected")
                 }
             }
@@ -435,6 +442,47 @@ class FigTabs extends HTMLElement {
 }
 window.customElements.define('fig-tabs', FigTabs);
 
+/* Segmented Control */
+class FigSegment extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick)
+    }
+    handleClick() {
+        this.setAttribute("selected", "true")
+    }
+}
+window.customElements.define('fig-segment', FigSegment);
+
+class FigSegmentedControl extends HTMLElement {
+    constructor() {
+        super()
+    }
+    connectedCallback() {
+        this.name = this.getAttribute("name") || "segmented-control"
+        this.addEventListener("click", this.handleClick.bind(this))
+    }
+    handleClick(event) {
+        const target = event.target;
+        if (target.nodeName.toLowerCase() === "fig-segment") {
+            const segments = this.querySelectorAll("fig-segment")
+            for (const segment of segments) {
+                if (segment === target) {
+                    this.selectedSegment = segment
+                } else {
+                    segment.removeAttribute("selected")
+                }
+            }
+        }
+    }
+}
+window.customElements.define('fig-segmented-control', FigSegmentedControl);
+
 
 
 /* Slider */

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.5"
+  "version": "1.0.7"
 }