@rogieking/figui3 8.9.11 → 8.9.13

package/.cursor/skills/figui3/SKILL.md

@@ -72,9 +72,9 @@ Color picker modes: `fig-fill-picker` is optional editor. Do not use `picker` /
 ## Overlay rules
 
 - `<dialog is="fig-dialog">` — modal/task dialog. `position` is viewport placement. No `anchor`.
-- `<dialog is="fig-popup">` — anchored float (`anchor`, `position`, `offset`, `viewport-margin`). `variant="popover"` uses CSS `filter` (containing block for `position: fixed`).
+- `<dialog is="fig-popup">` — anchored float (`anchor`, `position`, `offset`, `viewport-margin`). `title` auto-builds a header. `variant="popover"` uses CSS `filter` (containing block for `position: fixed`). Sticky `fig-separator` + `fig-menu-item` lists scroll on the popup.
 - `<dialog is="fig-toast">` — call `showToast()`. `theme`, `duration`, `live`, `dismiss`, `icon`.
-- `fig-menu` and `fig-select` use `popover="manual"` so lists escape filter-containing popups to the top layer. Nested menus inside popovers must keep that.
+- `fig-menu` and `fig-select` use `popover="manual"` so lists escape filter-containing popups to the top layer. Nested menus inside popovers must keep that. `fig-menu` slots items (does not relocate them); triggers get `slot="trigger"`.
 
 ```html
 <dialog is="fig-dialog" drag handle="fig-header">
@@ -156,7 +156,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | `fig-segmented-control` / `fig-segment` | `#segmented-control` | Radio-group pattern |
 | `fig-chooser` / `fig-choice` | (containers) | Listbox selection |
 | `fig-separator` / `fig-menu-separator` | `#separator` | Optional `label`, `sticky`, `borderless` |
-| `fig-menu` / `fig-menu-item` | `#menu` | `fig-menu-trigger`, `trigger="contextmenu"`, `position`, `offset` |
+| `fig-menu` / `fig-menu-item` | `#menu` | `fig-menu-trigger`, `trigger="contextmenu"`, `position`, `offset`. Item also works in `fig-popup` (sticky separators, nested row menus). |
 | `fig-icon` | `#icon` | Token mask (`name`, `size="small"`, `color`) |
 | `fig-avatar` | `#avatar` | `src` / `name`, `size="large"` |
 | `fig-truncate` | `#truncate` | `position="right\|left\|middle"`, `tooltip`, `tail` |

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

@@ -49,11 +49,12 @@ Toast: `theme`, `duration`, `offset`, `dismiss`, `live="polite|assertive"`, `ico
 
 ## `fig-menu`
 
-- Trigger: child with `fig-menu-trigger`, or `trigger="contextmenu"`
+- Trigger: child with `fig-menu-trigger` (auto `slot="trigger"`), or `trigger="contextmenu"`
 - `position`, `offset`, `closedby="auto|any|none"`, `open`
-- Items: `fig-menu-item` (`value`, `disabled`, `subtle`)
+- Items stay in light DOM and slot into the popup (do not relocate)
+- Items: `fig-menu-item` (`value`, `disabled`, `subtle`). Also a list row outside `fig-menu` (popup, sticky separators, nested row `fig-menu`).
 - Dividers: `fig-separator` / `fig-menu-separator` (`label`, `sticky`, `borderless`)
-- Popup uses `popover="manual"` (top layer)
+- Popup uses `popover="manual"` (top layer) and stays in the menu shadow so slots keep working
 
 ## Color / fill values
 

package/README.md

@@ -1369,6 +1369,7 @@ An anchored floating surface built on `<dialog>` with collision-aware positionin
 | `drag` | boolean | `false` | Draggable |
 | `handle` | string | — | CSS selector for drag handle |
 | `autoresize` | boolean | `false` | Auto-resize to content |
+| `title` | string | — | Auto-generated header (same as `fig-dialog`) |
 
 ```html
 <dialog is="fig-popup" anchor="#my-button" position="center right" variant="popover">
@@ -1451,6 +1452,10 @@ A visual divider between content groups. The optional `label` attribute adds a g
 
 Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="menu"`, `aria-expanded`, and `aria-controls`; menu items use `role="menuitem"` and disabled items are skipped by keyboard navigation.
 
+Items stay in the menu's light DOM and project into the popup through slots (same pattern as `fig-select` / `fig-select-options`). The trigger is assigned `slot="trigger"` automatically; items use the default slot. React can add or remove `fig-menu-item` children without `removeChild` errors.
+
+`fig-menu-item` also works as a list row outside `fig-menu` — typically in `<dialog is="fig-popup">` with `<fig-content padding="none">`, sticky `<fig-separator>`s, and a nested `<fig-menu>` for row actions. Item color inherits from the parent surface.
+
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `open` | boolean | `false` | Open state |
@@ -1476,6 +1481,25 @@ Triggered menu with native keyboard patterns. The trigger gets `aria-haspopup="m
 </fig-menu>
 ```
 
+Popup list (no wrapping `fig-menu`):
+
+```html
+<dialog is="fig-popup" title="Version history" anchor="#versions" position="bottom left">
+  <fig-content padding="none">
+    <fig-separator sticky label="Today"></fig-separator>
+    <fig-menu-item value="v9" subtle>
+      Version 9
+      <fig-menu position="bottom right">
+        <fig-button fig-menu-trigger variant="ghost" icon aria-label="More">
+          <fig-icon name="more"></fig-icon>
+        </fig-button>
+        <fig-menu-item value="restore">Restore this version</fig-menu-item>
+      </fig-menu>
+    </fig-menu-item>
+  </fig-content>
+</dialog>
+```
+
 `fig-separator` and `fig-menu-separator` accept optional `label` — renders the rule, then secondary group text underneath.
 
 ---

package/components.css

@@ -3143,6 +3143,27 @@ dialog[is="fig-popup"] {
     display: block;
   }
 
+  &[open]:not([open="false"]):has(> fig-content) {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  > fig-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--fig-popup-bg-color, var(--figma-color-bg));
+  }
+
+  &:has(> fig-header) {
+    --fig-sticky-header-size: var(--spacer-6);
+
+    > :is(fig-separator, fig-menu-separator)[sticky]:not([sticky="false"]) {
+      top: var(--fig-sticky-header-size);
+    }
+  }
+
 
   &[theme="dark"] {
     color-scheme: dark;
@@ -3611,13 +3632,17 @@ fig-content {
   }
 }
 
-fig-content[padding]:not([padding="false"]):not(:empty) {
-  padding-inline: var(--spacer-3);
-}
-
-fig-content:empty,
-fig-content:not(:has(*)) {
-  padding: 0;
+fig-content{
+  &[padding]:not([padding="false"]):not([padding="none"]):not(:empty) {
+    padding-inline: var(--spacer-3);
+  }
+  &:empty,
+  &::not(:has(*)) {
+    padding: 0;
+  }
+  &[padding="none"]{
+    padding: 0;
+  }
 }
 
 vstack,
@@ -5535,23 +5560,49 @@ fig-color-tip {
 /* Menu */
 fig-menu {
   display: contents;
+}
 
-  & > fig-menu-item,
-  & > :is(fig-separator, fig-menu-separator) {
-    display: none;
-  }
+/*
+ * Internal menu is a fig-popup inside fig-menu's shadow, so document
+ * dialog[is="fig-popup"] rules don't apply. Expose part=listbox and mirror
+ * the menu-theme popup chrome (same tokens as fig-select::part(listbox)).
+ */
+fig-menu::part(listbox) {
+  --z-index: 999999;
+  --fig-popup-radius: var(--radius-large);
+  --fig-popup-bg-color: var(--figma-color-bg-menu);
+
+  z-index: var(--z-index);
+  position: fixed;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  overflow: hidden;
+  border-radius: var(--fig-popup-radius);
+  background-color: var(--fig-popup-bg-color);
+  color: var(--figma-color-text-menu);
+  color-scheme: dark;
+  box-shadow: var(--figma-elevation-400-menu-panel);
+  min-width: 6rem;
+  max-height: calc(100vh - 1rem);
+  height: max-content;
 }
 
 fig-menu-item {
-  --fig-menu-item-padding: var(--spacer-4);
+  --fig-menu-item-padding: var(--spacer-1) var(--spacer-4);
+  box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: var(--spacer-2);
-  padding: 0 var(--fig-menu-item-padding);
-  height: var(--spacer-4);
+  width: 100%;
+  padding: var(--fig-menu-item-padding);
+  min-height: var(--spacer-4);
+  height: auto;
   cursor: default;
   border-radius: var(--radius-medium);
-  color: var(--figma-color-text-menu);
+  color: inherit;
   font-weight: var(--body-medium-fontWeight);
   position: relative;
 
@@ -5559,6 +5610,23 @@ fig-menu-item {
     margin: 0 0 var(--spacer-1) 0;
   }
 
+  label {
+    color: var(--figma-color-text-secondary);
+  }
+
+  > :not(fig-icon):not(fig-menu) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  > fig-menu {
+    flex: 0 0 auto;
+  }
+
+  &[size="large"]{
+    --fig-menu-item-padding: var(--spacer-2) var(--spacer-4);
+  }
+
   &::before {
     content: "";
     display: block;
@@ -5596,14 +5664,15 @@ fig-menu-item {
 :is(fig-separator, fig-menu-separator) {
   --fig-separator-color: var(--figma-color-border);
   --fig-separator-label-color: var(--figma-color-text-secondary);
-  --fig-menu-inline-padding: 0 var(--spacer-3);
+  --fig-separator-padding: 0 var(--spacer-3);
 
   display: block;
   box-sizing: border-box;
+  flex-shrink: 0;
   width: 100%;
   height: 1px;
   margin: var(--spacer-2) 0;
-  padding: 0;
+  padding: var(--fig-separator-padding);
   border: 0;
   background: var(--fig-separator-color);
   color: var(--fig-separator-label-color);
@@ -5635,7 +5704,6 @@ fig-menu-item {
     height: auto;
     margin: var(--spacer-2) 0;
     margin-bottom: var(--spacer-1);
-    padding: var(--fig-menu-inline-padding);
     background: transparent;
 
     &::before {
@@ -5663,10 +5731,17 @@ fig-menu-item {
     &[sticky]:not([sticky="false"]) {
       position: sticky;
       top: 0;
-      z-index: 1;
+      z-index: 9999;
       background: var(--fig-popup-bg-color, var(--figma-color-bg));
 
-      :is(fig-select-options, .fig-menu-options).overflow-start > & {
+      &[stuck] {
+        --fig-separator-padding: var(--spacer-2) var(--spacer-3);
+        &::before {
+          display: none;
+        }
+      }
+
+      :is(fig-select-options, .fig-menu-options, fig-menu).overflow-start > & {
         top: var(--fig-vertical-overflow-size, var(--spacer-4));
       }
     }
@@ -5680,18 +5755,8 @@ fig-select-options > :is(fig-separator, fig-menu-separator):first-child[label]:n
 }
 
 dialog[is="fig-popup"][theme="menu"] :is(fig-separator, fig-menu-separator),
+fig-menu > :is(fig-separator, fig-menu-separator),
 fig-select-options > :is(fig-separator, fig-menu-separator) {
   --fig-separator-color: var(--figma-color-border-menu);
   --fig-separator-label-color: var(--figma-color-text-menu-secondary);
 }
-
-dialog[is="fig-popup"][theme="menu"] :is(fig-separator, fig-menu-separator) {
-  --fig-menu-inline-padding: 0
-    var(--fig-menu-item-padding, var(--spacer-4));
-
-  &[label]:not([label=""])::before {
-    margin-inline: calc(
-      -1 * var(--fig-menu-item-padding, var(--spacer-4))
-    );
-  }
-}