@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/series-chart.tsx

@@ -61,7 +61,7 @@ import {
 } from "./chart-zoom";
 import { STEP_DASH, strokeDash, type LegendEntry } from "./toggle-legend";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
-import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit, type TimeTickUnit } from "./series-chart-ticks";
+import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit, type TimeTickUnit } from "./series-chart-ticks";
 // The tick module stays internal; the one type of it a public prop names is re-exported.
 export type { TimeTickUnit } from "./series-chart-ticks";
 import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } from "./series-chart-budget";
@@ -74,7 +74,9 @@ import {
   useKitLocale,
   type ChartTooltipPlacement,
 } from "../i18n/kit-labels";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { useBreakpoint } from "../hooks/use-breakpoint";
+import { useTextSize } from "../theme/text-size";
+import { chartHeightProps, type ChartHeight } from "./chart-height";
 import { cn } from "../lib/cn";
 
 export interface SeriesChartSeries {
@@ -343,7 +345,7 @@ export interface SeriesChartX {
    * instead of being centred across it; the anchor is physical, like the plot (see
    * `ChartContainer`), so it is the same in RTL. The band under the axis grows to the
    * rotated height of the longest label on show, estimated from its length (at most
-   * 120 px, past which a label is clipped). Default 0.
+   * 120 px × the text size's scale, past which a label is clipped). Default 0.
    */
   tickAngle?: number;
   /**
@@ -365,10 +367,6 @@ export interface SeriesChartX {
 /** Where the tooltip goes — see {@link SeriesChartTooltip.placement}. */
 export type SeriesChartTooltipPlacement = ChartTooltipPlacement;
 
-/** Below Tailwind's `sm` — where `"auto"` takes the tooltip off the plot. Narrower than
- *  the kit's `PHONE_QUERY` (767 px) on purpose: a tablet's plot is wide enough that the
- *  box beside the finger leaves the data in view; a phone's is not. */
-const TOOLTIP_READOUT_QUERY = "(max-width: 639px)";
 
 /**
  * The placement a chart actually uses: its own, else the provider's, else `"cursor"`;
@@ -537,13 +535,22 @@ export interface SeriesChartProps {
   /** A value in the tooltip, where a number stands on its own and needs its unit.
    *  Default: `Intl.NumberFormat` in the kit's locale. */
   valueFormat?: (value: number) => string;
-  /** Tailwind height class, or a height in pixels. Default `h-72`. The empty state
-   *  takes it too, so a chart losing its last line does not relayout the page under it.
-   *  A number is for a height the caller holds as a number — keksdose's report charts
-   *  take `height = 260` as a prop and wrap the chart in a `SizedSeriesChart` div
-   *  (reports/charts/networth-line.tsx) only to turn it into a style, since a class
-   *  cannot be built from a number Tailwind never saw. */
-  height?: string | number;
+  /**
+   * The chart's height: a CSS length, a Tailwind height class, or px. Default `h-72`
+   * (18rem). The empty state takes it too, so a chart losing its last line does not
+   * relayout the page under it.
+   *
+   * - **A CSS length** (0.32) — `"20rem"`, `"min(20rem, 60dvh)"` — set inline. The form
+   *   for a height that should grow with the text size and still stop at the screen
+   *   (docs/text-size-harmonization.md §10.10): `min(30rem, 60dvh)` is 480 px at Normal
+   *   on a desktop and never more than 60 % of a phone at Extra large, where a scaled
+   *   480 px would be 720.
+   * - **A Tailwind class** — `"h-72"`, `"h-64 md:h-80"` — as before.
+   * - **A number** is px, set inline, and does NOT follow the text size: kept for a
+   *   height the caller holds as a number (keksdose's report charts take
+   *   `height = 260` as a prop). Prefer `"16.25rem"`, or a `min()` with a viewport cap.
+   */
+  height?: ChartHeight;
   /** Bridge holes left by sources sampled on different grids. See {@link mergeSeries}. */
   connectNulls?: boolean;
   /** Shown, centred at the chart's height, instead of an empty chart. Default: the
@@ -587,17 +594,23 @@ export interface SeriesChartProps {
   maxVisibleAxes?: SeriesChartAxisBudget;
   /**
    * `"auto"` (the default): a chart so narrow that its axes' bands would leave the plot
-   * under 160 px (`MIN_PLOT_WIDTH`) draws ONE axis a side — lenkbank's four-axis curve
-   * plot on a phone, whose plot was 10 px wide. Measured on the chart's own box
-   * (`ResizeObserver`), and applied on top of `maxVisibleAxes`.
+   * under 160 px (`MIN_PLOT_WIDTH`, × the text size's scale) draws ONE axis a side —
+   * lenkbank's four-axis curve plot on a phone, whose plot was 10 px wide. And a chart
+   * with an axis on EACH side that one a side still leaves too narrow (0.32: at 150 % a
+   * 390 px phone's plot kept about 80 px between its two bands) drops the right-hand,
+   * secondary axis too. Measured on the chart's own box (`ResizeObserver`), and applied
+   * on top of `maxVisibleAxes`. Either way the series on an axis it hid say the axis'
+   * unit in the tooltip and the readout ("Rack load (N)"), and in a legend built by
+   * {@link seriesLegendEntries} with `onAxisBudget`'s ids.
    *
-   * On by default because it cannot touch a layout that works: it needs a side with two
-   * or more axes AND a plot that would otherwise be under 160 px — a four-axis chart
-   * below about 440 px, a two-left-axis one below about 300. A chart with at most one
-   * axis a side (every facing pair, every single-axis chart) is never budgeted, at any
-   * width. `"off"` keeps every declared axis whatever the width: for a stack of
-   * multi-axis charts that must keep identical bands, or a caller budgeting itself.
-   * Without layout (jsdom, SSR) nothing is measured and nothing is hidden.
+   * On by default because it cannot touch a layout that works: it needs a plot that
+   * would otherwise be under 160 px — a four-axis chart below about 440 px at Normal, a
+   * two-left-axis one below about 300, a one-a-side one below about 290 — and the
+   * left-hand axis always stays. A chart with one axis (each chart of a facing pair,
+   * every single-axis chart) is never budgeted, at any width. `"off"` keeps every
+   * declared axis whatever the width: for a stack of multi-axis charts that must keep
+   * identical bands, or a caller budgeting itself. Without layout (jsdom, SSR) nothing is
+   * measured and nothing is hidden.
    */
   axisBudget?: "auto" | "off";
   /**
@@ -621,38 +634,48 @@ export interface SeriesChartProps {
   minBarLength?: number;
 }
 
-/** How much of an axis band the rotated title takes, in px. Reserved rather than
- *  shared with the ticks: a title merely offset inside the band prints on top of a
- *  five-figure tick, and which gives way depends on the data. */
+/** How much of an axis band the rotated title takes, in px at Normal — × the text size's
+ *  scale on the chart (§3.2), since the title is text. Reserved rather than shared with
+ *  the ticks: a title merely offset inside the band prints on top of a five-figure tick,
+ *  and which gives way depends on the data. */
 export const AXIS_TITLE_STRIP = 16;
 
 /** Where inside its strip the rotated title sits. */
 const AXIS_TITLE_OFFSET = 10;
 
-/** The tallest band tilted x ticks reserve, in px. A category name longer than this at
- *  its angle is clipped rather than squeezing the plot down to a strip. */
+/** The tallest band tilted x ticks reserve, in px at Normal (× the scale). A category
+ *  name longer than this at its angle is clipped rather than squeezing the plot down to
+ *  a strip. */
 const MAX_TILTED_TICK_BAND = 120;
 
-/** What one character of a tick label is taken to be, in px, for the tilted band — the
- *  shell's `text-xs`. An estimate: the SVG is not laid out yet when the band is decided. */
+/** What one character of a tick label is taken to be, in px at Normal, for the tilted
+ *  band — the shell's `text-xs`. An estimate: the SVG is not laid out yet when the band
+ *  is decided. Both grow with the text size, as `text-xs` does (§3.2). */
 const TICK_CHAR_WIDTH = 7;
 const TICK_LINE_HEIGHT = 12;
-/** recharts' gap between the axis line and a bottom tick's text. */
+/** recharts' gap between the axis line and a bottom tick's text — px, at every size:
+ *  recharts draws it, not the type. */
 const TICK_GAP = 8;
+/** recharts' own band under level x ticks. */
+const LEVEL_TICK_BAND = 30;
+/** The least room recharts' x ticks keep between labels, in px at Normal. */
+const MIN_TICK_GAP = 32;
 
 /**
- * The height the x axis reserves for ticks tilted by `angle` degrees: the rotated box of
- * the longest label, from its length. `undefined` for level ticks — recharts' own 30 px.
+ * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`
+ * degrees, the rotated box of the longest label, from its length; level, recharts' own
+ * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'
+ * default is exactly that.
  */
-function tiltedTickBand(labels: readonly string[], angle: number): number | undefined {
-  if (!angle) return undefined;
+function tiltedTickBand(labels: readonly string[], angle: number, scale = 1): number | undefined {
+  if (!angle) return scale === 1 ? undefined : Math.ceil(LEVEL_TICK_BAND * scale);
   const rad = (Math.abs(angle) * Math.PI) / 180;
-  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH;
-  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT + TICK_GAP;
-  return Math.min(MAX_TILTED_TICK_BAND, Math.max(30, Math.ceil(band)));
+  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
+  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
+  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
 }
 
-/** The width the ticks of a y axis get when a caller does not say. */
+/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
 export const AXIS_TICK_WIDTH = 48;
 
 /**
@@ -686,10 +709,19 @@ export function padBand(low: number, high: number): [number, number] | undefined
   return [low - pad, high + pad];
 }
 
-/** The whole band a y axis occupies: its ticks, and its title when it draws one. For
- *  lining a heading up over a PLOT rather than over its column. */
-export function axisBandWidth(tickWidth: number | undefined, titled: boolean): number {
-  return (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+/**
+ * The whole band a y axis occupies: its ticks, and its title when it draws one. For
+ * lining a heading up over a PLOT rather than over its column.
+ *
+ * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every
+ * band — the default 48 px and a caller's own `width` alike (keksdose's
+ * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`
+ * and grow with the text. A heading lined up over the plot has to pass the same scale.
+ * One factor for both sides of a facing pair, so the mirrored bands stay equal.
+ */
+export function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale = 1): number {
+  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
+  return scale === 1 ? band : Math.round(band * scale);
 }
 
 /**
@@ -1016,10 +1048,13 @@ function focusedBarShape(index: number) {
   };
 }
 
-/** A marker label's size and weight — the one place both the text and its width
- *  estimate read them from. */
+/** A marker label's size in px at Normal — the one place both the text and its width
+ *  estimate read it from. × the text size's scale where it is drawn (§10.10). */
 const MARKER_LABEL_SIZE = 11;
 
+/** A reference line's label, in px at Normal, × the scale likewise. */
+const REFERENCE_LABEL_SIZE = 10;
+
 /**
  * A marker's label, centred over its point but clamped inside the plot. recharts'
  * `position: "top"` centres on the point no matter where it is, so a marker near the
@@ -1037,16 +1072,17 @@ function MarkerLabel({
   const plot = usePlotArea();
   const ref = useRef<SVGTextElement>(null);
   const [measured, setMeasured] = useState<number>();
+  const fontSize = MARKER_LABEL_SIZE * useTextSize().scale;
   const text = value == null ? "" : String(value);
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el || typeof el.getComputedTextLength !== "function") return;
     const w = el.getComputedTextLength();
     if (w > 0 && w !== measured) setMeasured(w);
-  }, [text, measured]);
+  }, [text, measured, fontSize]);
   if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
   const cx = viewBox.x + (viewBox.width ?? 0) / 2;
-  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  const half = (measured ?? text.length * fontSize * 0.6) / 2;
   // The start clamp applied last: a label wider than the plot keeps its start on screen.
   const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
   return (
@@ -1055,7 +1091,7 @@ function MarkerLabel({
       x={x}
       y={viewBox.y - 5}
       textAnchor="middle"
-      fontSize={MARKER_LABEL_SIZE}
+      fontSize={fontSize}
       fontWeight={600}
       fill="var(--text-primary)"
       className="recharts-label"
@@ -1216,12 +1252,22 @@ function SeriesPlot({
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
+  // The text size (docs/text-size-harmonization.md §3.2, §4, §10.10): the axis bands, the
+  // tick spacing and the labels drawn in px grow with it — the tick text is `text-xs` and
+  // grows by itself — and the axes aim at three ticks instead of five from Large up.
+  // Strokes, dashes and the grid stay px.
+  const { scale } = useTextSize();
+  const ticksAim = tickTarget(scale);
+  const grow = (px: number) => (scale === 1 ? px : Math.round(px * scale));
   // The keyboard stops' roving tab stop, and the one that has focus (see `PointKeys`).
   // Up here, above the empty state's early return, like every hook.
   const [keyStop, setKeyStop] = useState(0);
   const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
   // Where the tooltip goes, and — off the plot — the row it is portalled into.
-  const phone = useMediaQuery(TOOLTIP_READOUT_QUERY, false);
+  // Below `sm` (`max-sm:`, at the text size in force) — where `"auto"` takes the tooltip
+  // off the plot. Narrower than the phone layout on purpose: a tablet's plot is wide
+  // enough that the box beside the finger leaves the data in view; a phone's is not.
+  const phone = useBreakpoint("max-sm", false);
   const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
   const [readout, setReadout] = useState<HTMLDivElement | null>(null);
 
@@ -1248,8 +1294,11 @@ function SeriesPlot({
       ? []
       : budgetedAxes(
           afterCap,
-          autoAxisBudget(afterCap, width, (axis) =>
-            axisBandWidth(axis.width, Boolean(axis.title)),
+          autoAxisBudget(
+            afterCap,
+            width,
+            (axis) => axisBandWidth(axis.width, Boolean(axis.title), scale),
+            scale,
           ),
         );
   const budgeted = [...capped, ...auto];
@@ -1263,10 +1312,9 @@ function SeriesPlot({
     onAxisBudget?.(budgetKey ? budgetKey.split("\n") : []);
   }, [budgetKey, onAxisBudget]);
 
-  // A number is pixels, set inline; a string is a class. Either way the one value
-  // sizes both the chart and its empty state.
-  const heightClass = typeof height === "string" ? height : undefined;
-  const heightStyle = typeof height === "number" ? { height } : undefined;
+  // A number or a CSS length is set inline; any other string is a class. Either way the
+  // one value sizes both the chart and its empty state.
+  const { className: heightClass, style: heightStyle } = chartHeightProps(height);
 
   // The empty state takes the chart's own height and is centred in it: a chart that
   // shrank to its "nothing to draw" sentence moved everything under it up the page
@@ -1321,11 +1369,12 @@ function SeriesPlot({
   // overhang of the first/last x tick where no y axis covers it.
   const margin = {
     // Room for a marker's label over a point at the top of the band.
-    top: markers?.some((marker) => marker.label) ? 22 : 8,
-    right: onRight ? 0 : 10,
-    left: onLeft ? 0 : 10,
+    top: markers?.some((marker) => marker.label) ? grow(22) : 8,
+    // The first and last x tick's overhang: text, so it grows with it.
+    right: onRight ? 0 : grow(10),
+    left: onLeft ? 0 : grow(10),
     // Under the ticks, not under the whole axis: whatever comes next owns the gap.
-    bottom: x.title ? 18 : 2,
+    bottom: x.title ? grow(18) : 2,
   };
 
   const refs = references ?? [];
@@ -1353,7 +1402,7 @@ function SeriesPlot({
           ) ?? [Infinity, -Infinity]),
         ));
 
-  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX) : undefined;
+  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX, ticksAim) : undefined;
   // Whole-number ticks on a number line whose rows are all whole numbers — see
   // `SeriesChartX.integerTicks`.
   const integerX =
@@ -1370,8 +1419,8 @@ function SeriesPlot({
       : model.kind === "time"
         ? timeUnit?.ticks
         : integerX
-          ? (integerTicks(fittedX) ?? niceTicks(fittedX))
-          : niceTicks(fittedX));
+          ? (integerTicks(fittedX, ticksAim) ?? niceTicks(fittedX, ticksAim))
+          : niceTicks(fittedX, ticksAim));
 
   // Ticks and the tooltip heading, back in the caller's terms.
   const timeFormat = new Intl.DateTimeFormat(locale, TIME_TICK_FORMAT[timeUnit?.unit ?? "day"]);
@@ -1404,7 +1453,7 @@ function SeriesPlot({
   const xLabel = (position: number) => label(position, tickAt(position));
 
   const tickAngle = x.ticks === false ? 0 : (x.tickAngle ?? 0);
-  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle);
+  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
 
   const source: ZoomFitSource = {
     rows: plotted,
@@ -1597,7 +1646,7 @@ function SeriesPlot({
           allowDataOverflow={zoom?.xDomain !== undefined || model.kind === "category"}
           tickLine={false}
           axisLine={false}
-          minTickGap={32}
+          minTickGap={grow(MIN_TICK_GAP)}
           // Where the ticks crowd, drop every Nth rather than recharts' default
           // `preserveEnd`, which drops whichever single tick collides: a phone's whole-week
           // axis came out 2 4 6 8 _ 12, a doubled gap that reads as a missing week. Every
@@ -1616,8 +1665,8 @@ function SeriesPlot({
             <Label
               value={x.title}
               position="insideBottom"
-              offset={-12}
-              className="fill-[var(--text-muted)] text-[11px]"
+              offset={-grow(12)}
+              className="fill-[var(--text-muted)] text-caption"
             />
           )}
         </XAxis>
@@ -1634,7 +1683,9 @@ function SeriesPlot({
               domain={domain}
               ticks={
                 resolveTicks(axis.tickValues, domain, finite) ??
-                (wholeOnly(axis) ? (integerTicks(domain) ?? niceTicks(domain)) : niceTicks(domain))
+                (wholeOnly(axis)
+                  ? (integerTicks(domain, ticksAim) ?? niceTicks(domain, ticksAim))
+                  : niceTicks(domain, ticksAim))
               }
               allowDataOverflow={zoomed}
               orientation={axis.orientation ?? "left"}
@@ -1642,7 +1693,7 @@ function SeriesPlot({
               // what the budget does on every resize across its threshold — kept its old
               // width in recharts' stacking of that side, and pushed the axes still drawn
               // off the chart's edge. A zero width leaves nothing stale to count.
-              width={axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title))}
+              width={axis.hide ? 0 : axisBandWidth(axis.width, Boolean(axis.title), scale)}
               tickLine={false}
               axisLine={false}
               tickFormatter={axis.format ?? number}
@@ -1659,8 +1710,8 @@ function SeriesPlot({
                   // Inline, so a sole series' colour beats the class's neutral fill —
                   // and absent for a shared axis, so the class draws it.
                   style={{ textAnchor: "middle", fill: soleSeriesColor(axis, series) }}
-                  offset={AXIS_TITLE_OFFSET}
-                  className="fill-[var(--text-muted)] text-[11px]"
+                  offset={grow(AXIS_TITLE_OFFSET)}
+                  className="fill-[var(--text-muted)] text-caption"
                 />
               )}
             </YAxis>
@@ -1817,7 +1868,7 @@ function SeriesPlot({
                   ? {
                       value: ref.label,
                       position: "insideTopLeft",
-                      fontSize: 10,
+                      fontSize: REFERENCE_LABEL_SIZE * scale,
                       fill: color,
                     }
                   : undefined

package/src/components/settings-fields.tsx

@@ -4,11 +4,19 @@ import type { SelectProps } from "./ui";
 import { ToggleGroup } from "./toggle-group";
 import type { ToggleGroupBaseProps } from "./toggle-group";
 import type { ThemePreference } from "../theme/theme-store";
+import { TEXT_SIZES } from "../theme/text-size";
+import type { TextSize } from "../theme/text-size";
+import { CONTRAST_MODES } from "../theme/contrast";
+import type { ContrastMode } from "../theme/contrast";
+import { useAppearanceLabels } from "./appearance-labels";
+import type { AppearanceLabels } from "./appearance-labels";
 
 /**
  * App-agnostic settings-field components (feedback #333): the language + theme
- * controls that every app's settings page needs, so they live in @hb/ui and the
- * app just supplies the current value, a change handler and translated labels.
+ * controls that every app's settings page needs — and, since 0.32, the text size and
+ * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own
+ * `appearance` namespace — so they live in @hb/ui and the app just supplies the
+ * current value, a change handler and translated labels.
  * The app owns WHERE these render (its own settings page) and any app-specific
  * fields around them.
  */
@@ -37,8 +45,12 @@ export interface ThemeSettingProps
  * one segmented control instead of a select — system, light and dark side by side, the
  * choice visible without opening anything, in every app (keksdose offered light and dark
  * only; its store already knew "system"). A {@link ToggleGroup}'s props pass through —
- * `labelPlacement`, `disabledReason`, `commit`, `size` — minus the options and the value,
- * which this owns.
+ * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options
+ * and the value, which this owns.
+ *
+ * The options wrap rather than truncate (`overflow="wrap"`), as in its two siblings
+ * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32
+ * report: "Syst… Li… D…" in a card at Extra large on a 360 px phone).
  *
  * Bind it to the PREFERENCE (`"system"` included), never to the resolved mode: on a
  * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
@@ -62,10 +74,11 @@ export interface ThemeSettingToggleProps
 
 export function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps) {
   if (props.variant === "toggle") {
-    const { variant: _variant, value, onChange, label, optionLabels, ...rest } = props;
+    const { variant: _variant, value, onChange, label, optionLabels, overflow = "wrap", ...rest } = props;
     return (
       <ToggleGroup<ThemePreference>
         {...rest}
+        overflow={overflow}
         label={label}
         value={value}
         onChange={onChange}
@@ -115,3 +128,74 @@ export function LanguageSetting({ value, onChange, label, options, id, ...rest }
     </Select>
   );
 }
+
+/**
+ * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s
+ * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the
+ * options and the value, which they own, as {@link ThemeSettingToggleProps} does.
+ */
+type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label" | "ariaLabel"> & {
+  value: T;
+  onChange: (value: T) => void;
+  /**
+   * The field's visible label. Leave it out inside a row already titled with the
+   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if
+   * given, else by the kit's own word ("Text size", "Contrast").
+   */
+  label?: ReactNode;
+  /** The `appearance` namespace, for this instance. */
+  labels?: Partial<AppearanceLabels>;
+};
+
+export type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
+
+/**
+ * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as
+ * one segmented control, in the core `appearance` group after the theme. Bind it to the
+ * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its
+ * `pickTextSize`, which stores the device's choice and, signed in, the account's.
+ *
+ * The options wrap rather than truncate (`overflow="wrap"`): at Extra large on a 360 px
+ * phone the group has 240 px, and "Extra large" cut to "Extra l…" would be the one
+ * setting that cannot read its own value.
+ */
+export function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = "wrap", ...rest }: TextSizeSettingProps) {
+  const labels = useAppearanceLabels(labelsProp);
+  const named = label !== undefined && label !== null && label !== false;
+  return (
+    <ToggleGroup<TextSize>
+      {...rest}
+      aria-label={named || rest["aria-labelledby"] ? rest["aria-label"] : (rest["aria-label"] ?? labels.textSize)}
+      label={label}
+      overflow={overflow}
+      value={value}
+      onChange={onChange}
+      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}
+    />
+  );
+}
+
+export type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
+
+/**
+ * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside
+ * the text size. Bind it to the stored MODE, "system" included — never to whether more
+ * contrast is on at the moment, or a device that asks for more contrast would show
+ * "More" and could not say "follow the device" (the theme's lesson, §8 of the settings
+ * contract). `useAccountAppearance().contrast` is that mode.
+ */
+export function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = "wrap", ...rest }: ContrastSettingProps) {
+  const labels = useAppearanceLabels(labelsProp);
+  const named = label !== undefined && label !== null && label !== false;
+  return (
+    <ToggleGroup<ContrastMode>
+      {...rest}
+      aria-label={named || rest["aria-labelledby"] ? rest["aria-label"] : (rest["aria-label"] ?? labels.contrast)}
+      label={label}
+      overflow={overflow}
+      value={value}
+      onChange={onChange}
+      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}
+    />
+  );
+}

package/src/components/share-card.tsx

@@ -20,6 +20,7 @@ import { Tooltip } from "./tooltip";
 import { Button, Card, IconButton, Spinner } from "./ui";
 import { useWriteLock } from "./write-lock";
 import type { CardProps } from "./ui";
+import type { DisabledReasonDisplay } from "./field-parts";
 
 /**
  * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's
@@ -224,6 +225,16 @@ function ShareRoleChip({ role }: { role: ShareRole | undefined }) {
   return role.description ? <Tooltip label={role.description}>{chip}</Tooltip> : chip;
 }
 
+/**
+ * A row's controls: the role toggle and the remove icon, or a pending grant's copy and
+ * revoke. Held to the row and wrapping inside it (0.32.1, the 360 px Extra-large sweep;
+ * docs/text-size-harmonization.md §4 "nothing overflows"): under a write lock on a touch
+ * screen or at Large the remove icon gives its reason as a line under it, up to 20rem
+ * wide, and a `shrink-0` box ran 31 px past a 390 px phone at Normal and 269 px past a
+ * 360 px one at Extra large. Where the controls fit in one row, nothing changes.
+ */
+const ROW_CONTROLS = "ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-1";
+
 /**
  * A row's role choice saves on change, so it is a commit that cannot take `commit`:
  * under a write lock it is disabled, and the lock's reason is put in the kit Tooltip
@@ -278,6 +289,12 @@ export function SharePanel({
   const roleOf = (key: string | undefined) => roles.find((r) => r.key === key);
   const choosable = roles.length > 1;
   const canAdd = !readOnly && onAdd !== undefined;
+  // Under a write lock the form's Share button gives the lock's sentence as a line (on
+  // touch and at Large). A row's remove or revoke icon then keeps it in its tooltip, as
+  // the role toggle beside it does, rather than repeat the same line under every row
+  // (0.32.1, the 360 px Extra-large sweep). Without the form the rows' lines are the
+  // only place it is said, so they stay — and ROW_CONTROLS wraps them.
+  const rowReason: DisabledReasonDisplay = canAdd ? "tooltip" : "auto";
 
   const run = async (key: string, action: () => MaybePromise): Promise<boolean> => {
     setBusy(key);
@@ -457,7 +474,7 @@ export function SharePanel({
                       )}
                     </div>
                     {(changeable || (editable && onRemove)) && (
-                      <div className="ms-auto flex shrink-0 items-center gap-1">
+                      <div className={ROW_CONTROLS}>
                         {changeable && (
                           <LockedRoleChoice reason={lock.locked ? lock.reason : undefined}>
                             <ToggleGroup<string>
@@ -478,6 +495,13 @@ export function SharePanel({
                             size="xs"
                             commit
                             label={labels.remove}
+                            // The icon alone at every text size (§10.8): the row's one
+                            // control beside its role toggle, where "Remove access" as
+                            // text at Large would not fit a 240 px row. It carries a
+                            // spinner and the write lock, which a "⋯" menu entry
+                            // cannot, and its confirmation names the action in words.
+                            labelVisible={false}
+                            disabledReasonDisplay={rowReason}
                             pending={busy === key}
                             disabled={busy !== null}
                             onClick={async () => {
@@ -523,7 +547,7 @@ export function SharePanel({
                       </div>
                     </div>
                     {(p.link || (!readOnly && onRevokePending)) && (
-                      <div className="ms-auto flex shrink-0 items-center gap-1">
+                      <div className={ROW_CONTROLS}>
                         {p.link && <CopyButton size="xs" tone="muted" text={p.link} label={labels.copyLink} />}
                         {!readOnly && onRevokePending && (
                           <IconButton
@@ -531,6 +555,11 @@ export function SharePanel({
                             size="xs"
                             commit
                             label={labels.revokePending}
+                            // As the grantee's remove above: one action beside the
+                            // copy icon (which is an icon at every size), and the
+                            // confirmation says it in words.
+                            labelVisible={false}
+                            disabledReasonDisplay={rowReason}
                             pending={busy === key}
                             disabled={busy !== null}
                             onClick={async () => {