@rogieking/figui3 1.9.4 → 1.9.5

package/components.css

@@ -2389,7 +2389,6 @@ fig-input-color {
   & fig-input-text:not([type]),
   & fig-input-text[type="text"],
   & fig-input-number {
-    flex-basis: 6em;
     display: inline-flex;
     flex-direction: column;
     align-items: stretch;
@@ -2402,9 +2401,15 @@ fig-input-color {
 
   & fig-input-text[type="number"],
   & fig-input-number {
-    width: 3.5rem;
+    width: 3rem;
     display: inline-flex;
   }
+  & > * {
+    flex: 1;
+    fig-input-text {
+      flex: 1;
+    }
+  }
 }
 
 fig-slider {
@@ -2416,7 +2421,7 @@ fig-slider {
 
   & fig-input-text[type="number"],
   & fig-input-number {
-    width: 3.5rem;
+    width: 3rem;
   }
 }
 

package/example.html

@@ -30,6 +30,8 @@
     <br /><br /><br /><br /><br /><br /><br /><br />
 
 
+
+
     <fig-field direction="horizontal">
         <label>Position</label>
         <fig-dropdown value="outside"
@@ -39,16 +41,30 @@
             <option value="outside">Outside</option>
         </fig-dropdown>
     </fig-field>
-
-    <fig-field direction="horizontal">
-        <label>Position</label>
-        <fig-dropdown value="outside">
-            <option value="inside">Inside</option>
-            <option value="center">Center</option>
-            <option value="outside">Outside</option>
-        </fig-dropdown>
+    <fig-field direction="horizontal"
+               style="width: 320px;">
+        <label>Color</label>
+        <fig-input-color alpha="true"
+                         full
+                         text="true"
+                         value="#000000"></fig-input-color>
+    </fig-field>
+    <fig-field direction="horizontal"
+               style="width: 320px;">
+        <label>Opacity</label>
+        <fig-slider alpha="true"
+                    text="true"
+                    value="50"
+                    full
+                    variant="neue"
+                    min="0"
+                    max="100"
+                    step="1"
+                    units="%"></fig-slider>
     </fig-field>
 
+    <br /><br /><br /><br /><br /><br /><br /><br />
+
 
 
 

package/fig.js

@@ -1814,14 +1814,13 @@ class FigInputColor extends HTMLElement {
       </fig-input-text>`;
       if (this.getAttribute("alpha") === "true") {
         label += `<fig-tooltip text="Opacity">
-                    <fig-input-text 
+                    <fig-input-number 
                         placeholder="##" 
-                        type="number"
                         min="0"
                         max="100"
-                        value="${this.alpha}">
-                        <span slot="append">%</slot>
-                    </fig-input-text>
+                        value="${this.alpha}"
+                        units="%">
+                    </fig-input-number>
                 </fig-tooltip>`;
       }
       html = `<div class="input-combo">
@@ -1836,7 +1835,7 @@ class FigInputColor extends HTMLElement {
     requestAnimationFrame(() => {
       this.#swatch = this.querySelector("fig-chit[type=color]");
       this.#textInput = this.querySelector("fig-input-text:not([type=number])");
-      this.#alphaInput = this.querySelector("fig-input-text[type=number]");
+      this.#alphaInput = this.querySelector("fig-input-number");
 
       this.#swatch.disabled = this.hasAttribute("disabled");
       this.#swatch.addEventListener("input", this.#handleInput.bind(this));
@@ -1898,7 +1897,9 @@ class FigInputColor extends HTMLElement {
   #handleAlphaInput(event) {
     //do not propagate to onInput handler for web component
     event.stopPropagation();
-    const alpha = Math.round((event.target.value / 100) * 255);
+    // fig-input-number stores numeric value internally, ensure it's a number
+    const alphaValue = Number(event.target.value) || 0;
+    const alpha = Math.round((alphaValue / 100) * 255);
     const alphaHex = alpha.toString(16).padStart(2, "0");
     this.#setValues(this.hexOpaque + alphaHex);
     this.#emitInputEvent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {