@humanforest/nuxt-layer 0.3.0 → 0.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@humanforest/nuxt-layer",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Forest design system as a Nuxt layer — extend it to inherit the theme, colour roles, icons and brand fonts in one line.",
   "main": "./nuxt.config.ts",
   "files": [

package/packages/ui/src/card/FInsetCard.vue

@@ -110,12 +110,21 @@ const props = withDefaults(
     icon?: string;
     title?: string;
     meta?: string;
+    /**
+     * The box draws no padding of its own, so the child can run to its edge and supply whatever
+     * gutters it wants. For content that already pads itself — a UTable pads its own cells, a map
+     * or a chart wants every pixel — where the box's 16px would sit outside the child's and read as
+     * a doubled margin. This is FlushCard's argument applied one level in: same lever, the box's
+     * body rather than the card's.
+     */
+    flush?: 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 },
+  { gap: 8, outlined: true, bare: false, flush: false },
 );
 
 const slots = useSlots();
@@ -131,6 +140,10 @@ if (import.meta.env.DEV) {
   watchEffect(() => {
     if (hasHeader.value && hasFooter.value)
       console.warn('[FInsetCard] `header` and `footer` together — this pattern takes one strip, not both.');
+    // `flush` un-pads the box; `bare` means there is no box to un-pad. Silent inertness is the kind
+    // of thing someone debugs for ten minutes, so say it.
+    if (props.bare && props.flush)
+      console.warn('[FInsetCard] `flush` does nothing under `bare` — bare draws no box, so there is no padding to remove.');
   });
 }
 
@@ -181,7 +194,13 @@ const rootClass = computed(() =>
 //
 // The box takes no padding of its own: UCard already pads its BODY slot, and adding p-* to the root
 // stacks on top of it for double the intended space.
-const boxUi = computed(() => ({ root: `bg-[var(--forest-card-inset)] ${PAD_CLASS[props.gap]}` }));
+// Both breakpoints on the flush body: the card fragment re-pins `sm:p-4`, so a bare `p-0` still
+// 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]}`,
+  ...(props.flush ? { body: 'p-0 sm:p-0' } : {}),
+}));
 
 // ★ FOR `bare`, WHERE THE CHILD IS ITS OWN SURFACE (an FKpi). Exposed as a slot prop so the
 // call site passes it straight to the child's `ui` without needing to know any of this: