ShadAccordion clips focus ring of child widgets

[niklasbartsch]

Steps to reproduce

1. Place a ShadInputFormField inside a ShadAccordionItem
2. Focus the input field
3. Observe that the focus ring is clipped/cut off

Expected results

The focus ring should be fully visible around the input field.

Actual results

The focus ring is clipped by the accordion's internal SizeTransition which uses ClipRect.

Root cause

The ShadAccordionItem uses SizeTransition for the expand/collapse animation. SizeTransition internally uses ClipRect which clips any content that overflows the bounds - including focus rings that extend slightly beyond the widget's boundary.

Suggested solution

Add a clipBehavior parameter to ShadAccordion and ShadAccordionItem (similar to ShadCard) that allows users to control or disable clipping. Alternatively, add small internal padding to accommodate focus rings.

Workaround

Add horizontal padding (2px) around accordion content:

ShadAccordionItem(
  value: 0,
  title: const Text('Title'),
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 2),
    child: ShadInputFormField(...),
  ),
),

shadcn_ui version

0.39.14

Platform

macOS, Web

Screenshots

[niklasbartsch]

I've submitted a fix for this issue in PR #583.

The solution adds a clipBehavior parameter to SizeEffect and ShadAccordionItem, defaulting to Clip.none to prevent focus ring clipping.