@eifi1/ui-kit 0.31.0 → 0.32.0

package/src/components/toggle-group.tsx

@@ -5,7 +5,16 @@ import { horizontalStep } from "../lib/direction";
 import { FIELD_INVALID, FloatingField, Label } from "./ui";
 import { Tooltip } from "./tooltip";
 import { useCommitReason } from "./write-lock";
-import { hasContent, LabelStrip } from "./field-parts";
+import {
+  DISABLED_REASON_LINE_CLASS,
+  FIELD_CAPTION_CLASS,
+  hasContent,
+  LabelStrip,
+  useDisabledReasonLine,
+  useInlineHint,
+  type DisabledReasonDisplay,
+} from "./field-parts";
+import { FOCUS_RING_WIDTH } from "./focus-ring";
 
 export interface ToggleOption<T extends string> {
   value: T;
@@ -36,6 +45,11 @@ export interface ToggleGroupBaseProps<T extends string>
    * whole ("Bewegung", not "Beweg…"), at the price of a taller group on a narrow
    * screen (lenkbank L4: five signal types on a 390px control page). From the width
    * where they fit, both look the same.
+   *
+   * Since 0.32 a group in the field chrome (`label`, the default placement) with four or
+   * more options wraps at Large and Extra large under `"truncate"` too, inside its frame:
+   * the type is bigger there and the field would otherwise run past a phone's edge
+   * (docs/text-size-harmonization.md §4). The keyboard is the same either way.
    */
   overflow?: "truncate" | "wrap";
   /**
@@ -136,6 +150,12 @@ export interface ToggleGroupBaseProps<T extends string>
    * Wins over `disabled`, as on Button: passing both keeps the group reachable.
    */
   disabledReason?: ReactNode;
+  /**
+   * Where `disabledReason` shows (0.32, §4 "No fact only in a tooltip"): by default, at
+   * Large and on a touch screen, as a line under the group (where its caption goes), and
+   * in the tooltip over the segments otherwise. See {@link DisabledReasonDisplay}.
+   */
+  disabledReasonDisplay?: DisabledReasonDisplay;
   /**
    * This group COMMITS — choosing an option saves it. Under a locked
    * {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
@@ -151,6 +171,11 @@ export interface ToggleGroupBaseProps<T extends string>
  * The field chrome's vertical geometry — keksdose K1, the kit reintroducing feedback
  * #117 that keksdose's hand-built chrome had fixed.
  *
+ * In px at Normal, as measured; since 0.32 every term but the two borders is rem
+ * (§3.2), so the sum stays a labelled Select's at 125 and 150 % too — the Select's own
+ * `pt-4 pb-1` and 1.25rem line grow by the same factor (52 px at Large, 62 at Extra
+ * large). The md line was `leading-[18px]` and is `leading-[1.125rem]`.
+ *
  * The label is the field's static label: `top-1` and 11px in a `leading-tight` line, so
  * its line box runs from 4px to 17.75px. Until 0.22 the chrome was `pt-4` over a 20px
  * (`leading-5`) segment, so the ACTIVE segment's fill — painted from the top of the
@@ -168,7 +193,31 @@ export interface ToggleGroupBaseProps<T extends string>
  *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42
  */
 const CHROME_PAD: Record<"sm" | "md", string> = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
-const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[18px]", sm: "py-0 leading-4" };
+const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
+
+/**
+ * A field of four or more options at Large and Extra large (0.32,
+ * docs/text-size-harmonization.md §4 "nothing truncates", §3.3): the segments flow onto a
+ * second row inside the field's frame instead of overflowing it. At 125 % a 390 px phone
+ * is 312 px of Normal type, and "Month / Quarter / Half-year / Year" in one row of the
+ * field ran 7 px past it: a one-row flex group is as wide as all its labels end to end
+ * when a grid or a stretched column asks how small it can get, however its segments
+ * truncate. Wrapped, it is as wide as its longest label.
+ *
+ * Wrap, not a stacked select-like list: a wrapped radio group is the same radio group —
+ * one Tab stop, and the arrow keys walk the options in reading order whichever row
+ * they are on (←/↑ back, →/↓ on, Home/End) — so nothing about the keyboard changes with
+ * the text size. A list in its place would be a second widget with its own keys.
+ *
+ * Only where it has to: `flex-wrap` breaks a row only when the segments do not fit, so
+ * a wide field at Large stays one row, and a segment shares out what its row leaves
+ * (`flex-1`); a label wider than the whole row still truncates as the last resort.
+ * Three or fewer options keep one row: each holds a third of the field. A `large:`
+ * class, so it costs no render and is right on the first paint. `overflow="wrap"` wraps
+ * at every size already; outside the field the group keeps its `overflow`.
+ */
+const WRAP_AT_LARGE = "large:flex-wrap";
+const WRAP_AT_LARGE_FROM = 4;
 
 /**
  * The strip placement's segments: a 26px group (1 + 2 + 20 + 2 + 1) under the 16px
@@ -185,7 +234,7 @@ const STRIP_SEGMENT: Record<"sm" | "md", string> = { md: "py-0", sm: "py-0.5" };
  * region, because a description is read when the group is entered and not again when
  * an arrow key changes the choice underneath it.
  *
- * In muted 11px text under the field (or the bare group), above an `error`.
+ * In muted caption-size text under the field (or the bare group), above an `error`.
  */
 type ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);
 
@@ -272,6 +321,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
     hint,
     error,
     disabledReason: ownDisabledReason,
+    disabledReasonDisplay,
     commit,
     "aria-label": ariaLabelAttr,
     ...restWithMode
@@ -279,9 +329,16 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   const labelId = useId();
   const errorId = useId();
   const reasonId = useId();
+  const hintCaptionId = useId();
   // The lock's reason under a locked provider (with `commit`), else the group's own.
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
+  // §4: at Large and on touch the reason is a line under the group, not a bubble.
+  const reasonLine = useDisabledReasonLine(disabledReasonDisplay) && locked;
+  // §4: likewise a FieldHint "?" on the label line becomes a caption under the group.
+  const inlineHint = useInlineHint(hint);
+  const hintAsCaption = inlineHint !== hint ? inlineHint : undefined;
+  const labelHint = hintAsCaption === undefined ? hint : undefined;
   // Locked looks disabled — the dimmed group, the not-allowed cursor, no hover offer —
   // but stays focusable; `disabled` alone also takes the segments out of the tab order.
   const dimmed = disabled || locked;
@@ -289,6 +346,8 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   // `field` is the chrome; a label placed above or in a strip keeps the bare group's
   // own box.
   const field = labelled && labelPlacement === "field";
+  // At Large and Extra large a FIELD of four or more options wraps (see WRAP_AT_LARGE).
+  const wrapAtLarge = field && overflow === "truncate" && options.length >= WRAP_AT_LARGE_FROM;
   const above = labelled && labelPlacement === "above";
   const strip = labelled && labelPlacement === "strip";
   const hasError = labelled && hasContent(error);
@@ -377,8 +436,11 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           // overlaying the selected segment's boundary. Inset keeps the ring
           // inside the segment it belongs to; focus-visible keeps it for the
           // keyboard, which is the only input that needs it.
+          //
+          // The ring is the kit's focus frame (0.32, §5): `--focus-ring-width` wide.
           overflow === "wrap" ? "whitespace-nowrap" : "min-w-0 truncate",
-          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          "flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]",
+          FOCUS_RING_WIDTH,
           size === "sm" && "px-2 py-1 text-xs",
           // In the field chrome: no vertical padding, and the line that makes the
           // field 42px under a strip that clears the label — see CHROME_PAD. `sm`
@@ -423,7 +485,9 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest["aria-labelledby"]}
       aria-invalid={hasError || rest["aria-invalid"] || undefined}
       aria-describedby={
-        [rest["aria-describedby"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(" ") || undefined
+        [rest["aria-describedby"], hintAsCaption !== undefined && hintCaptionId, hasCaption && captionId, hasError && errorId]
+          .filter(Boolean)
+          .join(" ") || undefined
       }
       // `aria-disabled` on the group as well as on (or `disabled` on) each button: a
       // radio group is what the user is being refused, and a screen reader announcing
@@ -444,6 +508,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         // phone does see is the focus ring — see the segment's own note below.)
         "inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm",
         overflow === "wrap" && "flex-wrap",
+        wrapAtLarge && WRAP_AT_LARGE,
         // The whole group fades, the way every other disabled control in this
         // package does; `cursor-not-allowed` is on the buttons, which is what a
         // pointer is actually over.
@@ -456,7 +521,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         !labelled && className,
       )}
     >
-      {locked ? (
+      {locked && !reasonLine ? (
         // The reason's bubble wraps the SEGMENTS, inside the group, not the group: a
         // wrapper outside it would become the flex or grid item in the caller's row in
         // the group's place, and a `w-full` / `md:w-auto` on the group would size the
@@ -487,16 +552,34 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
       <p
         id={captionId}
         aria-live={captionIsLive ? "polite" : undefined}
-        className={cn("text-[11px] leading-snug text-[var(--text-muted)]", hasCaption && "mt-1")}
+        className={cn("text-caption leading-snug text-[var(--text-muted)]", hasCaption && "mt-1")}
       >
         {hasCaption ? captionNode : null}
       </p>
     ) : null;
   const errorEl = hasError ? (
-    <p id={errorId} className="mt-1 text-[11px] leading-tight text-[var(--danger)]">
+    <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
       {error}
     </p>
   ) : null;
+  // §4: the FieldHint's words and the lock's reason, under the group, before the caption
+  // (standing advice first) and the error (the news). The reason line IS what each
+  // segment's `aria-describedby` names.
+  const belowEl =
+    hintAsCaption !== undefined || reasonLine ? (
+      <>
+        {hintAsCaption !== undefined && (
+          <p id={hintCaptionId} className={FIELD_CAPTION_CLASS}>
+            {hintAsCaption}
+          </p>
+        )}
+        {reasonLine && (
+          <p id={reasonId} className={DISABLED_REASON_LINE_CLASS}>
+            {disabledReason}
+          </p>
+        )}
+      </>
+    ) : null;
   if (above) {
     // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).
     return (
@@ -512,10 +595,11 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           >
             {label}
           </Label>
-          {hint}
+          {labelHint}
         </div>
         <div className="min-w-0">
           {group}
+          {belowEl}
           {captionEl}
           {errorEl}
         </div>
@@ -524,19 +608,21 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   }
   if (strip) {
     return (
-      <LabelStrip labelId={labelId} label={label} hint={hint} disabled={dimmed} pad="field" className={className}>
+      <LabelStrip labelId={labelId} label={label} hint={labelHint} disabled={dimmed} pad="field" className={className}>
         {group}
+        {belowEl}
         {captionEl}
         {errorEl}
       </LabelStrip>
     );
   }
   if (!field) {
-    if (!captionEl) return group;
+    if (!captionEl && !belowEl) return group;
     // The group keeps its `className`, as without a caption; the wrapper only stacks.
     return (
       <div className="min-w-0">
         {group}
+        {belowEl}
         {captionEl}
       </div>
     );
@@ -549,7 +635,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
         className="flex flex-1 flex-col"
         label={<span id={labelId}>{label}</span>}
         staticLabel
-        hint={hint}
+        hint={labelHint}
       >
         <div
           className={cn(
@@ -563,6 +649,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
           {group}
         </div>
       </FloatingField>
+      {belowEl}
       {captionEl}
       {errorEl}
     </div>

package/src/components/toggle-legend.tsx

@@ -6,6 +6,7 @@
 // useful under a chart the consumer drew by hand as under `SeriesChart`.
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useKitLabels } from "../i18n/kit-labels";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
 
@@ -60,6 +61,32 @@ export function toggleHidden(hidden: ReadonlySet<string>, key: string): Readonly
   return next;
 }
 
+/**
+ * Where a legend that stands BESIDE a chart goes from Large up: UNDER it
+ * (docs/text-size-harmonization.md §4). Beside a chart, a legend column takes a third of
+ * a row whose plot needs all of it once the text is 25–50 % larger; under it, the row
+ * is the plot's and the legend wraps across the width.
+ *
+ * Pure CSS (`large:`), so a legend moves with the text size alone, whatever drew the
+ * row around it:
+ * - in a GRID it spans a row of its own (`col-span-full`) after the charts
+ *   (`order-last`) — Kurvenschmiede's facing pairs;
+ * - in a FLEX row it takes a line of its own (`basis-full`), and its row is allowed to
+ *   wrap for it (`[*:has(>&)]:flex-wrap` sets `flex-wrap` on the PARENT — the one rule
+ *   here that reaches outside the legend, because a row that may not wrap would squeeze
+ *   the chart to nothing beside a full-width legend) — Kurvenschmiede's chart rows.
+ *
+ * A caller that places its legend itself and wants it kept beside the chart at every
+ * size overrides with `large:col-auto large:basis-auto`.
+ */
+const UNDER_THE_CHART_AT_LARGE =
+  "large:order-last large:col-span-full large:basis-full large:[*:has(>&)]:flex-wrap";
+
+/** A vertical legend's entries from Large up: across, wrapping — it is under the chart
+ *  now (see {@link UNDER_THE_CHART_AT_LARGE}), where a column of entries would be a
+ *  screenful of one-word lines. */
+const VERTICAL_AT_LARGE = "large:flex-row large:flex-wrap large:items-center large:justify-start";
+
 export interface LegendEntry {
   key: string;
   label: ReactNode;
@@ -109,7 +136,10 @@ export interface ToggleLegendProps {
   onToggle: (key: string) => void;
   /** `vertical` is for a legend standing BESIDE the charts rather than under them —
    *  what a row of charts sharing one legend wants, since under two charts there is
-   *  no "under", and putting it under one says it belongs to that one. */
+   *  no "under", and putting it under one says it belongs to that one.
+   *
+   *  From Large up a vertical legend moves under the charts and lays its entries
+   *  across (0.32, docs/text-size-harmonization.md §4) — see {@link LegendColumn}. */
   orientation?: "horizontal" | "vertical";
   /**
    * Draw a legend of ONE entry rather than nothing.
@@ -157,7 +187,7 @@ export function ToggleLegend({
       className={cn(
         "flex gap-x-3 gap-y-1",
         orientation === "vertical"
-          ? "flex-col items-start justify-center"
+          ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)
           : "mt-2 flex-wrap items-center",
         className,
       )}
@@ -173,8 +203,8 @@ export function ToggleLegend({
             aria-pressed={!off}
             onClick={() => onToggle(entry.key)}
             className={cn(
-              "flex items-center gap-1.5 rounded text-start text-[11px] text-[var(--text-secondary)] transition-opacity hover:opacity-80",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+              "flex items-center gap-1.5 rounded text-start text-caption text-[var(--text-secondary)] transition-opacity hover:opacity-80",
+              FOCUS_RING,
               off && "opacity-35",
               entry.align === "end" && "ms-auto",
             )}
@@ -246,7 +276,7 @@ export function StaticLegend({
       className={cn(
         "m-0 flex list-none gap-x-3 gap-y-1 p-0",
         orientation === "vertical"
-          ? "flex-col items-start justify-center"
+          ? cn("flex-col items-start justify-center", VERTICAL_AT_LARGE, UNDER_THE_CHART_AT_LARGE)
           : "mt-2 flex-wrap items-center",
         className,
       )}
@@ -255,7 +285,7 @@ export function StaticLegend({
         <Item
           key={entry.key}
           className={cn(
-            "flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]",
+            "flex items-center gap-1.5 text-caption text-[var(--text-secondary)]",
             entry.align === "end" && "ms-auto",
           )}
         >
@@ -273,10 +303,25 @@ export function StaticLegend({
  * that stretches it — and stacks whatever it is given, which is what a panel showing
  * two legends at once needs. The width is the caller's: how wide a legend column is
  * is a fact about that screen's layout.
+ *
+ * **From Large up it goes UNDER the charts** (0.32, docs/text-size-harmonization.md
+ * §4): a row of its own in a grid, a line of its own in a flex row (see
+ * `UNDER_THE_CHART_AT_LARGE`), with what it holds laid across and wrapping. A
+ * caller's own `max-sm:flex-row …` for the phone keeps working; the caller's width
+ * (`sm:w-40`) gives way to the full row, because a size wins over a breakpoint.
  */
 export function LegendColumn({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <div className={cn("flex h-full flex-col justify-center gap-3", className)}>{children}</div>
+    <div
+      className={cn(
+        "flex h-full flex-col justify-center gap-3",
+        UNDER_THE_CHART_AT_LARGE,
+        "large:h-auto large:flex-row large:flex-wrap large:items-start large:justify-start large:gap-x-6",
+        className,
+      )}
+    >
+      {children}
+    </div>
   );
 }
 
@@ -290,7 +335,7 @@ export function LegendColumn({ children, className }: { children: ReactNode; cla
 export function LegendGroup({ title, children }: { title: ReactNode; children: ReactNode }) {
   return (
     <div className="flex min-w-0 flex-col items-start gap-1">
-      <span className="text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+      <span className="text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]">
         {title}
       </span>
       <div className="flex flex-col items-start gap-y-0.5">{children}</div>

package/src/components/translation-review.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
-import { useMediaQuery } from "../hooks/use-media-query";
+import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
@@ -293,9 +293,6 @@ export interface TranslationReviewPanelProps {
   labels?: Partial<TranslationReviewLabels>;
 }
 
-/** The wide screen's query — the same one DataTable switches its layout on, so "a phone"
- *  means the same here as in the table. */
-const MD_UP = "(min-width: 768px)";
 
 /**
  * How many rows the groups may render at once on a wide screen before they start folded
@@ -461,7 +458,9 @@ export function TranslationReviewPanel({
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
   const lock = useWriteLock();
-  const phone = !useMediaQuery(MD_UP, true);
+  // The wide screen's breakpoint — the one DataTable switches its layout on, so "a phone"
+  // means the same here as in the table, at every text size.
+  const phone = !useBreakpoint("md", true);
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;
@@ -744,6 +743,12 @@ export function TranslationReviewPanel({
             tone="muted"
             commit
             label={labels.approve}
+            // The icon alone at every text size (docs/text-size-harmonization.md §10.8):
+            // the row's one action, in a hugging column of a dense table beside the
+            // string under review, which "Approve" as text at Large would squeeze. A
+            // single action stays inline in `RowActions` too, so the menu would not help;
+            // the swipe and the editor say it in words.
+            labelVisible={false}
             pending={isQueued(`row:${r.id}`)}
             disabled={busy}
             onClick={(event) => {

package/src/components/tree-view.tsx

@@ -4,6 +4,7 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { Spinner } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
 
 /**
  * A hierarchy you walk with the keyboard: kastlan's chart of accounts (Assets › Current
@@ -182,7 +183,7 @@ export function TreeRow({
             e.stopPropagation();
             onToggle();
           }}
-          className="flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          className={cn("flex size-4 shrink-0 items-center justify-center rounded text-[var(--text-muted)] outline-none hover:text-[var(--text-primary)]", FOCUS_RING)}
         >
           {chevron}
         </button>
@@ -543,7 +544,7 @@ export function TreeView<T = unknown>({
           }}
           // The ring goes on this row's own box, not the <li>: the <li> contains the
           // whole open branch below it, and ringing that would outline a subtree.
-          className="outline-none [&:focus-visible>[data-tree-row]]:ring-2 [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
+          className="outline-none [&:focus-visible>[data-tree-row]]:ring-[length:var(--focus-ring-width)] [&:focus-visible>[data-tree-row]]:ring-[var(--brand)]"
         >
           <TreeRow
             id={rowId}

package/src/components/treemap.tsx

@@ -15,6 +15,9 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
 import { PALETTE_HEX, textOn } from "../theme/chart-palette";
 import { parseHex } from "../theme/color";
 import { dirOf, type Direction } from "../lib/direction";
+import { cn } from "../lib/cn";
+import { useTextSize } from "../theme/text-size";
+import { chartHeightProps, type ChartHeight } from "./chart-height";
 
 /**
  * One tile.
@@ -63,8 +66,10 @@ export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
    * host that has a currency or a locale passes this — the kit knows neither.
    */
   valueFormatter?: (value: number, share: number | undefined) => ReactNode;
-  /** Chart height in px. Default 320. */
-  height?: number;
+  /** Chart height: a CSS length (`"20rem"`, `"min(20rem, 50dvh)"`), a Tailwind class,
+   *  or px. Default `"20rem"` — 320 px at Normal, growing with the text size like the
+   *  labels in the tiles (0.32, docs/text-size-harmonization.md §10.10). */
+  height?: ChartHeight;
   /** A tile was activated — by click, or by Enter/Space on a focused tile. Setting
    *  this makes every tile a focusable `role="button"` named by its node name. */
   onNodeClick?: (id: string, name: string) => void;
@@ -165,6 +170,8 @@ function measurableFill(fill: string, tokens: readonly string[]): string | null
 
 // ── Tile ──────────────────────────────────────────────────────────────────
 
+/** The name's size in px at Normal; a tile draws it × the text size's scale (§10.10), and
+ *  every distance below that is measured in lines grows with it. */
 const LABEL_FONT_SIZE = 12;
 /** The optional second line, a step down from the name so the tile reads name-first. */
 const NOTE_FONT_SIZE = 11;
@@ -233,6 +240,7 @@ export function TreemapCell({
 }: TreemapCellProps) {
   // Before the early return: a hook has to run on every render of the cell.
   const tokenHex = useChartTokenHex();
+  const { scale } = useTextSize();
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
   // Whole pixels: a rect on a half pixel renders its edge across two half-lit
@@ -251,14 +259,16 @@ export function TreemapCell({
   const halo = measured ? tileFill : "none";
   // Below ~44x20 there is no room for a readable word, so no label at all rather than
   // a one-letter stub bleeding over the tile edge.
-  const label = pw >= 44 && ph >= 20 ? fitLabel(name ?? "", pw, LABEL_FONT_SIZE) : null;
+  const labelSize = LABEL_FONT_SIZE * scale;
+  const noteSize = NOTE_FONT_SIZE * scale;
+  const label = pw >= 44 * scale && ph >= 20 * scale ? fitLabel(name ?? "", pw, labelSize) : null;
   // Only under a label that is itself drawn — a stray "+12%" on an unnamed rectangle
   // names nothing — and only where a second baseline fits: the note's baseline sits
   // 29px down and an 11px glyph hangs ~2px below it, so 36 leaves the same ~5px under
   // the note that the label keeps under itself at the 20px floor.
   const rawNote = id != null && nodeNote ? nodeNote(id) : undefined;
   const note =
-    label != null && rawNote != null && ph >= 36 ? fitLabel(rawNote, pw, NOTE_FONT_SIZE) : null;
+    label != null && rawNote != null && ph >= 36 * scale ? fitLabel(rawNote, pw, noteSize) : null;
   // The label's START edge, 6px in from the tile's. The tiles themselves are laid out
   // physically (the plot is not mirrored, see `ChartContainer`) and the chart's SVG is
   // pinned `ltr`, so the direction is set on each <text> explicitly: `start` is then
@@ -306,14 +316,14 @@ export function TreemapCell({
           // <text> exactly as it reaches a table cell.
           data-private={redactNames ? "" : undefined}
           x={textX}
-          y={py + 15}
+          y={py + 15 * scale}
           direction={dir}
           fill={ink}
           stroke={halo}
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"
-          fontSize={LABEL_FONT_SIZE}
+          fontSize={labelSize}
           fontWeight={600}
           style={{ pointerEvents: "none" }}
         >
@@ -323,7 +333,7 @@ export function TreemapCell({
       {note != null && (
         <text
           x={textX}
-          y={py + 29}
+          y={py + 29 * scale}
           direction={dir}
           fill={ink}
           fillOpacity={0.85}
@@ -331,7 +341,7 @@ export function TreemapCell({
           strokeWidth={2.5}
           strokeLinejoin="round"
           paintOrder="stroke"
-          fontSize={NOTE_FONT_SIZE}
+          fontSize={noteSize}
           fontWeight={500}
           style={{ pointerEvents: "none" }}
         >
@@ -386,7 +396,7 @@ const DEFAULT_NUMBER = new Intl.NumberFormat();
 export function Treemap({
   data,
   valueFormatter,
-  height = 320,
+  height = "20rem",
   onNodeClick,
   redactNames = false,
   nodeNote,
@@ -421,6 +431,7 @@ export function Treemap({
     .filter((n) => Number.isFinite(n.size) && n.size > 0)
     .slice(0, maxTiles ?? undefined);
   if (nodes.length === 0) return null;
+  const box = chartHeightProps(height);
 
   // The share is of what is DRAWN, so it always reads as "of this picture".
   const total = nodes.reduce((acc, n) => acc + n.size, 0);
@@ -430,7 +441,13 @@ export function Treemap({
   };
   const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
   return (
-    <ChartContainer {...rest} ref={rootRef} config={TREEMAP_CONFIG} style={{ ...style, height }}>
+    <ChartContainer
+      {...rest}
+      ref={rootRef}
+      config={TREEMAP_CONFIG}
+      className={cn(box.className, rest.className)}
+      style={{ ...style, ...box.style }}
+    >
       {/* No chart-level `stroke`: recharts spreads it onto the <svg> root, from where
           it inherits into every label (see TreemapCell). Each cell strokes its own rect. */}
       <RechartsTreemap