@rogieking/figui3 9.0.11 → 9.0.13

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`. The menu matches the anchor width and centers its selected row over it; if the anchor is narrower than the menu’s usable minimum, default overlay mode centers the wider menu over the anchor. Clear it to restore trigger-text alignment. Explicit `position` keeps anchor-derived sizing while applying normal popup placement and edge 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 menu matches the anchor width and centers its selected row over the anchor. If the anchor is narrower than the menu’s usable minimum, the wider menu is centered over it in the default overlay mode. Removing the anchor restores trigger-text alignment. An explicit `position` keeps the anchor-derived width while applying normal popup placement and edge alignment relative to the menu anchor.
+
+```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 {