@rogieking/figui3 9.0.2 → 9.0.4

package/fig-editor.css

@@ -686,6 +686,10 @@ fig-select {
   color: var(--figma-color-text);
   box-shadow: inset 0 0 0 1px var(--figma-color-border);
 
+  &[size="large"] {
+    height: var(--spacer-5);
+  }
+
   &[full]:not([full="false"]) {
     display: flex;
     width: 100%;

package/fig-editor.js

@@ -494,6 +494,7 @@ figEditorDefineElement("fig-select-options", FigSelectOptions);
 /**
  * A dropdown-styled select.
  * @attr {string} variant - Visual style. Use `ghost` for a borderless control.
+ * @attr {string} size - Control size. Use `large` for a 32px-tall control.
  */
 class FigSelect extends HTMLElement {
   #button = null;
@@ -537,6 +538,7 @@ class FigSelect extends HTMLElement {
       "closedby",
       "open",
       "variant",
+      "size",
       "aria-label",
     ];
   }
@@ -564,6 +566,7 @@ class FigSelect extends HTMLElement {
     this.#ensurePanelSlotAttrs();
     this.#syncOptionsFromAttribute();
     this.#syncDisabled();
+    this.#syncSize();
     this.#syncPopupAttrs();
     this.#syncValue();
     this.#setupListeners();
@@ -593,6 +596,10 @@ class FigSelect extends HTMLElement {
       this.#syncDisabled();
       return;
     }
+    if (name === "size") {
+      this.#syncSize();
+      return;
+    }
     if (name === "open") {
       if (newValue === null || newValue === "false") this.#closeList();
       else this.#openList();
@@ -611,6 +618,13 @@ class FigSelect extends HTMLElement {
     this.#button?.blur();
   }
 
+  #syncSize() {
+    if (!this.#button) return;
+    const size = this.getAttribute("size");
+    if (size) this.#button.setAttribute("size", size);
+    else this.#button.removeAttribute("size");
+  }
+
   #isMenuChild(node) {
     return (
       node?.nodeType === 1 &&
@@ -763,10 +777,15 @@ class FigSelect extends HTMLElement {
         .fig-select-prepend {
           display: inline-flex;
           flex: 0 0 auto;
+          justify-content: center;
           align-items: center;
-          margin-right: var(--spacer-1, 0.25rem);
+          min-width: var(--spacer-4, 1.5rem);
+          height: 100%;
           pointer-events: none;
         }
+        :host([size="large"]) .fig-select-prepend {
+          min-width: var(--spacer-5, 2rem);
+        }
         .fig-select-prepend:not(.has-content) {
           display: none;
         }

package/fig.js

@@ -906,6 +906,7 @@ figDefineElement("fig-button", FigButton);
  * @attr {string} type - The dropdown type: "select" (default) or "dropdown"
  * @attr {string} value - The currently selected value
  * @attr {string} variant - Visual style. Use `ghost` for a borderless control.
+ * @attr {string} size - Control size. Use `large` for a 32px-tall control.
  */
 class FigDropdown extends HTMLElement {
   #label = "Menu";
@@ -1104,7 +1105,7 @@ class FigDropdown extends HTMLElement {
     this.setAttribute("value", value);
   }
   static get observedAttributes() {
-    return ["value", "type", "label", "disabled", "variant"];
+    return ["value", "type", "label", "disabled", "variant", "size"];
   }
   #syncDisabled() {
     const disabled =

package/package.json

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