@rogieking/figui3 9.2.1 → 9.2.3

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;
@@ -1197,25 +1200,29 @@ fig-input-combo {
 }
 
 :is(.fig-button-combo, fig-button-combo, .fig-input-combo, fig-input-combo):not(
-    :has(> :not([variant="secondary"]))
-  ) {
+    :has(> :not([variant="secondary"]):not(fig-tooltip))
+  ):not(:has(> fig-tooltip > :not([variant="secondary"]))) {
   gap: 0;
   border-radius: var(--radius-medium);
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
-  > [variant="secondary"] {
+  > [variant="secondary"],
+  > fig-tooltip > [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);
+  > :is([variant="secondary"], fig-tooltip:has(> [variant="secondary"])) {
+    + [variant="secondary"],
+    + fig-tooltip > [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);
+    }
   }
 }