@rogieking/figui3 9.4.2 → 9.4.4

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.4]
+
+### Changed
+
+- `fig-group` now uses bottom padding instead of margin for section spacing, keeping spacing inside its own layout box and removing it when collapsed.
+
+## [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

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

@@ -4017,9 +4017,7 @@ fig-header {
 fig-group {
   display: block;
   width: 100%;
-  margin-bottom: var(--spacer-2-5);
-
-  
+  padding-bottom: var(--spacer-2-5);
 
   p{
     margin: 0 var(--spacer-3) var(--spacer-2) var(--spacer-3);
@@ -4063,25 +4061,27 @@ 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;
   }
 
   &[collapsible]:not([open]):not([open="true"]),
   &[collapsible][open="false"] {
-    margin-bottom: 0;
+    padding-bottom: 0;
     fig-header {
       color: var(--figma-color-text-secondary);
       &:has(> h3:hover, > .fig-group-chevron:hover) {