@rogieking/figui3 1.0.72 → 1.0.74

package/fig.css

@@ -934,11 +934,13 @@ input[type="color"] {
     background: var(--checkerboard);
     overflow: hidden;
     grid-area: 1/1;
+    outline: 0;
   }
 
   &::-webkit-color-swatch {
     padding: 0;
     border: 0;
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     border-radius: 0.125rem;
     mask-image: linear-gradient(
       to right,
@@ -1012,11 +1014,11 @@ fig-chit {
       border-radius: var(--radius-medium);
     }
 
-    input[type="color"]::-moz-color-swatch {
+    input[type="color"]::-webkit-color-swatch {
       border-radius: var(--radius-medium);
     }
 
-    input[type="color"]::-webkit-color-swatch {
+    input[type="color"]::-moz-color-swatch {
       border-radius: var(--radius-medium);
     }
   }
@@ -1050,17 +1052,7 @@ fig-chit {
       opacity: 0;
     }
   }
-  &[type="color"]{
-    &::after {
-      content: "";
-      width: 0.875rem;
-      height: 0.875rem;
-      grid-area: 1/1;
-      place-self: center;
-      border-radius: 0.125rem;
-      box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-    }
-  }
+  
   &[type="image"] {
     &:not([src])::after {
       background: var(--checkerboard);

package/fig.js

@@ -641,23 +641,7 @@ class FigSlider extends HTMLElement {
   constructor() {
     super();
   }
-  connectedCallback() {
-    this.value = this.getAttribute("value");
-    this.default = this.getAttribute("default") || null;
-    this.type = this.getAttribute("type") || "range";
-
-    const defaults = this.#typeDefaults[this.type];
-    this.min = this.getAttribute("min") || defaults.min;
-    this.max = this.getAttribute("max") || defaults.max;
-    this.step = this.getAttribute("step") || defaults.step;
-    this.color = this.getAttribute("color") || defaults?.color;
-    this.units = this.getAttribute("units") || "";
-    this.disabled = this.getAttribute("disabled") ? true : false;
-
-    if (this.color) {
-      this.style.setProperty("--color", this.color);
-    }
-
+  #getInnerHTML() {
     let html = "";
     let slider = `<div class="fig-slider-input-container">
                 <input 
@@ -670,7 +654,7 @@ class FigSlider extends HTMLElement {
                     value="${this.value}">
                 ${this.innerHTML}
             </div>`;
-    if (this.getAttribute("text")) {
+    if (this.text) {
       html = `${slider}
                     <fig-input-text
                         placeholder="##"
@@ -688,12 +672,13 @@ class FigSlider extends HTMLElement {
     } else {
       html = slider;
     }
-
-    this.innerHTML = html;
-
+    return html;
+  }
+  #setupBindings() {
     //child nodes hack
     requestAnimationFrame(() => {
       this.input = this.querySelector("[type=range]");
+      this.input.removeEventListener("input", this.handleInput);
       this.input.addEventListener("input", this.handleInput.bind(this));
       this.handleInput();
 
@@ -711,6 +696,7 @@ class FigSlider extends HTMLElement {
         this.input.setAttribute("list", this.datalist.getAttribute("id"));
       }
       if (this.figInputText) {
+        this.figInputText.removeEventListener("input", this.handleTextInput);
         this.figInputText.addEventListener(
           "input",
           this.handleTextInput.bind(this)
@@ -718,6 +704,28 @@ class FigSlider extends HTMLElement {
       }
     });
   }
+  connectedCallback() {
+    this.value = this.getAttribute("value");
+    this.default = this.getAttribute("default") || null;
+    this.type = this.getAttribute("type") || "range";
+
+    const defaults = this.#typeDefaults[this.type];
+    this.min = this.getAttribute("min") || defaults.min;
+    this.max = this.getAttribute("max") || defaults.max;
+    this.step = this.getAttribute("step") || defaults.step;
+    this.color = this.getAttribute("color") || defaults?.color;
+    this.text = this.getAttribute("text") || false;
+    this.units = this.getAttribute("units") || "";
+    this.disabled = this.getAttribute("disabled") ? true : false;
+
+    if (this.color) {
+      this.style.setProperty("--color", this.color);
+    }
+
+    this.innerHTML = this.#getInnerHTML();
+
+    this.#setupBindings();
+  }
   static get observedAttributes() {
     return [
       "value",
@@ -754,6 +762,12 @@ class FigSlider extends HTMLElement {
             this.figInputText.setAttribute("disabled", this.disabled);
           }
           break;
+        case "text":
+        case "units":
+          this[name] = newValue;
+          this.innerHTML = this.#getInnerHTML();
+          this.#setupBindings();
+          break;
         default:
           this[name] = this.input[name] = newValue;
           this.handleInput();

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.72"
+  "version": "1.0.74"
 }