Tree View

Build a file tree with folders that expand. Structure: ONE row component that renders its own children recursively. A flat list with manual indent values breaks the moment the data gains a level, and real trees always do. Depth is INDENTATION, nothing else: padding-left grows by about 14px per level. Nested boxes, cards or borders at every level eat the width and stop the whole thing reading as one hierarchy. The open: animate height from 0 to AUTO on a spring, stiffness 420, damping 38, with overflow hidden. Animating to auto is what lets a folder fit whatever it holds; hardcode a height and every folder with a different number of children is wrong. Folders and files must behave DIFFERENTLY: a folder toggles open, a file selects. One row type that does both is how people navigate away when they meant to expand. Give files the same chevron space as folders, filled with a transparent glyph, so labels stay aligned and nothing shifts when a folder appears in the list. Rotate the folder chevron 90 degrees on open. Accessibility: role="tree" with a label on the root list, aria-expanded on folder rows, aria-current on the selected file. The tree must be navigable without seeing the highlight. Under prefers-reduced-motion, drop the height animation and the chevron rotation. Folders still open and close correctly. Colors as tokens: accent with on-primary ink for the selected row, accent for the chevrons, surface and border for the panel. Use neutral placeholder file names. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.