prime-ui-kit 0.9.0 → 0.9.1

package/src/components/card/COMPONENT.md

@@ -1,21 +1,21 @@
 # Card
 
 **Category:** data-display
+**Kind:** composite
 
 > A filled surface block with structural templates for metrics, charts, lists, calls to action and covers.
 
 ## When to use
-- KPI tiles on a dashboard (`mini`, `mini-media`, `metric`, `stat-trend`, `split`).
+- KPI tiles on a dashboard (`mini`, `stat-trend`, `split`).
 - A chart or text widget with a header and controls (`panel`).
-- A settings or profile form grouped on its own surface (`panel` + `Body` + `Actions`).
+- A settings or profile form grouped on its own surface (`panel` + `Body` + `Footer`).
 - An activity list (`list`), a call to action (`cta`), a tile with an image on top (`cover`).
 
 ## When not to use
-- A whole page region with a title and description → use [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
+- A whole page region with a title and description → [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
 - Tabular data → use [DataTable](../data-table/COMPONENT.md) (it has its own fill).
-- A message about the page state → use [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
-- Content that floats over the page → use [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
-- Collapsible groups → use [Accordion](../accordion/COMPONENT.md).
+- A message about the page state → [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
+- Content that floats over the page → [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
 
 ## Import
 ```tsx
@@ -24,368 +24,169 @@ import { Card } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Card.Root variant="mini"         IconBox · Stack(Label, Value)
-Card.Root variant="mini-media"   IconBox · Stack(Label, Value) · Media
-Card.Root variant="metric"       HeaderRow(Lead, Value) · Description
+Card.Root variant="panel"        Header(Title, …trailing) · Body · Media · Footer
+Card.Root variant="mini"         Icon · Label · Value · Media?
 Card.Root variant="stat-trend"   Label · Value · Delta
-Card.Root variant="split"        Split > SplitCell(IconBox, Stack(Label, Value)) ×2
-Card.Root variant="panel"        SectionHeader(SectionTitle, SectionTrailing) · Body · Chart · Actions
-Card.Root variant="cta"          Title · CtaBody · Actions
-Card.Root variant="list"         ListHeader(Title, link) · List > ListItem … · Actions
-Card.Root variant="cover"        Cover · Stack(Title, Label) · Actions
+                                 or Header(Badge or Icon, Value) · Description
+Card.Root variant="split"        Body(cell × 2: any element, e.g. <div> with Icon · Label · Value)
+Card.Root variant="cta"          Title · Description · Footer
+Card.Root variant="list"         Header(Title, …trailing) · List(ListItem …)
+Card.Root variant="cover"        Media · Body(Title, Description) · Footer
 ```
-The parts are free slots: every part works in any template, but the spacing rules above are tuned for these trees.
 
 ## API
 
-### Card.Root
-`<div>`. Forwards `ref`. No `asChild`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `variant` | `"mini" \| "mini-media" \| "metric" \| "panel" \| "stat-trend" \| "cta" \| "list" \| "split" \| "cover"` | `"panel"` | Structural template: layout, padding and the value text role. |
-| `flat` | `boolean` | `false` | Removes the card shadow. No border in either case. |
-| `className` | `string` | — | Extra class. |
-| `children` | `ReactNode` | — | Parts. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`). `data-variant` / `data-flat` are always set by the component.
-
-### Card.Delta
-`<span>`. No ref forwarding. Change of a metric: body-s, weight 500, `tabular-nums`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `tone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Color by meaning (good / bad), independent of the sign. |
-| `children` | `ReactNode` | — | Content ("+18% к сентябрю"). |
-| `className` | `string` | — | Extra class. |
-
-+ native `<span>` props. `data-tone` is always set by the component.
-
-### Card.IconBox
-`<div>`. No ref forwarding. 40px tile (`control-l-height`), radius 8, `accent-soft` fill, `accent-text` icon 20px. In `mini`, `mini-media`, `SplitCell`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.Lead
-`<div>`. No ref forwarding. Leading element of a `HeaderRow` (badge, icon in `text-secondary`).
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.HeaderRow
-`<div>`. No ref forwarding. Row with space-between: lead left, value right (`metric`). Wraps below 22rem card width.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-### Card.Stack
-`<div>`. No ref forwarding. Column with `--prime-space-1` gap for Label + Value (or Title + Label in `cover`).
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.Label
-`<span>`. No ref forwarding. Metric caption: body-s, `text-secondary`, one line with ellipsis.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<span>` props (`HTMLAttributes<HTMLSpanElement>`).
-
-### Card.Value
-`<span>`. No ref forwarding. The number: title-l (heading-m in `metric`, heading-l in `stat-trend`), `tabular-nums`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<span>` props (`HTMLAttributes<HTMLSpanElement>`).
-
-### Card.Description
-`<p>`. No ref forwarding. Secondary line: body-s, `text-secondary`.
+### Card.Root
+`ref` → `HTMLDivElement`. The filled surface (card fill, radius 12, raised shadow, no border) and a size container; `variant` picks the template layout of its parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<p>` props (`HTMLAttributes<HTMLParagraphElement>`).
+| `variant` | `"panel" \| "mini" \| "stat-trend" \| "split" \| "cta" \| "list" \| "cover"` | `"panel"` | Structural template: titled block with zones (`panel`), KPI tiles, a call to action, a list or a cover tile. |
+| `flat` | `boolean` | `false` | No raised shadow: a flat tile for dense grids. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` + `aria-labelledby` for a landmark block, and the other div attributes. |
 
-### Card.Media
-`<div>`. No ref forwarding. Bottom full-width slot of `mini-media` (sparkline, ProgressBar); min height 40px.
+### Card.Header
+`ref` → `HTMLDivElement`. The top row: `Card.Title` first, anything after it (a control, a quiet caption) at the end. In `panel` and `list` it is a padded zone with a faint hairline below; in `stat-trend` it can pair a leading badge or icon with a compact `Card.Value`. Wraps below 22rem.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
 ### Card.Title
-Heading (`<h3>` by default). No ref forwarding. Card title: title-s (title-m in `cta`).
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level for the page outline; the look does not change. |
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native heading props (`HTMLAttributes<HTMLHeadingElement>`).
-
-### Card.Actions
-`<div>`. No ref forwarding. Action row, `gap` 8. In `panel` / `list` it is the footer: right-aligned, faint hairline above. In `cta` a hairline above.
+`ref` → `HTMLHeadingElement`. The card heading (`<h3>`, title-s; title-m in `cta`).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
+| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level that fits the page outline; the look does not change. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.CtaBody
-`<div>`. No ref forwarding. Body text of a `cta` card: body-s, `text-secondary`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.Cover
-`<div>`. No ref forwarding. Top media of a `cover` card: full width, 128–192px high, sunken fill; the child image/element covers it.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.Split
-`<div>`. No ref forwarding. Two-column grid for `split`; one column below 22rem card width.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.SplitCell
-`<div>`. No ref forwarding. One cell of `Split`; a hairline separates the cells. With an `IconBox` it becomes a row.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.ListHeader
-`<div>`. No ref forwarding. Header row of a `list` card (title + link); faint hairline below when followed by `List`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.List
-`<ul>`. Forwards `ref`. List of a `list` card (no bullets).
+### Card.Description
+`ref` → `HTMLParagraphElement`. Secondary text (`<p>`, body-s, wraps): under the title of `cta` and `cover`, under the header of `stat-trend`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-+ native `<ul>` props (`HTMLAttributes<HTMLUListElement>`).
-
-### Card.ListItem
-`<li>`. Forwards `ref`. Item: body-m, padding 12 × card padding, faint hairline between items.
+### Card.Body
+`ref` → `HTMLDivElement`. The padded content zone (gap 16). In `split` it is the two-cell grid: each child is a cell (stacked below 22rem); in `cover` it holds the title and the description 4 apart.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-+ native `<li>` props (`HTMLAttributes<HTMLLIElement>`).
-
-### Card.SectionHeader
-`<div>`. No ref forwarding. Header of a `panel` card: title + trailing, min height 36px; faint hairline below when followed by `Body`.
+### Card.Media
+`ref` → `HTMLDivElement`. A chart, an image or a gauge: edge to edge under the header or the body in `panel`, the 128–192px cover on top in `cover`, the full-width bottom slot in `mini`. A chart SVG needs a CSS height.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-### Card.SectionTitle
-Heading (`<h3>` by default). No ref forwarding. Panel title: title-s.
+### Card.Footer
+`ref` → `HTMLDivElement`. The bottom row of buttons, wrapping: right-aligned under a faint hairline in `panel` and `list`, under a full-width hairline in `cta`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level for the page outline; the look does not change. |
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-+ native heading props (`HTMLAttributes<HTMLHeadingElement>`).
-
-### Card.SectionTrailing
-`<div>`. No ref forwarding. Right side of `SectionHeader`: controls, icon 16px in `text-secondary`.
+### Card.Icon
+`ref` → `HTMLDivElement`. The 40px accent tile of a KPI holding one icon; it spans the label and the value rows in `mini` and a `split` cell.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-### Card.Body
-`<div>`. No ref forwarding. Padded content of a `panel`: column with `--prime-card-gap` (16) gap; a single child stretches.
+### Card.Label · Card.Value · Card.Delta
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates), the value (tabular, sized by the template and the card width) and the change.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
+| `tone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Delta: color by meaning, not by sign (churn up is `danger`). |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
-
-### Card.Chart
-`<div>`. No ref forwarding. Edge-to-edge chart area of a `panel` (no side padding); a single child stretches.
+### Card.List · Card.ListItem
+`ref` → `HTMLUListElement` / `HTMLLIElement`. The `list` template: a `<ul>` of `<li>` rows with faint hairlines between them; head it with `Card.Header`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | Content. |
-| `className` | `string` | — | Extra class. |
-
-+ native `<div>` props (`HTMLAttributes<HTMLDivElement>`).
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
 
 ## Variants
 
 ### variant (structural templates)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `mini` | Row: 40px accent icon tile + label (body-s) and value (title-l); padding 20 | A compact KPI tile | |
-| `mini-media` | `mini` row plus a full-width bottom `Media` slot | A KPI with a sparkline or a ProgressBar | |
-| `metric` | Column: header row (badge/lead left, heading-m value right) + description; gap 8 | A KPI with a qualifier badge (SLA, period) | |
-| `stat-trend` | Column: label, large heading-l value (heading-m below 20rem, display-s above 36rem card width), delta | The main number of a dashboard with its change | |
-| `split` | Two metric cells side by side with a hairline between; stacked below 22rem | Two related metrics in one tile | |
-| `panel` | No padding on the root; header (title + trailing) with a faint hairline, padded `Body`, edge-to-edge `Chart`, footer `Actions` right-aligned with a hairline above | Chart widgets, settings forms, any titled block | yes |
-| `cta` | Column: title-m title, body-s text, actions under a hairline; gap 12 | A call to action (export, upgrade, connect) | |
-| `list` | No padding on the root; list header with hairline, items separated by faint hairlines | Recent events, short lists with a "Все" link | |
-| `cover` | No padding; 128–192px media on top, title + label, actions | Campaign, project or product tiles | |
-
-All variants share: `--prime-color-card-bg` fill, radius 12 (`--prime-card-radius`), `--prime-card-shadow`, no border.
-
-### flat (visual flag)
+| `panel` | no root padding; `Header` with a faint hairline, padded `Body`, edge-to-edge `Media`, right-aligned `Footer` | chart widgets, settings forms, any titled block | yes |
+| `mini` | 40px accent `Icon` tile beside the label and the title-l value; a `Media` child is a full-width bottom slot | a compact KPI tile, with a sparkline or a ProgressBar | |
+| `stat-trend` | label, large value (adapts to the card width), delta; or a `Header` (lead left, heading-m value right) + description | the main number of a dashboard row; a KPI with a qualifier badge | |
+| `split` | `Body` with two metric cells and a faint hairline; stacked below 22rem | two related metrics in one tile | |
+| `cta` | title, body-s text, `Footer` under a hairline | a call to action | |
+| `list` | `Header` with a hairline, items with faint hairlines | recent events, short lists | |
+| `cover` | 128–192px `Media` on top, title and description, `Footer` | campaign, project or product tiles | |
+
+### tone (Delta)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | Card fill + barely visible raised shadow | Cards on the page canvas | yes |
-| `true` | Same fill, no shadow (`data-flat`) | Dense grids of tiles where many shadows add noise | |
+| `neutral` | `text-secondary` | a change with no good/bad meaning | yes |
+| `success` | `success-text` | the change is good | |
+| `warning` | `warning-text` | the change needs attention | |
+| `danger` | `danger-text` | the change is bad | |
 
-### Card.Delta `tone`
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `neutral` | `text-secondary` | A change with no good/bad meaning | yes |
-| `success` | `success-text` | The change is good (revenue up, churn down) | |
-| `warning` | `warning-text` | The change needs attention | |
-| `danger` | `danger-text` | The change is bad (churn up) | |
-
-**Combinations**
-- Recommended: a row of `mini` / `stat-trend` cards for KPIs; `panel` for charts and forms; `Delta tone` by meaning, not by sign (`+0,6 п. п.` churn is `danger`).
-- Allowed but rare: `flat` cards in dense grids; parts outside their template (e.g. `Description` in `stat-trend`).
-- Avoid: a card inside a card for layout (a nested card becomes a sunken tile without shadow — use it only for a real inner block); borders around cards; a `cover` without a meaningful image.
-
-**Sizes**
-Card has no `size`. Padding is `--prime-card-padding-m` (20); `Body` gap is `--prime-card-gap` (16). The card fills its column (`width: 100%`); set widths with the grid around it.
-
-**Hierarchy**
-One `stat-trend` (the main number) per dashboard row, the rest `mini` or `metric`. In a panel footer: one primary Button, the rest `ghost`.
+| `flat` | same fill, no shadow | dense grids of tiles | `false` |
 
 ## States
-Card is not interactive (no hover, focus or selection).
-
-| Attribute | Element | Driven by |
+| State | Driven by | DOM |
 |---|---|---|
-| `data-variant` | Root | `variant` (always set, default `panel`) |
-| `data-flat="true"` | Root | `flat` |
-| `data-tone` | Delta | `tone` (always set, default `neutral`) |
+| template | `variant` | `data-variant` |
+| flat | `flat` | `data-flat` |
+| card width | container queries | `split` stacks below 22rem, `Header` wraps below 22rem, the `stat-trend` value changes at 20rem / 36rem |
 
-Surface context: the card sets `--prime-color-field-bg: var(--prime-color-field-bg-surface)` (fields inside stay distinguishable), `--avatar-ring` to its fill, and for its children `--prime-color-card-bg: var(--prime-color-bg-sunken)` + `--prime-card-shadow: none`, so a nested card or table becomes a sunken tile. Inside AppShell content, Modal, Drawer or Popover the card itself is a sunken tile without shadow.
+Card is static: no hover, focus or press of its own.
 
 ## Layout & spacing
-- Grid of cards: `repeat(auto-fit, minmax(min(100%, 14rem), 1fr))` with `gap: var(--prime-space-4)`.
-- Fields inside `Card.Body`: field → field `--prime-space-5` (20).
-- The card is a size container (`container-type: inline-size`): `split` stacks below 22rem, `HeaderRow` wraps below 22rem, `stat-trend` value changes at 20rem / 36rem.
-- Long values wrap (`overflow-wrap: anywhere`); labels truncate with ellipsis.
-- Charts: give the SVG a fixed CSS height; `Card.Chart` stretches it edge to edge.
+- Grid of cards: `repeat(auto-fit, minmax(min(100%, 14rem), 1fr))`, gap `--prime-space-4`.
+- Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, on the surface field fill.
+- Long values wrap, labels truncate; a chart SVG needs a CSS height.
+- In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper.
 
 ## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
 - `Card.Root` is a plain `<div>`; give it `role="region"` + `aria-labelledby` only when it is a landmark-worthy block.
-- `Card.Title` and `Card.SectionTitle` render `<h3>` by default; directly under a page `<h1>` (`PageContent.Title`) pass `as="h2"` so no level is skipped.
-- Decorative icons in `IconBox` and decorative covers get `aria-hidden`.
-- Controls in `SectionTrailing` need their own accessible names (e.g. `aria-label="Период"` on SegmentedControl).
-- No `labels` keys.
+- `Card.Title` renders `<h3>`; directly under the page title pass `as="h2"`.
+- Decorative icons in `Card.Icon` and cover images in `Card.Media` get `aria-hidden`; controls in `Card.Header` need their own names.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [metrics.tsx](examples/metrics.tsx) | `mini`, `metric`, `stat-trend` with `Delta` success / danger | KPI rows on dashboards |
-| [mini-media.tsx](examples/mini-media.tsx) | `mini-media` with a sparkline and a ProgressBar | KPI with a trend or fill level |
-| [responsive.tsx](examples/responsive.tsx) | `split` and `stat-trend` at 18rem and 40rem | Two related metrics; container-query behaviour |
-| [panel-chart.tsx](examples/panel-chart.tsx) | `panel` with header switch, body text, edge-to-edge chart | Chart widgets |
-| [content.tsx](examples/content.tsx) | `cta`, `list`, `cover` | Calls to action, activity lists, tiles with media |
-| [settings.tsx](examples/settings.tsx) | `panel` with a form and footer actions | Settings and profile forms |
-| [flat.tsx](examples/flat.tsx) | Default shadow vs `flat` | Dense tile grids |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { Card } from "prime-ui-kit";
+No `labels`.
 
-export function RevenueCard() {
-  return (
-    <Card.Root variant="stat-trend">
-      <Card.Label>Выручка за месяц</Card.Label>
-      <Card.Value>₽ 4,2 млн</Card.Value>
-      <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
-    </Card.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A company settings panel: a header, fields on the surface fill and buttons in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. |
+| [variants.tsx](examples/variants.tsx) | KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change — `variant`, `Card.Delta`. |
+| [kpi-media.tsx](examples/kpi-media.tsx) | A KPI with a sparkline or a fill level in the bottom slot of `mini` — `Card.Media`. |
+| [panel-chart.tsx](examples/panel-chart.tsx) | A chart widget: a header with a period switch, a summary line and an edge-to-edge chart — `Card.Header`, `Card.Media`. |
+| [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
+| [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
+| [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem. |
 
 ## Mistakes
-- `<div className="card">` with a border → use `Card.Root`; depth comes from fill, not lines.
-- Wrapping every page section in a card → use PageContent sections; cards are for bounded blocks.
-- `Card.Delta tone="success"` for every "+" → choose the tone by meaning.
-- Custom padding on `Card.Root variant="panel"` → padding belongs to `SectionHeader` / `Body` / `Actions`.
-- A chart SVG with only a `viewBox` → give it a CSS height, or it scales to a square.
-- Setting a white background on fields inside a card → leave the field context; the card switches it.
+- A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
+- Wrapping every page section in a card → use PageContent sections.
+- `Card.Delta tone="success"` for every «+» → choose the tone by meaning.
+- Custom padding on a `panel` root → padding belongs to `Header` / `Body` / `Footer`.
+- A wrapper `<div>` around the label and the value of `mini` → put `Icon`, `Label`, `Value` straight into the root (or into a `split` cell); the template lays them out.
+- A chart SVG with only a `viewBox` → give it a CSS height.
 
 ## Related
-- [DataTable](../data-table/COMPONENT.md) — tables on their own fill.
-- [Badge](../badge/COMPONENT.md) — qualifiers in `Card.Lead`.
-- [ProgressBar](../progress-bar/COMPONENT.md) — fill level in `Card.Media`.
-- [SegmentedControl](../segmented-control/COMPONENT.md) — period switch in `SectionTrailing`.
-- [PageContent](../page-content/COMPONENT.md) — page sections around cards.
+- **Built from:** —
+- **See also:** [PageContent](../page-content/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/card/examples/{content.tsx → content-templates.tsx}

@@ -1,53 +1,47 @@
-/** Content cards: `cta` (title, text, actions), `list` (header + events with hairlines) and `cover` (media on top). Use for calls to action, activity lists and campaign tiles. */
-
+/** Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. */
 import { Button, Card, LinkButton, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const events = [
+const EVENTS = [
   { text: "Оплачен заказ № 4821", time: "12:04" },
   { text: "Новый отзыв на «Планшет Pro»", time: "11:47" },
   { text: "Синхронизация складов завершена", time: "10:30" },
 ];
 
-export default function CardContentExample() {
+export default function CardContentTemplatesExample() {
   return (
     <div className={styles.grid}>
       <Card.Root variant="cta">
         <Card.Title>Экспорт отчёта</Card.Title>
-        <Card.CtaBody>
+        <Card.Description>
           Сводка по сегментам и метрикам за выбранный период в CSV или XLSX.
-        </Card.CtaBody>
-        <Card.Actions>
+        </Card.Description>
+        <Card.Footer>
           <Button.Root size="s">Скачать CSV</Button.Root>
           <Button.Root variant="ghost" tone="neutral" size="s">
             Настроить
           </Button.Root>
-        </Card.Actions>
+        </Card.Footer>
       </Card.Root>
 
       <Card.Root variant="list">
-        <Card.ListHeader>
+        <Card.Header>
           <Card.Title>Последние события</Card.Title>
-          <LinkButton.Root href="#" size="s">
+          <LinkButton href="#" size="s">
             Все
-          </LinkButton.Root>
-        </Card.ListHeader>
+          </LinkButton>
+        </Card.Header>
         <Card.List>
-          {events.map((e) => (
+          {EVENTS.map((e) => (
             <Card.ListItem key={e.text}>
               <span className={styles.listRow}>
-                <Typography.Root as="span" variant="body-m" truncate>
+                <Typography as="span" variant="body-m" truncate>
                   {e.text}
-                </Typography.Root>
-                <Typography.Root
-                  as="span"
-                  variant="caption"
-                  tone="muted"
-                  className={styles.listMeta}
-                >
+                </Typography>
+                <Typography as="span" variant="caption" tone="muted" className={styles.listMeta}>
                   {e.time}
-                </Typography.Root>
+                </Typography>
               </span>
             </Card.ListItem>
           ))}
@@ -55,18 +49,18 @@ export default function CardContentExample() {
       </Card.Root>
 
       <Card.Root variant="cover">
-        <Card.Cover aria-hidden>
+        <Card.Media aria-hidden>
           <div className={styles.cover} />
-        </Card.Cover>
-        <Card.Stack>
+        </Card.Media>
+        <Card.Body>
           <Card.Title>Кампания «Осень»</Card.Title>
-          <Card.Label>Охват и клики за 7 дней</Card.Label>
-        </Card.Stack>
-        <Card.Actions>
+          <Card.Description>Охват и клики за 7 дней</Card.Description>
+        </Card.Body>
+        <Card.Footer>
           <Button.Root variant="outline" tone="neutral" size="s">
             Открыть отчёт
           </Button.Root>
-        </Card.Actions>
+        </Card.Footer>
       </Card.Root>
     </div>
   );

package/src/components/card/examples/examples.module.css

@@ -6,14 +6,6 @@
   min-width: 0;
 }
 
-.gridWide {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 3)), 1fr));
-  gap: var(--prime-space-4);
-  width: 100%;
-  min-width: 0;
-}
-
 .stack {
   display: flex;
   flex-direction: column;