@rogieking/figui3 9.4.0 → 9.4.2

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

@@ -341,6 +341,8 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `name`, `collapsible`, `open`, `compact`
+- 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.
 
 ### `fig-header`
 

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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
+
+- Added a playground example for authored `fig-group` headers with independent actions.
+
+### Changed
+
+- Collapsible `fig-group` titles and chevrons now own toggle behavior, leaving header actions independent and keeping focus and hover feedback scoped to the toggle.
+- `fig-group compact` now propagates to its direct `fig-header`; playground Compact controls update every group in an example.
+
+### Fixed
+
+- `fig-truncate` now re-renders when its text changes and keeps tooltip behavior synchronized with content, overflow, and the `tooltip` attribute.
+
 ## [9.4.0]
 
 ### Added

package/README.md

@@ -121,6 +121,7 @@ Minimal example:
 | [Segmented Control](#segmented-control) | `<fig-segmented-control>` / `<fig-segment>` | Segmented button group |
 | [Chooser](#chooser) | `<fig-chooser>` / `<fig-choice>` | Selection list with drag scroll |
 | [Field](#field) | `<fig-field>` | Form field wrapper with layout |
+| [Group](#group) | `<fig-group>` | Named or collapsible section group |
 | [Joystick](#joystick) | `<fig-joystick>` | 2D position input |
 | [Origin Grid](#origin-grid) | `<fig-origin-grid>` | Transform-origin grid |
 | [Easing Curve](#easing-curve) | `<fig-easing-curve>` | Bezier/spring curve editor |
@@ -1240,6 +1241,33 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 
 ---
 
+#### Group
+
+`<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.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `name` | string | — | Generated header text |
+| `collapsible` | boolean | `false` | Enables collapse behavior |
+| `open` | boolean | `false` | Expanded state |
+| `compact` | boolean | `false` | Adds `compact` to the direct `fig-header` |
+
+```html
+<fig-group collapsible open>
+  <fig-header borderless>
+    <h3>Export</h3>
+    <fig-button variant="ghost" icon aria-label="Add export">
+      <fig-icon name="add"></fig-icon>
+    </fig-button>
+  </fig-header>
+  <fig-field>...</fig-field>
+</fig-group>
+```
+
+---
+
 #### Dialog
 
 `<fig-dialog>` — [demo](https://rog.ie/figui3/#dialog)

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);
     }
   }
@@ -4039,18 +4039,11 @@ fig-group {
     }
   }
 
-  &[compact]:not([compact="false"]) {
-    & > fig-header{
-      --fig-header-height: var(--spacer-5);
-    }
-  }
-
-
   & > fig-header {
     cursor: default;
     gap: 0;
       
-    &:focus-visible {
+    &:has(> h3:focus-visible) {
       --figma-focus-outline-radius: var(--radius-medium);
       outline: var(--figma-focus-outline);
       outline-offset: var(--figma-focus-outline-offset);
@@ -4062,10 +4055,12 @@ fig-group {
       display: block;
       margin:0;
       padding-left: 0;
+      outline: none;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
       max-width: 100%;
+      cursor: default;
     }
     & > .fig-group-chevron {
       --icon: var(--icon-16-chevron);
@@ -4076,6 +4071,7 @@ fig-group {
       transition: transform var(--transition-duration)
         var(--transition-timing-function);
       margin-left: calc(var(--spacer-2) * -1);
+      cursor: default;
     }
   }
 
@@ -4088,7 +4084,7 @@ fig-group {
     margin-bottom: 0;
     fig-header {
       color: var(--figma-color-text-secondary);
-      &:hover {
+      &:has(> h3:hover, > .fig-group-chevron:hover) {
         color: var(--figma-color-text);
         .fig-group-chevron {
           color: inherit;
@@ -4106,10 +4102,6 @@ fig-group {
     display: none;
   }
 
-  &[compact]:not([compact="false"]) > fig-header {
-    --fig-header-height: var(--spacer-5);
-    height: var(--fig-header-height);
-  }
 }
 
 fig-footer {