@eifi1/ui-kit 0.31.1 → 0.32.0

package/src/components/slider.tsx

@@ -70,32 +70,45 @@ export function fromLogPosition(position: number, min: number, max: number, zero
 // runs the other way too. Firefox draws the fill itself with `::-moz-range-progress`,
 // which follows the direction on its own.
 //
-// The thumb's `-mt-[5px]` centres a 16px thumb on a 6px track: WebKit lays the thumb
-// out from the track's top edge, Firefox centres it, so only one carries the offset.
+// The thumb's `-mt-[0.3125rem]` centres a 1rem thumb on a 0.375rem track — half the
+// difference — in rem since 0.32 (§3.2): the thumb and track grow with the text, and the
+// 5px it was left the thumb low of the track at 125 % and further at 150 %. WebKit lays
+// the thumb out from the track's top edge, Firefox centres it, so only one carries the
+// offset.
 //
 // The focus ring goes on the THUMB, not the box: the box is the full width of the
 // row, and a ring round all of it says "this row is focused" rather than "the handle
 // you are about to move is". Offset in the surface colour, because the thumb is
-// --brand and a --brand ring touching it would be invisible.
+// --brand and a --brand ring touching it would be invisible. Its width is the kit's
+// focus frame (`--focus-ring-width`, §5) — spelt out per engine, since `FOCUS_RING`'s
+// classes cannot carry the pseudo-element.
+//
+// At Large the box is the 48 px touch target (§4) — the track stays centred in it, and
+// the marks row below is pulled up by as much (see `MARKS_LARGE`).
 const TRACK = [
-  "block h-6 w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed",
+  "block h-6 large:h-[48px] w-full cursor-pointer appearance-none bg-transparent focus:outline-none disabled:cursor-not-allowed",
   // WebKit / Blink
   "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full",
   "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
   "rtl:[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_left,var(--brand)_var(--slider-fill),var(--border-strong)_var(--slider-fill))]",
-  "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
+  "[&::-webkit-slider-thumb]:-mt-[0.3125rem] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none",
   "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--brand)] [&::-webkit-slider-thumb]:shadow",
-  "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-webkit-slider-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-webkit-slider-thumb]:ring-[var(--brand)]",
   "focus-visible:[&::-webkit-slider-thumb]:ring-offset-2 focus-visible:[&::-webkit-slider-thumb]:ring-offset-[var(--bg-surface)]",
   // Firefox
   "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[var(--border-strong)]",
   "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-[var(--brand)]",
   "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0",
   "[&::-moz-range-thumb]:bg-[var(--brand)] [&::-moz-range-thumb]:shadow",
-  "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
+  "focus-visible:[&::-moz-range-thumb]:ring-[length:var(--focus-ring-width)] focus-visible:[&::-moz-range-thumb]:ring-[var(--brand)]",
   "focus-visible:[&::-moz-range-thumb]:ring-offset-2 focus-visible:[&::-moz-range-thumb]:ring-offset-[var(--bg-surface)]",
 ].join(" ");
 
+// The marks row sits `-mt-1.5` under a 1.5rem box, tucked against the track. In the 48 px
+// box at Large the track's lower edge is `(48px + 0.375rem) / 2` down, so the row comes
+// up by `(48px − 0.375rem) / 2` less the same 0.1875rem gap: `24px − 0.375rem`.
+const MARKS_LARGE = "large:-mt-[calc(24px-0.375rem)]";
+
 /** A tick under the track. A bare number is a tick with no words. */
 export interface SliderMark {
   value: number;
@@ -293,7 +306,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
         // without a `translate` that would need flipping for right-to-left.
         <div
           aria-hidden
-          className={cn("relative mx-2 -mt-1.5", hasMarkLabels ? "h-5" : "h-1.5")}
+          className={cn("relative mx-2 -mt-1.5", MARKS_LARGE, hasMarkLabels ? "h-5" : "h-1.5")}
         >
           {normalizedMarks.map((m) => (
             <span
@@ -303,7 +316,7 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(
             >
               <span className="h-1.5 w-px shrink-0 bg-[var(--border-strong)]" />
               {m.label !== undefined && (
-                <span className="mt-0.5 select-none whitespace-nowrap text-[11px] leading-tight text-[var(--text-muted)]">
+                <span className="mt-0.5 select-none whitespace-nowrap text-caption leading-tight text-[var(--text-muted)]">
                   {m.label}
                 </span>
               )}

package/src/components/sparkline.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from "react";
 import { cn } from "../lib/cn";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useTextSize } from "../theme/text-size";
 
 /**
  * The words a sparkline speaks. It has no axes, no tooltip and no legend, so its
@@ -78,8 +79,12 @@ export interface SparklineProps
   /** The series, oldest first. `null`/`undefined`/`NaN` is a GAP — the line breaks
    *  there rather than drawing a zero or bridging across the missing point. */
   data: ReadonlyArray<number | null | undefined>;
-  /** Width in px. Ignored under `fluid`. */
+  /** Width in px at Normal. Ignored under `fluid`. The drawn box is this × the text
+   *  size's scale (0.32, docs/text-size-harmonization.md §3.2): a sparkline stands beside
+   *  a figure, and a 72 × 24 trend under a 150 % number reads as a speck. The strokes
+   *  stay px (`non-scaling-stroke`), as every chart's do. */
   width?: number;
+  /** Height in px at Normal, × the scale likewise. */
   height?: number;
   /** Fill the container's width instead of a fixed one (the height stays fixed). */
   fluid?: boolean;
@@ -182,6 +187,7 @@ export function Sparkline({
   ...rest
 }: SparklineProps) {
   const text = useKitLabels("sparkline", DEFAULT_SPARKLINE_LABELS, labels);
+  const { scale } = useTextSize();
   const kitLocale = useKitLocale(locale);
   const format = formatValue ?? defaultFormat(kitLocale);
 
@@ -252,8 +258,10 @@ export function Sparkline({
       role="img"
       aria-label={name}
       {...rest}
-      width={fluid ? "100%" : W}
-      height={H}
+      // The drawing stays in its own units (the viewBox); only the box it is shown in
+      // grows, uniformly, so nothing is distorted and the strokes keep their px width.
+      width={fluid ? "100%" : W * scale}
+      height={H * scale}
       viewBox={`0 0 ${W} ${H}`}
       preserveAspectRatio="none"
       className={cn(fluid ? "block w-full" : "inline-block shrink-0 align-middle", "overflow-visible", className)}

package/src/components/stat-tile.tsx

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels, useKitLink, useKitLocale } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 import { Card, FieldHint } from "./ui";
+import { useInlineFacts, useLargeText } from "../hooks/use-large-text";
 import { Sparkline } from "./sparkline";
 import { Tooltip } from "./tooltip";
 // The kit's one placeholder look, so a loading tile and the Skeleton list beside it
@@ -151,7 +152,11 @@ export interface StatTileProps
   /** The explanation behind a "?" beside the label (a {@link FieldHint}) — hidden
    *  until asked for, so it is for what a reader MIGHT want to know ("excludes
    *  transfers between your own accounts"). For a line everyone should read, use
-   *  {@link StatTileProps.description} instead. */
+   *  {@link StatTileProps.description} instead.
+   *
+   *  0.32 (docs/text-size-harmonization.md §4 "No fact only in a tooltip"): at Large
+   *  and Extra large, and on a touch screen, the words are shown under the label
+   *  instead of behind the "?". */
   hint?: string;
   /**
    * Keep the label to ONE line, cut with an ellipsis, and show the whole of it in a
@@ -169,6 +174,9 @@ export interface StatTileProps
    * your own `<Tooltip>` for the full text (keksdose's admin metrics-panel.tsx:134
    * does, from before this prop). A wrapped label shows a bubble even when nothing is
    * cut, and nests its trigger inside this one's.
+   *
+   * Ignored at Large and Extra large (0.32, §4): nothing truncates there, and the full
+   * label would otherwise be a fact only in a tooltip.
    */
   truncateLabel?: boolean;
   /**
@@ -199,6 +207,15 @@ export interface StatTileProps
    * Withheld while `loading`, like the sub-values.
    */
   projection?: StatTileSubValue;
+  /**
+   * Smaller figures under the headline, label left and figure right.
+   *
+   * At Large and Extra large (0.32, §4 "StatTile shows its one big number; the sparkline
+   * and sub-values move below"): the tile leads with the headline and its delta, and the
+   * projection, these rows and the sparkline follow beneath the description, each row's
+   * label over its figure — a 2-up tile at 150 % is 120 px of text wide, and a label
+   * beside a figure there squeezed both.
+   */
   subValues?: StatTileSubValue[];
   /** Shorthand for a fluid {@link Sparkline} named after the tile and speaking in
    *  the tile's number format. The name is the label's text; see
@@ -310,6 +327,11 @@ export function StatTile({
   ...rest
 }: StatTileProps) {
   const text = useKitLabels("statTile", DEFAULT_STAT_TILE_LABELS, labels);
+  // §4: at Large the one big number leads and the rest follows below it; the label
+  // never truncates; on touch or at Large the hint is words, not a "?".
+  const large = useLargeText();
+  const inlineHint = useInlineFacts() && !!hint;
+  if (large) truncateLabel = false;
   // A loading StatTileGrid puts every tile in it into the loading state and says
   // "Loading…" ONCE for all of them; the tile then keeps its own sentence to itself
   // (see StatTileGrid's `loading`).
@@ -342,7 +364,9 @@ export function StatTile({
   const stretched = cn(
     "text-start uppercase tracking-wide",
     "after:absolute after:inset-0 after:rounded-lg after:content-['']",
-    "focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
+    // The kit's focus frame (0.32, §5), on the overlay — `FOCUS_RING`'s classes cannot
+    // carry the `after:`, so its width is spelt out.
+    "focus-visible:outline-none focus-visible:after:ring-[length:var(--focus-ring-width)] focus-visible:after:ring-inset focus-visible:after:ring-[var(--brand)]",
   );
   const describedBy = d ? `${valueId} ${deltaId}` : valueId;
   let labelNode: ReactNode = label;
@@ -417,7 +441,7 @@ export function StatTile({
       {!gridLoading && <span className="sr-only">{text.loading}</span>}
     </span>
   ) : hasValue ? (
-    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && "ms-auto")}>
+    <span id={valueId} data-private={priv} className={cn(valueClass, valueLabel != null && !large && "ms-auto")}>
       {show(value)}
       {unit != null && (
         <span className="ms-1 text-[0.7em] font-medium text-[var(--text-muted)]">{unit}</span>
@@ -480,7 +504,7 @@ export function StatTile({
             </span>
           )}
           {/* Above the stretched link's overlay, so it stays hoverable and focusable. */}
-          {hint && <FieldHint label={hint} side="top" className="relative z-10 shrink-0" />}
+          {hint && !inlineHint && <FieldHint label={hint} side="top" className="relative z-10 shrink-0" />}
         </div>
         {icon != null && (
           <span aria-hidden className="shrink-0 text-[var(--text-muted)] [&_svg]:size-4">
@@ -489,10 +513,19 @@ export function StatTile({
         )}
       </div>
 
+      {inlineHint && (
+        // §4: the hint as words under the label — the same muted type as `description`,
+        // in the reading case of a sentence rather than the label's capitals.
+        <p data-slot="stat-tile-hint" className="mt-0.5 text-xs text-[var(--text-muted)]">
+          {hint}
+        </p>
+      )}
+
       {valueLabel != null ? (
         // Period-left / value-right, matching the sub-rows below it. flex-wrap lets a
-        // too-long amount drop to its own end-aligned line instead of overflowing.
-        <div className="mt-1 flex flex-wrap items-baseline gap-x-1.5">
+        // too-long amount drop to its own end-aligned line instead of overflowing. At
+        // Large the period goes over the figure, which then has the tile's width.
+        <div className={cn("mt-1 flex items-baseline gap-x-1.5", large ? "flex-col items-start" : "flex-wrap")}>
           <span className="shrink-0 text-xs uppercase tracking-wide text-[var(--text-muted)]">{valueLabel}</span>
           {headline}
         </div>
@@ -500,7 +533,9 @@ export function StatTile({
         <div className="mt-1">{headline}</div>
       )}
 
-      {!loading && projection && (
+      {/* At Large the delta and description follow the figure at once, and the
+          projection moves down with the other figures (see `subValues`). */}
+      {!large && !loading && projection && (
         <dl className="mt-0.5">
           <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />
         </dl>
@@ -508,16 +543,25 @@ export function StatTile({
 
       {deltaNode}
       {description != null && <div className="mt-1 text-xs text-[var(--text-muted)]">{description}</div>}
-      {graphic && <div className="mt-2">{graphic}</div>}
+      {!large && graphic && <div className="mt-2">{graphic}</div>}
 
-      {!loading && subValues && subValues.length > 0 && (
-        <dl className="mt-1.5 space-y-0.5">
-          {subValues.map((sv, i) => (
-            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} />
+      {!loading && ((large && projection) || (subValues && subValues.length > 0)) && (
+        <dl data-slot="stat-tile-figures" className={cn("mt-1.5", large ? "space-y-1.5" : "space-y-0.5")}>
+          {large && projection && (
+            <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} stacked />
+          )}
+          {subValues?.map((sv, i) => (
+            <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />
           ))}
         </dl>
       )}
 
+      {large && graphic && (
+        <div data-slot="stat-tile-graphic" className="mt-2">
+          {graphic}
+        </div>
+      )}
+
       {footer != null && <div className="mt-2">{footer}</div>}
     </Card>
   );
@@ -529,11 +573,14 @@ function FigureRow({
   tileTone,
   show,
   priv,
+  stacked = false,
 }: {
   figure: StatTileSubValue;
   tileTone: StatTileTone;
   show: (v: ReactNode) => ReactNode;
   priv: "" | undefined;
+  /** The label over the figure (Large, §4) instead of beside it. */
+  stacked?: boolean;
 }) {
   const own = figure.tone ?? (tileTone === "neutral" ? undefined : tileTone);
   const svTone = own === "none" ? undefined : own;
@@ -543,11 +590,20 @@ function FigureRow({
   // the period it belongs to. Now the label breaks within itself and the amount stays
   // on the label's first line, end-aligned like every other row.
   return (
-    <div className="flex items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
+    <div
+      className={cn(
+        "flex text-xs tabular-nums text-[var(--text-muted)]",
+        stacked ? "flex-col items-start" : "items-baseline gap-x-2",
+      )}
+    >
       <dt className="min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]">{figure.label}</dt>
       <dd
         data-private={priv}
-        className={cn("ms-auto shrink-0 whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
+        className={cn(
+          "shrink-0 whitespace-nowrap",
+          !stacked && "ms-auto",
+          svTone && [toneClass(svTone, figure.value), "opacity-75"],
+        )}
       >
         {show(figure.value)}
       </dd>

package/src/components/swipeable-row.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useRowSwipe, type SwipeStage } from "../hooks/use-row-swipe";
 import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels";
 
@@ -270,7 +271,7 @@ export function SwipeableRow({
               className={cn(
                 "sr-only whitespace-nowrap rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm",
                 "focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5",
-                "focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+                FOCUS_RING,
               )}
             >
               {/* The label is the button's accessible name, so the caller's icon is

package/src/components/switch.tsx

@@ -2,7 +2,14 @@ import { forwardRef, useId } from "react";
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { hasMessage, mergeDescribedBy } from "./choice-parts";
-import { LockedReason, useLockReason } from "./field-parts";
+import {
+  DISABLED_REASON_LINE_CLASS,
+  LockedReason,
+  useDisabledReasonLine,
+  useLockReason,
+  type DisabledReasonDisplay,
+} from "./field-parts";
+import { FOCUS_RING } from "./focus-ring";
 
 /**
  * An on/off switch that is still `<input type="checkbox">`, with `role="switch"`.
@@ -14,16 +21,20 @@ import { LockedReason, useLockReason } from "./field-parts";
  * the moment it is flipped; a choice that waits for a Save button is a checkbox.
  */
 
-/** Geometry per size. The thumb sits `2px` in from each end of the track, so its
- *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a
- *  `translate-x`: an inline-start offset follows the writing direction, so in a
- *  right-to-left form the thumb travels right-to-left with no `rtl:` override to
- *  keep in step. */
+/** Geometry per size. The thumb sits `start-0.5` (0.125rem, 2 px at Normal) in from
+ *  each end of the track, so its checked offset is `track width − thumb − 0.125rem`.
+ *  All of it in rem since 0.32 (docs/text-size-harmonization.md §3.2, §4): the track
+ *  and thumb already grew with the text, and a checked offset left in px (14 / 18) put
+ *  the thumb short of the end at 125 % and in the middle at 150 %. `start-*`, never
+ *  `left-*` or a `translate-x`: an inline-start offset follows the writing direction,
+ *  so in a right-to-left form the thumb travels right-to-left with no `rtl:` override
+ *  to keep in step. */
 const SIZES = {
-  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.
-  sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:start-[14px]" },
-  // 36×20 track, 16px thumb.
-  md: { track: "h-5 w-9", thumb: "size-4 peer-checked:start-[18px]" },
+  // 1.75 × 1rem track, 0.75rem thumb (28×16 / 12 at Normal): the dense setting rows in
+  // Kastlan's tables. Checked: 1.75 − 0.75 − 0.125 = 0.875rem.
+  sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:start-3.5" },
+  // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.
+  md: { track: "h-5 w-9", thumb: "size-4 peer-checked:start-4.5" },
 } as const;
 
 export type SwitchSize = keyof typeof SIZES;
@@ -38,7 +49,8 @@ export type SwitchSize = keyof typeof SIZES;
 const TRACK =
   "peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors " +
   "checked:bg-[var(--brand)] " +
-  "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] " +
+  // The kit's focus frame (§5), stood off the track so it never merges with the fill.
+  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] ` +
   "disabled:cursor-not-allowed";
 
 // The thumb, laid over the input and ignoring the pointer so every click still reaches
@@ -93,6 +105,13 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
    * switch anew (it 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 in the words column under the description (a
+   * bare switch: under the track), and in the tooltip otherwise. See
+   * {@link DisabledReasonDisplay}.
+   */
+  disabledReasonDisplay?: DisabledReasonDisplay;
   /**
    * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it
    * is locked the `disabledReason` way with the lock's reason (which wins over its
@@ -122,6 +141,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
     disabled,
     required,
     disabledReason,
+    disabledReasonDisplay,
     commit,
     onClick,
     ...rest
@@ -132,6 +152,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
   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, as for `disabled`.
   const looksDisabled = Boolean(disabled) || locked;
@@ -177,21 +198,28 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
     </span>
   );
   // The Tooltip goes round the track, not the row — the row is the caller's layout. A
-  // bare switch hands its `className` to the wrapper, then the outermost element.
-  const control = locked ? (
-    <LockedReason lock={lock} className={cn("shrink-0", bare && className)}>
-      {track}
-    </LockedReason>
-  ) : (
-    track
-  );
+  // bare switch hands its `className` to the wrapper, then the outermost element. With
+  // words beside it, the reason LINE goes under them instead (below), so the track
+  // stays where the row puts it.
+  const lineInWords = locked && reasonLine && !bare;
+  const control =
+    locked && !lineInWords ? (
+      <LockedReason lock={lock} line={reasonLine} className={cn("shrink-0", bare && className)}>
+        {track}
+      </LockedReason>
+    ) : (
+      track
+    );
 
   if (bare) return control;
 
-  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the
+  // The switch's cell is one label line tall (text-sm, 1.25rem) so it centres on the
   // FIRST line of a label that wraps, and a description underneath does not drag it
   // down to the middle of the paragraph.
-  const cell = <span className="flex h-5 shrink-0 items-center">{control}</span>;
+  // With the reason line in the words, the row's fade moves onto its parts: the line is
+  // the one thing on the row still to be read, and at 60 % it would not be.
+  const dimParts = lineInWords;
+  const cell = <span className={cn("flex h-5 shrink-0 items-center", dimParts && "opacity-60")}>{control}</span>;
   const words = (
     <span className="min-w-0 flex-1">
       {label !== undefined && (
@@ -200,6 +228,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
           className={cn(
             "block text-sm leading-5 text-[var(--text-primary)]",
             looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none",
+            dimParts && "opacity-60",
           )}
         >
           {label}
@@ -211,15 +240,20 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
         </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>
+      )}
     </span>
   );
 
   return (
-    <div className={cn("flex items-start gap-3", looksDisabled && "opacity-60", className)}>
+    <div className={cn("flex items-start gap-3", looksDisabled && !dimParts && "opacity-60", className)}>
       {switchPosition === "end" ? (
         <>
           {words}

package/src/components/table.tsx

@@ -242,7 +242,7 @@ const STACK_PHONE_CLASSES = cn(
   "max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start",
   "max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5",
   "max-sm:[&_tbody_td:first-child]:font-medium",
-  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-[11px] max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
+  "max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]",
 );
 
 /**
@@ -353,7 +353,7 @@ export function Table({
           // rounded corners.
           framed && "rounded-md border border-[var(--border)]",
           THIN_SCROLLBAR_CLASS,
-          "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+          "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
           wrapperClassName,
         )}
       >

package/src/components/text-link.tsx

@@ -288,7 +288,7 @@ export function TextLink({
 
   const look = cn(
     "rounded-sm underline-offset-2 transition-colors",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
     TONE[tone],
     UNDERLINE[underline],
     ariaCurrent && "font-semibold",

package/src/components/text.tsx

@@ -35,10 +35,14 @@ export type SectionLabelSize = "xs" | "md" | "sm";
  * reached as a string than wrapped in a component that only takes a `className`. The
  * uppercase is CSS, so a screen reader reads the text as written: write it in normal
  * case.
+ *
+ * The sizes are the kit's named rem steps since 0.32 (`text-micro` 0.625rem,
+ * `text-caption` 0.6875rem — 10 and 11 px at Normal), so a label grows with the text
+ * size like everything around it (docs/text-size-harmonization.md §3.2).
  */
 export const SECTION_LABEL_CLASS: Record<SectionLabelSize, string> = {
-  xs: "text-[10px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
-  md: "text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  xs: "text-micro font-semibold uppercase tracking-wide text-[var(--text-muted)]",
+  md: "text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]",
   sm: "text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]",
 };
 
@@ -61,8 +65,8 @@ export type SectionLabelVariant = "plain" | "band";
  *  a font-size arbitrary `text-` value from a colour one. (Not spelt out as class
  *  names here: Tailwind scans comments, and a literal one broke the showcase CSS.) */
 const SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {
-  xs: "text-[10px]",
-  md: "text-[11px]",
+  xs: "text-micro",
+  md: "text-caption",
   sm: "text-xs",
 };
 const BAND =
@@ -112,14 +116,15 @@ export function SectionLabel({
 /* ── Caption ──────────────────────────────────────────────────────────────── */
 
 /**
- * The caption type as a class string: 11px, snug, muted. lenkbank's `CAPTION`
+ * The caption type as a class string: `text-caption` (0.6875rem, 11 px at Normal, §3.2),
+ * snug, muted. lenkbank's `CAPTION`
  * (shared/ui/caption.ts:23) — written out 31 times before it was a constant — as a
  * token colour rather than `slate-500 dark:slate-400`, so it follows the palette.
  * Exported for the same reason lenkbank's is a string: every caller positions it
  * differently (`mt-1`, `self-end pb-2`, `border-t`), and what must be one thing is the
  * type, not the box.
  */
-export const CAPTION_CLASS = "text-[11px] leading-snug text-[var(--text-muted)]";
+export const CAPTION_CLASS = "text-caption leading-snug text-[var(--text-muted)]";
 
 export interface CaptionProps extends ComponentPropsWithoutRef<"p"> {
   /** Default `p`; `span` for a caption inside a line of other content. */

package/src/components/tile-radio.tsx

@@ -2,6 +2,7 @@ import { useId, useRef } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { Ban, Check } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { Tooltip } from "./tooltip";
 
@@ -133,7 +134,9 @@ export interface TileRadioGroupProps<T extends string> {
  */
 const TILE_BASE =
   "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors " +
-  "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] " +
+  "focus:outline-none " +
+  FOCUS_RING +
+  " focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] " +
   "disabled:cursor-not-allowed disabled:opacity-50";
 const TILE_IDLE =
   "border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]";

package/src/components/toast.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState, useSyncExternalStore } from "react";
 import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from "react";
 import { useKitLabels } from "../i18n/kit-labels";
-import { useMediaQuery } from "../hooks/use-media-query";
-import { PHONE_QUERY } from "./ui";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 
 /**
  * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.
@@ -298,7 +297,9 @@ export type ToastPosition =
 
 export type ToastSwipeDirection = "top" | "right" | "bottom" | "left";
 
-/** sonner's offset: one value for every edge, or per edge. Numbers are px. */
+/** sonner's offset: one value for every edge, or per edge. Numbers are px, which do not
+ *  follow the text size — prefer a CSS length (rem, or a `calc()` on
+ *  {@link TOASTER_OFFSET_TOP} / {@link TOASTER_OFFSET_BOTTOM}). */
 export type ToasterOffset =
   | string
   | number
@@ -397,6 +398,22 @@ function subscribeDocumentTheme(onChange: () => void): () => void {
 
 const px = (v: string | number) => (typeof v === "number" ? `${v}px` : v);
 
+/**
+ * The Toaster's default distance from the top edge (desktop), as a CSS length (0.32,
+ * docs/text-size-harmonization.md §10.11): below a 3rem top bar with 1rem to spare, and
+ * the safe area. In rem, so it moves with the text size along with the top bar — an
+ * app's `offset={{ top: 64 }}` (keksdose) did not. Pass it, or a `calc()` built on it,
+ * instead of a px number.
+ */
+export const TOASTER_OFFSET_TOP = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+
+/**
+ * The Toaster's default distance from the bottom edge (phone), as a CSS length: above
+ * AppShell's measured bottom nav (`--app-nav-h`) or the home indicator, whichever is
+ * taller, with 0.75rem to spare.
+ */
+export const TOASTER_OFFSET_BOTTOM = "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.75rem)";
+
 /**
  * Where the toasts appear, with the kit's defaults — mount ONE, near the root and
  * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a
@@ -480,14 +497,17 @@ export function Toaster({
   }, [dismissOnMiddleClick, mod]);
 
   const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => "light" as const);
-  const phone = useMediaQuery(PHONE_QUERY, false);
+  const phone = usePhoneLayout();
   const resolved: ToastPosition = position ?? (phone ? "bottom-center" : "top-center");
 
   // Above the bottom nav and the home indicator: whichever is taller, since the nav
   // already pads itself by the safe area (the same sum BulkActionBar floats on).
-  const bottom = `calc(max(${navOffset === undefined ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;
-  // Below a 48px TopBar with the same 1rem clearance.
-  const top = "calc(env(safe-area-inset-top, 0px) + 4rem)";
+  const bottom =
+    navOffset === undefined
+      ? TOASTER_OFFSET_BOTTOM
+      : `calc(max(${px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;
+  // Below a 3rem TopBar with the same 1rem clearance.
+  const top = TOASTER_OFFSET_TOP;
   const computed = resolved.startsWith("bottom") ? { bottom } : { top };
 
   if (!mod) return null;