@humanforest/ui 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "files": [
     "src",
@@ -9,7 +9,7 @@
     "preset.gen.js"
   ],
   "dependencies": {
-    "@humanforest/tokens": "^0.3.2",
+    "@humanforest/tokens": "^0.3.3",
     "@internationalized/date": "^3.12.2",
     "@mapbox/search-js-core": "^1.6.0",
     "@turf/boolean-point-in-polygon": "^7.4.0",

package/src/card/FInsetCard.vue

@@ -117,13 +117,20 @@ const props = withDefaults(
      * body rather than the card's.
      */
     flush?: boolean;
+    /**
+     * The card fills the height its row gives it instead of hugging its content, so cards in a row
+     * end level. Only for content that can take the extra height: an FKpi whose bleed chart is a
+     * `fill` sparkline grows into it. A bar, a table or a line of text cannot, and the spare height
+     * lands as a gap under it.
+     */
+    stretch?: boolean;
 
     /** Footer action label. `to` makes it a link; without one it is a button. */
     action?: string;
     to?: string;
 
   }>(),
-  { gap: 8, outlined: true, bare: false, flush: false },
+  { gap: 8, outlined: true, bare: false, flush: false, stretch: false },
 );
 
 const slots = useSlots();
@@ -151,8 +158,11 @@ if (import.meta.env.DEV) {
 // Set as a var rather than a class so the radius follows it.
 const style = computed(() => ({ '--forest-card-pad': PAD[props.gap] }));
 
+// Under `stretch` the body takes whatever height the card is given beyond its strip.
 const ui = computed(() => ({
-  body: hasFooter.value ? BODY.footer : hasHeader.value ? BODY.header : BODY.none,
+  body: [hasFooter.value ? BODY.footer : hasHeader.value ? BODY.header : BODY.none, props.stretch ? 'flex-1' : '']
+    .filter(Boolean)
+    .join(' '),
   header: STRIP.header,
   footer: STRIP.footer,
 }));
@@ -175,13 +185,15 @@ const ui = computed(() => ({
 // ★ `h-fit` IS LOAD-BEARING, not a layout preference. A grid or flex row stretches its children by
 // default, and a stretched card grows past its content — the extra height lands BELOW the box, so
 // the even inset turns into a lopsided gap at the bottom and the frame stops reading as a frame.
-// The card must hug its content vertically.
+// The card must hug its content vertically. `stretch` drops it for a row whose cards should end
+// level: the card becomes a flex column and its body takes the spare height, which only reads well
+// when the content can grow into it.
 // ⚠ NOT `self-start`, which was the first cut: `align-self` acts on the CROSS axis, so in a flex
 // COLUMN it stops the card filling the width instead of capping its height — the card shrank to its
 // content in every column layout. `h-fit` caps the height and leaves width alone, which is the axis
 // actually at issue.
 const rootClass = computed(() =>
-  ['h-fit', props.outlined ? 'ring ring-[var(--forest-card-ring)]' : ''].filter(Boolean).join(' '),
+  [props.stretch ? 'flex flex-col' : 'h-fit', props.outlined ? 'ring ring-[var(--forest-card-ring)]' : ''].filter(Boolean).join(' '),
 );
 
 // ★ THE BOX IS ALWAYS RAISED — there is no ramp option, on purpose. Letting the nesting ladder fill
@@ -197,7 +209,7 @@ const rootClass = computed(() =>
 // pads at ≥640px. The box keeps its own overflow-hidden either way, which is what clips a flush
 // child to the rounded corner; a child that must scroll (UTable) already scrolls itself.
 const boxUi = computed(() => ({
-  root: `bg-[var(--forest-card-inset)] ${PAD_CLASS[props.gap]}`,
+  root: `bg-[var(--forest-card-inset)] ${PAD_CLASS[props.gap]}${props.stretch ? ' h-full' : ''}`,
   ...(props.flush ? { body: 'p-0 sm:p-0' } : {}),
 }));
 
@@ -209,7 +221,7 @@ const boxUi = computed(() => ({
 //     expression, so `visual-fit="bleed"` still zeroes the bottom and meets both edges. A padding
 //     class cannot do this: FKpi merges `ui.root` last, so a `pb-4` here would beat the bleed's `pb-0`.
 const selfBoxUi = computed(() => ({
-  root: `bg-[var(--forest-card-inset)] [--forest-kpi-pad:1rem] ${PAD_CLASS[props.gap]}`,
+  root: `bg-[var(--forest-card-inset)] [--forest-kpi-pad:1rem] ${PAD_CLASS[props.gap]}${props.stretch ? ' h-full' : ''}`,
 }));
 </script>
 

package/src/kpi/kpi.theme.ts

@@ -22,8 +22,8 @@ export const kpiTheme = tv({
     // bleed pulls by the same expression, so the graphic meets the edge the padding leaves.
     //
     // No row template: the rows are implicit, one per part present, so a tile without a visual has
-    // no empty track under its caption, and no gap in front of one. A grouped tile takes its rows
-    // from the group instead (`aligned`).
+    // no empty track under its caption, and no gap in front of one. A bleed visual adds a flexible
+    // last row (`visualFit`); a grouped tile takes its rows from the group instead (`aligned`).
     //
     // One explicit minmax(0,1fr) column: without it the implicit column sizes to max-content, and a
     // chart with an intrinsic width (Unovis defaults to 300px) makes the tile's own grid wider than
@@ -81,7 +81,10 @@ export const kpiTheme = tv({
      * `bleed` (the default) is for a graphic that IS data and nothing else, a sparkline being the
      * case: it runs through the tile's gutter to both side edges and sits on the bottom edge, which
      * the tile reaches by zeroing its own bottom padding rather than by a negative margin — a
-     * margin would shrink the grid row and pull the graphic up over the caption.
+     * margin would shrink the grid row and pull the graphic up over the caption. Its row is the
+     * tile's last and flexible one, and the graphic spans it bottom-aligned: a tile given more
+     * height than it needs — a group's shared row, a stretched FInsetCard — grows a `fill`
+     * sparkline into the spare height and leaves any other graphic on the bottom edge.
      *
      * `inset` is for a graphic carrying text, FDistributionBar's legend being the case. Text set
      * against the card's edge reads as a mistake, so the padding stays. It also top-aligns, and
@@ -89,7 +92,7 @@ export const kpiTheme = tv({
      * content keeps the extra height below the graphic rather than spread between its rows.
      */
     visualFit: {
-      bleed: { root: 'pb-0', visual: 'self-end -mx-[var(--forest-kpi-pad,var(--forest-card-pad))]' },
+      bleed: { root: 'pb-0 grid-rows-[auto_auto_auto_1fr]', visual: 'self-stretch flex flex-col justify-end -mx-[var(--forest-kpi-pad,var(--forest-card-pad))]' },
       inset: { root: 'content-start', visual: 'self-start' },
     },
     // A grouped tile spans exactly the rows its group declares (kpiGroupRows), so a group with no