@rogieking/figui3 1.0.39 → 1.0.40

package/example.html

@@ -89,6 +89,21 @@
             <fig-chit type="color"
                       disabled="true"
                       value="#FF0000"></fig-chit>
+            <fig-chit type="gradient"
+                      variant="linear"
+                      size="large"
+                      disabled="true"></fig-chit>
+            <fig-chit type="gradient"
+                      variant="angular"
+                      size="large"
+                      disabled="true"></fig-chit>
+            <fig-chit type="gradient"
+                      variant="radial"
+                      size="large"
+                      disabled="true"></fig-chit>
+            <fig-chit type="image"
+                      disabled="true"
+                      src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
             <fig-chit type="image"
                       disabled="true"
                       size="large"

package/fig.css

@@ -947,6 +947,7 @@ fig-chit {
     width: 1.75rem;
     height: 1.75rem;
 
+    &[type="gradient"]::after,
     &[type="image"]::after,
     input[type="color"] {
       padding: 0;
@@ -955,7 +956,13 @@ fig-chit {
       border-radius: var(--radius-medium);
     }
   }
+  &[disabled="true"] {
+    input {
+      pointer-events: none;
+    }
+  }
 
+  &[type="gradient"],
   &[type="image"] {
     &::after {
       content: "";
@@ -978,6 +985,18 @@ fig-chit {
       opacity: 0;
     }
   }
+
+  &[type="gradient"] {
+    &[variant="linear"]::after {
+      background: linear-gradient(to right, red, blue);
+    }
+    &[variant="angular"]::after {
+      background: conic-gradient(red, orange, yellow, green, blue);
+    }
+    &[variant="radial"]::after {
+      background: radial-gradient(circle, red, blue);
+    }
+  }
 }
 
 /* Combo input */

package/fig.js

@@ -139,6 +139,9 @@ class FigDropdown extends HTMLElement {
       this.select.selectedIndex = -1;
     }
   }
+  focus() {
+    this.select.focus();
+  }
 }
 
 customElements.define("fig-dropdown", FigDropdown);
@@ -898,7 +901,7 @@ class FigInputColor extends HTMLElement {
       let label = `<fig-input-text placeholder="Text" value="${this.getAttribute(
         "value"
       )}"></fig-input-text>`;
-      if (this.getAttribute("alpha")) {
+      if (this.getAttribute("alpha") === "true") {
         label += `<fig-tooltip text="Opacity">
                     <fig-input-text 
                         placeholder="##" 
@@ -1320,7 +1323,9 @@ class FigChit extends HTMLElement {
     }
     if (name === "disabled") {
       this.disabled = newValue.toLowerCase() === "true";
-      this.input.disabled = this.disabled;
+      if (this.input) {
+        this.input.disabled = this.disabled;
+      }
     }
   }
 }

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.39"
+  "version": "1.0.40"
 }