@rogieking/figui3 10.0.13 → 11.0.0

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

@@ -12,29 +12,22 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 <fig-button variant="ghost" icon aria-label="Close" onClick={onClick}>
   <fig-icon name="close" />
 </fig-button>
-```
-
-- 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"
+<fig-button
+  variant="property"
   aria-haspopup="dialog"
   aria-controls="effects-editor"
   onClick={onClick}
 >
+  <fig-icon name="settings" slot="prepend" />
   Effects
-</fig-property-button>
+</fig-button>
 ```
 
-- 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`
+- Attrs: `variant` (`""` primary, `secondary`, `property`, `destructive`, `destructiveSecondary`, `destructiveGhost`, `destructiveLink`, `ghost`, `link`, `input`, `overlay`), `type` (`button`, `toggle`, `submit`, `select`, `upload`), `size` (`""`, `large`, `compact`), `align`, `selected`, `disabled`, `icon`, `close-dialog`
+- `variant="property"` shares secondary styling and adds full-width, start-aligned property-trigger layout; use `slot="prepend"` for its leading icon
+- Property triggers own no popup behavior; consumers manage the popup/dialog and reflect `selected`, `aria-haspopup`, `aria-expanded`, and `aria-controls`
+- Events: `click`; toggle also reflects `selected`
 
 ### `fig-button-combo`
 

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

@@ -51,7 +51,6 @@ 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

@@ -11,18 +11,12 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 ## `fig-button`
 
-- `variant`: `""` (primary), `secondary`, `destructive`, `destructiveSecondary`, `destructiveGhost`, `destructiveLink`, `ghost`, `link`, `input`, `overlay`
+- `variant`: `""` (primary), `secondary`, `property`, `destructive`, `destructiveSecondary`, `destructiveGhost`, `destructiveLink`, `ghost`, `link`, `input`, `overlay`
 - `type`: `button`, `toggle`, `submit`, `select`, `upload`
 - `size`: `""`, `large`, `compact`
 - `selected`, `disabled`, `icon` (presence)
-
-## `fig-property-button`
-
-- `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
-- Trigger only; consumers manage the popup/dialog
+- `variant="property"` shares secondary styling and adds full-width, start-aligned layout
+- Property icons use authored `slot="prepend"` content; consumers manage the popup/dialog
 
 ## `fig-input-text`
 

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.0.0]
+
+### Added
+
+- Added `variant="property"` to `fig-button` with secondary styling and property-trigger layout.
+- Added Button Combo playground examples for grouped buttons and action menus.
+
+### Changed
+
+- Removed `fig-property-button`; use `fig-button variant="property"` with an explicit prepend icon.
+- Updated button combos to support property buttons, selects, dropdowns, and tooltip-wrapped controls.
+
+### Fixed
+
+- Preserved `fig-select` and `fig-dropdown` chrome when grouped in button combos.
+
+## [10.0.14]
+
+### Changed
+
+- Simplified the custom group-header example to one group with several fields.
+
+### Fixed
+
+- Updated group chevrons to use the default icon color when hovering the header.
+
 ## [10.0.13]
 
 ### Changed

package/README.md

@@ -96,7 +96,6 @@ 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 |
@@ -157,7 +156,7 @@ Minimal example:
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"destructiveLink"`, `"ghost"`, `"link"` |
+| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"property"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"destructiveLink"`, `"ghost"`, `"link"` |
 | `type` | string | `"button"` | `"button"`, `"toggle"`, `"submit"`, `"select"`, `"upload"` |
 | `size` | string | — | `"large"`, `"compact"` |
 | `selected` | boolean | `false` | Selected state (toggle type) |
@@ -175,6 +174,10 @@ Minimal example:
 <fig-button variant="destructiveGhost">Destructive ghost</fig-button>
 <fig-button variant="destructiveLink">Destructive link</fig-button>
 <fig-button full align="start">Start aligned</fig-button>
+<fig-button variant="property">
+  <fig-icon name="settings" slot="prepend"></fig-icon>
+  Effects
+</fig-button>
 <fig-button type="toggle" selected="true">Toggle</fig-button>
 <fig-button variant="ghost" icon>
   <svg><!-- icon --></svg>
@@ -183,50 +186,7 @@ Minimal example:
 
 `type="select"` and `type="upload"` are visual wrappers for native select/file controls. They avoid nested native buttons, show the shared focus outline on the wrapper, and open the native picker from keyboard activation where supported.
 
----
-
-#### 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 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 | — | `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 |
-| `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>
-
-<fig-property-button>
-  <fig-icon name="sun" slot="prepend"></fig-icon>
-  Lighting effect
-</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.
+`variant="property"` shares the secondary visual treatment and adds the full-width, start-aligned property-trigger layout. Author a leading icon with `slot="prepend"`. The consumer owns any corresponding popup or dialog and can use `selected`, `aria-haspopup`, `aria-expanded`, and `aria-controls` on the button.
 
 ---
 

package/components.css

@@ -810,8 +810,7 @@ select,
 
 /* Button */
 button,
-fig-button,
-fig-property-button {
+fig-button {
   --fig-button-content-alignment: center;
   --fig-button-text-alignment: center;
 
@@ -947,8 +946,9 @@ fig-property-button {
   &[variant="ghost"][disabled]:not([disabled="false"]) {
     background-color: transparent;
   }
-  /* Variant: Secondary */
-  &[variant="secondary"] {
+  /* Variants: Secondary and Property */
+  &[variant="secondary"],
+  &[variant="property"] {
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     padding: 0 calc(var(--spacer-2) - 1px);
     background: none;
@@ -1018,7 +1018,7 @@ fig-property-button {
     background-color: var(--figma-color-bg-disabled);
     pointer-events: none;
     cursor: not-allowed;
-    &:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
+    &:not([variant="secondary"]):not([variant="property"]):not([variant="destructiveSecondary"]):not(
         [variant="destructiveGhost"]
       ):not(
         [variant="destructiveLink"]
@@ -1029,6 +1029,7 @@ fig-property-button {
       box-shadow: none;
     }
     &[variant="secondary"],
+    &[variant="property"],
     &[variant="destructiveSecondary"],
     &[variant="destructiveGhost"],
     &[variant="destructiveLink"],
@@ -1126,7 +1127,7 @@ fig-property-button {
       stroke: currentColor;
     }
   }
-  &:not(fig-property-button):has(svg:first-child):not([icon]) {
+  &:has(svg:first-child):not([icon]) {
     padding-left: var(--spacer-1);
   }
 
@@ -1156,17 +1157,20 @@ fig-property-button {
   }
 }
 
-fig-property-button:is(
-    [icon]:not([icon="false"]),
-    :has(> [slot="prepend"])
-  ) {
+fig-button[variant="property"] {
+  --fig-button-content-alignment: flex-start;
+  --fig-button-text-alignment: start;
+
   width: 100%;
-  flex: 1 1 auto;
-  padding: 0 calc(var(--spacer-2) - 1px) 0 0;
 
   &[selected]:not([selected="false"]) {
     box-shadow: none;
   }
+
+  &:has(> [slot="prepend"]) {
+    flex: 1 1 auto;
+    padding: 0 calc(var(--spacer-2) - 1px) 0 0;
+  }
 }
 
 /* Combo button */
@@ -1206,21 +1210,32 @@ fig-input-combo {
 }
 
 :is(.fig-button-combo, fig-button-combo, .fig-input-combo, fig-input-combo):not(
-    :has(> :not([variant="secondary"]):not(fig-tooltip))
-  ):not(:has(> fig-tooltip > :not([variant="secondary"]))) {
+    :has(
+      > :not(:is([variant="secondary"], [variant="property"], fig-dropdown, fig-select)):not(fig-tooltip)
+    )
+  ):not(
+    :has(
+      > fig-tooltip > :not(:is([variant="secondary"], [variant="property"], fig-dropdown, fig-select))
+    )
+  ) {
   gap: 0;
   border-radius: var(--radius-medium);
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
-  > [variant="secondary"],
-  > fig-tooltip > [variant="secondary"] {
+  > :is([variant="secondary"], [variant="property"]),
+  > fig-tooltip > :is([variant="secondary"], [variant="property"]) {
     box-shadow: none;
   }
 
-  > :is([variant="secondary"], fig-tooltip:has(> [variant="secondary"])) {
-    + [variant="secondary"],
-    + fig-tooltip > [variant="secondary"] {
-      box-shadow: none;
+  > :is(
+      [variant="secondary"],
+      [variant="property"],
+      fig-tooltip:has(
+          > :is([variant="secondary"], [variant="property"], fig-dropdown, fig-select)
+        )
+    ) {
+    + :is([variant="secondary"], [variant="property"], fig-dropdown, fig-select),
+      + fig-tooltip > :is([variant="secondary"], [variant="property"], fig-dropdown, fig-select) {
       background-image: linear-gradient(
         var(--figma-color-bordertranslucent),
         var(--figma-color-bordertranslucent)
@@ -1234,7 +1249,8 @@ fig-input-combo {
 
 .fig-button-combo,
 fig-button-combo {
-  > *:not([variant="secondary"]):not(:first-child) {
+  > :not(fig-tooltip):not([variant="secondary"]):not([variant="property"]):not(fig-select):not(fig-dropdown):not(:first-child),
+  > fig-tooltip:not(:first-child) > :not([variant="secondary"]):not([variant="property"]):not(fig-select):not(fig-dropdown){
     box-shadow: inset 1px 0 0 0 var(--figma-color-bg-brand-hover);
     &[disabled]:not([disabled="false"]) {
       box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
@@ -3680,7 +3696,6 @@ fig-preview {
 
 /* Web Components */
 fig-button,
-fig-property-button,
 fig-content,
 fig-slider,
 fig-switch,
@@ -3874,12 +3889,16 @@ fig-group {
       &:has(> h3:hover, > .fig-group-chevron:hover) {
         color: var(--figma-color-text);
         .fig-group-chevron {
-          color: inherit;
+          color: var(--figma-color-icon);
         }
       }
     }
   }
 
+  & > fig-header:hover > .fig-group-chevron {
+    color: var(--figma-color-icon);
+  }
+
   &[open]:not([open="false"]) > fig-header .fig-group-chevron {
     transform: rotate(0deg);
   }