@meistrari/tela-build 1.49.0 → 1.49.1

package/components/tela/home/home.mdx

@@ -217,9 +217,9 @@ function onFiles(event: Event) {
 | `TelaHomeContent` | The `<main>` content column. Centered, `max-width 1600px`, `px-48px py-32px`, vertical stack with `gap-24px` (separates the title from the body). Grows with content and scrolls with the page. |
 | `TelaHomeTitle` | Page heading. Always `heading-h4-semibold text-primary` — the welcome / page line. |
 | `TelaHomeBody` | Stacks the page's major sections below the title — metrics row, then one or more `TelaHomeSection`s — with the larger between-sections gap (`gap-46px`). |
-| `TelaHomeMetrics` | Responsive grid wrapper for the metric row (`gap-12px`). `columns` prop sets the column count (default `3`). Exposes an `#actions` slot, rendered right-aligned **outside** the grid — reserved for `TelaCreateCard`. |
+| `TelaHomeMetrics` | Responsive grid wrapper for the metric row. Cards are divided by hairlines (`bg-border` container + `gap-0.5px`, each card paints its own `bg`) inside a rounded `border-0.5px` outline. The `columns` prop is the **max** column count (default `3`); the grid auto-shrinks to the number of visible cards so a partial row leaves no empty cell. Exposes an `#actions` slot, rendered right-aligned **outside** the grid — reserved for `TelaCreateCard`. |
 | `TelaHomeMetricsGroup` | Stacks two or more cards vertically inside a single `TelaHomeMetrics` cell (`flex-col gap-12px h-full`). Use when one column should hold more than one card. |
-| `TelaHomeMetricsCard` | A metric card built on `TelaCard`. A `label` (or `#label` slot), an **optional** big `value` (`value` prop — omit it for a title-only card), and a default slot for the body (breakdown, list, progress, sparkline). With a value it's a hero metric; without one it's a titled content card. |
+| `TelaHomeMetricsCard` | A metric card built on `TelaCard`. A `label` (or `#label` slot), an **optional** big `value` (`value` prop — omit it for a title-only card), and a default slot for the body (breakdown, list, progress, sparkline). With a value it's a hero metric; without one it's a titled content card. A `class` prop is merged (via `cn`) onto the inner body wrapper for per-card layout tweaks. |
 | `TelaHomeMetricsStat` | A small stat unit — a `label`, a `value` (`h4`), and an optional `delta` (e.g. a percentage) inline with the value. Use it for the breakdown rows inside a metric card's body. |
 | `TelaHomeToolbar` | Filter/search bar above the table. Default slot is the left group (`TelaFilter` + `TelaInput`); the `#actions` slot is the right side. Enforces the fixed order and spacing — see composition rule 5. |
 | `TelaHomeSection` | Vertical group (`gap-24px`) for a block of related content — e.g. a `TelaHomeToolbar` and the `TelaTable` it controls. Renders as a `<section>`. |
@@ -244,7 +244,7 @@ function onFiles(event: Event) {
 
 ```typescript
 type HomeMetricsProps = {
-  columns?: number  // grid column count — default 3
+  columns?: number  // max grid columns — default 3; auto-shrinks to the visible card count
 }
 ```
 
@@ -252,8 +252,9 @@ type HomeMetricsProps = {
 
 ```typescript
 type HomeMetricsCardProps = {
-  label?: string           // metric label (or use the #label slot)
-  value?: string | number  // optional hero value — omit for a title-only card
+  label?: string                  // metric label (or use the #label slot)
+  value?: string | number         // optional hero value — omit for a title-only card
+  class?: HTMLAttributes['class']  // extra classes merged onto the card's inner body wrapper
 }
 // default slot — body content (breakdown, list, progress, sparkline)
 ```

package/components/tela/home/metrics/metrics-card.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-const props = defineProps<{ label?: string, value?: string | number }>()
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ label?: string, value?: string | number, class?: HTMLAttributes['class'] }>()
 
 const hasValue = computed(() => props.value !== undefined)
 </script>
 
 <template>
-    <TelaCard size="xs">
-        <div flex="~ col" h-full :class="hasValue ? 'gap-36px' : 'gap-20px'">
+    <TelaCard size="xs" class="rounded-0 border-none">
+        <div flex="~ col" h-full :class="cn(props.class, hasValue ? 'gap-[36px]' : 'gap-[20px]')">
             <div flex="~ col" gap-4px>
                 <span body-12-regular text-secondary>
                     <slot name="label">

package/components/tela/home/metrics/metrics.vue

@@ -1,16 +1,41 @@
 <script setup lang="ts">
+import type { VNode, VNodeChild } from 'vue'
+
 const props = withDefaults(defineProps<{ columns?: number }>(), {
     columns: 3,
 })
 
+const slots = useSlots()
+
+function isVisibleCard(node: VNodeChild): node is VNode {
+    if (typeof node !== 'object' || node === null || Array.isArray(node))
+        return false
+
+    return typeof node.type !== 'symbol'
+}
+
+const slotCount = computed(() => {
+    const nodes = slots.default?.() ?? []
+
+    return nodes
+        .flatMap(node => (Array.isArray(node.children) ? node.children : node))
+        .filter(isVisibleCard)
+        .length
+})
+
+const resolvedColumns = computed(() => Math.min(props.columns, Math.max(slotCount.value, 1)))
+
 const gridStyle = computed(() => ({
-    gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,
+    gridTemplateColumns: `repeat(${resolvedColumns.value}, minmax(0, 1fr))`,
 }))
 </script>
 
 <template>
     <div flex justify-between>
-        <div grid gap-12px :style="gridStyle">
+        <div
+            grid gap-0.5px bg-border border-0.5px border rounded-12px overflow-hidden
+            :style="gridStyle"
+        >
             <slot />
         </div>
         <slot name="actions" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.49.0",
+  "version": "1.49.1",
   "type": "module",
   "files": [
     "app.config.ts",