@rogieking/figui3 1.0.38 → 1.0.40

package/example.html

@@ -81,6 +81,38 @@
                          placeholder="Type of residence">
 
         </fig-combo-input>
+        <br /><br />
+        <hstack>
+            <fig-chit type="color"
+                      disabled="true"
+                      value="#00FF00"></fig-chit>
+            <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"
+                      src="https://avatars.githubusercontent.com/u/12345678?v=4"></fig-chit>
+            <fig-chit type="image"
+                      disabled="true"
+                      size="large"
+                      src="https://img.freepik.com/free-vector/gradient-grainy-gradient-background_23-2149922133.jpg?semt=ais_hybrid"></fig-chit>
+        </hstack>
         <br />
         <fig-tooltip text="Tooltip text">
             <p>Tooltip</p>

package/fig.css

@@ -420,16 +420,19 @@
 
   color-scheme: light dark;
   /* Icons */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 50%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
 
   /* Elevations */
   --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
     0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+
+  --figma-elevation-200: 0px 1px 3px 0px rgba(0, 0, 0, 0.102),
+    0px 3px 8px 0px rgba(0, 0, 0, 0.102), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 50%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+    --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
     --handle-shadow: 0px 0 0 0.75px rgba(255, 255, 255, 0.1),
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
     --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
@@ -882,15 +885,15 @@ fig-avatar::after,
 
 /* Color input */
 input[type="color"] {
-  width: 14px;
-  height: 14px;
+  width: 0.875rem;
+  height: 0.875rem;
   -webkit-appearance: none;
   appearance: none;
   border: 0;
   padding: 0;
   margin: 0;
   background: none;
-  padding: 5px;
+  padding: 0.3125rem;
   flex-shrink: 0;
   box-sizing: content-box;
   border-radius: var(--radius-medium);
@@ -934,6 +937,68 @@ input[type="color"]::-webkit-color-swatch {
   );
 }
 
+fig-chit {
+  display: inline-grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-medium);
+
+  &[size="large"] {
+    width: 1.75rem;
+    height: 1.75rem;
+
+    &[type="gradient"]::after,
+    &[type="image"]::after,
+    input[type="color"] {
+      padding: 0;
+      width: 1.75rem;
+      height: 1.75rem;
+      border-radius: var(--radius-medium);
+    }
+  }
+  &[disabled="true"] {
+    input {
+      pointer-events: none;
+    }
+  }
+
+  &[type="gradient"],
+  &[type="image"] {
+    &::after {
+      content: "";
+      width: 0.875rem;
+      height: 0.875rem;
+      background-image: var(--src);
+      border-radius: 0.125rem;
+      background-size: cover;
+      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    }
+    &::after,
+    input {
+      grid-area: 1/1;
+      place-self: center;
+    }
+    input[type="color"]::-webkit-color-swatch-wrapper {
+      background: none;
+    }
+    input[type="color"]::-webkit-color-swatch {
+      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 */
 .input-combo {
   display: inline-flex;
@@ -1246,9 +1311,7 @@ fig-slider {
   --slider-tick-size: calc(var(--slider-height) / 4);
   --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
       var(--figma-color-icon-onbrand),
-    inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
-    0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
+    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
   --slider-handle-shadow-focus: inset 0 0 0 4px var(--figma-color-icon-onbrand),
     inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 3px 8px 0px rgba(0, 0, 0, 0.1),

package/fig.js

@@ -96,11 +96,8 @@ class FigDropdown extends HTMLElement {
   }
 
   connectedCallback() {
-    this.render();
-  }
-
-  render() {
     this.type = this.getAttribute("type") || "select";
+    this.value = this.getAttribute("value") || "";
     this.select = document.createElement("select");
     this.optionsSlot = document.createElement("slot");
 
@@ -110,8 +107,9 @@ class FigDropdown extends HTMLElement {
     // Move slotted options into the select element
     this.optionsSlot.addEventListener("slotchange", this.slotChange.bind(this));
 
-    this.select.addEventListener("change", this.handleChange.bind(this));
+    this.select.addEventListener("input", this.handleDropdownInput.bind(this));
   }
+
   slotChange() {
     while (this.select.firstChild) {
       this.select.firstChild.remove();
@@ -122,20 +120,28 @@ class FigDropdown extends HTMLElement {
       hiddenOption.setAttribute("selected", "true");
       this.select.appendChild(hiddenOption);
     }
-    this.optionsSlot.assignedNodes().forEach((node) => {
-      if (node.nodeName === "OPTION") {
-        this.select.appendChild(node.cloneNode(true));
+    this.optionsSlot.assignedNodes().forEach((option) => {
+      if (option.nodeName === "OPTION") {
+        if (option.hasAttribute("value") && option.hasAttribute("selected")) {
+          this.value = option.getAttribute("value");
+        }
+        this.select.appendChild(option.cloneNode(true));
       }
     });
     if (this.type === "dropdown") {
       this.select.selectedIndex = -1;
     }
   }
-  handleChange() {
+  handleDropdownInput() {
     if (this.type === "dropdown") {
+      this.value = this.select.value;
+      this.setAttribute("value", this.value);
       this.select.selectedIndex = -1;
     }
   }
+  focus() {
+    this.select.focus();
+  }
 }
 
 customElements.define("fig-dropdown", FigDropdown);
@@ -895,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="##" 
@@ -908,20 +914,20 @@ class FigInputColor extends HTMLElement {
                 </fig-tooltip>`;
       }
       html = `<div class="input-combo">
-                <input type="color" value="${this.value}" />
+                <fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>
                 ${label}
             </div>`;
     } else {
-      html = `<input type="color" value="${this.value}" />`;
+      html = `<fig-chit type="color" disabled="false" value="${this.value}"></fig-chit>`;
     }
     this.innerHTML = html;
 
     this.style.setProperty("--alpha", this.#rgba.a);
 
     requestAnimationFrame(() => {
-      this.#swatch = this.querySelector("[type=color]");
-      this.textInput = this.querySelector("[type=text]");
-      this.#alphaInput = this.querySelector("[type=number]");
+      this.#swatch = this.querySelector("input[type=color]");
+      this.textInput = this.querySelector("input[type=text]");
+      this.#alphaInput = this.querySelector("input[type=number]");
 
       this.#swatch.disabled = this.hasAttribute("disabled");
       this.#swatch.addEventListener("input", this.handleInput.bind(this));
@@ -1234,28 +1240,24 @@ class FigComboInput extends HTMLElement {
                         </fig-input-text> 
                         <fig-button type="select" variant="input" icon>
                             <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.5" stroke-linecap='round'/>
+  <path d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='currentColor' stroke-opacity="0.9" stroke-linecap='round'/>
 </svg>
                             <fig-dropdown type="dropdown">
-                            ${this.options
-                              .map((option) => `<option>${option}</option>`)
-                              .join("")}
-                        </fig-dropdown>
+                              ${this.options
+                                .map((option) => `<option>${option}</option>`)
+                                .join("")}
+                            </fig-dropdown>
                         </fig-button>
                     </div>`;
     requestAnimationFrame(() => {
       this.input = this.querySelector("fig-input-text");
-      this.dropdown = this.querySelector("fig-dropdown");
+      this.select = this.querySelector("fig-dropdown");
 
-      this.dropdown.addEventListener(
-        "input",
-        this.handleDropdownChange.bind(this)
-      );
+      this.select.addEventListener("input", this.handleSelectInput.bind(this));
     });
   }
-  handleDropdownChange(e) {
-    console.log(e.target.value);
-    this.value = e.target.value;
+  handleSelectInput(e) {
+    this.value = e.target.parentNode.value;
     this.setAttribute("value", this.value);
   }
   handleInput(e) {
@@ -1283,3 +1285,48 @@ class FigComboInput extends HTMLElement {
   }
 }
 window.customElements.define("fig-combo-input", FigComboInput);
+
+/* Chit */
+class FigChit extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.type = this.getAttribute("type") || "color";
+    this.src = this.getAttribute("src") || "";
+    this.value = this.getAttribute("value") || "";
+    this.size = this.getAttribute("size") || "small";
+    this.disabled = this.getAttribute("disabled") === "true" ? true : false;
+    this.variant = this.getAttribute("variant") || "square";
+    this.innerHTML = `<input type="color" value="${this.value}" />`;
+
+    requestAnimationFrame(() => {
+      this.input = this.querySelector("input");
+      this.input.disabled = this.disabled;
+      this.updateSrc(this.src);
+    });
+  }
+  updateSrc(src) {
+    if (src) {
+      this.src = src;
+      this.style.setProperty("--src", `url(${src})`);
+    } else {
+      this.style.removeProperty("--src");
+    }
+  }
+  static get observedAttributes() {
+    return ["type", "src", "size", "variant", "value", "disabled"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "src") {
+      this.updateSrc(newValue);
+    }
+    if (name === "disabled") {
+      this.disabled = newValue.toLowerCase() === "true";
+      if (this.input) {
+        this.input.disabled = this.disabled;
+      }
+    }
+  }
+}
+window.customElements.define("fig-chit", FigChit);

package/package.json

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