@eifi1/ui-kit 0.31.1 → 0.32.0

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",
@@ -490,10 +492,27 @@ const CHIP_PILL = "inline-flex max-w-full items-center rounded-full border trans
 // `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}`;
 
+/**
+ * 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 +646,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 +662,7 @@ export type ChipProps = ChipBaseProps &
         renderLink?: (props: ChipLinkProps) => ReactElement;
         commit?: never;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
       }
     | {
         href?: never;
@@ -654,11 +675,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 +730,7 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
     onFocus,
     snapEdges = false,
     disabledReason: ownDisabledReason,
+    disabledReasonDisplay,
     commit,
     ...rest
   },
@@ -726,6 +758,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 +778,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.
@@ -821,7 +859,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 +876,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 +973,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 +998,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 +1382,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

package/src/components/choice-card.tsx

@@ -93,8 +93,10 @@ const CARD =
   // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and
   // what the eye is on. An OUTLINE rather than a ring, because the checked state already
   // spends the ring — two `ring-*` widths on one element are decided by stylesheet
-  // order, and the loser would be the focus mark. Offset, so the two never merge.
-  "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] " +
+  // order, and the loser would be the focus mark. Offset, so the two never merge. Its
+  // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More
+  // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.
+  "has-[:focus-visible]:outline-[length:var(--focus-ring-width)] has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] " +
   // Read from the input too, so a card disabled by its `<fieldset>` fades as well.
   "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
 
@@ -107,10 +109,12 @@ const CARD_INVALID =
 const BOX =
   "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors " +
   "checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed";
-const CHECKBOX = "rounded-[4px] checked:bg-[var(--brand)]";
-// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px
-// centre. No glyph to lay over it, and it scales with the box.
-const RADIO = "rounded-full checked:border-[5px]";
+const CHECKBOX = "rounded checked:bg-[var(--brand)]";
+// A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a
+// surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32
+// (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a
+// dot.
+const RADIO = "rounded-full checked:border-[0.3125rem]";
 
 export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(
   {
@@ -219,7 +223,7 @@ export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function
           </span>
         )}
         {showError && (
-          <span id={errorId} className="mt-1 block text-[11px] leading-tight text-[var(--danger)]">
+          <span id={errorId} className="mt-1 block text-caption leading-tight text-[var(--danger)]">
             {error}
           </span>
         )}
@@ -341,8 +345,9 @@ export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(functio
   const look = cn(
     "flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors",
     "hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]",
-    // The outline, as on ChoiceCard: the card is what the eye is on.
-    "focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's
+    // width (§5).
+    "focus:outline-none focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
     "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]",
     className,
   );
@@ -543,7 +548,7 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
           ))}
         </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/column-mapper.tsx

@@ -367,7 +367,7 @@ export function ColumnRoleTable<
                   scope="col"
                   className="min-w-36 py-2 align-top"
                 >
-                  <span className="block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]">
+                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-[var(--text-muted)]">
                     {name}
                   </span>
                   <Select

package/src/components/combobox-core.tsx

@@ -13,8 +13,8 @@ import { cn } from "../lib/cn";
 import { CLIPS_ATTRIBUTE } from "../lib/clipping";
 import { DropdownSearchHeader } from "./dropdown";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
-import { useMediaQuery } from "../hooks/use-media-query";
-import { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from "./ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
+import { FLOATING_LABEL_STATIC, Spinner } from "./ui";
 import { useAnchorDir } from "./use-anchor-dir";
 import { type AnchorRect } from "../hooks/use-anchored-rect";
 import { useAnchoredPanel, type AnchoredPanel } from "../hooks/use-anchored-panel";
@@ -364,7 +364,7 @@ export function useComboboxCore<V extends string | number>({
   // old value, and tapping the search box or the X was equally fatal. `PickerSheet`
   // stops `mousedown` for exactly this reason, but that guard was written for
   // `useDropdown`'s listener and never covered this hook.
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
   useEscapeKey(closeToTrigger, open);
 
@@ -437,7 +437,7 @@ export function useComboboxCore<V extends string | number>({
 
 /** The error line under a field — the same type as `ui.tsx`'s (module-private) one,
  *  so a combobox's message is indistinguishable from an Input's. */
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 
 /**
  * {@link Input}'s `error` for the combobox family: the message under the field, its
@@ -589,7 +589,7 @@ export function ComboboxPanel<V extends string | number>({
   // The phone gets a full-screen sheet instead of an anchored panel (live #200).
   // Same core, same results, same handlers — only the container differs, so the
   // two presentations cannot drift in what they offer.
-  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  const isPhone = usePhoneLayout();
   // Every row the keyboard can land on, the create row included — passed over, like a
   // disabled option, while a write lock holds it.
   const rows: readonly { disabled?: boolean }[] = showCreate
@@ -732,7 +732,7 @@ export function ComboboxPanel<V extends string | number>({
                 role="presentation"
                 className={cn(
                   "font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-                  isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-[11px] first:pt-1",
+                  isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-caption first:pt-1",
                 )}
               >
                 {o.group}
@@ -906,7 +906,8 @@ export function ComboboxPanel<V extends string | number>({
         top: placement.top,
         ...inline,
         width: rect.width,
-        minWidth: 220,
+        // 220 px at Normal, in rem so the panel's text keeps its room at Large (§3.2).
+        minWidth: "13.75rem",
         maxHeight: placement.maxHeight,
       }}
       className={cn(