@rogieking/figui3 9.2.1 → 9.2.2

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

@@ -30,7 +30,8 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 </fig-property-button>
 ```
 
-- Attrs: `icon` (required fig-icon name), `selected`, `disabled`, `aria-haspopup`, `aria-expanded`, `aria-controls`
+- Attrs: `icon` (generated fig-icon name), `selected`, `disabled`, `aria-haspopup`, `aria-expanded`, `aria-controls`
+- Custom icon: author an element with `slot="prepend"` instead of `icon`; authored prepend content takes precedence
 - Fixed presentation: secondary, full width, start aligned, leading icon
 - Trigger only: the consumer owns and positions the corresponding popup/dialog
 - Events: `click`

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

@@ -18,7 +18,7 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 ## `fig-property-button`
 
-- `icon`: required `fig-icon` name
+- `icon`: generated `fig-icon` name; optional when authoring custom `slot="prepend"` content
 - `selected`, `disabled`
 - `aria-haspopup`, `aria-expanded`, `aria-controls`
 - Fixed secondary, full-width, start-aligned presentation

package/README.md

@@ -185,11 +185,12 @@ Minimal example:
 
 `<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.
+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 can generate a leading icon from `icon`, or accept custom prepend content, but does not create or position a popup.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `icon` | string | required | `fig-icon` name rendered in the prepend slot |
+| `icon` | string | — | `fig-icon` name rendered in the prepend slot |
+| `slot="prepend"` | element | — | Custom leading icon/content; takes precedence over `icon` |
 | `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 |
@@ -206,6 +207,11 @@ A full-width secondary trigger for opening an effect editor, binding editor, pre
   Effects
 </fig-property-button>
 
+<fig-property-button>
+  <fig-icon name="sun" slot="prepend"></fig-icon>
+  Lighting effect
+</fig-property-button>
+
 <dialog
   is="fig-popup"
   id="effects-editor"

package/components.css

@@ -1150,7 +1150,10 @@ fig-property-button {
   }
 }
 
-fig-property-button[icon]:not([icon="false"]) {
+fig-property-button:is(
+    [icon]:not([icon="false"]),
+    :has(> [slot="prepend"])
+  ) {
   width: 100%;
   flex: 1 1 auto;
   padding: 0 calc(var(--spacer-2) - 1px) 0 0;