@eifi1/ui-kit 0.31.1 → 0.32.1

package/src/components/inline-edit-field.tsx

@@ -4,6 +4,7 @@ import { cn } from "../lib/cn";
 import { useAnnounce } from "../hooks/use-announce";
 import { useKitLabels } from "../i18n/kit-labels";
 import { Input, Spinner } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
 import { Tooltip } from "./tooltip";
 import { useCommitReason } from "./write-lock";
 
@@ -154,6 +155,23 @@ function RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render:
   return render(props);
 }
 
+/**
+ * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;
+ * docs/text-size-harmonization.md §4 "nothing truncates"): the display button, the
+ * locked one and the read-only text wrap instead of ending in "…", and break a word too
+ * long for the cell, so an IBAN or an e-mail address shows to its last character. The
+ * value IS the button's accessible name and the thing being edited: a reader who needs
+ * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of
+ * these keeps its one-line cells at Normal.
+ *
+ * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's
+ * budget and invoice lines), and `anywhere` lowers the value's min-content width to one
+ * letter, so an auto-sized column could squeeze an amount to a digit per line. With
+ * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider
+ * than a sized cell still breaks.
+ */
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
+
 /** `onCommit`'s result, if it is a promise. */
 function asPromise(result: unknown): Promise<unknown> | null {
   return result && typeof (result as Promise<unknown>).then === "function" ? (result as Promise<unknown>) : null;
@@ -414,7 +432,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
   let body: ReactNode;
   if (readOnly) {
     body = (
-      <span {...private_} className={cn("block min-w-0 truncate", alignClass)}>
+      <span {...private_} className={cn("block min-w-0 truncate", VALUE_WRAP_AT_LARGE, alignClass)}>
         {content}
       </span>
     );
@@ -467,7 +485,7 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
           {pending && <Spinner label={null} className="size-4 shrink-0" />}
         </div>
         {failed && (
-          <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)]">
             {failure}
           </p>
         )}
@@ -490,7 +508,9 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
             aria-describedby={reasonId}
             onClick={(e) => e.preventDefault()}
             className={cn(
-              "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+              "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none",
+              VALUE_WRAP_AT_LARGE,
+              FOCUS_RING,
               alignClass,
             )}
           >
@@ -513,7 +533,9 @@ export function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {
           {...private_}
           onClick={() => setOpen(true)}
           className={cn(
-            "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+            "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none",
+            VALUE_WRAP_AT_LARGE,
+            FOCUS_RING,
             alignClass,
           )}
         >

package/src/components/legal-page.tsx

@@ -9,6 +9,7 @@ import { cn } from "../lib/cn";
 import { Checkbox } from "./checkbox";
 import type { CheckboxProps } from "./checkbox";
 import {
+  DEFAULT_LEGAL_LABELS,
   LEGAL_HREFS,
   baseLanguage,
   LegalFooter,
@@ -22,6 +23,7 @@ import {
   warnLegalOnce,
 } from "./legal";
 import type {
+  LegalDisclaimerSectionLabels,
   LegalFramedSectionLabels,
   LegalLabels,
   LegalOperator,
@@ -163,6 +165,7 @@ export type LegalKitSectionProps = LegalKitSectionBase &
   (
     | {
         section: "browser";
+        variant?: never;
         /** What this app keeps in the browser, one entry per item — rendered as a `<ul>`
          *  between the kit's two sentences. The app's words, in every language it serves. */
         entries: readonly string[];
@@ -171,6 +174,7 @@ export type LegalKitSectionProps = LegalKitSectionBase &
       }
     | {
         section: "legal_basis" | "rights";
+        variant?: never;
         entries?: never;
         /** `legal_basis`: after the kit's paragraph (consent, where an app relies on
          *  it). `rights`: between the list of rights and the supervisory authorities
@@ -179,12 +183,28 @@ export type LegalKitSectionProps = LegalKitSectionBase &
         children?: ReactNode;
       }
     | {
-        section: Exclude<LegalKitSectionKey, "browser" | "legal_basis" | "rights">;
+        section: "disclaimer";
+        /**
+         * 0.32.0 (docs/billing-harmonization.md §8, legal decision 7): which disclaimer.
+         * `non-commercial` (default) is the beta's "private, non-commercial project";
+         * `commercial` is for an app that charges, sold through a Merchant of Record —
+         * chosen per app, in the release that turns its billing on.
+         */
+        variant?: LegalDisclaimerVariant;
+        entries?: never;
+        children?: never;
+      }
+    | {
+        section: Exclude<LegalKitSectionKey, "browser" | "legal_basis" | "rights" | "disclaimer">;
+        variant?: never;
         entries?: never;
         children?: never;
       }
   );
 
+/** 0.32.0: the imprint disclaimer's two texts — see {@link LegalKitSectionProps}. */
+export type LegalDisclaimerVariant = "non-commercial" | "commercial";
+
 /** The app's paragraph: a plain string as running text (line breaks kept, refs
  *  resolved), anything else as it is. */
 function appPart(children: ReactNode): ReactNode {
@@ -261,7 +281,13 @@ export function LegalKitSection(props: LegalKitSectionProps) {
       parts = [lead, app, tail];
     }
   } else {
-    parts = [<LegalText key="body" text={fill(entry.body)} />, app];
+    // The imprint's commercial disclaimer (0.32.0): its own body under the same title.
+    const commercial =
+      props.section === "disclaimer" && props.variant === "commercial"
+        ? ((entry as LegalDisclaimerSectionLabels).commercial ??
+          DEFAULT_LEGAL_LABELS.sections.impressum.disclaimer.commercial)
+        : undefined;
+    parts = [<LegalText key="body" text={commercial ?? fill(entry.body)} />, app];
   }
 
   return (

package/src/components/legal.tsx

@@ -132,6 +132,21 @@ export interface LegalTextSectionLabels {
   body: string;
 }
 
+/**
+ * 0.32.0: the imprint's disclaimer, with the body of its COMMERCIAL variant
+ * (docs/billing-harmonization.md §8; legal decision 7). The title is the same in both:
+ * liability for content and links is the subject either way.
+ */
+export interface LegalDisclaimerSectionLabels extends LegalTextSectionLabels {
+  /**
+   * The body for `<LegalKitSection section="disclaimer" variant="commercial">`: a paid
+   * service sold through a Merchant of Record, which sells in its own name (§2.2), so the
+   * "private, non-commercial … closed beta" of `body` would be untrue. OPTIONAL, as every
+   * key added to a namespace an app may annotate: left out, the provider's, then English.
+   */
+  commercial?: string;
+}
+
 /** A kit section whose text names the operator (§4.3 `{name}`, `{email}`, …). */
 export interface LegalOperatorSectionLabels {
   title: string;
@@ -197,7 +212,8 @@ export interface LegalLabels {
     impressum: {
       operator: LegalOperatorSectionLabels;
       contact: LegalOperatorSectionLabels;
-      disclaimer: LegalTextSectionLabels;
+      /** `body` is the default, non-commercial text; `commercial` the 0.32 variant. */
+      disclaimer: LegalDisclaimerSectionLabels;
     };
     privacy: {
       controller: LegalOperatorSectionLabels;
@@ -260,6 +276,8 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
       disclaimer: {
         title: "Liability for content and links",
         body: "This is a private, non-commercial project offered during a closed beta, without warranty. External sites we link to are the responsibility of their respective operators; we have no control over their content.",
+        commercial:
+          "This is a commercial service. Paid plans are sold by our reseller, which acts as the Merchant of Record: it sells the subscription in its own name, takes the payment, issues the invoice and handles VAT, and its terms of sale apply to the purchase. We take care that the content of this service is accurate, but cannot guarantee that it is complete or up to date. External sites we link to are the responsibility of their respective operators; we have no control over their content.",
       },
     },
     privacy: {

package/src/components/lightbox.tsx

@@ -6,6 +6,7 @@ import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { useKitLabels } from "../i18n/kit-labels";
 import { useAuthedSrc } from "../hooks/use-authed-src";
+import { useBreakpoint } from "../hooks/use-breakpoint";
 import type { AuthedFetcher } from "../hooks/use-authed-src";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { IconButton, buttonClasses } from "./ui";
@@ -169,6 +170,16 @@ export function Lightbox({
   const anchorRef = useRef<HTMLSpanElement>(null);
   const dir = useAnchorDir(anchorRef, open);
 
+  // The toolbar's words (docs/text-size-harmonization.md §4, §10.8). At Large an
+  // IconButton shows its label beside the glyph; on a narrow screen the viewer's header —
+  // the counter, Zoom, Download and the dialog's close — has no room for two words at
+  // 150 % (a 390 px phone is 260 px of Normal type), so below `sm` the toolbar keeps its
+  // icons, as the plain download link hides its word there (`max-sm:sr-only`). From `sm`
+  // up, at the same breakpoint the CSS uses, the words show. Each name stays the
+  // accessible name and the tooltip either way.
+  const narrow = useBreakpoint("max-sm");
+  const toolbarLabelVisible = narrow ? false : undefined;
+
   const fetched = useAuthedSrc(item?.src, { fetcher, enabled: open });
   const kind = item ? imageItemKind(item, fetched.type) : "image";
 
@@ -236,7 +247,12 @@ export function Lightbox({
   const downloadControl =
     download && item ? (
       onDownload ? (
-        <IconButton size="sm" label={labels.download} onClick={() => onDownload(item, index)}>
+        <IconButton
+          size="sm"
+          label={labels.download}
+          labelVisible={toolbarLabelVisible}
+          onClick={() => onDownload(item, index)}
+        >
           <Download />
         </IconButton>
       ) : downloadHref ? (
@@ -264,7 +280,13 @@ export function Lightbox({
       </span>
       <span className="min-w-0 flex-1" />
       {zoomEnabled && kind === "image" && (
-        <IconButton size="sm" label={labels.zoom} pressed={zoomed} onClick={toggleZoom}>
+        <IconButton
+          size="sm"
+          label={labels.zoom}
+          labelVisible={toolbarLabelVisible}
+          pressed={zoomed}
+          onClick={toggleZoom}
+        >
           <ZoomIn />
         </IconButton>
       )}

package/src/components/line-items.tsx

@@ -384,6 +384,12 @@ export function LineItems<T>({
         variant={isConfirming ? "danger" : "ghost"}
         tone={isConfirming ? undefined : "danger"}
         label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}
+        // The icon alone at every text size (docs/text-size-harmonization.md §10.8): the
+        // row's one control, in a grid column sized for an icon, whose name becomes a
+        // sentence while it waits ("Remove row 3? Press again to confirm") — as text at
+        // Large it would push the row's fields aside and change width between the two
+        // presses. The name stays the accessible name; the red fill says "confirm".
+        labelVisible={false}
         disabled={!canRemove}
         onClick={() => void removeAt(index)}
         onBlur={() => {
@@ -588,7 +594,7 @@ export function LineItems<T>({
       )}
 
       {hasError && (
-        <p className="text-[11px] leading-tight text-[var(--danger)]">
+        <p className="text-caption leading-tight text-[var(--danger)]">
           {error}
         </p>
       )}

package/src/components/list.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement
 import { ChevronDown, ExternalLink } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
-import { Spinner } from "./ui";
+import { FOCUS_RING, Spinner } from "./ui";
 import { StatusDot } from "./status-dot";
 import { Collapse } from "./disclosure";
 import { toneTextClass } from "./signed-amount";
@@ -114,8 +114,20 @@ const PAD: Record<
  *  colour of the slot's own, so an element's colour (or the row's) stands. */
 export type ListItemTrailingTone = TextTone | "inherit";
 
-const TARGET_RING =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+// The kit's focus frame (§5), inset so the row's own border and its neighbours do not
+// clip it.
+const TARGET_RING = cn(FOCUS_RING, "focus-visible:ring-inset");
+
+/**
+ * §4 "ListItem: title, subtitle and meta wrap instead of truncating" at Large and Extra
+ * large (docs/text-size-harmonization.md). `large:` variants over the Normal look, so
+ * a list keeps its one-height rows at Normal and costs no render to switch: a one-line
+ * `truncate` wraps (and breaks a word too long for the row), a `line-clamp-2` lets go.
+ * An ellipsis hides the end of a name, which is the part a reader who needs big type
+ * cannot recover by squinting.
+ */
+const WRAP_AT_LARGE = "large:whitespace-normal large:[overflow-wrap:anywhere]";
+const UNCLAMP_AT_LARGE = "large:line-clamp-none";
 
 interface ListItemBaseProps {
   /** The row's name: one line, truncated — unless {@link titleLines} says otherwise. */
@@ -410,6 +422,11 @@ interface NotExpandable {
  * One row of a {@link List}: leading icon or avatar, title and subtitle (both
  * truncating by default), a trailing slot, and — beside the row, not inside it — its actions.
  *
+ * At Large and Extra large (0.32, docs/text-size-harmonization.md §4) nothing in it
+ * truncates: the overline, title, subtitle and meta wrap, a two-line clamp lets go, and
+ * a trailing slot drops under the text when the two no longer fit side by side. The
+ * rows lose their one height there; that is the trade the reader asked for.
+ *
  * All three apps draw this row by hand, a dozen times: kastlan's units
  * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity
  * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)
@@ -506,9 +523,12 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         />
       )}
       {leading}
-      <span className="flex min-w-0 flex-1 flex-col">
+      {/* With a trailing slot, a basis at Large: below it the trailing chip or figure
+          wraps under the text (the target wraps, see `target`) rather than squeezing the
+          now-wrapping title into a column one word wide (§4, 240 px effective width). */}
+      <span className={cn("flex min-w-0 flex-1 flex-col", trailing != null && "large:basis-40")}>
         {overline != null && (
-          <span className="block truncate text-[11px] font-medium leading-snug text-[var(--text-muted)]">
+          <span className={cn("block truncate text-caption font-medium leading-snug text-[var(--text-muted)]", WRAP_AT_LARGE)}>
             {overline}
           </span>
         )}
@@ -517,7 +537,11 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           id={stacked ? titleId : undefined}
           className={cn(
             "block text-sm text-[var(--text-primary)]",
-            titleLines === 1 ? "truncate" : titleLines === 2 ? "line-clamp-2 break-words" : "break-words",
+            titleLines === 1
+              ? cn("truncate", WRAP_AT_LARGE)
+              : titleLines === 2
+                ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE)
+                : "break-words",
             unread ? "font-semibold" : "font-medium",
           )}
         >
@@ -529,7 +553,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           <span
             className={cn(
               "block text-xs text-[var(--text-muted)]",
-              subtitleLines === 2 ? "line-clamp-2" : "truncate",
+              subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : cn("truncate", WRAP_AT_LARGE),
             )}
           >
             {subtitle}
@@ -538,8 +562,8 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         {meta != null && (
           <span
             className={cn(
-              "mt-0.5 text-[11px] leading-snug text-[var(--text-muted)]",
-              metaWrap ? "flex flex-wrap items-center gap-1" : "block truncate",
+              "mt-0.5 text-caption leading-snug text-[var(--text-muted)]",
+              metaWrap ? "flex flex-wrap items-center gap-1" : cn("block truncate", WRAP_AT_LARGE),
             )}
           >
             {meta}
@@ -550,7 +574,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
       {trailing != null && (
         <span
           className={cn(
-            "flex shrink-0 items-center gap-2 text-xs",
+            "flex shrink-0 items-center gap-2 text-xs large:ms-auto",
             trailingTone !== "inherit" && toneTextClass(trailingTone),
           )}
         >
@@ -582,6 +606,8 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
 
   const target = cn(
     "flex min-w-0 flex-1 text-start",
+    // §4 at Large: the trailing slot drops under the text when both no longer fit.
+    trailing != null && "large:flex-wrap",
     align === "start" ? "items-start" : "items-center",
     pad.target,
     // When stacked the target is the top of the box, not all of it, so it takes its

package/src/components/measured-grid.tsx

@@ -8,9 +8,9 @@ import { horizontalStep } from "../lib/direction";
 // be either and the line decides. See the three named rules at the top of table-text.
 import { cellNumber, isCellNumber, parseRows, splitRow } from "../lib/table-text";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { useWindowedRows } from "../hooks/use-windowed-rows";
+import { useWindowedRows, WINDOWED_ROW_INDEX } from "../hooks/use-windowed-rows";
 import { ToggleGroup } from "./toggle-group";
-import { Button, FIELD_INVALID, Textarea } from "./ui";
+import { Button, FIELD_INVALID, FIELD_TOUCH_TEXT, FOCUS_RING, Textarea } from "./ui";
 
 /**
  * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a
@@ -101,8 +101,10 @@ export type MeasuredGridView = "cells" | "text";
  *  empty cell is a hole in the measurement, and a table with a hole is not one to save. */
 const BLANK = "";
 
-/** Height of one grid row, in pixels. Fixed, which is what lets the windowing be
- *  arithmetic rather than measurement. */
+/** Height of one grid row at Normal text size, in px — the windowing's ESTIMATE since
+ *  0.32 (docs/text-size-harmonization.md §10.9): `useWindowedRows` multiplies it by the
+ *  text size's scale (35 px at Large, 42 at Extra large) and then measures the rows it
+ *  renders, so a row is never cut to a height the type has outgrown. */
 const DEFAULT_ROW_HEIGHT = 28;
 
 const ALL_VIEWS: readonly MeasuredGridView[] = ["cells", "text"];
@@ -218,7 +220,9 @@ export interface MeasuredGridProps
   /** Which views the toggle offers, the first being where it opens. Default both;
    *  one view hides the toggle. */
   views?: ReadonlyArray<MeasuredGridView>;
-  /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */
+  /** A row's height at Normal text size, in px. Default 28. Since 0.32 it is the
+   *  windowing's estimate and each row's minimum, multiplied by the text size's scale;
+   *  the rendered rows are measured (docs/text-size-harmonization.md §10.9). */
   rowHeight?: number;
   /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,
    *  and for the row numbers; else the `<UiKitProvider locale>`. */
@@ -288,7 +292,7 @@ export function MeasuredGrid({
     // to the initial containing block (see sr-only-containment.test).
     <div {...rest} className={cn("relative", className)}>
       <div className="mb-1 flex flex-wrap items-center justify-between gap-2">
-        <span id={labelId} className="text-[11px] font-medium text-[var(--text-muted)]">
+        <span id={labelId} className="text-caption font-medium text-[var(--text-muted)]">
           {label}
         </span>
         {offered.length > 1 && (
@@ -330,7 +334,7 @@ export function MeasuredGrid({
         />
       )}
       {hint && (
-        <p id={hintId} className="mt-1 px-1 text-[11px] text-[var(--text-muted)]">
+        <p id={hintId} className="mt-1 px-1 text-caption text-[var(--text-muted)]">
           {hint}
         </p>
       )}
@@ -382,7 +386,11 @@ function CellGrid({
   // first number, and "add a row" is not the first thing to ask of someone who has
   // just opened an empty table. It is not written back until something is typed.
   const grid = cells.length ? cells : [blankRow()];
-  const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);
+  const { first, last, totalHeight, offsetOf, heightOf, estimate, measureRef } = useWindowedRows(
+    grid.length,
+    rowHeight,
+    scrollRef,
+  );
   const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);
 
   // The remove buttons are the last column of the grid, reachable by the arrows like
@@ -434,9 +442,11 @@ function CellGrid({
     if (!element) return;
     const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);
     if (room <= 0) return;
-    const top = row * rowHeight;
+    // Measured where the row has been rendered, the scaled estimate where not (§10.9).
+    const top = offsetOf(row);
+    const height = heightOf(row);
     if (top < element.scrollTop) element.scrollTop = top;
-    else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;
+    else if (top + height > element.scrollTop + room) element.scrollTop = top + height - room;
   };
 
   const focusCell = (row: number, column: number) => {
@@ -468,7 +478,7 @@ function CellGrid({
     const element = scrollRef.current;
     const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;
     // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.
-    return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;
+    return room > 0 ? Math.max(1, Math.floor(room / estimate) - 1) : 10;
   };
 
   /**
@@ -603,7 +613,7 @@ function CellGrid({
               <div
                 role="columnheader"
                 aria-label={labels.rowNumber}
-                className="flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]"
+                className="flex items-end justify-end px-1 py-1 text-micro text-[var(--text-placeholder)]"
               >
                 #
               </div>
@@ -617,7 +627,7 @@ function CellGrid({
                     {column.label}
                   </span>
                   {column.unit && (
-                    <span className="block truncate text-[10px] text-[var(--text-muted)]">
+                    <span className="block truncate text-micro text-[var(--text-muted)]">
                       {column.unit}
                     </span>
                   )}
@@ -632,21 +642,25 @@ function CellGrid({
           </div>
           {/* Only the rows in the window are mounted — a swept linkage is thousands of
               them across fifteen inputs — each placed at its own offset, so mounting
-              one more (the caret's) costs nothing in the arithmetic. */}
+              one more (the caret's) costs nothing in the arithmetic. Since 0.32 a row
+              is at least the scaled estimate tall and measured as it renders (§10.9):
+              `minHeight`, not `height`, so the type at Extra large is never cut. */}
           <div role="rowgroup" className="relative" style={{ height: totalHeight }}>
             {mounted.map((index) => {
               const row = grid[index];
               return (
                 <div
                   key={index}
+                  ref={measureRef}
+                  {...{ [WINDOWED_ROW_INDEX]: index }}
                   role="row"
                   aria-rowindex={index + 2}
                   className="absolute inset-x-0 grid hover:bg-[var(--bg-hover)]"
-                  style={{ top: index * rowHeight, height: rowHeight, gridTemplateColumns: template }}
+                  style={{ top: offsetOf(index), minHeight: estimate, gridTemplateColumns: template }}
                 >
                   <div
                     role="rowheader"
-                    className="flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]"
+                    className="flex items-center justify-end px-1 text-micro tabular-nums text-[var(--text-placeholder)]"
                   >
                     {rowNumber.format(index + 1)}
                   </div>
@@ -672,9 +686,16 @@ function CellGrid({
                           aria-invalid={bad || undefined}
                           className={cn(
                             "block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none",
+                            // A cell is a field: 16 px on touch, or iOS zooms on focus (§10.1).
+                            FIELD_TOUCH_TEXT,
                             // Arriving selects the text (typing replaces it); editing
                             // in place is the plain surface with a caret in it.
-                            "focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]",
+                            // The kit's focus frame (§5), inset so the next cell's
+                            // border does not paint over it. A text input is
+                            // `:focus-visible` however it was focused.
+                            "focus:bg-[var(--brand-bg)]",
+                            FOCUS_RING,
+                            "focus-visible:ring-inset",
                             isCaret && editing && "focus:bg-[var(--bg-surface)]",
                             disabled && "text-[var(--text-muted)]",
                             bad && cn(FIELD_INVALID, "ring-inset"),
@@ -723,7 +744,10 @@ function CellGrid({
                       disabled={!removable}
                       tabIndex={at.row === index && at.column === width ? 0 : -1}
                       aria-label={labels.removeRow(index + 1)}
-                      className="rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]"
+                      className={cn(
+                        "rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]",
+                        FOCUS_RING,
+                      )}
                       onKeyDown={(event) => onCellKeyDown(event, index, width)}
                       onFocus={() => {
                         if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });
@@ -749,7 +773,7 @@ function CellGrid({
       <div className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5">
         <Button
           variant="ghost"
-          className="px-2 py-1 text-xs"
+          size="sm"
           disabled={disabled}
           onClick={() => {
             onCells([...grid.map(pad), blankRow()]);
@@ -760,7 +784,8 @@ function CellGrid({
         </Button>
         <Button
           variant="ghost"
-          className="px-2 py-1 text-xs text-[var(--text-muted)]"
+          size="sm"
+          className="text-[var(--text-muted)]"
           disabled={disabled || !cells.length}
           onClick={() => {
             onCells([]);
@@ -770,14 +795,14 @@ function CellGrid({
         >
           <Eraser aria-hidden className="size-3.5" /> {labels.clear}
         </Button>
-        <span className="text-[11px] tabular-nums text-[var(--text-muted)]">
+        <span className="text-caption tabular-nums text-[var(--text-muted)]">
           {/* bdi: an LTR label ("3 points") in an RTL grid would reorder to "points 3". */}
           <bdi>{labels.points(filled.length)}</bdi>
         </span>
         {problems > 0 && (
-          <span className="text-[11px] text-[var(--danger)]">{labels.problems(problems)}</span>
+          <span className="text-caption text-[var(--danger)]">{labels.problems(problems)}</span>
         )}
-        <span className="ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]">
+        <span className="ms-auto flex items-center gap-1 text-caption text-[var(--text-muted)]">
           <ClipboardPaste aria-hidden className="size-3.5" /> {labels.pasteHint}
         </span>
       </div>
@@ -843,7 +868,7 @@ function TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy,
         onChange={(event) => setDraft(event.target.value)}
         onBlur={commit}
       />
-      <p className="mt-1 px-1 text-[11px] text-[var(--text-muted)]">
+      <p className="mt-1 px-1 text-caption text-[var(--text-muted)]">
         {columns.map((column) => column.label).join(" · ")}
         {" — "}
         <bdi>{labels.points(lines)}</bdi>

package/src/components/menu-item.tsx

@@ -3,6 +3,7 @@ import type { MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Check } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING } from "./focus-ring";
 import { useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
 
@@ -17,8 +18,7 @@ const MENU_ITEM_ROW =
 
 /** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the
  *  ring, a keyboard user always does. Inset, because the panel clips its children. */
-const MENU_ITEM_FOCUS =
-  "focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+const MENU_ITEM_FOCUS = `${FOCUS_RING} focus-visible:bg-[var(--bg-hover)] focus-visible:ring-inset`;
 
 export type MenuItemTone = "default" | "danger";
 

package/src/components/mini-calendar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn";
+import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring";
 import { horizontalStep } from "../lib/direction";
 import { useAnnounce } from "../hooks/use-announce";
 import {
@@ -576,7 +577,7 @@ export function MiniCalendar({
             "grid grid-cols-7 text-center font-medium",
             lg
               ? "gap-px text-xs text-[var(--text-muted)]"
-              : "text-[10px] uppercase text-[var(--text-placeholder)]",
+              : "text-micro uppercase text-[var(--text-placeholder)]",
           )}
         >
           {weekdayLabels.map((w, i) => (
@@ -639,7 +640,8 @@ export function MiniCalendar({
                       onKeyDown={onDayKeyDown}
                       className={cn(
                         "text-xs tabular-nums text-[var(--text-placeholder)] transition-colors",
-                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+                        FOCUS_RING,
+                        "focus-visible:ring-inset",
                         disabled ? "cursor-not-allowed opacity-60" : "hover:bg-[var(--bg-hover)]",
                         lg
                           ? cn("flex w-full min-w-0 items-start bg-[var(--bg-surface-2)] p-1.5", LG_CELL_HEIGHT)
@@ -730,7 +732,8 @@ export function MiniCalendar({
                       ? cn(
                           "flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors",
                           LG_CELL_HEIGHT,
-                          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+                          FOCUS_RING,
+                        "focus-visible:ring-inset",
                           disabled
                             ? "cursor-not-allowed bg-[var(--bg-surface)] text-[var(--text-placeholder)]"
                             : isSelected
@@ -745,7 +748,8 @@ export function MiniCalendar({
                     // colour flips on the selected days for the reason the numpad's
                     // "Done" key does — a --brand ring on a --brand fill is a ring
                     // that exists only in the DOM.
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+                    FOCUS_RING_WIDTH,
+                    "focus-visible:outline-none focus-visible:ring-inset",
                     isStart || isEnd
                       ? "focus-visible:ring-[var(--brand-contrast)]"
                       : "focus-visible:ring-[var(--brand)]",