Detail Row

A composite block: imports card-158 from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. The component is self-contained: one file, no npm dependencies, the palette in --vibeui-datagrid-008-*. A client component: useState holds the list of expanded rows, and useId gives stable panel ids for aria-controls. The disclosure button carries aria-expanded and its own aria-label with the name of the shipment. The details lie in a separate row with a colSpan across the full width — a nested table would break cell navigation. The term-value pairs are collected in a dl, and the wrapper of a pair gets display:contents, otherwise the columns drift apart. The panel appears smoothly through @starting-style: where it is unsupported the panel simply appears at once. The single mode keeps one row open at a time. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits on the page background, while the background prop switches on a panel of its own.