@rogieking/figui3 2.13.1 → 2.13.2

package/components.css

@@ -193,9 +193,10 @@
 :root {
   /* Typography & Sizing */
   --font-size: 16px;
-  --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
-    avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
-    arial, sans-serif;
+  --font-family:
+    "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
+    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
+    sans-serif;
   --body-medium-fontSize: 0.6875rem;
   --body-large-fontSize: 0.8125rem;
   --body-letter-spacing: 0.055px;
@@ -206,6 +207,7 @@
   /* Spacing */
   --spacer-1: 0.25rem;
   --spacer-2: 0.5rem;
+  --spacer-2-5: 0.75rem;
   --spacer-3: 1rem;
   --spacer-4: 1.5rem;
   --spacer-5: 2rem;
@@ -304,15 +306,19 @@
   --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
 
   /* Elevations - light theme defaults */
-  --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
-    0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
-  --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: 0 0 0.5px 0 rgba(0, 0, 0, 0.18),
-    0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  --figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
+  --elevation-500-modal-window:
+    0px 0px 0.5px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.18),
+    0px 2px 5px rgba(0, 0, 0, 0.15);
+  --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:
+    0 0 0.5px 0 rgba(0, 0, 0, 0.18), 0 3px 8px 0 rgba(0, 0, 0, 0.1),
+    0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --figma-elevation-400-menu-panel:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
     0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
-  --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
+  --figma-elevation-500-modal-window:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
     0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
   --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
 }
@@ -321,44 +327,48 @@
 /* These cannot use light-dark() as they are complex values */
 @media (prefers-color-scheme: dark) {
   :root {
-    --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+    --handle-shadow:
+      0px 0 0 0.75px rgba(0, 0, 0, 0.1),
       0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-    --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+    --figma-elevation-100:
+      0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
       0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
       0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-    --figma-elevation-200: 0px 3px 8px rgba(0, 0, 0, 0.35),
-      0px 1px 3px rgba(0, 0, 0, 0.5),
+    --figma-elevation-200:
+      0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
       inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
       inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-    --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
-        rgba(255, 255, 255, 0.08) inset,
+    --figma-elevation-400-menu-panel:
+      0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
       0px 10px 16px 0px rgba(0, 0, 0, 0.35),
       inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
       0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-    --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
-      0px 3px 5px rgba(0, 0, 0, 0.35),
+    --figma-elevation-500-modal-window:
+      0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
       inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
   }
 }
 
 /* Class-based dark theme override (for manual theme switching) */
 :root.figma-dark {
-  --handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
+  --handle-shadow:
+    0px 0 0 0.75px rgba(0, 0, 0, 0.1),
     0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
-  --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
+  --figma-elevation-100:
+    0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
     0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
     0px 1px 3px 0px rgba(0, 0, 0, 0.4);
-  --figma-elevation-200: 0px 3px 8px rgba(0, 0, 0, 0.35),
-    0px 1px 3px rgba(0, 0, 0, 0.5),
+  --figma-elevation-200:
+    0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
     inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
     inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
-  --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.08)
-      inset,
+  --figma-elevation-400-menu-panel:
+    0px 0.5px 0px 0px rgba(255, 255, 255, 0.08) inset,
     0px 10px 16px 0px rgba(0, 0, 0, 0.35),
     inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
     0px 2px 5px 0px rgba(0, 0, 0, 0.35);
-  --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
-    0px 3px 5px rgba(0, 0, 0, 0.35),
+  --figma-elevation-500-modal-window:
+    0px 10px 24px rgba(0, 0, 0, 0.45), 0px 3px 5px rgba(0, 0, 0, 0.35),
     inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
 }
 
@@ -639,6 +649,11 @@ fig-dropdown,
     background-color: var(--figma-color-icon);
     pointer-events: none;
   }
+
+  /* Autoresize to content width */
+  &[autoresize] select {
+    field-sizing: content;
+  }
 }
 
 /* Button */
@@ -1119,7 +1134,8 @@ fig-chit {
     }
 
     &[selected]:not([selected="false"])::before {
-      box-shadow: inset 0 0 0 1px var(--figma-color-border-selected),
+      box-shadow:
+        inset 0 0 0 1px var(--figma-color-border-selected),
         inset 0 0 0 3px var(--figma-color-bg);
     }
 
@@ -1475,8 +1491,10 @@ input[type="radio"] {
     border-radius: 100%;
     background-color: var(--figma-color-icon-onbrand);
     transform: scale(0);
-    box-shadow: 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),
+    box-shadow:
+      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);
   }
 }
@@ -1573,12 +1591,12 @@ fig-slider {
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-size: calc(var(--slider-height) / 4);
-  --slider-handle-shadow: inset 0 0 0 calc(4px + 0.5rem * var(--unchanged))
-      var(--handle-color),
+  --slider-handle-shadow:
+    inset 0 0 0 calc(4px + 0.5rem * var(--unchanged)) var(--handle-color),
     0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
-  --slider-handle-shadow-focus: inset 0 0 0 4px var(--handle-color),
-    inset 0 0 0 5px rgba(0, 0, 0, 0.1), var(--handle-shadow),
-    0 0 0 1px var(--figma-color-border-selected);
+  --slider-handle-shadow-focus:
+    inset 0 0 0 4px var(--handle-color), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
+    var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: all 0.1s ease-in-out;
   --handle-transition: var(--slider-transition);
 
@@ -1642,11 +1660,10 @@ fig-slider {
         );
         --width: calc(var(--slider-percent) - var(--start-percent));
         --abs-width: max(
-          var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) *
-            var(--slider-height),
-          -1 * var(--width) + var(--slider-height) / 2 + (
-              var(--slider-complete)
-            ) * var(--slider-height)
+          var(--width) + var(--slider-height) / 2 +
+            (1 - var(--slider-complete)) * var(--slider-height),
+          -1 * var(--width) + var(--slider-height) / 2 +
+            (var(--slider-complete)) * var(--slider-height)
         );
         width: var(--abs-width);
         --delta: calc(var(--slider-complete) - var(--default));
@@ -1736,7 +1753,8 @@ fig-slider {
     }
 
     &.opacity::-webkit-slider-runnable-track {
-      background: linear-gradient(to right, transparent, var(--color)),
+      background:
+        linear-gradient(to right, transparent, var(--color)),
         var(--checkerboard);
     }
   }
@@ -1810,7 +1828,8 @@ fig-slider {
     }
 
     &.opacity::-moz-range-track {
-      background: linear-gradient(to right, transparent, var(--color)),
+      background:
+        linear-gradient(to right, transparent, var(--color)),
         var(--checkerboard);
     }
   }
@@ -1859,8 +1878,8 @@ fig-slider {
     --slider-tick-size: calc(var(--slider-height) / 2);
     --handle-transition: none;
     --slider-transition: none;
-    --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--handle-color),
+    --slider-handle-shadow:
+      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);
 
@@ -1888,8 +1907,8 @@ fig-slider {
     --slider-tick-size: calc(var(--slider-height) / 2);
     --handle-transition: none;
     --slider-transition: none;
-    --slider-handle-shadow: inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--handle-color),
+    --slider-handle-shadow:
+      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);
 
@@ -1994,8 +2013,10 @@ dialog,
     text-overflow: ellipsis;
 
     border-radius: var(--radius-medium, 0.3125rem);
-    box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
-      0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
+      0px 5px 12px 0px rgba(0, 0, 0, 0.13),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
 
     @supports (-webkit-line-clamp: 2) {
       white-space: initial;
@@ -2580,7 +2601,8 @@ fig-input-joystick {
     }
   }
   .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
-    background: linear-gradient(
+    background:
+      linear-gradient(
         45deg,
         transparent calc(50% - 0.5px),
         var(--figma-color-border) calc(50% - 0.5px),
@@ -2892,13 +2914,17 @@ fig-fill-picker {
   height: 1rem;
   border-radius: 50%;
   background: var(--picker-color);
-  box-shadow: inset 0 0 0 0.125rem var(--handle-color),
-    0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+  box-shadow:
+    inset 0 0 0 0.125rem var(--handle-color),
+    0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+    var(--figma-elevation-200);
   transform: translate(-50%, -50%);
   z-index: 1;
   &:hover {
-    box-shadow: inset 0 0 0 0.25rem var(--handle-color),
-      0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
+    box-shadow:
+      inset 0 0 0 0.25rem var(--handle-color),
+      0px 0 0 0.5px rgba(0, 0, 0, 0.1),
+      var(--figma-elevation-200);
     transform: translate(-50%, -50%);
   }
 }
@@ -3054,16 +3080,21 @@ fig-fill-picker {
 .fig-fill-picker-checkerboard {
   position: absolute;
   inset: 0;
-  background-image: linear-gradient(
-      45deg,
+  background-image:
+    linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
+    linear-gradient(
+      -45deg,
       var(--figma-color-bg-tertiary) 25%,
       transparent 25%
     ),
-    linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%),
     linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);
   background-size: 16px 16px;
-  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0px;
 }
 
 .fig-fill-picker-image-preview {

package/fig.js

@@ -2928,7 +2928,7 @@ class FigInputFill extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["value", "disabled"];
+    return ["value", "disabled", "mode"];
   }
 
   connectedCallback() {
@@ -3078,11 +3078,12 @@ class FigInputFill extends HTMLElement {
         break;
     }
 
+    const modeAttr = this.getAttribute("mode");
     this.innerHTML = `
       <div class="input-combo">
         <fig-fill-picker value='${fillPickerValue}' ${
       disabled ? "disabled" : ""
-    }></fig-fill-picker>
+    } ${modeAttr ? `mode="${modeAttr}"` : ""}></fig-fill-picker>
         ${controlsHtml}
       </div>`;
 
@@ -5554,31 +5555,43 @@ class FigFillPicker extends HTMLElement {
       this.#dialog.setAttribute("position", dialogPosition);
     }
 
-    // Check for locked mode
+    // Check for allowed modes (supports comma-separated values like "solid,gradient")
     const mode = this.getAttribute("mode");
-    const validModes = ["solid", "gradient", "image", "video", "webcam"];
-    const lockedMode = validModes.includes(mode) ? mode : null;
-
-    // If locked mode, force fillType
-    if (lockedMode) {
-      this.#fillType = lockedMode;
-      this.#activeTab = lockedMode;
-    }
-
-    // Build header content - dropdown or label
-    const headerContent = lockedMode
-      ? `<span class="fig-fill-picker-type-label">${
-          lockedMode.charAt(0).toUpperCase() + lockedMode.slice(1)
-        }</span>`
-      : `<fig-dropdown class="fig-fill-picker-type" variant="neue" value="${
-          this.#fillType
-        }">
-          <option value="solid">Solid</option>
-          <option value="gradient">Gradient</option>
-          <option value="image">Image</option>
-          <option value="video">Video</option>
-          <option value="webcam">Webcam</option>
+    const allModes = ["solid", "gradient", "image", "video", "webcam"];
+    const modeLabels = {
+      solid: "Solid",
+      gradient: "Gradient",
+      image: "Image",
+      video: "Video",
+      webcam: "Webcam",
+    };
+
+    // Parse allowed modes
+    let allowedModes = allModes;
+    if (mode) {
+      const requestedModes = mode.split(",").map((m) => m.trim().toLowerCase());
+      allowedModes = requestedModes.filter((m) => allModes.includes(m));
+      if (allowedModes.length === 0) allowedModes = allModes;
+    }
+
+    // If current fillType not in allowed modes, switch to first allowed
+    if (!allowedModes.includes(this.#fillType)) {
+      this.#fillType = allowedModes[0];
+      this.#activeTab = allowedModes[0];
+    }
+
+    // Build header content - label if single mode, dropdown if multiple
+    let headerContent;
+    if (allowedModes.length === 1) {
+      headerContent = `<span class="fig-fill-picker-type-label">${modeLabels[allowedModes[0]]}</span>`;
+    } else {
+      const options = allowedModes
+        .map((m) => `<option value="${m}">${modeLabels[m]}</option>`)
+        .join("\n          ");
+      headerContent = `<fig-dropdown class="fig-fill-picker-type" variant="neue" value="${this.#fillType}">
+          ${options}
         </fig-dropdown>`;
+    }
 
     this.#dialog.innerHTML = `
       <fig-header>
@@ -5627,13 +5640,19 @@ class FigFillPicker extends HTMLElement {
   }
 
   #switchTab(tabName) {
-    // Check for locked mode - prevent switching if locked
+    // Check for allowed modes - prevent switching to disallowed mode
     const mode = this.getAttribute("mode");
-    const validModes = ["solid", "gradient", "image", "video", "webcam"];
-    const lockedMode = validModes.includes(mode) ? mode : null;
+    const allModes = ["solid", "gradient", "image", "video", "webcam"];
+
+    let allowedModes = allModes;
+    if (mode) {
+      const requestedModes = mode.split(",").map((m) => m.trim().toLowerCase());
+      allowedModes = requestedModes.filter((m) => allModes.includes(m));
+      if (allowedModes.length === 0) allowedModes = allModes;
+    }
 
-    if (lockedMode && tabName !== lockedMode) {
-      return; // Don't allow switching away from locked mode
+    if (!allowedModes.includes(tabName)) {
+      return; // Don't allow switching to disallowed mode
     }
 
     this.#activeTab = tabName;
@@ -6133,8 +6152,9 @@ class FigFillPicker extends HTMLElement {
           this.#gradient.centerY
         }%, ${stops})`;
       case "angular":
-        // Offset by 90° to align with fig-input-angle (0° = right) vs CSS conic (0° = top)
-        return `conic-gradient(from ${this.#gradient.angle + 90}deg, ${stops})`;
+        // Internal gradient.angle is already in CSS coordinate system (0° = top)
+        // because it's converted when reading from fig-input-angle
+        return `conic-gradient(from ${this.#gradient.angle}deg, ${stops})`;
       default:
         return `linear-gradient(${this.#gradient.angle}deg, ${stops})`;
     }

package/index.html

@@ -861,6 +861,20 @@
                 <option>Option Three</option>
             </fig-dropdown>
 
+            <h3>Autoresize to Content</h3>
+            <p style="font-size: 12px; color: var(--figma-color-text-secondary); margin-bottom: 8px;">
+                Uses <code>field-sizing: content</code> to resize based on selected option.
+            </p>
+            <fig-dropdown autoresize
+                          variant="neue">
+                <option>XS</option>
+                <option>Small</option>
+                <option>Medium</option>
+                <option>Large</option>
+                <option>Extra Large with Long Text</option>
+                <option>XXL Super Extended Option</option>
+            </fig-dropdown>
+
             <h3>Dropdown Neue Variant (with many options)</h3>
             <fig-dropdown variant="neue"
                           type="dropdown"
@@ -1264,6 +1278,19 @@
             <h4>Image Only</h4>
             <fig-fill-picker mode="image"></fig-fill-picker>
 
+            <h3>Limited Mode Selection</h3>
+            <p class="description">Use comma-separated values in the <code>mode</code> attribute to limit available modes
+                while still allowing switching between them.</p>
+
+            <h4>Solid and Gradient Only</h4>
+            <fig-fill-picker mode="solid,gradient"></fig-fill-picker>
+
+            <h4>Solid, Gradient, and Image</h4>
+            <fig-fill-picker mode="solid,gradient,image"></fig-fill-picker>
+
+            <h4>With fig-input-fill (mode passed through)</h4>
+            <fig-input-fill mode="solid,gradient" value='{"type":"solid","color":"#667eea"}'></fig-input-fill>
+
             <h3>Event Listening</h3>
             <fig-fill-picker id="fill-picker-events"
                              value='{"type":"solid","color":"#FCBAD3"}'></fig-fill-picker>

package/package.json

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