@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/calculator.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Calculator as CalculatorIcon, Delete } from "lucide-react";
 import { Popover } from "./popover";
 import { cn } from "../lib/cn";
+import { FIELD_TOUCH_TEXT } from "./ui";
 import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc";
 import {
   DEFAULT_CALCULATOR_LABELS,
@@ -70,7 +71,7 @@ const KEYS: Key[] = [
 ];
 
 const KEY_BASE =
-  "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+  "flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--border-strong)]";
 // Two key families, two fills: digits sit on the inset surface and darken on
 // hover, operators sit a step down on `--border` and lift toward that surface —
 // the same split `NumberPadSheet` uses for this keypad on a phone. The tokens
@@ -151,7 +152,7 @@ function CalculatorPanel({
         // is right-aligned in every script too — so both stay physical, pinned
         // with `dir="ltr"` rather than mirrored in a right-to-left form.
         dir="ltr"
-        className="block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]"
+        className={cn("block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]", FIELD_TOUCH_TEXT)}
       />
       <div dir="ltr" className="h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]">
         {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : ""}
@@ -231,7 +232,7 @@ export function CalculatorButton({
   const labels = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
   return (
     <Popover
-      width={224}
+      width="14rem"
       labels={{ panel: labels.panel }}
       trigger={({ open, toggle, ref }) => (
         <button

package/src/components/calendar-heatmap.tsx

@@ -478,7 +478,7 @@ export function CalendarHeatmap({
       ),
     } as const;
     const inner = withNumber ? (
-      <span aria-hidden className="text-[11px] leading-none tabular-nums">
+      <span aria-hidden className="text-caption leading-none tabular-nums">
         {numberFormat.format(d.getDate())}
       </span>
     ) : null;
@@ -515,7 +515,7 @@ export function CalendarHeatmap({
       <div ref={scrollerRef} className="overflow-x-auto pb-1">
         <div ref={gridRef} role="grid" aria-label={gridName} className="inline-grid gap-0.5">
           {/* Decoration: every cell's name already carries its month. */}
-          <div aria-hidden className="grid gap-0.5 text-[10px] leading-3 text-[var(--text-muted)]" style={columns}>
+          <div aria-hidden className="grid gap-0.5 text-micro leading-3 text-[var(--text-muted)]" style={columns}>
             <span />
             {monthLabels.map((m, w) => (
               <span key={w} className="overflow-visible whitespace-nowrap">
@@ -528,7 +528,7 @@ export function CalendarHeatmap({
               <div
                 role="rowheader"
                 aria-label={weekdayLabels[r].long}
-                className="overflow-hidden pe-1 text-[10px] leading-3 text-[var(--text-muted)]"
+                className="overflow-hidden pe-1 text-micro leading-3 text-[var(--text-muted)]"
               >
                 {/* Every other weekday, as a contribution graph does: seven labels
                     at this size are a smear. The name is there for all seven. */}
@@ -557,7 +557,7 @@ export function CalendarHeatmap({
               key={i}
               role="columnheader"
               aria-label={w.long}
-              className="pb-0.5 text-center text-[10px] uppercase tracking-wide text-[var(--text-muted)]"
+              className="pb-0.5 text-center text-micro uppercase tracking-wide text-[var(--text-muted)]"
             >
               {w.short}
             </div>
@@ -586,7 +586,7 @@ export function CalendarHeatmap({
       )}
       {body}
       {legend && (
-        <div aria-hidden className="mt-2 flex items-center justify-end gap-1 text-[10px] text-[var(--text-muted)]">
+        <div aria-hidden className="mt-2 flex items-center justify-end gap-1 text-micro text-[var(--text-muted)]">
           <span className="me-0.5">{labels.less}</span>
           {legendLevels.map((l) => (
             <span

package/src/components/chart-height.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from "react";
+
+/**
+ * A chart's height as the kit's charts take it (docs/text-size-harmonization.md §10.10):
+ *
+ * - a CSS length — `"20rem"`, `"min(20rem, 60dvh)"`, `"clamp(14rem, 40vh, 28rem)"` —
+ *   set inline, so a height can grow with the text size AND stop at the screen: scaled
+ *   px would make a 480 px chart 720 px at Extra large, more than a phone shows;
+ * - a Tailwind class (`"h-72"`, `"h-64 md:h-80"`), as before;
+ * - a number of px, set inline, as before — kept for the callers that hold their height
+ *   as a number, but it does not follow the text size.
+ */
+export type ChartHeight = string | number;
+
+/** A number with an optional unit, or one of the CSS functions a length is written with.
+ *  A Tailwind class never starts with a digit or `min(`, so the two cannot be confused. */
+const CSS_LENGTH = /^(?:[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)?|(?:min|max|clamp|calc|var)\(.*\))$/i;
+
+/** Whether a string `height` is a CSS length rather than a class. */
+export function isCssLength(value: string): boolean {
+  return CSS_LENGTH.test(value.trim());
+}
+
+/** The class or the inline style a {@link ChartHeight} becomes — one of the two, or
+ *  neither for `undefined`. */
+export function chartHeightProps(height: ChartHeight | undefined): { className?: string; style?: CSSProperties } {
+  if (height === undefined) return {};
+  if (typeof height === "number") return { style: { height } };
+  return isCssLength(height) ? { style: { height: height.trim() } } : { className: height };
+}

package/src/components/chart-zoom.tsx

@@ -29,6 +29,8 @@ import {
   type InverseScaleFunction,
 } from "recharts";
 import { X } from "lucide-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";
 
@@ -492,7 +494,10 @@ export function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {
           <button
             type="button"
             onClick={clear}
-            className="absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)]/90 px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] backdrop-blur transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+            className={cn(
+              "absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)]/90 px-1.5 py-0.5 text-micro text-[var(--text-muted)] backdrop-blur transition-colors hover:text-[var(--text-primary)]",
+              FOCUS_RING,
+            )}
           >
             <X aria-hidden className="size-3" /> {labels.resetZoom}
           </button>

package/src/components/checkbox-group.tsx

@@ -215,12 +215,12 @@ export function CheckboxGroup<T extends string = string>({
       </RequiredStarOnLegend.Provider>
       {showHint && (
         // A `div`, not a `p`: a hint may be a node with a link in it.
-        <div id={hintId} className="mt-1.5 text-[11px] leading-tight text-[var(--text-muted)]">
+        <div id={hintId} className="mt-1.5 text-caption leading-tight text-[var(--text-muted)]">
           {hint}
         </div>
       )}
       {showError && (
-        <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>
       )}

package/src/components/checkbox.tsx

@@ -3,7 +3,15 @@ import { Check, Minus } from "lucide-react";
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts";
-import { LockedReason, RequiredStarOnLegend, useLockReason } from "./field-parts";
+import {
+  DISABLED_REASON_LINE_CLASS,
+  LockedReason,
+  RequiredStarOnLegend,
+  useDisabledReasonLine,
+  useLockReason,
+  type DisabledReasonDisplay,
+} from "./field-parts";
+import { FOCUS_RING } from "./focus-ring";
 
 /**
  * A checkbox that is still `<input type="checkbox">`.
@@ -21,17 +29,31 @@ import { LockedReason, RequiredStarOnLegend, useLockReason } from "./field-parts
  * browser's own grey outline in both themes.
  */
 
-// The box. 16px, like every raw checkbox it replaces, so a migration moves nothing.
+// The box. 1rem (16px at Normal), like every raw checkbox it replaces, so a migration
+// moves nothing; its corner `rounded` (0.25rem) rather than a fixed 4px, so it keeps its
+// shape as it grows with the text (0.32, §3.2).
 //
-// `focus-visible`, with an offset in the surface colour: a --brand ring touching a
-// --brand-filled (checked) box would be a ring painted in the colour it sits on —
-// present in the DOM and invisible on screen. The offset is what separates the two.
+// The kit's focus frame (§5), with an offset in the surface colour: a --brand ring
+// touching a --brand-filled (checked) box would be a ring painted in the colour it sits
+// on — present in the DOM and invisible on screen. The offset is what separates the two.
 const BOX =
-  "peer size-4 shrink-0 cursor-pointer appearance-none rounded-[4px] border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors " +
+  "peer size-4 shrink-0 cursor-pointer appearance-none rounded border border-[var(--border-strong)] bg-[var(--bg-surface)] shadow-sm transition-colors " +
   "checked:border-[var(--brand)] checked:bg-[var(--brand)] " +
-  "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] " +
+  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)] ` +
   "disabled:cursor-not-allowed";
 
+/**
+ * The 48 px touch target at Large (0.32, §4) for a LABELLED box: the label's own hit
+ * area, an invisible `::after` that is part of the `<label>` — so a tap on it ticks the
+ * box through `for` — reaching back over the box and its gap (`-start-6`: 1rem + 0.5rem)
+ * and out to 48 px tall on a one-line label. It changes no layout; a label already taller
+ * than 48 px keeps its own box (`max(0px, …)`). A bare box has no label to grow, and
+ * takes its target from where it stands (a table row's tap, the caller's own label).
+ */
+const LABEL_TOUCH_LARGE =
+  "large:relative large:after:absolute large:after:-start-6 large:after:end-0 " +
+  "large:after:-inset-y-[max(0px,calc((48px-100%)/2))] large:after:content-['']";
+
 // A mixed box wears the checked fill whether or not the underlying input is checked:
 // `indeterminate` is a property the browser keeps separately from `checked`, and the
 // dash means "some", which is neither answer.
@@ -43,7 +65,7 @@ const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
 const BOX_INVALID =
   "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
 
-const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
   /**
@@ -101,6 +123,12 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
    * moves in or out of the Tooltip), as a locked Button is.
    */
   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 label (a bare box: under the box),
+   * and in the tooltip otherwise. See {@link DisabledReasonDisplay}.
+   */
+  disabledReasonDisplay?: DisabledReasonDisplay;
   /**
    * This box COMMITS — ticking it saves. Under a locked {@link WriteLockProvider} it is
    * locked the `disabledReason` way with the lock's reason (which wins over its own).
@@ -134,6 +162,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
     disabled,
     required,
     disabledReason,
+    disabledReasonDisplay,
     commit,
     onClick,
     ...rest
@@ -144,6 +173,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
   const inputId = id ?? generated;
   const lock = useLockReason(commit, disabledReason);
   const locked = lock.locked;
+  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);
   // Locked is disabled the focusable way: the row fades and the words stop inviting a
   // click exactly as they do for `disabled`.
   const looksDisabled = Boolean(disabled) || locked;
@@ -242,30 +272,35 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
   // The reason's Tooltip goes round the BOX, not the row: the row is the caller's
   // layout (`className`), and a wrapper round it would move that into a span. A bare
   // box hands its `className` to the wrapper, which is then the outermost element.
-  const box = locked ? (
-    <LockedReason lock={lock} className={cn("shrink-0", bare && className)}>
-      {control}
-    </LockedReason>
-  ) : (
-    control
-  );
+  // With words beside it, the reason LINE goes under them instead (Switch's shape).
+  const lineInWords = locked && reasonLine && !bare;
+  const box =
+    locked && !lineInWords ? (
+      <LockedReason lock={lock} line={reasonLine} className={cn("shrink-0", bare && className)}>
+        {control}
+      </LockedReason>
+    ) : (
+      control
+    );
+  // The row's fade moves onto its parts while the reason line is in it, as on Switch.
+  const dimParts = lineInWords;
 
   if (bare) return box;
 
   return (
     <div
       className={cn(
-        // `items-start` + a 20px cell for the box: the box centres on the label's FIRST
-        // line (text-sm is 20px tall), so a label that wraps keeps the box at the top
+        // `items-start` + a 1.25rem cell for the box: the box centres on the label's FIRST
+        // line (text-sm's line is 1.25rem), so a label that wraps keeps the box at the top
         // rather than floating to the middle of a paragraph.
         "flex items-start gap-2",
         // The whole row fades, the way ToggleGroup and the fields do, so the label does
         // not stay at full strength beside a box you cannot change.
-        looksDisabled && "opacity-60",
+        looksDisabled && !dimParts && "opacity-60",
         className,
       )}
     >
-      <span className="flex h-5 shrink-0 items-center">{box}</span>
+      <span className={cn("flex h-5 shrink-0 items-center", dimParts && "opacity-60")}>{box}</span>
       <span className="min-w-0">
         {label !== undefined && (
           <label
@@ -275,6 +310,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
               // `select-none`: a double-click to toggle twice would otherwise select the
               // words, and a drag that starts on them starts a native text drag.
               looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
+              LABEL_TOUCH_LARGE,
+              dimParts && "opacity-60",
             )}
           >
             {label}
@@ -286,10 +323,15 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
           </label>
         )}
         {showDescription && (
-          <span id={descriptionId} className="mt-0.5 block text-xs text-[var(--text-muted)]">
+          <span id={descriptionId} className={cn("mt-0.5 block text-xs text-[var(--text-muted)]", dimParts && "opacity-60")}>
             {description}
           </span>
         )}
+        {lineInWords && (
+          <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>
+            {lock.reason}
+          </span>
+        )}
         {showError && (
           <span id={errorId} className={cn("block", ERROR_CLASS)}>
             {error}

package/src/components/chip.tsx

@@ -4,7 +4,9 @@ import { Check, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
-import { FIELD_INVALID } from "./ui";
+import { FIELD_INVALID, FIELD_TOUCH_TEXT, TOUCH_TARGET_LARGE } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
+import { DisabledReasonLine, useDisabledReasonLine, type DisabledReasonDisplay } from "./field-parts";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
 import { Tooltip } from "./tooltip";
@@ -196,9 +198,9 @@ const DOT_SIZE: Record<ChipSize, string> = { xs: "size-1.5", sm: "size-2", md: "
  *  capitals at body size shout and capitals untracked run together. Per size, so it
  *  replaces the size's own `text-*` through tailwind-merge. */
 const CAPS: Record<ChipSize, string> = {
-  xs: "text-[10px] font-semibold uppercase tracking-wider",
-  sm: "text-[10px] font-semibold uppercase tracking-wider",
-  md: "text-[11px] font-semibold uppercase tracking-wider",
+  xs: "text-micro font-semibold uppercase tracking-wider",
+  sm: "text-micro font-semibold uppercase tracking-wider",
+  md: "text-caption font-semibold uppercase tracking-wider",
   lg: "text-xs font-semibold uppercase tracking-wider",
 };
 
@@ -255,8 +257,8 @@ const SIZE: Record<
   { body: string; split: string; tail: string; icon: string; remove: string }
 > = {
   xs: {
-    body: "gap-1 px-1.5 py-0 text-[11px] leading-4",
-    split: "gap-1 ps-1.5 pe-0.5 py-0 text-[11px] leading-4",
+    body: "gap-1 px-1.5 py-0 text-caption leading-4",
+    split: "gap-1 ps-1.5 pe-0.5 py-0 text-caption leading-4",
     tail: "pe-1",
     icon: "size-3",
     remove: "size-2.5",
@@ -380,8 +382,10 @@ export function refreshChipEdges(): void {
       const r = el.getBoundingClientRect();
       const label = el.querySelector<HTMLElement>(".truncate");
       // Not laid out (a hidden ancestor, jsdom), or truncated at its container's edge,
-      // where a wider chip would overflow: leave it alone.
-      if (!r.width || (label && label.scrollWidth > label.clientWidth)) return null;
+      // where a wider chip would overflow: leave it alone. So too a label wrapped onto
+      // a second line at Large (0.32.1): the chip is already as wide as its row lets it
+      // be, and a min-width past that would push it over the edge just the same.
+      if (!r.width || (label && (label.scrollWidth > label.clientWidth || labelWraps(label)))) return null;
       const width = Math.round(r.width * 64) / 64;
       const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
       return target === width ? null : target;
@@ -404,6 +408,13 @@ export function refreshChipEdges(): void {
   }
 }
 
+/** Whether a chip's label runs to more than one line — taller than one and a half of
+ *  its line height. A line height of `normal` (no number to compare) counts as one line. */
+function labelWraps(label: HTMLElement): boolean {
+  const line = Number.parseFloat(getComputedStyle(label).lineHeight);
+  return line > 0 && label.clientHeight > 1.5 * line;
+}
+
 function scheduleChipEdges() {
   if (snapFrame || typeof requestAnimationFrame === "undefined") return;
   snapFrame = requestAnimationFrame(() => {
@@ -487,13 +498,48 @@ function assignRef<T>(target: Ref<T> | undefined, value: T | null) {
 }
 
 const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border transition-colors";
+
 // `focus-visible`, not `focus`: a chip commonly receives focus programmatically (the
 // ChipInput moves focus onto one after a removal) and a ring that appears on a
 // pointer click reads as a stuck selection.
-const CHIP_RING =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
+const CHIP_RING = `${FOCUS_RING} focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]`;
 const CHIP_BASE = `${CHIP_PILL} ${CHIP_RING}`;
 
+/**
+ * A text chip's label at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): it wraps instead of ending in
+ * "…". keksdose's "Zur Prüfung zurücklegen" read "Zur Prüfung zu…" on a phone at Extra
+ * large, which is a different instruction. No size has a fixed height (padding and
+ * `min-h-*` only), so the pill grows with its lines; the mark before the text stays
+ * centred on them, as in a pill. A `large:` class, so Normal keeps its one-line chip.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: a status chip often sits in a table
+ * cell, and `anywhere` lowers the label's min-content width to one letter, so an
+ * auto-sized column can squeeze it to a letter per line (StatusDot's label did, in the
+ * showcase's tone table at 360 px, Extra large). `break-word` keeps each word whole
+ * wherever the width is the content's to choose, and still breaks one that cannot fit
+ * the row at all.
+ */
+const CHIP_LABEL_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
+/**
+ * An interactive chip's touch target at Large and Extra large (docs/text-size-harmonization.md
+ * §4: "touch targets at least 48 px … for buttons, inputs, chips"): a link or toggle chip
+ * grows its pill to 48 px, as Button `sm` does, and centres what is in it once the
+ * minimum width is what sizes it. An inert chip (a tag on a row) is no target and keeps
+ * its size; a disabled one is no target either.
+ */
+const CHIP_TOUCH_LARGE = `${TOUCH_TARGET_LARGE} large:justify-center`;
+
+/**
+ * The ×'s 48 px hit area at Large (§4) — IconButton's `2xs` pattern: a box that cannot
+ * grow without growing the chip around it keeps its size and gets an invisible
+ * `::after`, 48 px square and centred on it, which takes the taps a finger lands round
+ * the glyph. On an inert removable chip (ChipInput's values) the × is the only target.
+ */
+const REMOVE_HIT_AREA_LARGE =
+  "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']";
+
 interface ChipBaseProps {
   children: ReactNode;
   tone?: ChipTone;
@@ -627,6 +673,7 @@ export type ChipProps = ChipBaseProps &
         renderLink?: (props: ChipLinkProps) => ReactElement;
         commit?: never;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
       }
     | {
         /** The link shape again, with an `onClick`. `href` is a required string here,
@@ -642,6 +689,7 @@ export type ChipProps = ChipBaseProps &
         renderLink?: (props: ChipLinkProps) => ReactElement;
         commit?: never;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
       }
     | {
         href?: never;
@@ -654,11 +702,21 @@ export type ChipProps = ChipBaseProps &
          * `disabledReason`, on the chip's button shape (keksdose K3: a filter or flag
          * chip that saves on press, under a read-only lock). The chip stays focusable
          * and `aria-disabled`, a press (and its `onRemove` ×) does nothing, and the
-         * reason shows in the kit {@link Tooltip} and describes the chip. Wins over
-         * `disabled`. A link chip navigates rather than commits, so it takes neither
-         * this nor `commit`; an inert chip has nothing to refuse.
+         * reason describes the chip — as a line under it at Large and on a touch
+         * screen, in the kit {@link Tooltip} otherwise (see `disabledReasonDisplay`).
+         * Wins over `disabled`. A link chip navigates rather than commits, so it takes
+         * neither this nor `commit`; an inert chip has nothing to refuse.
          */
         disabledReason?: ReactNode;
+        /**
+         * Where `disabledReason` shows (0.32, docs/text-size-harmonization.md §4 "No fact
+         * only in a tooltip") — {@link Button}'s `disabledReasonDisplay`: by default a line
+         * under the chip at Large and Extra large and on a touch screen, where a bubble
+         * cannot be hovered open, and the tooltip otherwise and inside
+         * `CompactControls`. `"line"` / `"tooltip"` force one. See
+         * {@link DisabledReasonDisplay}.
+         */
+        disabledReasonDisplay?: DisabledReasonDisplay;
         /** This chip COMMITS — pressing it saves. Under a locked
          *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's
          *  reason, as {@link Button}'s `commit` does. */
@@ -699,6 +757,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     onFocus,
     snapEdges = false,
     disabledReason: ownDisabledReason,
+    disabledReasonDisplay,
     commit,
     ...rest
   },
@@ -726,6 +785,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     locked && "cursor-not-allowed opacity-50",
   );
   const snap = snapEdges && !dot;
+  // A finger's target at Large (§4): what can be pressed, refused or not — see
+  // CHIP_TOUCH_LARGE. A disabled link renders as the inert span below and is none.
+  const target = interactive && (!disabled || locked);
   const snapRef = useSnapEdges(snap);
   // The visible pill carries the snap: the whole chip, or the wrapper of a split one
   // (whose body gets the forwarded ref instead).
@@ -743,6 +805,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     radius,
     surface,
     interactive && !disabled && !locked && "cursor-pointer hover:brightness-[0.97] dark:hover:brightness-110",
+    // §4: a link or toggle is a 48 px target at Large — a locked one too, since it is
+    // still focusable and still says why when pressed.
+    target && CHIP_TOUCH_LARGE,
     // An inert dot chip is text in a column: no inset, so it aligns with the header.
     dot && !interactive && "px-0",
     // The under-4px a snap adds is split between the two sides, not stacked at the end.
@@ -776,14 +841,15 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         ) : (
           <Icon className={cn(s.icon, "shrink-0")} aria-hidden />
         ))}
-      {/* Text truncates. Mixed children (an icon and a word) sit in a row instead: as a
-          plain span, the svg — a block under Tailwind's preflight — stacked above the
-          text (keksdose live #358). */}
+      {/* Text truncates at Normal and wraps at Large (CHIP_LABEL_WRAP_AT_LARGE). Mixed
+          children (an icon and a word) sit in a row instead: as a plain span, the svg —
+          a block under Tailwind's preflight — stacked above the text (keksdose live
+          #358). */}
       <span
         className={cn(
           "min-w-0",
           typeof children === "string" || typeof children === "number"
-            ? "truncate"
+            ? cn("truncate", CHIP_LABEL_WRAP_AT_LARGE)
             : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0",
         )}
       >
@@ -821,7 +887,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         // Logical margins: the × sits at the END of the pill, which is the left in RTL.
         "-me-0.5 ms-0.5 shrink-0 p-0.5 transition-colors",
         shape === "square" ? "rounded-sm" : "rounded-full",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+        FOCUS_RING,
+        // §4: the × is a 48 px target at Large without growing the chip around it.
+        REMOVE_HIT_AREA_LARGE,
         !locked && "hover:bg-[var(--bg-active)]",
         locked && "cursor-not-allowed",
         ((disabled && !locked) || removeDisabled) && "pointer-events-none",
@@ -836,7 +904,11 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
 
   // ── The combined shape: one pill, two interactive siblings inside it.
   const pill = (inner: ReactNode) => (
-    <span ref={snap ? snapRef : undefined} className={cn(CHIP_PILL, s.tail, radius, surface, snap && "justify-center", className)}>
+    <span
+      ref={snap ? snapRef : undefined}
+      // The pill is the target's box here (§4): the body inside stretches to its height.
+      className={cn(CHIP_PILL, s.tail, radius, surface, target && CHIP_TOUCH_LARGE, snap && "justify-center", className)}
+    >
       {inner}
       {remove}
     </span>
@@ -929,16 +1001,9 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     const shaped = remove ? pill(button) : button;
     if (!locked) return shaped;
     return (
-      // The chip in a FRAGMENT, as a locked Button is: the bubble is visual, and the
-      // hidden copy beside it is what the chip (and its ×) is described by.
-      <Tooltip label={disabledReason}>
-        <>
-          {shaped}
-          <span id={reasonId} hidden>
-            {disabledReason}
-          </span>
-        </>
-      </Tooltip>
+      <ChipReasonFrame reason={disabledReason} reasonId={reasonId} display={disabledReasonDisplay}>
+        {shaped}
+      </ChipReasonFrame>
     );
   }
 
@@ -961,6 +1026,47 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
   );
 });
 
+/**
+ * A locked chip and its reason (0.32, docs/text-size-harmonization.md §4): a line under
+ * the chip at Large and on touch, else the kit {@link Tooltip} — Button's `ReasonFrame`,
+ * see {@link DisabledReasonDisplay}. A component of its own so only a LOCKED chip asks
+ * the text size and the pointer; the unlocked chips of a filter row subscribe to nothing.
+ *
+ * Tooltip form: the chip in a FRAGMENT, as a locked Button is — the bubble is visual, and
+ * the hidden copy beside it is what the chip (and its ×) is described by. Line form: the
+ * line is that description, under the chip, and no bubble repeats it.
+ */
+function ChipReasonFrame({
+  reason,
+  reasonId,
+  display,
+  children,
+}: {
+  reason: ReactNode;
+  reasonId: string;
+  display: DisabledReasonDisplay | undefined;
+  children: ReactNode;
+}) {
+  const line = useDisabledReasonLine(display);
+  if (line) {
+    return (
+      <DisabledReasonLine id={reasonId} reason={reason}>
+        {children}
+      </DisabledReasonLine>
+    );
+  }
+  return (
+    <Tooltip label={reason}>
+      <>
+        {children}
+        <span id={reasonId} hidden>
+          {reason}
+        </span>
+      </>
+    </Tooltip>
+  );
+}
+
 /** `null`, `false` and `""` are what a `cond && reason` gives on the happy path — no
  *  reason, so no lock. */
 function hasReason(node: ReactNode): boolean {
@@ -1304,7 +1410,10 @@ export function ChipInput({
           aria-label={label ? undefined : (ariaLabelAttr ?? ariaLabel)}
           aria-describedby={describedBy || undefined}
           aria-invalid={isInvalid || !!rejected || undefined}
-          className="min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default"
+          // `w-0` with flex-1: without a width the browser's default input size (20
+          // characters) became the field's minimum width and pushed it past a 240 px
+          // phone at 150 % (0.32's screenshot run).
+          className={cn("w-0 min-w-[6rem] flex-1 bg-transparent py-0.5 text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-placeholder)] disabled:cursor-default", FIELD_TOUCH_TEXT)}
         />
         {/* Additions, removals and rejections move no focus, so nothing would announce
             them. `sr-only-fixed` rather than `sr-only`: this sits inside a consumer's