@rogieking/figui3 2.18.2 → 2.19.0

package/components.css

@@ -747,6 +747,19 @@ fig-button {
     background-color: var(--figma-color-bg-secondary);
     box-shadow: none;
     color: var(--figma-color-text);
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--figma-color-border);
+      background-color: var(--figma-color-bg-transparent);
+    }
+
+    &:active {
+      background-color: var(--figma-color-bg-secondary);
+    }
+
+    &:focus-visible {
+      background-color: var(--figma-color-bg-secondary);
+    }
   }
 
   /* Variant: Overlay (for on top of content) */

package/fig.js

@@ -3883,14 +3883,22 @@ class FigInputFill extends HTMLElement {
           );
         }
         break;
-      case "gradient":
+      case "gradient": {
         if (this.#opacityInput) {
           this.#opacityInput.setAttribute(
             "value",
             this.#gradient.stops[0]?.opacity ?? 100
           );
         }
+        const label = this.querySelector(".fig-input-fill-label");
+        if (label) {
+          const newLabel =
+            this.#gradient.type.charAt(0).toUpperCase() +
+            this.#gradient.type.slice(1);
+          label.textContent = newLabel;
+        }
         break;
+      }
       case "image":
         if (this.#opacityInput) {
           this.#opacityInput.setAttribute(
@@ -6915,10 +6923,12 @@ class FigFillPicker extends HTMLElement {
   // ============ IMAGE TAB ============
   #initImageTab() {
     const container = this.#dialog.querySelector('[data-tab="image"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-media-header">
-        <fig-dropdown class="fig-fill-picker-scale-mode" value="${
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#image.scaleMode
         }">
           <option value="fill" selected>Fill</option>
@@ -7067,10 +7077,12 @@ class FigFillPicker extends HTMLElement {
   // ============ VIDEO TAB ============
   #initVideoTab() {
     const container = this.#dialog.querySelector('[data-tab="video"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-media-header">
-        <fig-dropdown class="fig-fill-picker-scale-mode" value="${
+        <fig-dropdown class="fig-fill-picker-scale-mode" ${expAttr} value="${
           this.#video.scaleMode
         }">
           <option value="fill" selected>Fill</option>
@@ -7156,6 +7168,8 @@ class FigFillPicker extends HTMLElement {
   // ============ WEBCAM TAB ============
   #initWebcamTab() {
     const container = this.#dialog.querySelector('[data-tab="webcam"]');
+    const experimental = this.getAttribute("experimental");
+    const expAttr = experimental ? `experimental="${experimental}"` : "";
 
     container.innerHTML = `
       <div class="fig-fill-picker-webcam-preview">
@@ -7166,7 +7180,7 @@ class FigFillPicker extends HTMLElement {
         </div>
       </div>
       <div class="fig-fill-picker-webcam-controls">
-        <fig-dropdown class="fig-fill-picker-camera-select" style="display: none;">
+        <fig-dropdown class="fig-fill-picker-camera-select" ${expAttr} style="display: none;">
         </fig-dropdown>
         <fig-button class="fig-fill-picker-webcam-capture" variant="primary">
           Capture

package/index.html

@@ -288,6 +288,17 @@
                 <label>Link</label>
                 <fig-button variant="link">Link Button</fig-button>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Input</label>
+                <fig-button variant="input">Input Style</fig-button>
+            </fig-field>
+            <fig-field direction="horizontal">
+                <label>Input (with icon)</label>
+                <fig-button variant="input">
+                    Options
+                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                </fig-button>
+            </fig-field>
 
             <h3>Sizes</h3>
             <fig-field direction="horizontal">
@@ -323,6 +334,11 @@
                 <fig-button variant="link"
                             disabled>Disabled</fig-button>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Disabled (input)</label>
+                <fig-button variant="input"
+                            disabled>Disabled</fig-button>
+            </fig-field>
 
             <h3>Icon Buttons</h3>
             <fig-field direction="horizontal">
@@ -372,6 +388,13 @@
                     </svg>
                 </fig-button>
             </fig-field>
+            <fig-field direction="horizontal">
+                <label>Icon (input)</label>
+                <fig-button variant="input"
+                            icon="true">
+                    <span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                </fig-button>
+            </fig-field>
             <fig-field direction="horizontal">
                 <label>Icon (link)</label>
                 <fig-button variant="link"
@@ -3751,6 +3774,11 @@
                           style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
                     <code>--icon-steppers</code>
                 </vstack>
+                <vstack style="align-items: center; gap: 4px;">
+                    <span class="fig-mask-icon"
+                          style="--icon: var(--icon-chevron); --size: 1rem"></span>
+                    <code>--icon-chevron</code>
+                </vstack>
             </hstack>
 
             <h3>Custom Size</h3>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.18.2",
+  "version": "2.19.0",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",