@rogieking/figui3 9.4.1 → 9.4.3

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

@@ -335,12 +335,12 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ### `fig-group`
 
 ```tsx
-<fig-group name="Appearance" collapsible open compact>
+<fig-group name="Appearance" collapsible open compact chevron="end">
   {children}
 </fig-group>
 ```
 
-- Attrs: `name`, `collapsible`, `open`, `compact`
+- Attrs: `name`, `collapsible`, `open`, `compact`, `chevron` (`start` default, 16px | `end`, 24px)
 - Group `compact` is propagated to the direct `fig-header`.
 - In a collapsible group, the `h3` is the keyboard-accessible toggle and the chevron is clickable. For custom headers, place independent actions beside the `h3`, not inside it.
 

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [9.4.3]
+
+### Added
+
+- Added `chevron="start|end"` placement to collapsible `fig-group`; end placement uses the larger 24px chevron before header actions.
+
+## [9.4.2]
+
+### Fixed
+
+- Prevented adjacent `fig-group` elements with authored headers from receiving the extra spacing reserved for headerless groups.
+
 ## [9.4.1]
 
 ### Added

package/README.md

@@ -1245,17 +1245,18 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 
 `<fig-group>` — [demo](https://rog.ie/figui3/#group)
 
-A section group with an optional generated or authored header. In collapsible groups, the `h3` is the keyboard-accessible toggle and the chevron is clickable; controls placed beside the `h3` in an authored `fig-header` remain independent.
+A section group with an optional generated or authored header. In collapsible groups, the `h3` is the keyboard-accessible toggle and the chevron is clickable; controls placed beside the `h3` in an authored `fig-header` remain independent. Start chevrons use the compact 16px icon; end chevrons use the larger 24px icon.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `name` | string | — | Generated header text |
 | `collapsible` | boolean | `false` | Enables collapse behavior |
 | `open` | boolean | `false` | Expanded state |
+| `chevron` | string | `"start"` | Chevron placement: `"start"` or `"end"` |
 | `compact` | boolean | `false` | Adds `compact` to the direct `fig-header` |
 
 ```html
-<fig-group collapsible open>
+<fig-group collapsible open chevron="end">
   <fig-header borderless>
     <h3>Export</h3>
     <fig-button variant="ghost" icon aria-label="Add export">

package/components.css

@@ -4028,7 +4028,7 @@ fig-group {
   /* Sibling groups  */
   & + fig-group {
     box-shadow: inset 0 1px 0 0 var(--figma-color-border);
-    &:not([name]) {
+    &:not(:has(fig-header)) {
       padding-top: var(--spacer-2-5);
     }
   }
@@ -4063,18 +4063,20 @@ fig-group {
       cursor: default;
     }
     & > .fig-group-chevron {
-      --icon: var(--icon-16-chevron);
-      --size: 1rem;
       flex: 0 0 auto;
       color: var(--figma-color-text-tertiary);
       transform: rotate(-90deg);
       transition: transform var(--transition-duration)
         var(--transition-timing-function);
-      margin-left: calc(var(--spacer-2) * -1);
+      margin-inline-start: calc(var(--spacer-2) * -1);
       cursor: default;
     }
   }
 
+  &[chevron="end"] > fig-header > .fig-group-chevron {
+    margin-inline-start: 0;
+  }
+
   &[collapsible] > fig-header h3 {
     user-select: none;
   }