@rogieking/figui3 9.0.2 → 9.0.3

package/.cursor/skills/fig-editor/components.md

@@ -9,7 +9,7 @@ Install `fig-editor.css` + `fig-editor.js` (pulls in `fig.js` and `fig-lab.js`).
 Figma-style listbox. Prefer this over core `fig-dropdown`.
 
 ```tsx
-<fig-select value={align} label="Align" full onChange={onChange}>
+<fig-select value={align} label="Align" size="large" full onChange={onChange}>
   <fig-select-options>
     <fig-select-option value="left">Left</fig-select-option>
     <fig-select-option value="center">Center</fig-select-option>
@@ -29,7 +29,7 @@ Data-driven (no authored options):
 />
 ```
 
-- Attrs: `value`, `label`, `options` (comma / newline / JSON), `variant` (`ghost`), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (`bottom left` default, also `bottom right`, `top left`, `top right`, `bottom center`, `top center`), `offset`, `closedby`, `open`
+- Attrs: `value`, `label`, `options` (comma / newline / JSON), `variant` (`ghost`), `size` (`large`, 32px trigger), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (`bottom left` default, also `bottom right`, `top left`, `top right`, `bottom center`, `top center`), `offset`, `closedby`, `open`
 - Events: `input` / `change` on commit; `optionhover` with the option value in `detail` (does not change selection). Use a native listener for `optionhover`.
 - Do not `stopPropagation` on option click — React light-DOM handlers must run.
 - Internal popup uses `popover="manual"` so the list works inside `fig-popup variant="popover"`.

package/.cursor/skills/fig-editor/reference.md

@@ -21,9 +21,10 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 ## `fig-select` observed
 
-`value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`
+`value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`, `size`
 
 - `subtle` applies the secondary hover/focus fill to every option
+- `size="large"` sets a 32px trigger
 
 Position enum:
 

package/.cursor/skills/figui3/components.md

@@ -31,13 +31,13 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ### `fig-dropdown`
 
 ```tsx
-<fig-dropdown value={value} variant="ghost" full onChange={onChange}>
+<fig-dropdown value={value} variant="ghost" size="large" full onChange={onChange}>
   <option value="left">Left</option>
   <option value="center">Center</option>
 </fig-dropdown>
 ```
 
-- Attrs: `value`, `type` (`select` | `dropdown`), `variant` (`ghost`), `full`, `disabled`
+- Attrs: `value`, `type` (`select` | `dropdown`), `variant` (`ghost`), `size` (`large`), `full`, `disabled`
 - Events: `input` / `change` → `currentTarget.value`
 - Prefer `fig-select` (editor) for Figma-style menus.
 

package/.cursor/skills/figui3/reference.md

@@ -25,7 +25,7 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 ## `fig-dropdown`
 
-- `value`, `type="select|dropdown"`, `variant="ghost"`, `full`, `disabled`
+- `value`, `type="select|dropdown"`, `variant="ghost"`, `size="large"` (32px), `full`, `disabled`
 - Children: native `<option>` / `<optgroup>`
 
 ## `fig-slider`

package/README.md

@@ -190,10 +190,11 @@ Minimal example:
 | `type` | string | `"select"` | `"select"` or `"dropdown"` |
 | `label` | string | — | Accessible label for the generated native `<select>` |
 | `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `size` | string | — | `"large"` for a 32px-tall control |
 | `disabled` | boolean | `false` | Disabled state |
 
 ```html
-<fig-dropdown value="2">
+<fig-dropdown value="2" size="large">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
 </fig-dropdown>
@@ -215,6 +216,7 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 | `label` | string | — | Closed-state / accessible label |
 | `options` | string | — | Comma, newline, or JSON options if no authored `fig-select-option` children |
 | `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `size` | string | — | `"large"` for a 32px-tall trigger |
 | `subtle` | boolean | `false` | Use the secondary hover/focus fill for every option |
 | `full` | boolean | `false` | Stretch to available width |
 | `position` | string | `"bottom left"` | Popup position |
@@ -223,7 +225,7 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 Author options in `<fig-select-options>`, or pass `options`. Add `subtle` to one `<fig-select-option>` for the secondary hover/focus fill, or to `<fig-select>` to apply it to every option. Use `label` on `<fig-select-option>` when the option content is rich. `fig-separator` with `sticky` pins group labels while scrolling.
 
 ```html
-<fig-select value="center" label="Align">
+<fig-select value="center" label="Align" size="large">
   <fig-select-options>
     <fig-select-option value="left">Left</fig-select-option>
     <fig-select-option value="center">Center</fig-select-option>

package/components.css

@@ -686,7 +686,7 @@ input[type="text"][list] {
   
 
   &:not([multiple]) {
-    height: var(--spacer-4);
+    height: var(--fig-dropdown-height, var(--spacer-4));
     padding: 0 var(--spacer-4) 0 var(--spacer-2);
     background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
     var(--icon-16-chevron);
@@ -3458,6 +3458,10 @@ fig-input-palette {
 }
 
 fig-dropdown {
+  &[size="large"] {
+    --fig-dropdown-height: var(--spacer-5);
+  }
+
   &[full]:not([full="false"]) {
     display: flex;
     width: 100%;