Feature
CodeBlock has no collapse/expand capability — the only length control is maxHeight, which scrolls (src/components/CodeBlock/CodeBlock.tsx:15-90). Long code samples in docs/chat contexts want to start collapsed to the header and expand on demand.
Add:
isCollapsible (and defaultCollapsed, plus controlled isCollapsed/onCollapsedChange if cheap) props.
- A chevron toggle in the header, placed at the inline-start of the title so the title reads as the toggle's label; the whole header row can be the trigger.
- Smooth height animation that respects
prefers-reduced-motion.
- Proper semantics: trigger is a real button with
aria-expanded + aria-controls.
Notes
- Interaction with
maxHeight should be defined (collapsed → header only; expanded → existing maxHeight behavior).
- Panda sva/cva recipe for the new slots per repo convention.
- Tests + Storybook example (collapsed-by-default story must not trap docs-site live demos in a surprising state — default stories should start expanded).
Feature
CodeBlockhas no collapse/expand capability — the only length control ismaxHeight, which scrolls (src/components/CodeBlock/CodeBlock.tsx:15-90). Long code samples in docs/chat contexts want to start collapsed to the header and expand on demand.Add:
isCollapsible(anddefaultCollapsed, plus controlledisCollapsed/onCollapsedChangeif cheap) props.prefers-reduced-motion.aria-expanded+aria-controls.Notes
maxHeightshould be defined (collapsed → header only; expanded → existing maxHeight behavior).