@rogieking/figui3 9.0.11 → 9.0.12

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

@@ -41,7 +41,7 @@ Registered tags:
 - `fig-dropdown` (core): native `<select>`.
 - `fig-select` (this skill): custom listbox. Use this for Figma-style menus.
 
-Author options as React children, or pass `options`. Do not `stopPropagation` on option click. `optionhover` and `optionfocus` are native preview listeners.
+Author options as React children, or pass `options`. Set `menu-anchor` to a selector or assign an element to `menuAnchor` when the menu should align against another element. Do not `stopPropagation` on option click. `optionhover` and `optionfocus` are native preview listeners.
 
 ## Fill picker
 

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

@@ -29,7 +29,8 @@ Data-driven (no authored options):
 />
 ```
 
-- 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`
+- Attrs: `value`, `label`, `options` (comma / newline / JSON), `menu-anchor` (alternate anchor selector), `variant` (`ghost`), `size` (`large`, 32px trigger), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (omit to overlay the selected option on the trigger; set `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, or `top center` to place the menu like a popup), `offset`, `closedby`, `open`
+- Property: `menuAnchor` accepts an `Element`, selector string, or `null`. Alternate anchors preserve selected-option alignment; clear it to restore trigger alignment.
 - Events: `input` / `change` on commit; `optionhover` for pointer previews; `optionfocus` for open-menu keyboard previews. Both preview events provide the option value in `detail` without changing selection and require native listeners.
 - 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,12 +21,13 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 ## `fig-select` observed
 
-`value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`, `size`
+`value`, `disabled`, `label`, `options`, `menu-anchor`, `position`, `offset`, `closedby`, `open`, `variant`, `size`
 
 - `subtle` applies the secondary hover/focus fill to every option
 - `size="large"` sets a 32px trigger
+- `menu-anchor` accepts an alternate anchor selector; the `menuAnchor` property accepts an `Element`, selector string, or `null`
 
-Position enum:
+Position: omit to overlay the selected option on the trigger. Set to place the menu like a popup:
 
 - `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, `top center`
 

package/README.md

@@ -215,11 +215,12 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 | `value` | string | — | Selected option value |
 | `label` | string | — | Closed-state / accessible label |
 | `options` | string | — | Comma, newline, or JSON options if no authored `fig-select-option` children |
+| `menu-anchor` | CSS selector | — | Alternate element to align the open menu against |
 | `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 |
+| `position` | string | — | Omit to overlay the selected option on the trigger; set `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, or `top center` to place the menu like a popup |
 | `disabled` | boolean | `false` | Disabled state |
 
 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.
@@ -234,6 +235,13 @@ Author options in `<fig-select-options>`, or pass `options`. Add `subtle` to one
 </fig-select>
 ```
 
+Set `menu-anchor` to a selector, or assign an element to the `menuAnchor` property. The selected option aligns against the alternate anchor; removing it restores alignment to the select trigger.
+
+```js
+document.querySelector("fig-select").menuAnchor =
+  document.querySelector("#menu-anchor");
+```
+
 **Events:** `input`, `change`, `optionhover` (`detail` is the hovered option value), `optionfocus` (`detail` is the keyboard-focused option value while the menu is open).
 
 ---

package/components.css

@@ -6248,14 +6248,15 @@ fig-menu-item {
           display: none;
         }
       }
-
-      :is(fig-select-options, .fig-menu-options, fig-menu).overflow-start > & {
-        top: var(--fig-vertical-overflow-size, var(--spacer-4,1rem));
-      }
     }
   }
 }
 
+:is(fig-select-options, .fig-menu-options, fig-menu).overflow-start
+  > :is(fig-separator, fig-menu-separator)[label]:not([label=""])[sticky]:not([sticky="false"]) {
+  top: var(--fig-vertical-overflow-size, var(--spacer-4, 1rem)) !important;
+}
+
 dialog[is="fig-popup"][theme="menu"]
   :is(fig-separator, fig-menu-separator):first-child[label]:not([label=""])::before,
 fig-select-options > :is(fig-separator, fig-menu-separator):first-child[label]:not([label=""])::before {