zz-meridian 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.23.0] · 2026-10-20
+
+### New
+
+- **`Prose` names each body cell's column, and stacks a narrow table into labelled cards** ([#75](https://github.com/zhixuan312/zz-meridian/issues/75)). Every body `td` carries its column's heading as `data-label`, written while the markdown is rendered, so it is in the server's HTML and a page can style a narrow table from `td[data-label]` on the first paint, with no second markdown parser. `stack` does it for you: a table under 480px of its own width reads as one card per row, the header row hidden, the first cell the title and each later cell under its column's heading. Wider, it is the same table; without `stack`, nothing changes.
+
+## [0.22.0] · 2026-10-20
+
+### New
+
+- **A tile whose figure is a share reads its change in points** ([#74](https://github.com/zhixuan312/zz-meridian/issues/74)). `MetricTile` takes `deltaFormat` and hands it to `Delta`, whose `format` now takes a name as well as a function: `percent` (the default, a share of the earlier value) or `points`, so a share that went from 33.0% to 46.4% reads "▲13.4 pts" (`delta={0.134}`) with the same arrow, colour and screen-reader word, where it could only read "▲40.6%". `DeltaFormat` and `DELTA_FORMATS` are exported from `@/components/ui/delta`.
+
+### Fixed
+
+- **A Delta with no change reads its format** (#74): "0.0 pts" under `points`, or what a function makes of zero, where it printed a literal "0%" whatever the format. With no format given it still reads "0%".
+
 ## [0.21.0] · 2026-10-20
 
 ### New

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/src/components/patterns/metric-tile/README.md

@@ -20,7 +20,7 @@ Card, Delta, Status dot, Tooltip, Sparkline. Tiles sit in a `Row split="tiles"`,
 
 ## Data
 
-- `value` is the period's figure; `points` one value a point of the same period, oldest first (days on a page of days), or `null` at a point nothing was measured for, which the Sparkline draws as a gap rather than a fall to zero; `delta` the change as a fraction (0.057 is +5.7%), or `null` when there is no earlier period. `compare` names what the change is measured against (default "vs previous period"; "vs the half hour before" when the window is not the period). `note` is a short line in that place when no comparison fits, such as who is past due, carrying `data-note`; in a narrow tile it takes a second line before it is cut ("296 active · 14 trials · 10 past due" in a third of a page with the assistant's panel open), and a note that is text keeps the whole of itself in its title when the tile cuts it. On a compact tile it stays on the tile's one line.
+- `value` is the period's figure; `points` one value a point of the same period, oldest first (days on a page of days), or `null` at a point nothing was measured for, which the Sparkline draws as a gap rather than a fall to zero; `delta` the change as a fraction (0.057 is +5.7%), or `null` when there is no earlier period; `deltaFormat="points"` reads it in percentage points for a figure that is itself a share (a share from 33.0% to 46.4% is `delta={0.134}`, "13.4 pts"). `compare` names what the change is measured against (default "vs previous period"; "vs the half hour before" when the window is not the period). `note` is a short line in that place when no comparison fits, such as who is past due, carrying `data-note`; in a narrow tile it takes a second line before it is cut ("296 active · 14 trials · 10 past due" in a third of a page with the assistant's panel open), and a note that is text keeps the whole of itself in its title when the tile cuts it. On a compact tile it stays on the tile's one line.
 - `intent` says which way is good: `up` (requests), `down` (errors, latency), `neutral` (compute cost).
 - `value` may be a word for a categorical state ("Likely new", "On track"); it is set at `text-2xl` instead of the figure size and wraps to a second line rather than losing its end ("03 Oct 2026" in a narrow tile), and `format` is not used.
 - `format` turns the number into its text: a name (`count`, `compact`, `cost`, `cost-compact`, `duration`, `percent`), which a server page can pass, or a function from a client component; the default split recognises "$298.43" (any currency symbol from `app.currency`), "2.9M", "0.90%" and "294ms".
@@ -139,4 +139,4 @@ import { MetricTile } from '@/components/patterns/metric-tile';
 <MetricTile size="compact" label="Northwind Labs" value={41_200} format="cost-compact" delta={0.12} compare="vs last week" note="Scale" points={last14Days} />
 ```
 
-Props: `label`, `value`, `format`, `split`, `delta`, `compare`, `intent`, `note`, `points`, `baseline`, `finding`, `hint`, `icon`, `emphasis`, `size`, `className`. A compact tile holds a container, so it takes its cell's width and never sizes itself from what it holds: give it a grid cell or a width.
+Props: `label`, `value`, `format`, `split`, `delta`, `deltaFormat`, `compare`, `intent`, `note`, `points`, `baseline`, `finding`, `hint`, `icon`, `emphasis`, `size`, `className`. A compact tile holds a container, so it takes its cell's width and never sizes itself from what it holds: give it a grid cell or a width.

package/payload/src/components/patterns/metric-tile/index.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/cn';
 import { formatDate } from '@/lib/format-date';
 import { fitFigure, formatBy, splitFigure, type NumberFormat } from '@/lib/format';
 import { Card } from '@/components/ui/card';
-import { Delta } from '@/components/ui/delta';
+import { Delta, type DeltaFormat } from '@/components/ui/delta';
 import { Tooltip } from '@/components/ui/tooltip';
 import { Sparkline } from '@/components/charts/sparkline';
 import { useMeridianIndex, usePointMeridian } from '@/components/charts/meridian';
@@ -47,6 +47,7 @@ export function MetricTile({
   hint,
   value,
   delta,
+  deltaFormat,
   note,
   compare = 'vs previous period',
   intent = 'up',
@@ -67,6 +68,8 @@ export function MetricTile({
   value: number | string;
   /** Change against the previous period, as a fraction. */
   delta?: number | null;
+  /** How the change reads: `percent` (of the earlier value, the default) or `points`, for a figure that is itself a share. */
+  deltaFormat?: DeltaFormat | ((n: number) => string);
   /**
    * A short line where the change would sit, for a figure no period comparison fits: who is past due, what is next.
    * On a compact tile it follows the figure on the tile's one line: "$41.2K · next plan".
@@ -126,7 +129,7 @@ export function MetricTile({
               // The figure alone is drawn. Down a wall the words it is against would stand once a tile, so the card that
               // holds the wall says them; here they follow the figure for a screen reader, which meets a tile on its own.
               <p className={cn('flex h-5 items-center justify-self-start', COMPACT_CHANGE)}>
-                <Delta value={delta} intent={intent} />
+                <Delta value={delta} intent={intent} format={deltaFormat} />
                 <span className="sr-only">{' '}{delta === null ? 'No earlier period to compare' : compare}</span>
               </p>
             ) : null}
@@ -185,7 +188,7 @@ export function MetricTile({
               <span className="truncate text-ink-3" title="No earlier period to compare">No earlier period to compare</span>
             ) : delta !== undefined ? (
               <>
-                <Delta value={delta} intent={intent} />
+                <Delta value={delta} intent={intent} format={deltaFormat} />
                 <span className="leading-5 whitespace-nowrap text-ink-3">{compare}</span>
               </>
             ) : note ? (

package/payload/src/components/patterns/prose/README.md

@@ -10,7 +10,7 @@ Status: beta
 2. **Headings**: the writer's `#` is an h2 (`text-xl`), `##` an h3 with a hairline above it, `###` an h4: the page keeps the only h1.
 3. **Lists**: discs and numbers in `ink-3`; task boxes drawn as checkboxes named "Done" or "Not done".
 4. **Code**: inline on `surface-sunk` with a `line` border; a fenced block on `surface-sunk`, `radius-lg`, wrapping instead of scrolling.
-5. **Tables**: inside a `line`-bordered frame, a `surface-sunk` header row, `text-sm` cells.
+5. **Tables**: inside a `line`-bordered frame, a `surface-sunk` header row, `text-sm` cells. Every body cell carries its column's heading as `data-label`, in the server's HTML. With `stack`, a table under 480px of its own width reads as one card per row: the header row hidden, the first cell the title in `ink`, each later cell under its heading in `text-xs` `ink-3`.
 6. **Quote**: a 2px `accent` rule on the left, `ink` text.
 7. **Links**: `.link`, in `accent-ink`, turning `ink` on hover, never underlined; a link out of the product sends no referrer.
 
@@ -34,6 +34,7 @@ A markdown string. Line endings are normalised and the ends trimmed; nothing els
 | An image from another origin | Its alt text in italics (or "Image not shown"), never fetched |
 | A long token in code or a link: a URL, a path, a hash | Breaks anywhere rather than widen its paragraph or table; plain words wrap between words |
 | A table with more columns than the card holds | Scrolls inside its own frame; the page never scrolls sideways |
+| `stack`, and a table under 480px of its own width | One card per row, each value under its column's heading; no header row |
 | Empty | Nothing: the caller shows the empty state ("No notes yet") |
 
 ## Surfaces
@@ -71,4 +72,7 @@ import { Prose } from '@/components/patterns/prose';
 
 <Card className="p-(--card-pad)"><Prose>{incident.review}</Prose></Card>
 <Prose size="sm">{comment.body}</Prose>
+<Prose stack>{decision.record}</Prose>   // tables become labelled cards in a narrow column
 ```
+
+`stack` is for a document whose tables carry sentences (a decision record, a comparison) read in a narrow column. A table of short figures reads better scrolling in its frame, which is the default. Without `stack`, a page can still style its own narrow layout from `td[data-label]`.

package/payload/src/components/patterns/prose/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, type ReactNode } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { cn } from '@/lib/cn';
@@ -7,6 +7,25 @@ import { safeMarkdownUrl } from '@/lib/safe-markdown';
 /** A link that leaves the product sends no referrer: the reader's address is not the author's business. */
 const external = (href?: string) => Boolean(href && /^(https?:)?\/\//i.test(href));
 
+type Hast = { type: string; tagName?: string; value?: string; properties?: Record<string, unknown>; children?: Hast[] };
+const text = (n: Hast): string => n.value ?? (n.children ?? []).map(text).join('');
+const elements = (n: Hast, tag: string): Hast[] => (n.children ?? []).flatMap((c) => (c.tagName === tag ? [c] : c.tagName === 'table' ? [] : elements(c, tag)));
+
+/**
+ * Each body cell carries its column's heading as `data-label`, written while the markdown is turned into HTML, so a
+ * table can be read as labelled cards with CSS alone on the server's first paint. A cell past the last heading, or
+ * under an empty one, carries none.
+ */
+const labelCells = () => (tree: Hast) => {
+  for (const table of elements({ type: 'root', children: [tree] }, 'table')) {
+    const headings = elements(table, 'th').map((th) => text(th).trim());
+    for (const tr of elements(table, 'tbody').flatMap((b) => elements(b, 'tr')))
+      elements(tr, 'td').forEach((td, i) => {
+        if (headings[i]) td.properties = { ...td.properties, dataLabel: headings[i] };
+      });
+  }
+};
+
 /**
  * Markdown a person wrote (a document, a note, an agent's reply), set for reading on Meridian's roles: a 72-character
  * measure, quiet tables, code on the sunk surface. Each element is drawn here rather than by a typography plugin, so
@@ -39,7 +58,7 @@ const COMPONENTS: Components = {
   thead: ({ children }) => <thead className="border-b border-line bg-surface-sunk">{children}</thead>,
   th: ({ children }) => <th className="px-3 py-2 text-xs font-medium whitespace-nowrap text-ink-3">{children}</th>,
   tr: ({ children }) => <tr className="border-b border-line last:border-0">{children}</tr>,
-  td: ({ children }) => <td className="px-3 py-2.5 align-top text-ink-2">{children}</td>,
+  td: ({ children, 'data-label': label }: { children?: ReactNode; 'data-label'?: string }) => <td data-label={label} className="px-3 py-2.5 align-top text-ink-2">{children}</td>,
   blockquote: ({ children }) => <blockquote className="my-4 border-l-2 border-accent pl-4 text-ink">{children}</blockquote>,
   hr: () => <hr className="my-8 border-line" />,
   // An image the URL policy dropped reads as its alt text, never as a broken-image icon.
@@ -52,10 +71,36 @@ const COMPONENTS: Components = {
     rest.type === 'checkbox' ? <input {...rest} aria-label={rest.checked ? 'Done' : 'Not done'} className="mr-2 size-3.5 align-[-2px] accent-(--accent)" /> : <input {...rest} />),
 };
 
-export const Prose = memo(function Prose({ children, size = 'base', className }: { children: string; /** `sm` for a side panel, a comment or a quoted body. */ size?: 'base' | 'sm'; className?: string }) {
+/**
+ * `stack`: below 480px of its own width a table reads as one card per row: the header row hidden, the first cell the
+ * card's title, each later cell on its own line under its column's heading. The frame is the container, so a table in a
+ * narrow column stacks wherever the column is narrow, not only on a phone.
+ */
+const STACKED: Components = {
+  ...COMPONENTS,
+  table: ({ children }) => (
+    <div className="my-5 overflow-x-auto rounded-lg border border-line @container">
+      <table className={cn('w-full text-left text-sm leading-normal',
+        '@max-[480px]:block @max-[480px]:[&>thead]:hidden @max-[480px]:[&>tbody]:block @max-[480px]:[&_tr]:block @max-[480px]:[&_tr]:px-3 @max-[480px]:[&_tr]:py-2.5',
+        '@max-[480px]:[&_td]:block @max-[480px]:[&_td]:p-0 @max-[480px]:[&_td+td]:mt-2 @max-[480px]:[&_td:first-child]:font-medium @max-[480px]:[&_td:first-child]:text-ink',
+        '@max-[480px]:[&_td:not(:first-child)[data-label]]:before:block @max-[480px]:[&_td:not(:first-child)[data-label]]:before:text-xs @max-[480px]:[&_td:not(:first-child)[data-label]]:before:font-medium @max-[480px]:[&_td:not(:first-child)[data-label]]:before:text-ink-3 @max-[480px]:[&_td:not(:first-child)[data-label]]:before:content-[attr(data-label)]')}>
+        {children}
+      </table>
+    </div>
+  ),
+};
+
+export const Prose = memo(function Prose({ children, size = 'base', stack = false, className }: {
+  children: string;
+  /** `sm` for a side panel, a comment or a quoted body. */
+  size?: 'base' | 'sm';
+  /** A table narrower than 480px reads as labelled cards, one per row. */
+  stack?: boolean;
+  className?: string;
+}) {
   return (
     <div className={cn('min-w-0 text-ink-2 break-words', size === 'base' ? 'text-base leading-[1.7]' : 'text-sm leading-relaxed', className)}>
-      <ReactMarkdown remarkPlugins={[remarkGfm]} urlTransform={safeMarkdownUrl} components={COMPONENTS}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[labelCells]} urlTransform={safeMarkdownUrl} components={stack ? STACKED : COMPONENTS}>
         {children.replace(/\r\n/g, '\n').trim()}
       </ReactMarkdown>
     </div>

package/payload/src/components/patterns/prose/preview.tsx

@@ -40,6 +40,11 @@ const HOSTILE = `A reply pasted from somewhere else:
 
 ![A tracking pixel](https://elsewhere.example/pixel.png)`;
 
+const DECISIONS = `| Choice | Chosen | Rejected because |
+|---|---|---|
+| Queue | Postgres \`SKIP LOCKED\` | a broker is one more service to run for 40 jobs a minute |
+| Retries | Three, with backoff | a fourth retry has never succeeded in the last 90 days |`;
+
 export default function ProsePreview() {
   return (
     <>
@@ -58,6 +63,14 @@ export default function ProsePreview() {
           <div className="w-80 p-4"><Prose size="sm">{REVIEW.split('## What we are changing')[1]}</Prose></div>
         </Plane>
       </Specimen>
+      <Specimen label="Stacked" note="With stack, a table under 480px of its own width reads as one card per row: the first cell its title, each later cell under its column's heading. Wider, it is the same table." stack>
+        <Plane on="surface">
+          <div className="flex flex-wrap gap-6 p-4">
+            <div className="w-80"><Prose size="sm" stack>{DECISIONS}</Prose></div>
+            <div className="w-[560px] max-w-full"><Prose size="sm" stack>{DECISIONS}</Prose></div>
+          </div>
+        </Plane>
+      </Specimen>
     </>
   );
 }

package/payload/src/components/ui/delta/README.md

@@ -18,11 +18,11 @@ Status: beta
 | Down | Latency, error rate, cost per request | `critical-ink` | `positive-ink` |
 | Neutral | Spend, volume where neither direction is good | `ink-2` | `ink-2` |
 
-A change under 0.05% is flat: no arrow, "0%", `ink-2`. A missing comparison (`null`) is an em dash in `ink-3`: "we measured no change" and "there is nothing to compare with" are different facts.
+A change under 0.05% is flat: no arrow, `ink-2`, and the format reading no change ("0.0 pts" under `points`; "0%" with no format given). A missing comparison (`null`) is an em dash in `ink-3`: "we measured no change" and "there is nothing to compare with" are different facts.
 
 ## Sizes
 
-One size, `text-xs`, so it sits on the caption line under a figure. The format defaults to a percentage with one decimal; pass `format` for absolute changes ("43ms").
+One size, `text-xs`, so it sits on the caption line under a figure. The format defaults to `percent`, the change as a share of the earlier value with one decimal; `points` reads a change in a value that is itself a share in percentage points ("13.4 pts", where `percent` would print a share that went from 33.0% to 46.4% as up 40.6%); pass a function for absolute changes ("43ms").
 
 ## States
 
@@ -64,4 +64,4 @@ import { Delta } from '@/components/ui/delta';
 <Delta value={23.73} format={(n) => `$${n}`} intent="neutral" />
 ```
 
-Props: `value` (a fraction, or null), `format`, `intent` (`up` | `down` | `neutral`), `className`.
+Props: `value` (a fraction, or null), `format` (`percent` | `points` | a function), `intent` (`up` | `down` | `neutral`), `className`.

package/payload/src/components/ui/delta/index.tsx

@@ -1,24 +1,37 @@
 import { cn } from '@/lib/cn';
 
+/**
+ * How a change reads: `percent` is the change as a share of the earlier value (0.12 reads 12.0%); `points` is a change in
+ * a value that is itself a share, in percentage points (0.134 reads 13.4 pts), so a share that went from 33.0% to 46.4%
+ * never reads as having risen 40.6%. A name, so a server page can pass it to a client tile (#74).
+ */
+export type DeltaFormat = 'percent' | 'points';
+export const DELTA_FORMATS: Record<DeltaFormat, (n: number) => string> = {
+  percent: (n) => `${Math.abs(n * 100).toFixed(1)}%`,
+  points: (n) => `${Math.abs(n * 100).toFixed(1)} pts`,
+};
+
 /**
  * A change against the previous period. The arrow carries the direction; the colour carries the judgement, which is
  * not the same thing: for latency or errors, down is good. `intent` says which way is good.
  */
 export function Delta({
   value,
-  format = (n) => `${Math.abs(n * 100).toFixed(1)}%`,
+  format,
   intent = 'up',
   className,
 }: {
-  /** The change as a fraction (0.12 is +12%), or null when there is nothing to compare with. */
+  /** The change as a fraction (0.12 is +12%, or +12 points under `points`), or null when there is nothing to compare with. */
   value: number | null;
-  format?: (n: number) => string;
+  /** How the change reads, a name or a function of its magnitude; `percent` by default. No change reads it too ("0.0 pts"). */
+  format?: DeltaFormat | ((n: number) => string);
   /** Which direction is good. `neutral` paints both directions in ink. */
   intent?: 'up' | 'down' | 'neutral';
   className?: string;
 }) {
   if (value === null || !Number.isFinite(value)) return <span className={cn('text-xs text-ink-3', className)}>—</span>;
   const flat = Math.abs(value) < 0.0005;
+  const read = typeof format === 'function' ? format : DELTA_FORMATS[format ?? 'percent'];
   const up = value > 0;
   const good = intent === 'neutral' || flat ? null : (up && intent === 'up') || (!up && intent === 'down');
   return (
@@ -33,7 +46,8 @@ export function Delta({
         <path d="M5 1.5 8.5 7h-7z" fill="currentColor" />
       </svg>
       <span className="sr-only">{flat ? 'unchanged' : up ? 'up' : 'down'} </span>
-      {flat ? '0%' : format(value)}
+      {/* No change is read as the format reads a change, so a points tile says "0.0 pts", never a literal 0%. */}
+      {flat ? (format ? read(0) : '0%') : read(value)}
     </span>
   );
 }

package/payload/src/components/ui/delta/preview.tsx

@@ -19,6 +19,10 @@ export default function DeltaPreview() {
         <State label="Flat"><Delta value={0} /></State>
         <State label="Nothing to compare"><Delta value={null} /></State>
       </Specimen>
+      <Specimen label="In points" note='format="points": a change in a figure that is itself a share, a refusal share from 33.0% to 46.4%, reads 13.4 points, never 40.6% of itself. No change reads in the same format.'>
+        <State label="Rise"><Delta value={0.134} format="points" intent="down" /></State>
+        <State label="Flat"><Delta value={0} format="points" intent="down" /></State>
+      </Specimen>
       <Specimen label="In context">
         <span className="flex items-center gap-2 text-xs"><Delta value={0.057} /><span className="text-ink-3">vs previous period</span></span>
       </Specimen>

package/payload/tests/metric-tile-delta-format.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { MetricTile } from '@/components/patterns/metric-tile';
+import { Delta } from '@/components/ui/delta';
+
+describe('a tile whose figure is a share (#74)', () => {
+  it('reads its change in points under deltaFormat="points", with the same arrow, colour and word', () => {
+    const { container } = render(<MetricTile label="Share refused" value={0.464} format="percent" delta={0.134} deltaFormat="points" intent="down" />);
+    const change = container.querySelector('.t-num.inline-flex')!;
+    expect(change).toHaveTextContent(/^up 13\.4 pts$/);
+    expect(change).toHaveClass('text-critical-ink');
+  });
+  it('still reads a change as a percentage of the earlier value without it', () => {
+    const { container } = render(<MetricTile label="Requests" value={1200} delta={0.406} />);
+    expect(container.querySelector('.t-num.inline-flex')).toHaveTextContent(/^up 40\.6%$/);
+  });
+});
+
+describe('a Delta with no change', () => {
+  it('reads it in its format, never a literal 0%', () => {
+    expect(render(<Delta value={0} format="points" />).container).toHaveTextContent(/^unchanged 0\.0 pts$/);
+    expect(render(<Delta value={0} format={(n) => `${n.toFixed(2)} ms`} />).container).toHaveTextContent(/^unchanged 0\.00 ms$/);
+    expect(render(<Delta value={0} />).container).toHaveTextContent(/^unchanged 0%$/);
+  });
+});

package/payload/tests/prose-cell-labels.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { Prose } from '@/components/patterns/prose';
+
+const DOC = `| Choice | Chosen | Rejected because |
+|---|---|---|
+| Store | **Postgres** | the queue needs order |
+| Cache | none | |
+
+| A | \`B\` |
+|---|---|
+| 1 | 2 | 3 |`;
+
+describe('Prose names each body cell\'s column (#75)', () => {
+  test('writes the column heading on every body cell, per table, as plain text', () => {
+    const { container } = render(<Prose>{DOC}</Prose>);
+    const [first, second] = [...container.querySelectorAll('table')];
+    expect([...first.querySelectorAll('tbody td')].map((td) => td.getAttribute('data-label'))).toEqual(['Choice', 'Chosen', 'Rejected because', 'Choice', 'Chosen', 'Rejected because']);
+    expect([...second.querySelectorAll('tbody td')].map((td) => td.getAttribute('data-label'))).toEqual(['A', 'B']);
+    expect(container.querySelectorAll('th[data-label]')).toHaveLength(0);
+  });
+
+  test('stack makes each table\'s frame the container its rows stack in', () => {
+    const plain = render(<Prose>{DOC}</Prose>);
+    expect(plain.container.querySelector('.\\@container')).toBeNull();
+    plain.unmount();
+    const { container } = render(<Prose stack>{DOC}</Prose>);
+    expect(container.querySelectorAll('.\\@container > table')).toHaveLength(2);
+    expect(container.querySelector('tbody td')).toHaveAttribute('data-label', 'Choice');
+  });
+});