@rogieking/figui3 9.1.6 → 9.2.1

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

@@ -17,6 +17,24 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 - Attrs: `variant` (`""` primary, `secondary`, `destructive`, `destructiveSecondary`, `destructiveGhost`, `destructiveLink`, `ghost`, `link`, `input`, `overlay`), `type` (`button`, `toggle`, `submit`, `select`, `upload`), `size` (`""`, `large`, `compact`), `align`, `selected`, `disabled`, `icon`, `close-dialog`
 - Events: `click`; toggle also reflects `selected`
 
+### `fig-property-button`
+
+```tsx
+<fig-property-button
+  icon="settings"
+  aria-haspopup="dialog"
+  aria-controls="effects-editor"
+  onClick={onClick}
+>
+  Effects
+</fig-property-button>
+```
+
+- Attrs: `icon` (required fig-icon name), `selected`, `disabled`, `aria-haspopup`, `aria-expanded`, `aria-controls`
+- Fixed presentation: secondary, full width, start aligned, leading icon
+- Trigger only: the consumer owns and positions the corresponding popup/dialog
+- Events: `click`
+
 ### `fig-button-combo`
 
 ```tsx
@@ -301,6 +319,18 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 - Attrs: `direction` (`horizontal` | `vertical`), `label`, `columns`
 - Put control attrs on the control, not the field.
 
+### `fig-stack`
+
+```tsx
+<fig-stack direction="vertical" gap="3">
+  <fig-stack justify="between" full>{children}</fig-stack>
+  <fig-stack direction="grid" columns="3">{children}</fig-stack>
+</fig-stack>
+```
+
+- Attrs: `direction` (`horizontal` default | `vertical` | `grid`), `gap` (spacer token or CSS length), `align`, `justify` (`start` | `center` | `end` | `between` | `around` | `stretch`), `wrap`, `full`, `columns` (grid), `min-width` (grid auto-fill)
+- Use instead of the deprecated `hstack` / `vstack` tags.
+
 ### `fig-group`
 
 ```tsx

package/.cursor/skills/figui3/react.md

@@ -51,6 +51,7 @@ type FigTag =
   | "fig-attachments"
   | "fig-avatar"
   | "fig-button"
+  | "fig-property-button"
   | "fig-button-combo"
   | "fig-canvas-control"
   | "fig-card"

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

@@ -16,6 +16,14 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 - `size`: `""`, `large`, `compact`
 - `selected`, `disabled`, `icon` (presence)
 
+## `fig-property-button`
+
+- `icon`: required `fig-icon` name
+- `selected`, `disabled`
+- `aria-haspopup`, `aria-expanded`, `aria-controls`
+- Fixed secondary, full-width, start-aligned presentation
+- Trigger only; consumers manage the popup/dialog
+
 ## `fig-input-text`
 
 - `type`: `text`, `email`, `password`, `search`, `url`

package/README.md

@@ -95,6 +95,7 @@ Minimal example:
 | Component | Tag | Description |
 |---|---|---|
 | [Button](#button) | `<fig-button>` | Buttons with variants, toggle, select, upload |
+| [Property Button](#property-button) | `<fig-property-button>` | Full-width secondary trigger for property editors |
 | [Dropdown](#dropdown) | `<fig-dropdown>` | Native select wrapper with Figma styling |
 | [Select](#select) | `<fig-select>` | Custom listbox select (requires `fig-editor.js`) |
 | [Combo Input](#combo-input) | `<fig-combo-input>` | Text input with dropdown suggestions |
@@ -180,6 +181,45 @@ Minimal example:
 
 ---
 
+#### Property Button
+
+`<fig-property-button>` — [demo](https://rog.ie/figui3/#property-button)
+
+A full-width secondary trigger for opening an effect editor, binding editor, preset picker, or other property-specific flyout. The component supplies the surface and generated leading icon but does not create or position a popup.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `icon` | string | required | `fig-icon` name rendered in the prepend slot |
+| `selected` | boolean | `false` | Selected styling, typically while the editor is open |
+| `disabled` | boolean | `false` | Disabled state |
+| `aria-haspopup` | string | — | Popup type exposed to assistive technology |
+| `aria-expanded` | boolean | — | Whether the controlled flyout is open |
+| `aria-controls` | string | — | ID of the controlled flyout |
+
+```html
+<fig-property-button
+  id="effects-trigger"
+  icon="settings"
+  aria-haspopup="dialog"
+  aria-controls="effects-editor"
+>
+  Effects
+</fig-property-button>
+
+<dialog
+  is="fig-popup"
+  id="effects-editor"
+  anchor="#effects-trigger"
+  position="bottom left"
+>
+  <fig-content>Effect controls</fig-content>
+</dialog>
+```
+
+Wire click/open state in application code. `variant="secondary"`, `full`, and start alignment are enforced by the component.
+
+---
+
 #### Dropdown
 
 `<fig-dropdown>` — [demo](https://rog.ie/figui3/#dropdown)
@@ -1073,6 +1113,41 @@ timelines. Unsupported browsers retain ordinary scrolling without a fade.
 
 ---
 
+#### Stack
+
+`<fig-stack>` — [demo](https://rog.ie/figui3/#stack)
+
+A layout primitive for rows, columns, and grids. Replaces the deprecated `hstack` / `vstack` tags, which still render as aliases.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `direction` | string | `"horizontal"` | `"horizontal"`, `"vertical"`, `"grid"` |
+| `gap` | string | `"2"` | Spacer token (`"0"`–`"6"`, `"2-5"`, `"half"`) or any CSS length |
+| `align` | string | `"center"` (horizontal), `"start"` (vertical), `"stretch"` (grid) | `"start"`, `"center"`, `"end"`, `"stretch"`, `"baseline"` |
+| `justify` | string | `"start"` | `"start"`, `"center"`, `"end"`, `"between"`, `"around"`, `"stretch"` |
+| `wrap` | boolean | `false` | Wrap items onto multiple lines |
+| `full` | boolean | `false` | Fill the parent's width |
+| `columns` | string | auto-fill | Grid only: column count (`"3"`) or a `grid-template-columns` value |
+| `min-width` | string | `"5rem"` | Grid only: minimum auto-fill column width |
+
+Adjacent `fig-field` children in a horizontal stack share compact gutters.
+
+```html
+<fig-stack direction="vertical" gap="3">
+  <fig-stack justify="between" full>
+    <label>Layers</label>
+    <fig-button variant="ghost" icon><fig-icon name="add"></fig-icon></fig-button>
+  </fig-stack>
+  <fig-stack direction="grid" columns="3">
+    <fig-swatch value="#0D99FF"></fig-swatch>
+    <fig-swatch value="#FFC700"></fig-swatch>
+    <fig-swatch value="#14AE5C"></fig-swatch>
+  </fig-stack>
+</fig-stack>
+```
+
+---
+
 #### Field
 
 `<fig-field>` — [demo](https://rog.ie/figui3/#field)

package/components.css

@@ -804,7 +804,8 @@ select,
 
 /* Button */
 button,
-fig-button {
+fig-button,
+fig-property-button {
   --fig-button-content-alignment: center;
   --fig-button-text-alignment: center;
 
@@ -1149,6 +1150,16 @@ fig-button {
   }
 }
 
+fig-property-button[icon]:not([icon="false"]) {
+  width: 100%;
+  flex: 1 1 auto;
+  padding: 0 calc(var(--spacer-2) - 1px) 0 0;
+
+  &[selected]:not([selected="false"]) {
+    box-shadow: none;
+  }
+}
+
 /* Combo button */
 .fig-button-combo,
 fig-button-combo,
@@ -1158,6 +1169,9 @@ fig-input-combo {
   flex-wrap: nowrap;
   align-items: center;
   gap: 0px;
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
   & > * {
     &:first-child,
     &:first-child > * {
@@ -1181,6 +1195,30 @@ fig-input-combo {
 fig-input-combo {
   gap: 1px;
 }
+
+:is(.fig-button-combo, fig-button-combo, .fig-input-combo, fig-input-combo):not(
+    :has(> :not([variant="secondary"]))
+  ) {
+  gap: 0;
+  border-radius: var(--radius-medium);
+  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+
+  > [variant="secondary"] {
+    box-shadow: none;
+  }
+
+  > [variant="secondary"] + [variant="secondary"] {
+    box-shadow: none;
+    background-image: linear-gradient(
+      var(--figma-color-bordertranslucent),
+      var(--figma-color-bordertranslucent)
+    );
+    background-position: left 1px;
+    background-repeat: no-repeat;
+    background-size: 1px calc(100% - 2px);
+  }
+}
+
 .fig-button-combo,
 fig-button-combo {
   > *:not([variant="secondary"]):not(:first-child) {
@@ -1189,12 +1227,6 @@ fig-button-combo {
       box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
     }
   }
-  > *[variant="secondary"]:not(:first-child) {
-    border-left-width: 0 !important;
-    &[disabled]:not([disabled="false"]) {
-      border-left-width: 0 !important;
-    }
-  }
 }
 
 /* Tabs */
@@ -3625,6 +3657,7 @@ fig-preview {
 
 /* Web Components */
 fig-button,
+fig-property-button,
 fig-content,
 fig-slider,
 fig-switch,
@@ -3941,47 +3974,111 @@ fig-content{
   }
 }
 
-vstack,
-.vstack,
-[vstack] {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: var(--spacer-2);
-  flex-wrap: wrap;
-}
-
 :root [hidden],
 [hidden] {
   display: none !important;
 }
 
+fig-stack,
 hstack,
-.hstack{
+.hstack,
+vstack,
+.vstack,
+[vstack] {
   display: flex;
-  gap: var(--hstack-gap, var(--spacer-2));
-  align-items: var(--hstack-align, center);
-  justify-content: var(--hstack-justify, flex-start);
-  flex-wrap: var(--hstack-wrap, nowrap);
+  flex-direction: row;
+  gap: var(--fig-stack-gap, var(--hstack-gap, var(--spacer-2)));
+  align-items: var(--fig-stack-align, var(--hstack-align, center));
+  justify-content: var(--fig-stack-justify, var(--hstack-justify, flex-start));
+  flex-wrap: var(--fig-stack-wrap, var(--hstack-wrap, nowrap));
+  min-width: 0;
+
+  &:where(fig-stack[direction="vertical"], vstack, .vstack, [vstack]) {
+    flex-direction: column;
+    --fig-stack-align: flex-start;
+  }
+
+  &:where(vstack, .vstack, [vstack]) {
+    --fig-stack-wrap: wrap;
+  }
+
+  &:where([direction="grid"]) {
+    display: grid;
+    grid-template-columns: var(
+      --fig-stack-columns,
+      repeat(auto-fill, minmax(min(var(--fig-stack-min-width, 5rem), 100%), 1fr))
+    );
+    --fig-stack-align: stretch;
+    justify-items: var(--fig-stack-justify-items, stretch);
+  }
 
   &[align="start"] {
-    --hstack-align: flex-start;
+    --fig-stack-align: flex-start;
+  }
+
+  &[align="center"] {
+    --fig-stack-align: center;
   }
 
   &[align="end"] {
-    --hstack-align: flex-end;
+    --fig-stack-align: flex-end;
   }
 
   &[align="stretch"] {
-    --hstack-align: stretch;
+    --fig-stack-align: stretch;
+  }
+
+  &[align="baseline"] {
+    --fig-stack-align: baseline;
+  }
+
+  &[justify="start"] {
+    --fig-stack-justify: flex-start;
+    --fig-stack-justify-items: start;
   }
 
-  & > fig-field:has(+ fig-field) {
-    --fig-field-right-padding: var(--spacer-1);
+  &[justify="center"] {
+    --fig-stack-justify: center;
+    --fig-stack-justify-items: center;
   }
 
-  & > fig-field + fig-field {
-    --fig-field-left-padding: var(--spacer-1);
+  &[justify="end"] {
+    --fig-stack-justify: flex-end;
+    --fig-stack-justify-items: end;
+  }
+
+  &[justify="between"] {
+    --fig-stack-justify: space-between;
+  }
+
+  &[justify="around"] {
+    --fig-stack-justify: space-around;
+  }
+
+  &[justify="stretch"] {
+    --fig-stack-justify-items: stretch;
+  }
+
+  &[wrap]:not([wrap="false"]) {
+    --fig-stack-wrap: wrap;
+  }
+
+  &[wrap="false"] {
+    --fig-stack-wrap: nowrap;
+  }
+
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
+
+  &:is(fig-stack:not([direction]), fig-stack[direction="horizontal"], hstack, .hstack) {
+    & > fig-field:has(+ fig-field) {
+      --fig-field-right-padding: var(--spacer-1);
+    }
+
+    & > fig-field + fig-field {
+      --fig-field-left-padding: var(--spacer-1);
+    }
   }
 }