@rogieking/figui3 1.0.50 → 1.0.52

package/example.html

@@ -44,6 +44,14 @@
             <fig-button>Primary</fig-button>
             <fig-button variant="secondary">Secondary</fig-button>
             <fig-button variant="ghost">Ghost</fig-button>
+            <fig-button type="select">
+                Select
+                <fig-dropdown>
+                    <option>One</option>
+                    <option>Two</option>
+                </fig-dropdown>
+            </fig-button>
+
             <fig-button variant="ghost"
                         type="upload">
                 Upload

package/fig.css

@@ -756,8 +756,9 @@ fig-button {
   &[type="select"],
   &[type="upload"] {
     position: relative;
-    select,
-    input {
+    > select,
+    > input,
+    > fig-dropdown {
       position: absolute;
       inset: 0;
       opacity: 0;

package/fig.js

@@ -1129,16 +1129,17 @@ class FigCheckbox extends HTMLElement {
   constructor() {
     super();
     this.input = document.createElement("input");
+    this.name = this.getAttribute("name") || "checkbox";
+    this.value = this.getAttribute("value") || "";
     this.input.setAttribute("id", uniqueId());
-    this.input.setAttribute("name", this.getAttribute("name") || "checkbox");
+    this.input.setAttribute("name", this.name);
     this.input.setAttribute("type", "checkbox");
     this.labelElement = document.createElement("label");
     this.labelElement.setAttribute("for", this.input.id);
   }
   connectedCallback() {
-    this.checked = this.input.checked = this.hasAttribute("checked")
-      ? this.getAttribute("checked").toLowerCase() === "true"
-      : false;
+    this.checked = this.input.checked =
+      this.hasAttribute("checked") && this.getAttribute("checked") !== "false";
     this.input.addEventListener("change", this.handleInput.bind(this));
 
     if (this.hasAttribute("disabled")) {
@@ -1155,7 +1156,7 @@ class FigCheckbox extends HTMLElement {
     this.render();
   }
   static get observedAttributes() {
-    return ["on", "disabled", "label", "checked"];
+    return ["disabled", "label", "checked", "name", "value"];
   }
 
   render() {}
@@ -1174,12 +1175,13 @@ class FigCheckbox extends HTMLElement {
         this.labelElement.innerText = newValue;
         break;
       case "checked":
-        this.checked = this.input.checked = this.hasAttribute("checked")
-          ? true
-          : false;
+        this.checked = this.input.checked =
+          this.hasAttribute("checked") &&
+          this.getAttribute("checked") !== "false";
+
         break;
-      case "name":
-      case "value":
+      default:
+        this.input[name] = newValue;
         this.input.setAttribute(name, newValue);
         break;
     }
@@ -1207,9 +1209,6 @@ window.customElements.define("fig-radio", FigRadio);
 class FigSwitch extends FigCheckbox {
   render() {
     this.input.setAttribute("class", "switch");
-    this.on = this.input.checked = this.hasAttribute("on")
-      ? this.getAttribute("on").toLowerCase() === "true"
-      : false;
   }
 }
 window.customElements.define("fig-switch", FigSwitch);

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.50"
+  "version": "1.0.52"
 }