@adia-ai/web-components 0.6.46 → 0.6.47

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.47] — 2026-05-29
+
+### Added — `<card-ui>` `[grow]` section attribute
+
+- **`components/card/card.css`** — `<section grow>` inside `card-ui` fills the card's remaining vertical height via `flex: 1`. The card becomes a `flex-direction: column` container when any direct `<section[grow]>` child is present, so the grow section absorbs the leftover space after header/footer. Requires the card to have a definite height (explicit inline height, grid row track, or flex parent) — a content-sized card has nothing to fill. Composable with `[bleed]`: `<section bleed grow>` for edge-to-edge fill surfaces (maps, canvases, full-bleed tables). A `<chart-ui>` directly inside `<section bleed>` auto-grows without `[grow]` (pre-existing zero-config convenience for the common chart case).
+- **`components/card/card.examples.html`** — examples demonstrating the grow pattern.
+- **`components/card/card.yaml`** — a2ui rules updated to document `[grow]`.
+
+### Maintenance
+
+- **`dist/web-components.min.css`** — bundle rebuild reflecting the `card.css` addition.
+
 ## [0.6.46] — 2026-05-29
 
 ### Added — declarative `traits="..."` Quick start sections on all 56 trait pages

package/components/card/card.css

@@ -304,12 +304,28 @@
     padding: 0;
   }
 
-  /* Flex-column growth for bleed chart cards (sparklines, area, line).
-     Switches the card to a column flex container so the bleed section
-     can flex-grow to fill remaining height after the header. The chart
-     then uses height:100% to fill the section. Only activates when a
-     chart-ui is a direct child of a bleed section — no effect on other
-     card layouts. */
+  /* [grow] — section fills remaining card height. Switches the card to a
+     column flex container so the section flex-grows into the leftover
+     space after the header/footer. Matches the col-ui[grow] / row-ui[grow]
+     semantics (flex:1) — same mental model, applied to a card body section.
+     Requires the card to have a definite height (inline height, a grid row
+     track, or a flex parent); a content-sized card has no leftover to fill.
+     Combine with [bleed] for edge-to-edge fill (tables, charts, maps):
+     <section bleed grow>. */
+  :scope:has(> section[grow]) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & > section[grow] {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Auto-grow for bleed chart cards (sparklines, area, line) — a chart-ui
+     directly inside a bleed section fills height without an explicit [grow]
+     (the chart itself uses height:100%). Equivalent to the [grow] rule
+     above; kept as a zero-config convenience for the common chart case. */
   :scope:has(> section[bleed] > chart-ui) {
     display: flex;
     flex-direction: column;

package/components/card/card.yaml

@@ -137,6 +137,11 @@ a2ui:
     row 2 without needing slot="description".
   - Multiple <section> siblings are allowed and stack vertically. [bleed] on a section removes its margin for edge-to-edge
     content (tables, charts); [padding] adds a canvas-scrim background for hero regions.
+  - '[grow] on a section makes it fill the card''s remaining height (flex:1 — same semantics as col-ui[grow]/row-ui[grow]).
+    The card becomes a flex column so the section absorbs the leftover space after the header/footer. Requires the card to
+    have a definite height (inline height, grid row track, or flex parent) — a content-sized card has nothing to fill.
+    Combine with [bleed] for edge-to-edge fill: <section bleed grow>. A <chart-ui> directly inside a <section bleed>
+    auto-grows without [grow] (zero-config convenience for the common chart case).'
   - 'Footer with a [slot="description"] + [slot="action"] pair triggers justify-content: space-between — useful for a "Last
     saved …" note on the left and a Save/Cancel button group on the right.'
   - >-