Dashboard

c2-dashboard

Grid of resizable panes. The children are c2-dash-card elements, placed by their col/row attributes; each one draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the cards on either side stay aligned. columns and rows take a track count (columns="3" is three equal columns) or an explicit track list (columns="320px 1fr"); a track is switched to pixels the first time it is dragged, and the fr tracks around it give up the space in proportion to their weight, down to the minimums. With a storage-key the sizes survive a reload.

layouts makes the grid responsive without a remount: each entry names a media query and the tracks and card placements to use while it matches, the first match wins, and every entry keeps its own stored sizes under <storage-key>@<media>. Stored payloads are versioned and include stable card order; serializeLayout and deserializeLayout can preserve application metadata such as named sizes without coupling it to the component.

Placement is the application's: the grid never re-places cards on its own. A pane removed or hidden at runtime leaves its cells empty and its neighbours where they were, and a pane added at runtime lands exactly where its col/row say, on top of whatever is already there if that cell is taken. To close a gap, or to make room, set the cards' col/row/col-span/row-span or hand the grid a layout record — both are applied in place.

The grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a flex/grid parent that does) whenever the rows use fr, since the row tracks divide the host's height.

c2-dash-card

One pane of a c2-dashboard. It owns its place in the grid (col, row, col-span, row-span), the drag handles on the edges it shares with a neighbour, and the optional expand controls; it draws no surface of its own, so put a c2-card — or any markup — in the default slot.

A handle resizes the whole grid track, never just this card, and it only appears where there is a neighbour to take the space from: the right edge has one when another column follows, the left edge when one precedes. Drag it, or focus it and use the arrow keys (10px a step, 1px with Shift).

Filling the header, actions or footer slot turns on that row; with the header and actions both empty the expand controls float over the top-right corner of the pane instead. An expanded card covers its neighbours on an opaque --c2-dash-card__expanded--background (the theme's surface colour), while the card itself stays transparent at rest.

A card that arrives while the grid is already on screen fades and scales in; one that leaves — through the grid's layout record (visible: false) or through dismiss(), which removes the element once the animation has played — fades out the same way. Cards present at load do not animate, and prefers-reduced-motion turns both off.

Every built-in icon is a slot whose fallback is the default drawing, so a pane can use the host application's own icon set without giving up the behaviour.