@rogieking/figui3 1.9.4 → 1.9.6

package/components.css

@@ -666,7 +666,6 @@ input[type="text"][list] {
     ::picker(select) {
       position-area: auto;
       align-self: auto;
-      position-try-fallbacks: none;
       max-block-size: 100vh;
       appearance: base-select;
       scrollbar-width: thin;
@@ -2389,7 +2388,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 +2400,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 +2420,7 @@ fig-slider {
 
   & fig-input-text[type="number"],
   & fig-input-number {
-    width: 3.5rem;
+    width: 3rem;
   }
 }
 

package/example.html

@@ -25,11 +25,34 @@
 
         <h2><label>Effects/</label>UI3 Components</h2>
         <fig-spinner></fig-spinner>
+
+        <fig-button icon="true"
+                    variant="ghost"
+                    type="select"
+                    style="position: absolute; right: 0;">
+            <svg width="24"
+                 height="24"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M9.64645 11.1464C9.84171 10.9512 10.1583 10.9512 10.3536 11.1464L12 12.7929L13.6464 11.1464C13.8417 10.9512 14.1583 10.9512 14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536L9.64645 11.8536C9.45118 11.6583 9.45118 11.3417 9.64645 11.1464Z"
+                      fill="currentColor"
+                      fill-opacity="0.9" />
+            </svg>
+            <fig-dropdown variant="neue">
+                <option>One if by sea</option>
+                <option>Two if by land</option>
+            </fig-dropdown>
+        </fig-button>
     </fig-header>
 
     <br /><br /><br /><br /><br /><br /><br /><br />
 
 
+
+
     <fig-field direction="horizontal">
         <label>Position</label>
         <fig-dropdown value="outside"
@@ -39,16 +62,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.6",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {