@c2n/dashboard 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/dashboard.ts","declarations":[{"kind":"class","description":"Grid of resizable panes. The children are `c2-dash-card` elements, placed by their `col`/`row` attributes; each\none draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the\ncards on either side stay aligned. `columns` and `rows` take a track count (`columns=\"3\"` is three equal columns)\nor an explicit track list (`columns=\"320px 1fr\"`); a track is switched to pixels the first time it is dragged, and\nthe `fr` tracks around it give up the space in proportion to their weight, down to the minimums. With a\n`storage-key` the sizes survive a reload.\n\n`layouts` makes the grid responsive without a remount: each entry names a media query and the tracks and card\nplacements to use while it matches, the first match wins, and every entry keeps its own stored sizes under\n`<storage-key>@<media>`.\n\nPlacement is the application's: the grid never re-places cards on its own. A pane removed or hidden at runtime\nleaves its cells empty and its neighbours where they were, and a pane added at runtime lands exactly where its\n`col`/`row` say, on top of whatever is already there if that cell is taken. To close a gap, or to make room, set\nthe cards' `col`/`row`/`col-span`/`row-span` or hand the grid a `layout` record — both are applied in place.\n\nThe grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a\nflex/grid parent that does) whenever the rows use `fr`, since the row tracks divide the host's height.","name":"Dashboard","cssProperties":[{"type":{"text":"pixel"},"description":"Gutter between the cards. The whole gutter drags: each card's handle is centred on its edge and as thick as the gap (never under `--c2-dash-card__handle--size`).","name":"--c2-dashboard--gap","default":"8px"},{"type":{"text":"padding"},"description":"Inset around the tracks. With a `background` it is what turns the gutters into a visible frame between the panes.","name":"--c2-dashboard--padding","default":"0px"},{"type":{"text":"background"},"name":"--c2-dashboard--background","default":"transparent"},{"type":{"text":"border"},"name":"--c2-dashboard--border","default":"none"},{"type":{"text":"border-radius"},"name":"--c2-dashboard--border-radius","default":"0px"}],"slots":[{"description":"The `c2-dash-card` panes. Anything else becomes an ordinary grid item, placed by your own CSS.","name":""}],"members":[{"kind":"field","name":"columns","type":{"text":"number | string | string[]"},"default":"2","description":"Column count (`3`) or an explicit track list (`'320px 1fr'`). Each entry must be one simple size.","attribute":"columns"},{"kind":"field","name":"rows","type":{"text":"number | string | string[]"},"default":"1","description":"Row count (`2`) or an explicit track list (`'auto 1fr'`).","attribute":"rows"},{"kind":"field","name":"minColumnWidth","type":{"text":"number"},"default":"50","description":"Floor for every column, in pixels. A card's own `min-width` raises it for the tracks that card covers.","attribute":"min-column-width"},{"kind":"field","name":"minRowHeight","type":{"text":"number"},"default":"50","description":"Floor for every row, in pixels. A card's own `min-height` raises it for the tracks that card covers.","attribute":"min-row-height"},{"kind":"field","name":"storageKey","type":{"text":"string | undefined"},"default":"undefined","description":"`localStorage` key the track sizes are stored under. Without it the grid starts from the authored tracks.","attribute":"storage-key"},{"kind":"field","name":"layout","type":{"text":"Record<string, DashCardPlacement> | undefined"},"default":"undefined","description":"Placement overrides keyed by the cards' `card-id`, for a layout that is chosen at runtime rather than authored\nin the markup. Each entry wins over the card's own `col`/`row`/`col-span`/`row-span`/visibility. This is also\nhow an app re-flows the remaining panes after one was removed: the grid does not do that by itself."},{"kind":"field","name":"layouts","type":{"text":"DashboardResponsiveLayout[] | undefined"},"default":"undefined","description":"Responsive variants, in priority order: the first entry whose `media` matches supplies the tracks and the card\nplacements, and the grid switches as the viewport crosses a breakpoint. Nothing is stored across entries — each\none keeps its own sizes under `<storage-key>@<media>`."},{"kind":"field","name":"columnTracks","type":{"text":"string[]"},"privacy":"private","default":"[]"},{"kind":"field","name":"rowTracks","type":{"text":"string[]"},"privacy":"private","default":"[]"},{"kind":"field","name":"activeLayout","type":{"text":"number"},"privacy":"private","default":"-1","description":"Index into `layouts` of the entry in force, `-1` for the authored grid."},{"kind":"field","name":"cards","privacy":"private","default":"new Set<DashboardCard>()"},{"kind":"field","name":"mediaQueries","type":{"text":"MediaQueryList[]"},"privacy":"private","default":"[]"},{"kind":"field","name":"handleMediaChange","privacy":"private","readonly":true},{"kind":"field","name":"pixelCache","privacy":"private","default":"new Map<'column' | 'row', number[]>()","description":"Used track sizes, valid until the next write to the tracks."},{"kind":"field","name":"columnSizes","type":{"text":"string[]"},"description":"Column tracks as they are laid out right now.","readonly":true},{"kind":"field","name":"rowSizes","type":{"text":"string[]"},"description":"Row tracks as they are laid out right now.","readonly":true},{"kind":"field","name":"columnCount","type":{"text":"number"},"readonly":true},{"kind":"field","name":"rowCount","type":{"text":"number"},"readonly":true},{"kind":"field","name":"activeResponsiveLayout","type":{"text":"DashboardResponsiveLayout | undefined"},"description":"The entry of `layouts` in force, or `undefined` while the authored grid is.","readonly":true},{"kind":"method","name":"reset","description":"Back to the authored tracks of the layout in force, and its stored ones are forgotten."},{"kind":"method","name":"registerCard","parameters":[{"name":"card","type":{"text":"DashboardCard"}}]},{"kind":"method","name":"unregisterCard","parameters":[{"name":"card","type":{"text":"DashboardCard"}}]},{"kind":"method","name":"placementOf","return":{"type":{"text":"DashCardPlacement | undefined"}},"parameters":[{"name":"cardId","type":{"text":"string | undefined"}}]},{"kind":"method","name":"resizeColumn","return":{"type":{"text":"number"}},"parameters":[{"name":"index","type":{"text":"number"}},{"name":"delta","type":{"text":"number"}}]},{"kind":"method","name":"resizeRow","return":{"type":{"text":"number"}},"parameters":[{"name":"index","type":{"text":"number"}},{"name":"delta","type":{"text":"number"}}]},{"kind":"method","name":"commitResize"},{"kind":"method","name":"splitterValue","return":{"type":{"text":"number"}},"parameters":[{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"index","type":{"text":"number"}}],"description":"Where the splitter after `index` sits, as a percentage of the tracks' total. A focusable `separator` is a\nwindow splitter, and a window splitter has to report a value."},{"kind":"method","name":"trackPixels","privacy":"private","return":{"type":{"text":"number[]"}},"parameters":[{"name":"axis","type":{"text":"'column' | 'row'"}}],"description":"Reading a used track size forces layout, and a drag asks for it from every card's handles on every pointer\nmove. The answer cannot change until something writes to the DOM, so it is cached until one of them does."},{"kind":"method","name":"freeSpace","privacy":"private","return":{"type":{"text":"number"}},"parameters":[{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"tracks","type":{"text":"number[]"}}],"description":"What is left of the host along `axis` once the tracks, the gutters and the padding have taken their share."},{"kind":"method","name":"emitLayoutChange","privacy":"private"},{"kind":"method","name":"resizeTrack","privacy":"private","return":{"type":{"text":"{ tracks: string[]; applied: number } | undefined"}},"parameters":[{"name":"tracks","type":{"text":"string[]"}},{"name":"index","type":{"text":"number"}},{"name":"delta","type":{"text":"number"}},{"name":"axis","type":{"text":"'column' | 'row'"}}]},{"kind":"method","name":"trackMin","privacy":"private","return":{"type":{"text":"number"}},"parameters":[{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"index","type":{"text":"number"}}],"description":"The largest minimum any card covering this track asks for, spread over the tracks that card spans."},{"kind":"method","name":"watchMedia","privacy":"private","description":"One `MediaQueryList` per entry of `layouts`, listened to for as long as the element is connected. Whichever\nentry matches first is the one in force; the listeners re-run the choice whenever any of them flips."},{"kind":"method","name":"unwatchMedia","privacy":"private"},{"kind":"method","name":"resolveActiveLayout","privacy":"private","return":{"type":{"text":"number"}}},{"kind":"field","name":"activeStorageKey","type":{"text":"string | undefined"},"privacy":"private","description":"Each entry of `layouts` stores its own sizes: `<storage-key>@<media>`; the authored grid uses the bare key.","readonly":true},{"kind":"method","name":"syncTracks","privacy":"private"},{"kind":"method","name":"readStored","privacy":"private","return":{"type":{"text":"StoredLayout | null"}}},{"kind":"method","name":"persist","privacy":"private"}],"events":[{"name":"layout-change","type":{"text":"CustomEvent<DashboardLayoutChangeDetail>"},"description":"The track sizes changed: a gesture ended, `reset()` was called, or another entry of `layouts` took over. Does not bubble: listen on the element."}],"attributes":[{"name":"columns","type":{"text":"number | string | string[]"},"default":"2","description":"Column count (`3`) or an explicit track list (`'320px 1fr'`). Each entry must be one simple size.","fieldName":"columns"},{"name":"rows","type":{"text":"number | string | string[]"},"default":"1","description":"Row count (`2`) or an explicit track list (`'auto 1fr'`).","fieldName":"rows"},{"name":"min-column-width","type":{"text":"number"},"default":"50","description":"Floor for every column, in pixels. A card's own `min-width` raises it for the tracks that card covers.","fieldName":"minColumnWidth"},{"name":"min-row-height","type":{"text":"number"},"default":"50","description":"Floor for every row, in pixels. A card's own `min-height` raises it for the tracks that card covers.","fieldName":"minRowHeight"},{"name":"storage-key","type":{"text":"string | undefined"},"default":"undefined","description":"`localStorage` key the track sizes are stored under. Without it the grid starts from the authored tracks.","fieldName":"storageKey"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-dashboard","customElement":true}],"exports":[{"kind":"js","name":"DashCardPlacement","declaration":{"name":"DashCardPlacement","module":"./dashboard-host"}},{"kind":"js","name":"Dashboard","declaration":{"name":"Dashboard","module":"src/dashboard.ts"}},{"kind":"custom-element-definition","name":"c2-dashboard","declaration":{"name":"Dashboard","module":"src/dashboard.ts"}}]},{"kind":"javascript-module","path":"src/dash-card.ts","declarations":[{"kind":"class","description":"One pane of a `c2-dashboard`. It owns its place in the grid (`col`, `row`, `col-span`, `row-span`), the drag\nhandles on the edges it shares with a neighbour, and the optional expand controls; it draws no surface of its\nown, so put a `c2-card` — or any markup — in the default slot.\n\nA handle resizes the whole grid track, never just this card, and it only appears where there is a neighbour to\ntake the space from: the right edge has one when another column follows, the left edge when one precedes. Drag\nit, or focus it and use the arrow keys (10px a step, 1px with Shift).\n\nFilling the `header`, `actions` or `footer` slot turns on that row; with the header and actions both empty the\nexpand controls float over the top-right corner of the pane instead. An expanded card covers its neighbours on\nan opaque `--c2-dash-card__expanded--background` (the theme's surface colour), while the card itself stays\ntransparent at rest.\n\nA card that arrives while the grid is already on screen fades and scales in; one that leaves — through the\ngrid's `layout` record (`visible: false`) or through `dismiss()`, which removes the element once the animation\nhas played — fades out the same way. Cards present at load do not animate, and `prefers-reduced-motion` turns\nboth off.\n\nEvery built-in icon is a slot whose fallback is the default drawing, so a pane can use the host application's own\nicon set without giving up the behaviour.","name":"DashCard","cssProperties":[{"type":{"text":"background"},"name":"--c2-dash-card--background","default":"transparent"},{"type":{"text":"border"},"name":"--c2-dash-card--border","default":"none"},{"type":{"text":"border-radius"},"name":"--c2-dash-card--border-radius","default":"0px"},{"type":{"text":"box-shadow"},"name":"--c2-dash-card--box-shadow","default":"none"},{"type":{"text":"padding"},"name":"--c2-dash-card--padding","default":"0px"},{"type":{"text":"overflow"},"description":"`hidden` keeps the content inside the track; switch it to `visible` for a pane that has to overflow, such as one holding a menu.","name":"--c2-dash-card--overflow","default":"hidden"},{"type":{"text":"background"},"description":"Fill while the card is expanded over its neighbours, so they do not show through; the card's own `background` stays transparent.","name":"--c2-dash-card__expanded--background","default":"#ffffff"},{"type":{"text":"number"},"name":"--c2-dash-card__expanded--z-index","default":"20"},{"type":{"text":"duration"},"description":"Fade and scale-in of a card added to a grid that is already on screen, or shown again through the layout record. `0ms` disables it.","name":"--c2-dash-card__enter--animation-duration","default":"200ms"},{"type":{"text":"duration"},"description":"Fade-out before a card is hidden by the layout record or removed by `dismiss()`. `0ms` disables it.","name":"--c2-dash-card__leave--animation-duration","default":"160ms"},{"type":{"text":"duration"},"description":"Length of the scale-in the card plays when it expands or collapses. Ignored under `prefers-reduced-motion`.","name":"--c2-dash-card__expanded--animation-duration","default":"200ms"},{"type":{"text":"pixel"},"name":"--c2-dash-card__header--min-height","default":"44px"},{"type":{"text":"padding"},"name":"--c2-dash-card__header--padding-block","default":"8px"},{"type":{"text":"padding"},"name":"--c2-dash-card__header--padding-inline","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__header--gap","default":"12px"},{"type":{"text":"background"},"name":"--c2-dash-card__header--background","default":"transparent"},{"type":{"text":"border"},"name":"--c2-dash-card__header--border-bottom","default":"none"},{"type":{"text":"color"},"name":"--c2-dash-card__header--color","default":"#18181b"},{"type":{"text":"pixel"},"name":"--c2-dash-card__header--font-size","default":"14px"},{"type":{"text":"font-weight"},"name":"--c2-dash-card__header--font-weight","default":"600"},{"type":{"text":"pixel"},"name":"--c2-dash-card__footer--min-height","default":"36px"},{"type":{"text":"padding"},"name":"--c2-dash-card__footer--padding-block","default":"6px"},{"type":{"text":"padding"},"name":"--c2-dash-card__footer--padding-inline","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__footer--gap","default":"8px"},{"type":{"text":"background"},"name":"--c2-dash-card__footer--background","default":"transparent"},{"type":{"text":"border"},"name":"--c2-dash-card__footer--border-top","default":"none"},{"type":{"text":"color"},"name":"--c2-dash-card__footer--color","default":"#71717a"},{"type":{"text":"pixel"},"name":"--c2-dash-card__footer--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__actions--gap","default":"8px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__controls--gap","default":"2px"},{"type":{"text":"pixel"},"description":"Inset of the floating control group from the top-right corner, used only while the header row is off.","name":"--c2-dash-card__controls--offset","default":"4px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__control--size","default":"24px"},{"type":{"text":"pixel"},"name":"--c2-dash-card__control--icon-size","default":"16px"},{"type":{"text":"border-radius"},"name":"--c2-dash-card__control--border-radius","default":"6px"},{"type":{"text":"color"},"name":"--c2-dash-card__control--color","default":"#71717a"},{"type":{"text":"background"},"name":"--c2-dash-card__control--background","default":"transparent"},{"type":{"text":"background"},"name":"--c2-dash-card__control__hover--background","default":"#f4f4f5"},{"type":{"text":"color"},"name":"--c2-dash-card__control__hover--color","default":"#18181b"},{"type":{"text":"outline"},"name":"--c2-dash-card__control__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-dash-card__control__focus--outline-offset","default":"2px"},{"type":{"text":"pixel"},"description":"Smallest thickness of the grab area on an edge. Inside a grid the handle is as thick as the gutter when that is wider, centred on the edge, so the whole gutter drags.","name":"--c2-dash-card__handle--size","default":"6px"},{"type":{"text":"pixel"},"description":"Gap between the handle's visible bar and the ends of the edge.","name":"--c2-dash-card__handle--inset","default":"2px"},{"type":{"text":"background"},"name":"--c2-dash-card__handle--background","default":"transparent"},{"type":{"text":"background"},"name":"--c2-dash-card__handle__hover--background","default":"rgba(2, 101, 220, 0.2)"},{"type":{"text":"background"},"name":"--c2-dash-card__handle__active--background","default":"rgb(2, 101, 220)"},{"type":{"text":"border-radius"},"name":"--c2-dash-card__handle--border-radius","default":"999px"},{"type":{"text":"duration"},"name":"--c2-dash-card__handle--transition-duration","default":"150ms"},{"type":{"text":"outline"},"name":"--c2-dash-card__handle__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"}],"cssParts":[{"description":"The header row, or the floating control group when the header and actions slots are empty.","name":"header"},{"description":"The wrapper around the default slot.","name":"body"},{"description":"The footer row.","name":"footer"},{"description":"The group holding the `controls` slot and the built-in expand buttons.","name":"controls"},{"description":"One built-in expand button.","name":"control"},{"description":"Every drag handle. Each also carries the part of its edge.","name":"handle"},{"description":"The handle on the left edge.","name":"handle-left"},{"description":"The handle on the right edge.","name":"handle-right"},{"description":"The handle on the top edge.","name":"handle-top"},{"description":"The handle on the bottom edge.","name":"handle-bottom"}],"slots":[{"description":"Pane content. It fills the pane: the body is a column flex box and every slotted child is a `flex: 1` item with `min-height: 0`, so a chart or an editor follows the row track without a `height: 100%` chain.","name":""},{"description":"Title area of the header row; filling it turns the row on.","name":"header"},{"description":"Your own controls at the end of the header row, before the built-in expand buttons and separated from them by `--c2-dash-card__actions--gap`.","name":"actions"},{"description":"Your own controls inside the built-in group, immediately before the expand buttons — for a button that belongs with them, such as a refresh or a close.","name":"controls"},{"description":"Status bar under the pane content; filling it turns the row on.","name":"footer"},{"description":"Icon of the full-width control while the card is not expanded that way.","name":"expand-width-icon"},{"description":"Icon of the full-width control while it is.","name":"collapse-width-icon"},{"description":"Icon of the full-height control while the card is not expanded that way.","name":"expand-height-icon"},{"description":"Icon of the full-height control while it is.","name":"collapse-height-icon"},{"description":"Icon of the fullscreen control while the card is not expanded.","name":"expand-full-icon"},{"description":"Icon of the fullscreen control while it is.","name":"collapse-full-icon"}],"members":[{"kind":"field","name":"cardId","type":{"text":"string | undefined"},"default":"undefined","description":"Identifier the grid's `layout` record is keyed by.","attribute":"card-id"},{"kind":"field","name":"col","type":{"text":"number"},"default":"1","description":"1-based column the card starts in.","attribute":"col"},{"kind":"field","name":"row","type":{"text":"number"},"default":"1","description":"1-based row the card starts in.","attribute":"row"},{"kind":"field","name":"colSpan","type":{"text":"number"},"default":"1","description":"Number of columns the card occupies.","attribute":"col-span"},{"kind":"field","name":"rowSpan","type":{"text":"number"},"default":"1","description":"Number of rows the card occupies.","attribute":"row-span"},{"kind":"field","name":"minWidth","type":{"text":"number"},"default":"0","description":"Smallest width in pixels the card accepts; it raises the minimum of every column it covers.","attribute":"min-width"},{"kind":"field","name":"minHeight","type":{"text":"number"},"default":"0","description":"Smallest height in pixels the card accepts; it raises the minimum of every row it covers.","attribute":"min-height"},{"kind":"field","name":"resize","type":{"text":"DashCardResize"},"default":"'both'","description":"Which edges carry a drag handle.","attribute":"resize","reflects":true},{"kind":"field","name":"expandWidth","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card across every column.","attribute":"expand-width"},{"kind":"field","name":"expandHeight","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card across every row.","attribute":"expand-height"},{"kind":"field","name":"expandFull","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card over the whole grid.","attribute":"expand-full"},{"kind":"field","name":"expanded","type":{"text":"DashCardExpanded"},"default":"'none'","description":"How far the card is currently expanded. Settable, so an app can expand a card from its own control.","attribute":"expanded","reflects":true},{"kind":"field","name":"hasHeader","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasActions","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasSlottedControls","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"hasFooter","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"dashboard","type":{"text":"DashboardHost | undefined"},"privacy":"private","default":"undefined"},{"kind":"field","name":"leaving","type":{"text":"boolean"},"privacy":"private","default":"false","description":"`true` while the leave animation plays: the handles are gone, the placement is kept until it ends."},{"kind":"field","name":"motion","type":{"text":"Animation | undefined"},"privacy":"private","description":"The enter or leave animation in flight — or the finished leave, kept so a return can cancel its fill."},{"kind":"field","name":"enterPending","type":{"text":"boolean"},"privacy":"private","default":"false","description":"Set when the card should animate in after its next render."},{"kind":"field","name":"constraint","type":{"text":"DashCardConstraint | undefined"},"description":"The grid reads this during a drag; a hidden card asks for nothing.","readonly":true},{"kind":"method","name":"hostChanged","description":"Called by the grid when its shape or its layout record changed."},{"kind":"method","name":"syncVisibility","privacy":"private","description":"Applies the layout record's `visible`. Hiding is deferred until the leave animation has played; showing again\ncancels a leave in flight and animates in. Before the first render, and outside a grid, nothing animates."},{"kind":"method","name":"dismiss","return":{"type":{"text":"Promise<void>"}},"description":"Plays the leave animation, then removes the element from the document. Resolves once it is gone. The other\ncards keep their placement — the grid does not close the gap; re-place them (`col`/`row` or the grid's\n`layout`) once the promise resolves if it should."},{"kind":"field","name":"surface","type":{"text":"HTMLElement | null"},"privacy":"private","readonly":true},{"kind":"method","name":"timing","privacy":"private","return":{"type":{"text":"{ duration: number; easing: string }"}},"parameters":[{"name":"target","type":{"text":"HTMLElement"}},{"name":"phase","type":{"text":"'enter' | 'leave'"}}],"description":"Enter and leave timing, read back from the stylesheet so the variables and `prefers-reduced-motion` apply."},{"kind":"method","name":"cancelMotion","privacy":"private"},{"kind":"method","name":"playEnter","privacy":"private"},{"kind":"method","name":"leave","privacy":"private","return":{"type":{"text":"Promise<boolean>"}},"description":"Fades the card out. Resolves `true` once it has finished — the caller then hides or removes the element — and\n`false` when a return cancelled it. The end state is held (`fill: forwards`) until the next enter cancels it,\nso nothing flashes between the last frame and the hide."},{"kind":"method","name":"syncHandleValues","privacy":"private","description":"The splitter values are written straight onto the handles rather than re-rendered: a drag changes them on\nevery pointer move, and nothing else about the card changes with them."},{"kind":"method","name":"attachToDashboard","privacy":"private","parameters":[{"name":"late","default":"true"}],"description":"The grid may upgrade after its cards do — the card element is in the document either way, so find it and wait\nfor the definition rather than for a parent that is already alive."},{"kind":"field","name":"placement","type":{"text":"EffectivePlacement"},"privacy":"private","readonly":true},{"kind":"method","name":"handleSlotChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"updateSection","privacy":"private","parameters":[{"name":"slot","type":{"text":"HTMLSlotElement"}}]},{"kind":"method","name":"startDrag","privacy":"private","parameters":[{"name":"event","type":{"text":"PointerEvent"}},{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"index","type":{"text":"number"}}]},{"kind":"method","name":"handleHandleKeydown","privacy":"private","parameters":[{"name":"event","type":{"text":"KeyboardEvent"}},{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"index","type":{"text":"number"}}]},{"kind":"method","name":"toggleExpanded","privacy":"private","parameters":[{"name":"axis","type":{"text":"'width' | 'height' | 'full'"}}]},{"kind":"method","name":"renderControl","privacy":"private","parameters":[{"name":"axis","type":{"text":"'width' | 'height' | 'full'"}},{"name":"active","type":{"text":"boolean"}},{"name":"label","type":{"text":"string"}},{"name":"icon","type":{"text":"TemplateResult"}}]},{"kind":"method","name":"renderControls","privacy":"private"},{"kind":"method","name":"renderHandle","privacy":"private","parameters":[{"name":"axis","type":{"text":"'column' | 'row'"}},{"name":"edge","type":{"text":"'left' | 'right' | 'top' | 'bottom'"}},{"name":"index","type":{"text":"number"}}]},{"kind":"method","name":"renderHandles","privacy":"private"}],"events":[{"name":"expand-change","type":{"text":"CustomEvent<DashCardExpandChangeDetail>"},"description":"The card was expanded or collapsed through one of its own controls. Does not bubble: listen on the element."}],"attributes":[{"name":"card-id","type":{"text":"string | undefined"},"default":"undefined","description":"Identifier the grid's `layout` record is keyed by.","fieldName":"cardId"},{"name":"col","type":{"text":"number"},"default":"1","description":"1-based column the card starts in.","fieldName":"col"},{"name":"row","type":{"text":"number"},"default":"1","description":"1-based row the card starts in.","fieldName":"row"},{"name":"col-span","type":{"text":"number"},"default":"1","description":"Number of columns the card occupies.","fieldName":"colSpan"},{"name":"row-span","type":{"text":"number"},"default":"1","description":"Number of rows the card occupies.","fieldName":"rowSpan"},{"name":"min-width","type":{"text":"number"},"default":"0","description":"Smallest width in pixels the card accepts; it raises the minimum of every column it covers.","fieldName":"minWidth"},{"name":"min-height","type":{"text":"number"},"default":"0","description":"Smallest height in pixels the card accepts; it raises the minimum of every row it covers.","fieldName":"minHeight"},{"name":"resize","type":{"text":"DashCardResize"},"default":"'both'","description":"Which edges carry a drag handle.","fieldName":"resize"},{"name":"expand-width","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card across every column.","fieldName":"expandWidth"},{"name":"expand-height","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card across every row.","fieldName":"expandHeight"},{"name":"expand-full","type":{"text":"boolean"},"default":"false","description":"Offers a control that expands the card over the whole grid.","fieldName":"expandFull"},{"name":"expanded","type":{"text":"DashCardExpanded"},"default":"'none'","description":"How far the card is currently expanded. Settable, so an app can expand a card from its own control.","fieldName":"expanded"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-dash-card","customElement":true}],"exports":[{"kind":"js","name":"DashCard","declaration":{"name":"DashCard","module":"src/dash-card.ts"}},{"kind":"custom-element-definition","name":"c2-dash-card","declaration":{"name":"DashCard","module":"src/dash-card.ts"}}]}]}

package/dist/{dash-card-DYabhvcS.js → dash-card-DNRGm1hM.js}

@@ -4,8 +4,9 @@ import { property, state } from "lit/decorators.js";
 import { isServer } from "lit-html/is-server.js";
 import { customElement } from "@c2n/core/element-helper.js";
 import { classMap } from "lit/directives/class-map.js";
+import { hasSlottedContent } from "@c2n/core/dom-helper.js";
 //#region src/dash-card.scss?inline
-var dash_card_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  grid-column: var(--_grid-column, auto);\n  grid-row: var(--_grid-row, auto);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([expanded=width]),\n:host([expanded=height]),\n:host([expanded=full]) {\n  isolation: isolate;\n  z-index: var(--c2-dash-card__expanded--z-index,20);\n  background: var(--c2-dash-card__expanded--background,var(--c2-dash-card--background,transparent));\n  animation: c2-dash-card-expand var(--c2-dash-card__expanded--animation-duration,200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n@keyframes c2-dash-card-expand {\n  from {\n    transform: scale(0.97);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host([expanded=width]),\n  :host([expanded=height]),\n  :host([expanded=full]) {\n    animation: none;\n  }\n}\n.c2-dash-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  padding: var(--c2-dash-card--padding,0px);\n  overflow: var(--c2-dash-card--overflow,hidden);\n  color: inherit;\n  background: var(--c2-dash-card--background,transparent);\n  border: var(--c2-dash-card--border,none);\n  border-radius: var(--c2-dash-card--border-radius,0px);\n  box-shadow: var(--c2-dash-card--box-shadow,none);\n}\n\n.c2-dash-card__header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__header--gap,12px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__header--min-height,44px);\n  padding: var(--c2-dash-card__header--padding-block,8px) var(--c2-dash-card__header--padding-inline,12px);\n  font-size: var(--c2-dash-card__header--font-size,14px);\n  font-weight: var(--c2-dash-card__header--font-weight,600);\n  color: var(--c2-dash-card__header--color,#18181b);\n  background: var(--c2-dash-card__header--background,transparent);\n  border-bottom: var(--c2-dash-card__header--border-bottom,none);\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__header {\n  position: absolute;\n  top: var(--c2-dash-card__controls--offset,4px);\n  right: var(--c2-dash-card__controls--offset,4px);\n  z-index: 2;\n  min-height: 0;\n  padding: 0;\n  background: none;\n  border: none;\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__title {\n  display: none;\n}\n\n.c2-dash-card__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.c2-dash-card__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__actions--gap,8px);\n  min-width: 0;\n}\n\n.c2-dash-card__controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__controls--gap,2px);\n}\n\n.c2-dash-card__control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-dash-card__control--size,24px);\n  height: var(--c2-dash-card__control--size,24px);\n  padding: 0;\n  margin: 0;\n  color: var(--c2-dash-card__control--color,#71717a);\n  cursor: pointer;\n  background: var(--c2-dash-card__control--background,transparent);\n  border: none;\n  border-radius: var(--c2-dash-card__control--border-radius,6px);\n}\n\n.c2-dash-card__control:hover {\n  color: var(--c2-dash-card__control__hover--color,#18181b);\n  background: var(--c2-dash-card__control__hover--background,#f4f4f5);\n}\n\n.c2-dash-card__control:focus-visible {\n  outline: var(--c2-dash-card__control__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-dash-card__control__focus--outline-offset,2px);\n}\n\n.c2-dash-card__control-icon {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__control ::slotted(*) {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n.c2-dash-card__footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__footer--gap,8px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__footer--min-height,36px);\n  padding: var(--c2-dash-card__footer--padding-block,6px) var(--c2-dash-card__footer--padding-inline,12px);\n  font-size: var(--c2-dash-card__footer--font-size,12px);\n  color: var(--c2-dash-card__footer--color,#71717a);\n  background: var(--c2-dash-card__footer--background,transparent);\n  border-top: var(--c2-dash-card__footer--border-top,none);\n}\n\n.c2-dash-card__handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--c2-dash-card__handle--background,transparent);\n  touch-action: none;\n}\n\n.c2-dash-card__handle:focus-visible {\n  outline: var(--c2-dash-card__handle__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n}\n\n.c2-dash-card__handle-bar {\n  display: block;\n  background: transparent;\n  border-radius: var(--c2-dash-card__handle--border-radius,999px);\n  transition: background var(--c2-dash-card__handle--transition-duration,150ms) ease;\n}\n\n.c2-dash-card__handle:hover .c2-dash-card__handle-bar,\n.c2-dash-card__handle:focus-visible .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__hover--background,rgba(2, 101, 220, 0.2));\n}\n\n.c2-dash-card__handle.is-dragging .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__active--background,rgb(2, 101, 220));\n}\n\n.c2-dash-card__handle--left,\n.c2-dash-card__handle--right {\n  top: 0;\n  width: var(--c2-dash-card__handle--size,6px);\n  height: 100%;\n  cursor: col-resize;\n}\n.c2-dash-card__handle--left .c2-dash-card__handle-bar,\n.c2-dash-card__handle--right .c2-dash-card__handle-bar {\n  width: 2px;\n  height: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n}\n\n.c2-dash-card__handle--left {\n  left: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--right {\n  right: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--top,\n.c2-dash-card__handle--bottom {\n  left: 0;\n  width: 100%;\n  height: var(--c2-dash-card__handle--size,6px);\n  cursor: row-resize;\n}\n.c2-dash-card__handle--top .c2-dash-card__handle-bar,\n.c2-dash-card__handle--bottom .c2-dash-card__handle-bar {\n  width: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n  height: 2px;\n}\n\n.c2-dash-card__handle--top {\n  top: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--bottom {\n  bottom: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-dash-card__handle-bar {\n    transition: none;\n  }\n}";
+var dash_card_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  grid-column: var(--_grid-column, auto);\n  grid-row: var(--_grid-row, auto);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([expanded=width]),\n:host([expanded=height]),\n:host([expanded=full]) {\n  isolation: isolate;\n  z-index: var(--c2-dash-card__expanded--z-index,20);\n  background: var(--c2-dash-card__expanded--background,#ffffff);\n  animation: c2-dash-card-expand var(--c2-dash-card__expanded--animation-duration,200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n@keyframes c2-dash-card-expand {\n  from {\n    transform: scale(0.97);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host([expanded=width]),\n  :host([expanded=height]),\n  :host([expanded=full]) {\n    animation: none;\n  }\n}\n.c2-dash-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  transition-property: none;\n  transition-duration: var(--c2-dash-card__enter--animation-duration,200ms), var(--c2-dash-card__leave--animation-duration,160ms);\n  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  min-width: 0;\n  min-height: 0;\n  padding: var(--c2-dash-card--padding,0px);\n  overflow: var(--c2-dash-card--overflow,hidden);\n  color: inherit;\n  background: var(--c2-dash-card--background,transparent);\n  border: var(--c2-dash-card--border,none);\n  border-radius: var(--c2-dash-card--border-radius,0px);\n  box-shadow: var(--c2-dash-card--box-shadow,none);\n}\n\n.c2-dash-card__header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__header--gap,12px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__header--min-height,44px);\n  padding: var(--c2-dash-card__header--padding-block,8px) var(--c2-dash-card__header--padding-inline,12px);\n  font-size: var(--c2-dash-card__header--font-size,14px);\n  font-weight: var(--c2-dash-card__header--font-weight,600);\n  color: var(--c2-dash-card__header--color,#18181b);\n  background: var(--c2-dash-card__header--background,transparent);\n  border-bottom: var(--c2-dash-card__header--border-bottom,none);\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__header {\n  position: absolute;\n  top: var(--c2-dash-card__controls--offset,4px);\n  right: var(--c2-dash-card__controls--offset,4px);\n  z-index: 2;\n  min-height: 0;\n  padding: 0;\n  background: none;\n  border: none;\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__title {\n  display: none;\n}\n\n.c2-dash-card__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.c2-dash-card__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__actions--gap,8px);\n  min-width: 0;\n}\n\n.c2-dash-card__controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__controls--gap,2px);\n}\n\n.c2-dash-card__control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-dash-card__control--size,24px);\n  height: var(--c2-dash-card__control--size,24px);\n  padding: 0;\n  margin: 0;\n  color: var(--c2-dash-card__control--color,#71717a);\n  cursor: pointer;\n  background: var(--c2-dash-card__control--background,transparent);\n  border: none;\n  border-radius: var(--c2-dash-card__control--border-radius,6px);\n}\n\n.c2-dash-card__control:hover {\n  color: var(--c2-dash-card__control__hover--color,#18181b);\n  background: var(--c2-dash-card__control__hover--background,#f4f4f5);\n}\n\n.c2-dash-card__control:focus-visible {\n  outline: var(--c2-dash-card__control__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-dash-card__control__focus--outline-offset,2px);\n}\n\n.c2-dash-card__control-icon {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__control ::slotted(*) {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n\n.c2-dash-card__body ::slotted(*) {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n.c2-dash-card__footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__footer--gap,8px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__footer--min-height,36px);\n  padding: var(--c2-dash-card__footer--padding-block,6px) var(--c2-dash-card__footer--padding-inline,12px);\n  font-size: var(--c2-dash-card__footer--font-size,12px);\n  color: var(--c2-dash-card__footer--color,#71717a);\n  background: var(--c2-dash-card__footer--background,transparent);\n  border-top: var(--c2-dash-card__footer--border-top,none);\n}\n\n.c2-dash-card__header[hidden],\n.c2-dash-card__controls[hidden],\n.c2-dash-card__footer[hidden] {\n  display: none;\n}\n\n.c2-dash-card__handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--c2-dash-card__handle--background,transparent);\n  touch-action: none;\n}\n\n.c2-dash-card__handle:focus-visible {\n  outline: var(--c2-dash-card__handle__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n}\n\n.c2-dash-card__handle-bar {\n  display: block;\n  background: transparent;\n  border-radius: var(--c2-dash-card__handle--border-radius,999px);\n  transition: background var(--c2-dash-card__handle--transition-duration,150ms) ease;\n}\n\n.c2-dash-card__handle:hover .c2-dash-card__handle-bar,\n.c2-dash-card__handle:focus-visible .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__hover--background,rgba(2, 101, 220, 0.2));\n}\n\n.c2-dash-card__handle.is-dragging .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__active--background,rgb(2, 101, 220));\n}\n\n.c2-dash-card__handle--left,\n.c2-dash-card__handle--right {\n  top: 0;\n  width: max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px));\n  height: 100%;\n  cursor: col-resize;\n}\n.c2-dash-card__handle--left .c2-dash-card__handle-bar,\n.c2-dash-card__handle--right .c2-dash-card__handle-bar {\n  width: 2px;\n  height: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n}\n\n.c2-dash-card__handle--left {\n  left: calc(-0.5 * max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px)));\n}\n\n.c2-dash-card__handle--right {\n  right: calc(-0.5 * max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px)));\n}\n\n.c2-dash-card__handle--top,\n.c2-dash-card__handle--bottom {\n  left: 0;\n  width: 100%;\n  height: max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px));\n  cursor: row-resize;\n}\n.c2-dash-card__handle--top .c2-dash-card__handle-bar,\n.c2-dash-card__handle--bottom .c2-dash-card__handle-bar {\n  width: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n  height: 2px;\n}\n\n.c2-dash-card__handle--top {\n  top: calc(-0.5 * max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px)));\n}\n\n.c2-dash-card__handle--bottom {\n  bottom: calc(-0.5 * max(var(--c2-dash-card__handle--size,6px), var(--_c2-dashboard-gap, 0px)));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-dash-card__handle-bar {\n    transition: none;\n  }\n  .c2-dash-card {\n    transition-duration: 0s, 0s;\n  }\n}";
 //#endregion
 //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
@@ -29,6 +30,23 @@ var ICONS = {
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
+/** First entry of a comma-separated CSS list, leaving the commas inside `cubic-bezier(…)` alone. */
+function firstListEntry(value) {
+	let depth = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") depth++;
+		else if (char === ")") depth--;
+		else if (char === "," && depth === 0) return value.slice(0, i).trim();
+	}
+	return value.trim();
+}
+/** `'200ms'` → 200, `'0.2s'` → 200. */
+function parseDuration(value) {
+	const amount = parseFloat(value);
+	if (Number.isNaN(amount)) return 0;
+	return value.endsWith("ms") ? amount : amount * 1e3;
+}
 var DashCard = class DashCard extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -49,6 +67,8 @@ var DashCard = class DashCard extends LitElement {
 		this.hasSlottedControls = false;
 		this.hasFooter = false;
 		this.dashboard = void 0;
+		this.leaving = false;
+		this.enterPending = false;
 	}
 	static {
 		this.styles = unsafeCSS(dash_card_default);
@@ -73,6 +93,7 @@ var DashCard = class DashCard extends LitElement {
 	disconnectedCallback() {
 		this.dashboard?.unregisterCard(this);
 		this.dashboard = void 0;
+		this.motion = void 0;
 		super.disconnectedCallback();
 	}
 	/** Called by the grid when its shape or its layout record changed. */
@@ -80,14 +101,129 @@ var DashCard = class DashCard extends LitElement {
 		this.requestUpdate();
 	}
 	willUpdate() {
-		const visible = this.dashboard?.placementOf(this.cardId)?.visible;
-		if (visible !== void 0) this.hidden = !visible;
+		if (!this.hasUpdated) {
+			this.hasHeader = hasSlottedContent(this, "header");
+			this.hasActions = hasSlottedContent(this, "actions");
+			this.hasSlottedControls = hasSlottedContent(this, "controls");
+			this.hasFooter = hasSlottedContent(this, "footer");
+		}
+		this.syncVisibility();
 	}
 	updated() {
 		const placement = this.placement;
 		this.style.setProperty("--_grid-column", `${placement.col} / span ${placement.colSpan}`);
 		this.style.setProperty("--_grid-row", `${placement.row} / span ${placement.rowSpan}`);
 		this.syncHandleValues();
+		if (this.enterPending) {
+			this.enterPending = false;
+			this.playEnter();
+		}
+	}
+	/**
+	* Applies the layout record's `visible`. Hiding is deferred until the leave animation has played; showing again
+	* cancels a leave in flight and animates in. Before the first render, and outside a grid, nothing animates.
+	*/
+	syncVisibility() {
+		const visible = this.dashboard?.placementOf(this.cardId)?.visible;
+		if (visible === void 0) return;
+		if (visible) {
+			if (this.leaving || this.motion) this.cancelMotion();
+			if (this.hidden && this.hasUpdated) this.enterPending = true;
+			this.hidden = false;
+		} else if (!this.hidden && !this.leaving) {
+			if (!this.hasUpdated) this.hidden = true;
+			else this.leave().then((done) => {
+				if (done) this.hidden = true;
+			});
+		}
+	}
+	/**
+	* Plays the leave animation, then removes the element from the document. Resolves once it is gone. The other
+	* cards keep their placement — the grid does not close the gap; re-place them (`col`/`row` or the grid's
+	* `layout`) once the promise resolves if it should.
+	*/
+	async dismiss() {
+		if (!this.isConnected) return;
+		if (await this.leave()) this.remove();
+	}
+	get surface() {
+		return this.renderRoot.querySelector(".c2-dash-card");
+	}
+	/** Enter and leave timing, read back from the stylesheet so the variables and `prefers-reduced-motion` apply. */
+	timing(target, phase) {
+		const style = getComputedStyle(target);
+		return {
+			duration: style.transitionDuration.split(",").map((value) => parseDuration(value.trim()))[phase === "enter" ? 0 : 1] ?? 0,
+			easing: firstListEntry(style.transitionTimingFunction) || "ease"
+		};
+	}
+	cancelMotion() {
+		this.motion?.cancel();
+		this.motion = void 0;
+		this.leaving = false;
+	}
+	playEnter() {
+		if (isServer) return;
+		this.cancelMotion();
+		const target = this.surface;
+		if (!target || typeof target.animate !== "function") return;
+		const { duration, easing } = this.timing(target, "enter");
+		if (duration <= 0) return;
+		const motion = target.animate([{
+			opacity: 0,
+			transform: "scale(0.96)"
+		}, {
+			opacity: 1,
+			transform: "scale(1)"
+		}], {
+			duration,
+			easing
+		});
+		this.motion = motion;
+		motion.finished.then(() => {
+			if (this.motion === motion) this.motion = void 0;
+		}).catch(() => {});
+	}
+	/**
+	* Fades the card out. Resolves `true` once it has finished — the caller then hides or removes the element — and
+	* `false` when a return cancelled it. The end state is held (`fill: forwards`) until the next enter cancels it,
+	* so nothing flashes between the last frame and the hide.
+	*/
+	async leave() {
+		if (this.motion) this.cancelMotion();
+		this.leaving = true;
+		await this.updateComplete;
+		if (!this.leaving) return false;
+		const target = this.surface;
+		if (isServer || !target || typeof target.animate !== "function") {
+			this.leaving = false;
+			return true;
+		}
+		const { duration, easing } = this.timing(target, "leave");
+		if (duration <= 0) {
+			this.leaving = false;
+			return true;
+		}
+		const motion = target.animate([{
+			opacity: 1,
+			transform: "scale(1)"
+		}, {
+			opacity: 0,
+			transform: "scale(0.96)"
+		}], {
+			duration,
+			easing,
+			fill: "forwards"
+		});
+		this.motion = motion;
+		try {
+			await motion.finished;
+		} catch {
+			return false;
+		}
+		if (this.motion !== motion) return false;
+		this.leaving = false;
+		return true;
 	}
 	/**
 	* The splitter values are written straight onto the handles rather than re-rendered: a drag changes them on
@@ -103,26 +239,23 @@ var DashCard = class DashCard extends LitElement {
 			handle.setAttribute("aria-valuenow", String(dashboard.splitterValue(axis, index)));
 		}
 	}
-	/** `slotchange` does not fire for a server-rendered shadow root, so read every slot once. */
-	firstUpdated() {
-		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSection(slot);
-	}
 	/**
 	* The grid may upgrade after its cards do — the card element is in the document either way, so find it and wait
 	* for the definition rather than for a parent that is already alive.
 	*/
-	attachToDashboard() {
+	attachToDashboard(late = true) {
 		const host = this.closest(DASHBOARD_TAG);
 		if (!host) return;
 		if (typeof host.registerCard !== "function") {
 			if (isServer) return;
 			customElements.whenDefined(DASHBOARD_TAG).then(() => {
-				if (this.isConnected) this.attachToDashboard();
+				if (this.isConnected) this.attachToDashboard(false);
 			});
 			return;
 		}
 		this.dashboard = host;
 		host.registerCard(this);
+		if (late && host.hasUpdated) this.enterPending = true;
 	}
 	get placement() {
 		const override = this.dashboard?.placementOf(this.cardId);
@@ -271,7 +404,7 @@ var DashCard = class DashCard extends LitElement {
     `;
 	}
 	renderHandles() {
-		if (!this.dashboard || this.resize === "none") return nothing;
+		if (!this.dashboard || this.resize === "none" || this.leaving) return nothing;
 		const placement = this.placement;
 		const horizontal = this.resize === "both" || this.resize === "horizontal";
 		const vertical = this.resize === "both" || this.resize === "vertical";
@@ -348,6 +481,7 @@ __decorate([state()], DashCard.prototype, "hasActions", void 0);
 __decorate([state()], DashCard.prototype, "hasSlottedControls", void 0);
 __decorate([state()], DashCard.prototype, "hasFooter", void 0);
 __decorate([state()], DashCard.prototype, "dashboard", void 0);
+__decorate([state()], DashCard.prototype, "leaving", void 0);
 DashCard = __decorate([customElement("c2-dash-card")], DashCard);
 //#endregion
 export { __decorate as n, DashCard as t };

package/dist/dash-card.js

@@ -1,2 +1,2 @@
-import { t as DashCard } from "./dash-card-DYabhvcS.js";
+import { t as DashCard } from "./dash-card-DNRGm1hM.js";
 export { DashCard };

package/dist/dashboard.js

@@ -1,10 +1,10 @@
-import { n as __decorate } from "./dash-card-DYabhvcS.js";
+import { n as __decorate } from "./dash-card-DNRGm1hM.js";
 import { LitElement, html, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import { isServer } from "lit-html/is-server.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/dashboard.scss?inline
-var dashboard_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: grid;\n  box-sizing: border-box;\n  grid-template-columns: var(--_columns, 1fr);\n  grid-template-rows: var(--_rows, auto);\n  gap: var(--c2-dashboard--gap,8px);\n  padding: var(--c2-dashboard--padding,0px);\n  background: var(--c2-dashboard--background,transparent);\n  border: var(--c2-dashboard--border,none);\n  border-radius: var(--c2-dashboard--border-radius,0px);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nslot {\n  display: contents;\n}\n\n::slotted(*) {\n  min-width: 0;\n  min-height: 0;\n}";
+var dashboard_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  --_c2-dashboard-gap: var(--c2-dashboard--gap,8px);\n  display: grid;\n  box-sizing: border-box;\n  grid-template-columns: var(--_columns, 1fr);\n  grid-template-rows: var(--_rows, auto);\n  gap: var(--c2-dashboard--gap,8px);\n  padding: var(--c2-dashboard--padding,0px);\n  background: var(--c2-dashboard--background,transparent);\n  border: var(--c2-dashboard--border,none);\n  border-radius: var(--c2-dashboard--border-radius,0px);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nslot {\n  display: contents;\n}\n\n::slotted(*) {\n  min-width: 0;\n  min-height: 0;\n}";
 //#endregion
 //#region src/dashboard.ts
 var FRACTION = /^([\d.]*)fr$/;
@@ -38,9 +38,15 @@ var Dashboard = class Dashboard extends LitElement {
 		this.minRowHeight = 50;
 		this.storageKey = void 0;
 		this.layout = void 0;
+		this.layouts = void 0;
 		this.columnTracks = [];
 		this.rowTracks = [];
+		this.activeLayout = -1;
 		this.cards = /* @__PURE__ */ new Set();
+		this.mediaQueries = [];
+		this.handleMediaChange = () => {
+			this.activeLayout = this.resolveActiveLayout();
+		};
 		this.pixelCache = /* @__PURE__ */ new Map();
 	}
 	static {
@@ -60,22 +66,37 @@ var Dashboard = class Dashboard extends LitElement {
 	get rowCount() {
 		return this.rowTracks.length;
 	}
+	/** The entry of `layouts` in force, or `undefined` while the authored grid is. */
+	get activeResponsiveLayout() {
+		return this.layouts?.[this.activeLayout];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.watchMedia();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.unwatchMedia();
+	}
 	willUpdate(changed) {
-		if (!this.hasUpdated || changed.has("columns") || changed.has("rows") || changed.has("storageKey")) this.syncTracks();
+		if (!this.hasUpdated || changed.has("layouts")) this.watchMedia();
+		if (!this.hasUpdated || changed.has("columns") || changed.has("rows") || changed.has("storageKey") || changed.has("layouts") || changed.has("activeLayout")) this.syncTracks();
 	}
 	updated(changed) {
 		this.pixelCache.clear();
 		this.style.setProperty("--_columns", this.columnTracks.join(" "));
 		this.style.setProperty("--_rows", this.rowTracks.join(" "));
-		if (changed.has("columnTracks") || changed.has("rowTracks") || changed.has("layout")) for (const card of this.cards) card.hostChanged();
+		if (changed.has("columnTracks") || changed.has("rowTracks") || changed.has("layout") || changed.has("layouts") || changed.has("activeLayout")) for (const card of this.cards) card.hostChanged();
+		if (changed.has("activeLayout") && changed.get("activeLayout") !== void 0) this.emitLayoutChange();
 	}
-	/** Back to the authored tracks, and the stored ones are forgotten. */
+	/** Back to the authored tracks of the layout in force, and its stored ones are forgotten. */
 	reset() {
-		if (this.storageKey && !isServer) try {
-			localStorage.removeItem(this.storageKey);
+		const key = this.activeStorageKey;
+		if (key && !isServer) try {
+			localStorage.removeItem(key);
 		} catch {}
-		this.columnTracks = toTracks(this.columns);
-		this.rowTracks = toTracks(this.rows);
+		this.columnTracks = toTracks(this.activeResponsiveLayout?.columns ?? this.columns);
+		this.rowTracks = toTracks(this.activeResponsiveLayout?.rows ?? this.rows);
 		this.emitLayoutChange();
 	}
 	registerCard(card) {
@@ -86,7 +107,13 @@ var Dashboard = class Dashboard extends LitElement {
 		this.cards.delete(card);
 	}
 	placementOf(cardId) {
-		return cardId ? this.layout?.[cardId] : void 0;
+		if (!cardId) return void 0;
+		const base = this.layout?.[cardId];
+		const active = this.activeResponsiveLayout?.layout?.[cardId];
+		return active && base ? {
+			...base,
+			...active
+		} : active ?? base;
 	}
 	resizeColumn(index, delta) {
 		this.pixelCache.clear();
@@ -194,17 +221,46 @@ var Dashboard = class Dashboard extends LitElement {
 		}
 		return Math.max(0, min);
 	}
+	/**
+	* One `MediaQueryList` per entry of `layouts`, listened to for as long as the element is connected. Whichever
+	* entry matches first is the one in force; the listeners re-run the choice whenever any of them flips.
+	*/
+	watchMedia() {
+		this.unwatchMedia();
+		if (isServer || typeof matchMedia !== "function") return;
+		for (const entry of this.layouts ?? []) {
+			const query = matchMedia(entry.media);
+			query.addEventListener("change", this.handleMediaChange);
+			this.mediaQueries.push(query);
+		}
+		this.activeLayout = this.resolveActiveLayout();
+	}
+	unwatchMedia() {
+		for (const query of this.mediaQueries) query.removeEventListener("change", this.handleMediaChange);
+		this.mediaQueries = [];
+	}
+	resolveActiveLayout() {
+		return this.mediaQueries.findIndex((query) => query.matches);
+	}
+	/** Each entry of `layouts` stores its own sizes: `<storage-key>@<media>`; the authored grid uses the bare key. */
+	get activeStorageKey() {
+		if (!this.storageKey) return void 0;
+		const active = this.activeResponsiveLayout;
+		return active ? `${this.storageKey}@${active.media}` : this.storageKey;
+	}
 	syncTracks() {
-		const columns = toTracks(this.columns);
-		const rows = toTracks(this.rows);
+		const active = this.activeResponsiveLayout;
+		const columns = toTracks(active?.columns ?? this.columns);
+		const rows = toTracks(active?.rows ?? this.rows);
 		const stored = this.readStored();
 		this.columnTracks = stored?.columns?.length === columns.length ? [...stored.columns] : columns;
 		this.rowTracks = stored?.rows?.length === rows.length ? [...stored.rows] : rows;
 	}
 	readStored() {
-		if (!this.storageKey || isServer) return null;
+		const key = this.activeStorageKey;
+		if (!key || isServer) return null;
 		try {
-			const raw = localStorage.getItem(this.storageKey);
+			const raw = localStorage.getItem(key);
 			if (!raw) return null;
 			const parsed = JSON.parse(raw);
 			return parsed && typeof parsed === "object" ? parsed : null;
@@ -213,9 +269,10 @@ var Dashboard = class Dashboard extends LitElement {
 		}
 	}
 	persist() {
-		if (!this.storageKey || isServer) return;
+		const key = this.activeStorageKey;
+		if (!key || isServer) return;
 		try {
-			localStorage.setItem(this.storageKey, JSON.stringify({
+			localStorage.setItem(key, JSON.stringify({
 				columns: this.columnTracks,
 				rows: this.rowTracks
 			}));
@@ -237,8 +294,10 @@ __decorate([property({
 })], Dashboard.prototype, "minRowHeight", void 0);
 __decorate([property({ attribute: "storage-key" })], Dashboard.prototype, "storageKey", void 0);
 __decorate([property({ attribute: false })], Dashboard.prototype, "layout", void 0);
+__decorate([property({ attribute: false })], Dashboard.prototype, "layouts", void 0);
 __decorate([state()], Dashboard.prototype, "columnTracks", void 0);
 __decorate([state()], Dashboard.prototype, "rowTracks", void 0);
+__decorate([state()], Dashboard.prototype, "activeLayout", void 0);
 Dashboard = __decorate([customElement("c2-dashboard")], Dashboard);
 //#endregion
 export { Dashboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/dashboard",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/dashboard.js",
   "exports": {
@@ -29,6 +29,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -73,12 +74,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.11",
+    "@c2n/core": "0.0.13",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,6 +6,10 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { DashCard } from '@c2n/dashboard/dash-card.js'
@@ -13,12 +17,27 @@ import type { Dashboard } from '@c2n/dashboard'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      'c2-dash-card': C2Props<DashCard>
-      'c2-dashboard': C2Props<Dashboard>
+      'c2-dash-card': C2Props<DashCard> & {
+        'card-id'?: Attribute
+        'col-span'?: Attribute
+        'row-span'?: Attribute
+        'min-width'?: Attribute
+        'min-height'?: Attribute
+        'expand-width'?: Attribute
+        'expand-height'?: Attribute
+        'expand-full'?: Attribute
+      }
+      'c2-dashboard': C2Props<Dashboard> & {
+        'min-column-width'?: Attribute
+        'min-row-height'?: Attribute
+        'storage-key'?: Attribute
+      }
     }
   }
 }

package/types/src/dash-card.d.ts

@@ -28,15 +28,22 @@ export interface DashCard {
  * 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, so
- * give it — or the card inside it — a background.
+ * 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.
  *
  * @tag c2-dash-card
  *
- * @slot - Pane content. Give it `height: 100%` (a `c2-card` already stretches) so it follows the row track.
+ * @slot - Pane content. It fills the pane: the body is a column flex box and every slotted child is a `flex: 1`
+ * item with `min-height: 0`, so a chart or an editor follows the row track without a `height: 100%` chain.
  * @slot header - Title area of the header row; filling it turns the row on.
  * @slot actions - Your own controls at the end of the header row, before the built-in expand buttons and separated
  * from them by `--c2-dash-card__actions--gap`.
@@ -72,9 +79,13 @@ export interface DashCard {
  * @cssproperty {overflow} [--c2-dash-card--overflow=hidden] - `hidden` keeps the content inside the track; switch
  * it to `visible` for a pane that has to overflow, such as one holding a menu.
  *
- * @cssproperty {background} --c2-dash-card__expanded--background - Fill while the card is expanded over its
- * neighbours; falls back to `--c2-dash-card--background`, which is transparent, so set one of the two.
+ * @cssproperty {background} [--c2-dash-card__expanded--background=#ffffff] - Fill while the card is expanded over
+ * its neighbours, so they do not show through; the card's own `background` stays transparent.
  * @cssproperty {number} [--c2-dash-card__expanded--z-index=20]
+ * @cssproperty {duration} [--c2-dash-card__enter--animation-duration=200ms] - Fade and scale-in of a card added to
+ * a grid that is already on screen, or shown again through the layout record. `0ms` disables it.
+ * @cssproperty {duration} [--c2-dash-card__leave--animation-duration=160ms] - Fade-out before a card is hidden by
+ * the layout record or removed by `dismiss()`. `0ms` disables it.
  * @cssproperty {duration} [--c2-dash-card__expanded--animation-duration=200ms] - Length of the scale-in the card
  * plays when it expands or collapses. Ignored under `prefers-reduced-motion`.
  *
@@ -112,8 +123,8 @@ export interface DashCard {
  * @cssproperty {outline} [--c2-dash-card__control__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
  * @cssproperty {pixel} [--c2-dash-card__control__focus--outline-offset=2px]
  *
- * @cssproperty {pixel} [--c2-dash-card__handle--size=6px] - Thickness of the grab area on an edge. It reaches into
- * the pane, so it stays grabbable however wide the grid gutter is.
+ * @cssproperty {pixel} [--c2-dash-card__handle--size=6px] - Smallest thickness of the grab area on an edge. Inside a
+ * grid the handle is as thick as the gutter when that is wider, centred on the edge, so the whole gutter drags.
  * @cssproperty {pixel} [--c2-dash-card__handle--inset=2px] - Gap between the handle's visible bar and the ends of
  * the edge.
  * @cssproperty {background} [--c2-dash-card__handle--background=transparent]
@@ -154,6 +165,12 @@ export declare class DashCard extends LitElement {
     private hasSlottedControls;
     private hasFooter;
     private dashboard;
+    /** `true` while the leave animation plays: the handles are gone, the placement is kept until it ends. */
+    private leaving;
+    /** The enter or leave animation in flight — or the finished leave, kept so a return can cancel its fill. */
+    private motion;
+    /** Set when the card should animate in after its next render. */
+    private enterPending;
     /** The grid reads this during a drag; a hidden card asks for nothing. */
     get constraint(): DashCardConstraint | undefined;
     connectedCallback(): void;
@@ -162,13 +179,33 @@ export declare class DashCard extends LitElement {
     hostChanged(): void;
     willUpdate(): void;
     updated(): void;
+    /**
+     * Applies the layout record's `visible`. Hiding is deferred until the leave animation has played; showing again
+     * cancels a leave in flight and animates in. Before the first render, and outside a grid, nothing animates.
+     */
+    private syncVisibility;
+    /**
+     * Plays the leave animation, then removes the element from the document. Resolves once it is gone. The other
+     * cards keep their placement — the grid does not close the gap; re-place them (`col`/`row` or the grid's
+     * `layout`) once the promise resolves if it should.
+     */
+    dismiss(): Promise<void>;
+    private get surface();
+    /** Enter and leave timing, read back from the stylesheet so the variables and `prefers-reduced-motion` apply. */
+    private timing;
+    private cancelMotion;
+    private playEnter;
+    /**
+     * Fades the card out. Resolves `true` once it has finished — the caller then hides or removes the element — and
+     * `false` when a return cancelled it. The end state is held (`fill: forwards`) until the next enter cancels it,
+     * so nothing flashes between the last frame and the hide.
+     */
+    private leave;
     /**
      * The splitter values are written straight onto the handles rather than re-rendered: a drag changes them on
      * every pointer move, and nothing else about the card changes with them.
      */
     private syncHandleValues;
-    /** `slotchange` does not fire for a server-rendered shadow root, so read every slot once. */
-    firstUpdated(): void;
     /**
      * The grid may upgrade after its cards do — the card element is in the document either way, so find it and wait
      * for the definition rather than for a parent that is already alive.

package/types/src/dash-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dash-card.d.ts","sourceRoot":"","sources":["../../src/dash-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKpF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAAiB,KAAK,kBAAkB,EAAsB,MAAM,kBAAkB,CAAA;AAG7F,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;AAExE,gEAAgE;AAChE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEnE,2CAA2C;AAC3C,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,QAAQ,EAAE,gBAAgB,CAAA;CAC3B;AAED,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,eAAe,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AA0BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,yDAAyD;IACrB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE1E,yCAAyC;IACb,GAAG,SAAI;IAEnC,sCAAsC;IACV,GAAG,SAAI;IAEnC,2CAA2C;IACQ,OAAO,SAAI;IAE9D,wCAAwC;IACW,OAAO,SAAI;IAE9D,kGAAkG;IAC9C,QAAQ,SAAI;IAEhE,gGAAgG;IAC3C,SAAS,SAAI;IAElE,uCAAuC;IACV,MAAM,EAAE,cAAc,CAAS;IAE5D,kEAAkE;IACV,WAAW,UAAQ;IAE3E,+DAA+D;IACN,YAAY,UAAQ;IAE7E,kEAAkE;IACX,UAAU,UAAQ;IAEzE,0GAA0G;IAC7E,QAAQ,EAAE,gBAAgB,CAAS;IAEvD,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,SAAS,CAAuC;IAEjE,yEAAyE;IACzE,IAAI,UAAU,IAAI,kBAAkB,GAAG,SAAS,CAW/C;IAEQ,iBAAiB;IAKjB,oBAAoB;IAM7B,sEAAsE;IACtE,WAAW;IAIF,UAAU;IAKV,OAAO;IAOhB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAWxB,6FAA6F;IACpF,YAAY;IAIrB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAczB,OAAO,KAAK,SAAS,GAuBpB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,cAAc;IAsCtB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,aAAa;IAkBZ,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}
+{"version":3,"file":"dash-card.d.ts","sourceRoot":"","sources":["../../src/dash-card.ts"],"names":[],"mappings":"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"}

package/types/src/dashboard-host.d.ts

@@ -28,6 +28,8 @@ export interface DashCardConstraint {
 export interface DashboardHost extends HTMLElement {
     readonly columnCount: number;
     readonly rowCount: number;
+    /** `true` once the grid has rendered; a card that registers after that arrived at runtime and animates in. */
+    readonly hasUpdated: boolean;
     registerCard(card: DashboardCard): void;
     unregisterCard(card: DashboardCard): void;
     /** Resizes one column by `delta` pixels, clamped by the minimums; returns the change that was actually applied. */

package/types/src/dashboard-host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-host.d.ts","sourceRoot":"","sources":["../../src/dashboard-host.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oGAAoG;AACpG,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iGAAiG;AACjG,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,kDAAkD;AAClD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACvC,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACzC,mHAAmH;IACnH,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAClD,gHAAgH;IAChH,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/C,iEAAiE;IACjE,YAAY,IAAI,IAAI,CAAA;IACpB,kHAAkH;IAClH,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5D,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAA;CACvE;AAED,sDAAsD;AACtD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACnD,uEAAuE;IACvE,WAAW,IAAI,IAAI,CAAA;CACpB;AAED,eAAO,MAAM,aAAa,iBAAiB,CAAA"}
+{"version":3,"file":"dashboard-host.d.ts","sourceRoot":"","sources":["../../src/dashboard-host.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oGAAoG;AACpG,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iGAAiG;AACjG,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,kDAAkD;AAClD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,8GAA8G;IAC9G,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACvC,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACzC,mHAAmH;IACnH,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAClD,gHAAgH;IAChH,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/C,iEAAiE;IACjE,YAAY,IAAI,IAAI,CAAA;IACpB,kHAAkH;IAClH,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5D,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAA;CACvE;AAED,sDAAsD;AACtD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACnD,uEAAuE;IACvE,WAAW,IAAI,IAAI,CAAA;CACpB;AAED,eAAO,MAAM,aAAa,iBAAiB,CAAA"}

package/types/src/dashboard.d.ts

@@ -18,6 +18,20 @@ export interface Dashboard {
     addEventListener: TypedAddEventListener<Dashboard, DashboardEventMap>;
     removeEventListener: TypedRemoveEventListener<Dashboard, DashboardEventMap>;
 }
+/**
+ * One responsive variant of the grid. The first entry of `layouts` whose media query matches is applied over the
+ * authored `columns`, `rows` and `layout`; with none matching the authored ones stand.
+ */
+export interface DashboardResponsiveLayout {
+    /** Media query, as given to `matchMedia`: `'(max-width: 1279px)'`. */
+    media: string;
+    /** Column tracks while this entry is active; the authored `columns` otherwise. */
+    columns?: number | string | string[];
+    /** Row tracks while this entry is active; the authored `rows` otherwise. */
+    rows?: number | string | string[];
+    /** Placement overrides by `card-id`, merged per card over the grid's `layout`. */
+    layout?: Record<string, DashCardPlacement>;
+}
 /**
  * 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
@@ -26,6 +40,15 @@ export interface Dashboard {
  * 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>`.
+ *
+ * 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.
  *
@@ -33,11 +56,11 @@ export interface Dashboard {
  *
  * @slot - The `c2-dash-card` panes. Anything else becomes an ordinary grid item, placed by your own CSS.
  *
- * @event {CustomEvent<DashboardLayoutChangeDetail>} layout-change - The track sizes changed and the gesture ended.
- * Does not bubble: listen on the element.
+ * @event {CustomEvent<DashboardLayoutChangeDetail>} layout-change - The track sizes changed: a gesture ended, `reset()`
+ * was called, or another entry of `layouts` took over. Does not bubble: listen on the element.
  *
- * @cssproperty {pixel} [--c2-dashboard--gap=8px] - Gutter between the cards. The drag handles sit inside the cards,
- * so a gutter under ~6px is hard to grab.
+ * @cssproperty {pixel} [--c2-dashboard--gap=8px] - Gutter between the cards. The whole gutter drags: each card's
+ * handle is centred on its edge and as thick as the gap (never under `--c2-dash-card__handle--size`).
  * @cssproperty {padding} [--c2-dashboard--padding=0px] - Inset around the tracks. With a `background` it is what
  * turns the gutters into a visible frame between the panes.
  * @cssproperty {background} [--c2-dashboard--background=transparent]
@@ -58,12 +81,23 @@ export declare class Dashboard extends LitElement {
     storageKey: string | undefined;
     /**
      * Placement overrides keyed by the cards' `card-id`, for a layout that is chosen at runtime rather than authored
-     * in the markup. Each entry wins over the card's own `col`/`row`/`col-span`/`row-span`/visibility.
+     * in the markup. Each entry wins over the card's own `col`/`row`/`col-span`/`row-span`/visibility. This is also
+     * how an app re-flows the remaining panes after one was removed: the grid does not do that by itself.
      */
     layout: Record<string, DashCardPlacement> | undefined;
+    /**
+     * Responsive variants, in priority order: the first entry whose `media` matches supplies the tracks and the card
+     * placements, and the grid switches as the viewport crosses a breakpoint. Nothing is stored across entries — each
+     * one keeps its own sizes under `<storage-key>@<media>`.
+     */
+    layouts: DashboardResponsiveLayout[] | undefined;
     private columnTracks;
     private rowTracks;
+    /** Index into `layouts` of the entry in force, `-1` for the authored grid. */
+    private activeLayout;
     private cards;
+    private mediaQueries;
+    private readonly handleMediaChange;
     /** Used track sizes, valid until the next write to the tracks. */
     private pixelCache;
     /** Column tracks as they are laid out right now. */
@@ -72,9 +106,13 @@ export declare class Dashboard extends LitElement {
     get rowSizes(): string[];
     get columnCount(): number;
     get rowCount(): number;
+    /** The entry of `layouts` in force, or `undefined` while the authored grid is. */
+    get activeResponsiveLayout(): DashboardResponsiveLayout | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /** Back to the authored tracks, and the stored ones are forgotten. */
+    /** Back to the authored tracks of the layout in force, and its stored ones are forgotten. */
     reset(): void;
     registerCard(card: DashboardCard): void;
     unregisterCard(card: DashboardCard): void;
@@ -98,6 +136,15 @@ export declare class Dashboard extends LitElement {
     private resizeTrack;
     /** The largest minimum any card covering this track asks for, spread over the tracks that card spans. */
     private trackMin;
+    /**
+     * One `MediaQueryList` per entry of `layouts`, listened to for as long as the element is connected. Whichever
+     * entry matches first is the one in force; the listeners re-run the choice whenever any of them flips.
+     */
+    private watchMedia;
+    private unwatchMedia;
+    private resolveActiveLayout;
+    /** Each entry of `layouts` stores its own sizes: `<storage-key>@<media>`; the authored grid uses the bare key. */
+    private get activeStorageKey();
     private syncTracks;
     private readStored;
     private persist;

package/types/src/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard.ts"],"names":[],"mappings":"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"}