@rogieking/figui3 1.0.27 → 1.0.29

package/fig.css

@@ -560,6 +560,7 @@ fig-segmented-control {
   min-width: 6rem;
   height: 1.5rem;
   padding: 1px;
+  gap: 0;
   display: inline-flex;
   align-items: stretch;
 
@@ -775,6 +776,18 @@ fig-button {
     padding: var(--spacer-1) var(--spacer-2);
   }
 
+  &[type="select"],
+  &[type="upload"] {
+    position: relative;
+    select,
+    input {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      appearance: none;
+    }
+  }
+
   &[inline="false"] {
     padding: 0;
   }

package/fig.js

@@ -524,6 +524,30 @@ class FigSegment extends HTMLElement {
 }
 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 */
 class FigSlider extends HTMLElement {
   #typeDefaults = {

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.27"
+  "version": "1.0.29"
 }