@rogieking/figui3 9.2.0 → 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;
@@ -1169,6 +1172,9 @@ fig-input-combo {
   flex-wrap: nowrap;
   align-items: center;
   gap: 0px;
+  &[full]:not([full="false"]) {
+    width: 100%;
+  }
   & > * {
     &:first-child,
     &:first-child > * {
@@ -1192,6 +1198,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) {
@@ -1200,12 +1230,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 */