@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/components/list.tsx

@@ -1,18 +1,19 @@
-import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { createContext, useContext, useId, useState } from "react";
 import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { ChevronDown, ExternalLink } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
-import { FOCUS_RING, Spinner } from "./ui";
+import { FOCUS_RING } from "./focus-ring";
+import { Spinner } from "./spinner";
 import { StatusDot } from "./status-dot";
 import { Collapse } from "./disclosure";
 import { toneTextClass } from "./signed-amount";
 import type { TextTone } from "./signed-amount";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
-import { mergeDescribedBy } from "./choice-parts";
-import { LockedReason, useLockReason } from "./field-parts";
+import { LockedReason, mergeDescribedBy, useLockReason, type DisabledReasonDisplay } from "./field-parts";
 import type { CommitScope } from "./write-lock";
+import { DEFAULT_LIST_LABELS } from "./list-labels";
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
 
@@ -23,10 +24,8 @@ export interface ListLabels {
   opensInNewTab: string;
 }
 
-export const DEFAULT_LIST_LABELS: ListLabels = {
-  unread: "Unread",
-  opensInNewTab: "opens in a new tab",
-};
+// Defined in ./list-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_LIST_LABELS };
 
 /* ── List ─────────────────────────────────────────────────────────────────── */
 
@@ -51,6 +50,9 @@ export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role">
   density?: ListDensity;
   /** Default `gap`. */
   separator?: ListSeparator;
+  /** The `<ul>` (or `<ol>`). A React 19 ref prop since 0.34 (MOD-4, refactor audit
+   *  2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLUListElement>;
 }
 
 /**
@@ -60,10 +62,15 @@ export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role">
  * bullets are styled away, and "list, 7 items" is exactly what a screen-reader user
  * wants to hear before the first row.
  */
-export const List = forwardRef<HTMLUListElement, ListProps>(function List(
-  { as = "ul", density = "default", separator = "gap", className, children, ...rest },
+export function List({
   ref,
-) {
+  as = "ul",
+  density = "default",
+  separator = "gap",
+  className,
+  children,
+  ...rest
+}: ListProps) {
   const Tag = as;
   return (
     <ListContext.Provider value={{ density, separator }}>
@@ -81,7 +88,7 @@ export const List = forwardRef<HTMLUListElement, ListProps>(function List(
       </Tag>
     </ListContext.Provider>
   );
-});
+}
 
 /* ── ListItem ─────────────────────────────────────────────────────────────── */
 
@@ -313,6 +320,9 @@ interface ListItemBaseProps {
   id?: string;
   [key: `aria-${string}`]: string | boolean | number | undefined;
   [key: `data-${string}`]: unknown;
+  /** The main target — the row's `<a>`, `<button>` or `<div>`, where `id` goes. A React
+   *  19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLElement>;
 }
 
 /**
@@ -332,11 +342,16 @@ export type ListItemProps = ListItemBaseProps &
          * explain it but not keep the row reachable.
          *
          * With a reason the row's button is `aria-disabled` instead: still focusable, a
-         * click does nothing, the reason is in the kit {@link Tooltip} over the row and on
-         * its `aria-describedby`, and the row wears the disabled look. It wins over
+         * click does nothing, the reason is a line under the row at Large and on a touch
+         * screen, else in the kit {@link Tooltip} over the row (`disabledReasonDisplay`),
+         * and on its `aria-describedby`, and the row wears the disabled look. It wins over
          * `disabled`. The row's `actions` are untouched — each control there is its own.
          */
         disabledReason?: ReactNode;
+        /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`. A long list
+         *  of locked rows under a banner that already says why can keep it to the
+         *  tooltip with `"tooltip"` (DUP-3). */
+        disabledReasonDisplay?: DisabledReasonDisplay;
         /**
          * The row's click COMMITS. Under a locked {@link WriteLockProvider} it is locked
          * the `disabledReason` way with the lock's reason (which wins over its own). No
@@ -372,6 +387,7 @@ export type ListItemProps = ListItemBaseProps &
          *  stay unread. */
         onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
         commit?: never;
       } & NotExpandable)
     | ({
@@ -381,6 +397,7 @@ export type ListItemProps = ListItemBaseProps &
         external?: never;
         onAuxClick?: never;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
         commit?: never;
       } & NotExpandable)
     | {
@@ -408,6 +425,7 @@ export type ListItemProps = ListItemBaseProps &
         external?: never;
         onAuxClick?: never;
         disabledReason?: never;
+        disabledReasonDisplay?: never;
         commit?: never;
       }
   );
@@ -436,52 +454,51 @@ interface NotExpandable {
  * details that are easy to get wrong — which of them truncate, whether the actions
  * are nested in the button, whether a link row is a link at all.
  */
-export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
-  {
-    title,
-    titleLines = 1,
-    overline,
-    subtitle,
-    subtitleLines = 1,
-    meta,
-    metaWrap = false,
-    content,
-    icon: Icon,
-    leading,
-    trailing,
-    trailingTone = "muted",
-    actions,
-    leadingActions,
-    unread = false,
-    status,
-    selected = false,
-    disabled = false,
-    loading = false,
-    density: densityProp,
-    align = "center",
-    className,
-    targetClassName,
-    targetProps,
-    bordered = false,
-    as = "li",
-    renderRow,
-    children,
-    bodyClassName,
-    href,
-    renderLink,
-    external = false,
-    onClick,
-    onAuxClick,
-    disabledReason,
-    commit,
-    expandedContent,
-    expanded: expandedProp,
-    defaultExpanded = false,
-    onExpandedChange,
-    ...rest
-  },
+export function ListItem({
   ref,
-) {
+  title,
+  titleLines = 1,
+  overline,
+  subtitle,
+  subtitleLines = 1,
+  meta,
+  metaWrap = false,
+  content,
+  icon: Icon,
+  leading,
+  trailing,
+  trailingTone = "muted",
+  actions,
+  leadingActions,
+  unread = false,
+  status,
+  selected = false,
+  disabled = false,
+  loading = false,
+  density: densityProp,
+  align = "center",
+  className,
+  targetClassName,
+  targetProps,
+  bordered = false,
+  as = "li",
+  renderRow,
+  children,
+  bodyClassName,
+  href,
+  renderLink,
+  external = false,
+  onClick,
+  onAuxClick,
+  disabledReason,
+  disabledReasonDisplay,
+  commit,
+  expandedContent,
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+  ...rest
+}: ListItemProps) {
   const list = useContext(ListContext);
   const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
   const kitLink = useKitLink();
@@ -519,7 +536,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
     <>
       {Icon && (
         <Icon
-          className={cn("size-4 shrink-0 text-[var(--text-muted)]", align === "start" && "mt-0.5")}
+          className={cn("size-4 shrink-0 text-muted", align === "start" && "mt-0.5")}
           aria-hidden
         />
       )}
@@ -529,7 +546,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           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-until-large text-caption font-medium leading-snug text-[var(--text-muted)]">
+          <span className="block truncate-until-large text-caption font-medium leading-snug text-muted">
             {overline}
           </span>
         )}
@@ -537,7 +554,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
           // Names the body's and the expanded content's group; harmless without one.
           id={stacked ? titleId : undefined}
           className={cn(
-            "block text-sm text-[var(--text-primary)]",
+            "block text-sm text-primary",
             titleLines === 1
               ? "truncate-until-large"
               : titleLines === 2
@@ -553,7 +570,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         {subtitle != null && (
           <span
             className={cn(
-              "block text-xs text-[var(--text-muted)]",
+              "block text-xs text-muted",
               subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : "truncate-until-large",
             )}
           >
@@ -563,7 +580,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         {meta != null && (
           <span
             className={cn(
-              "mt-0.5 text-caption leading-snug text-[var(--text-muted)]",
+              "mt-0.5 text-caption leading-snug text-muted",
               metaWrap ? "flex flex-wrap items-center gap-1" : "block truncate-until-large",
             )}
           >
@@ -586,7 +603,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         <Spinner label={null} className="size-3.5 shrink-0" />
       ) : (
         external && href !== undefined && (
-          <ExternalLink className="size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100" aria-hidden />
+          <ExternalLink className="size-3.5 shrink-0 text-muted rtl:-scale-x-100" aria-hidden />
         )
       )}
       {mark}
@@ -596,7 +613,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         <ChevronDown
           aria-hidden
           className={cn(
-            "size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none",
+            "size-4 shrink-0 text-muted transition-transform duration-200 ease-out motion-reduce:transition-none",
             align === "start" && "mt-0.5",
             expanded && "rotate-180",
           )}
@@ -614,7 +631,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
     // When stacked the target is the top of the box, not all of it, so it takes its
     // own corners and its own hover fill (see `children`).
     stacked ? "rounded-md" : "rounded-[inherit]",
-    stacked && interactive && !inert && !selected && "transition-colors hover:bg-[var(--bg-hover)]",
+    stacked && interactive && !inert && !selected && "transition-colors hover:bg-hover",
     interactive && TARGET_RING,
     interactive && !inert && "cursor-pointer",
     loading && "cursor-progress",
@@ -685,10 +702,16 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
       </button>
     );
     if (locked) {
-      // The Tooltip takes the target's place in the row, so it takes its flex sizing
-      // too; the button fills it.
+      // The frame takes the target's place in the row, so it takes its flex sizing too;
+      // the button fills it (`items-stretch` in the line's column). The line takes the
+      // row's body padding, so its words start where the title's do.
       main = (
-        <LockedReason lock={lock} className="flex min-w-0 flex-1">
+        <LockedReason
+          lock={lock}
+          display={disabledReasonDisplay}
+          className="flex min-w-0 flex-1 items-stretch"
+          lineClassName={pad.body}
+        >
           {main}
         </LockedReason>
       );
@@ -723,11 +746,11 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
         // See `renderRow`: the wrapper may be inline, the row is not.
         renderRow && "w-full",
         selected
-          ? "border-[var(--brand)] bg-[var(--bg-surface-2)]"
+          ? "border-brand bg-surface-2"
           : bordered
-            ? "border-[var(--border)]"
+            ? "border-subtle"
             : "border-transparent",
-        !stacked && interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
+        !stacked && interactive && !inert && !selected && "hover:bg-hover",
         (disabled || locked) && "opacity-50",
         className,
       )}
@@ -766,7 +789,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
   return (
     <Tag
       className={cn(
-        list.separator === "divider" && "border-b border-[var(--border)] last:border-b-0",
+        list.separator === "divider" && "border-b border-subtle last:border-b-0",
         list.separator === "divider" && as === "li" && "py-0.5",
         renderRow && "flex flex-col",
       )}
@@ -774,7 +797,7 @@ export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem
       {renderRow ? renderRow(row) : row}
     </Tag>
   );
-});
+}
 
 function RenderedLink({
   render,

package/src/components/loading-state.tsx

@@ -1,14 +1,14 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
-import { Spinner } from "./ui";
+import { Spinner } from "./spinner";
 
 export type LoadingStateSize = "sm" | "md" | "lg";
 
 /** Whether {@link LoadingStateProps.label} shows, or is only read out. */
 export type LoadingStateLabelVisibility = "visible" | "sr-only";
 
-export interface LoadingStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+export interface LoadingStateProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
   /** The visible words under the spinner, and what the status region announces.
    *  Default: `common.loading` ("Loading…"). `null` (or `""`) hides the words — the
    *  same as `labelVisibility="sr-only"` with the default text, so the region still
@@ -65,7 +65,7 @@ export function LoadingState({
       {...rest}
       role="status"
       className={cn(
-        "flex items-center justify-center text-center text-[var(--text-muted)]",
+        "flex items-center justify-center text-center text-muted",
         inline ? "gap-2" : "flex-col gap-2",
         (compact ? PAD_COMPACT : PAD)[size],
         className,

package/src/components/measured-grid-labels.ts

@@ -0,0 +1,25 @@
+// The English words of ./measured-grid, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./measured-grid re-exports them.
+
+import type { MeasuredGridLabels } from "./measured-grid";
+
+/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`
+ *  (src/i18n), the complete reference a translation is written against. */
+export const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {
+  view: "Table view",
+  cellsView: "Cells",
+  textView: "Text",
+  addRow: "Add row",
+  removeRow: (row) => `Remove row ${row}`,
+  clear: "Clear table",
+  pasteHint: "Paste a block from a spreadsheet into any cell",
+  cell: (column, row) => `${column}, row ${row}`,
+  rowNumber: "Row",
+  rowActions: "Row actions",
+  keyboardHint:
+    "Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.",
+  lineError: (line) => `Line ${line} could not be read`,
+  points: (count) => (count === 1 ? "1 point" : `${count} points`),
+  problems: (count) => (count === 1 ? "1 cell is not a number" : `${count} cells are not numbers`),
+};

package/src/components/measured-grid.tsx

@@ -1,16 +1,23 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
 import { ClipboardPaste, Eraser, Plus, Trash2 } from "lucide-react";
 import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
+// The locale's mark as far as a cell can hold it — the fields' answer, the same reason
+// (DUP-11, refactor audit 2026-10: a verbatim copy lived here).
+import { decimalMark } from "../lib/decimal-marks";
 // The cell pair reads ONE cell, where a comma has no columns to separate and so is
 // always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may
 // 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 { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { useWindowedRows, WINDOWED_ROW_INDEX } from "../hooks/use-windowed-rows";
 import { ToggleGroup } from "./toggle-group";
-import { Button, FIELD_INVALID, FIELD_TOUCH_TEXT, FOCUS_RING, Textarea } from "./ui";
+import { Button } from "./button";
+import { FIELD_INVALID, FIELD_TOUCH_TEXT } from "./field-base";
+import { FOCUS_RING } from "./focus-ring";
+import { Textarea } from "./textarea";
+import { DEFAULT_MEASURED_GRID_LABELS } from "./measured-grid-labels";
 
 /**
  * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a
@@ -66,25 +73,8 @@ export interface MeasuredGridLabels {
   problems: (count: number) => string;
 }
 
-/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`
- *  (src/i18n), the complete reference a translation is written against. */
-export const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {
-  view: "Table view",
-  cellsView: "Cells",
-  textView: "Text",
-  addRow: "Add row",
-  removeRow: (row) => `Remove row ${row}`,
-  clear: "Clear table",
-  pasteHint: "Paste a block from a spreadsheet into any cell",
-  cell: (column, row) => `${column}, row ${row}`,
-  rowNumber: "Row",
-  rowActions: "Row actions",
-  keyboardHint:
-    "Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.",
-  lineError: (line) => `Line ${line} could not be read`,
-  points: (count) => (count === 1 ? "1 point" : `${count} points`),
-  problems: (count) => (count === 1 ? "1 cell is not a number" : `${count} cells are not numbers`),
-};
+// Defined in ./measured-grid-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_MEASURED_GRID_LABELS };
 
 /** One column of a measured table: what it holds and what it is measured in. The unit
  *  is separate from the name because the header shows it small and underneath, and
@@ -109,19 +99,6 @@ const DEFAULT_ROW_HEIGHT = 28;
 
 const ALL_VIEWS: readonly MeasuredGridView[] = ["cells", "text"];
 
-/** The locale's decimal mark, as far as a cell can hold it: "," or ".". A mark outside
- *  those two (Arabic's "٫") is not one `cellNumber` reads, so those locales keep the
- *  dot. The same answer `NumberField` gives, for the same reason. */
-function decimalMark(locale: string | undefined): "," | "." {
-  try {
-    const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === "decimal");
-    return part?.value === "," ? "," : ".";
-  } catch {
-    // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.
-    return ".";
-  }
-}
-
 /** A number-shaped cell written with the locale's mark. The lexer hands back points;
  *  a German user typed commas and should read commas back. Anything that is not a
  *  number is left exactly as it was, so the mistake stays visible where it was made. */
@@ -205,7 +182,7 @@ export function useMeasuredRows(
 }
 
 export interface MeasuredGridProps
-  extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> {
+  extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
   /** What the table is — shown above it, and the grid's accessible name. */
   label: string;
   /** A note under the table (which columns a layout expects, say). Also the grid's
@@ -227,7 +204,7 @@ export interface MeasuredGridProps
   /** 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>`. */
   locale?: string;
-  labels?: Partial<MeasuredGridLabels>;
+  labels?: LabelOverride<MeasuredGridLabels>;
 }
 
 /**
@@ -292,7 +269,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-caption font-medium text-[var(--text-muted)]">
+        <span id={labelId} className="text-caption font-medium text-muted">
           {label}
         </span>
         {offered.length > 1 && (
@@ -334,7 +311,7 @@ export function MeasuredGrid({
         />
       )}
       {hint && (
-        <p id={hintId} className="mt-1 px-1 text-caption text-[var(--text-muted)]">
+        <p id={hintId} className="mt-1 px-1 text-caption text-muted">
           {hint}
         </p>
       )}
@@ -587,7 +564,7 @@ function CellGrid({
   const problems = filled.flat().filter((cell) => cell.trim() !== "" && !isCellNumber(cell)).length;
 
   return (
-    <div className="rounded-md border border-[var(--border)] bg-[var(--bg-surface)]">
+    <div className="rounded-md border border-subtle bg-surface">
       <div ref={scrollRef} className="max-h-72 overflow-auto">
         <div
           role="grid"
@@ -603,17 +580,17 @@ function CellGrid({
         >
           {/* The header stays put vertically and scrolls sideways with the body, so a
               fifteen-column linkage can be read without losing which column is which. */}
-          <div ref={headRef} role="rowgroup" className="sticky top-0 z-10 bg-[var(--bg-surface-2)]">
+          <div ref={headRef} role="rowgroup" className="sticky top-0 z-10 bg-surface-2">
             <div
               role="row"
               aria-rowindex={1}
-              className="grid border-b border-[var(--border)]"
+              className="grid border-b border-subtle"
               style={{ gridTemplateColumns: template }}
             >
               <div
                 role="columnheader"
                 aria-label={labels.rowNumber}
-                className="flex items-end justify-end px-1 py-1 text-micro text-[var(--text-placeholder)]"
+                className="flex items-end justify-end px-1 py-1 text-micro text-placeholder"
               >
                 #
               </div>
@@ -621,13 +598,13 @@ function CellGrid({
                 <div
                   key={index}
                   role="columnheader"
-                  className="min-w-0 border-s border-[var(--border)] px-2 py-1 text-end"
+                  className="min-w-0 border-s border-subtle px-2 py-1 text-end"
                 >
-                  <span className="block truncate font-medium text-[var(--text-primary)]">
+                  <span className="block truncate font-medium text-primary">
                     {column.label}
                   </span>
                   {column.unit && (
-                    <span className="block truncate text-micro text-[var(--text-muted)]">
+                    <span className="block truncate text-micro text-muted">
                       {column.unit}
                     </span>
                   )}
@@ -636,7 +613,7 @@ function CellGrid({
               <div
                 role="columnheader"
                 aria-label={labels.rowActions}
-                className="border-s border-[var(--border)]"
+                className="border-s border-subtle"
               />
             </div>
           </div>
@@ -655,12 +632,12 @@ function CellGrid({
                   {...{ [WINDOWED_ROW_INDEX]: index }}
                   role="row"
                   aria-rowindex={index + 2}
-                  className="absolute inset-x-0 grid hover:bg-[var(--bg-hover)]"
+                  className="absolute inset-x-0 grid hover:bg-hover"
                   style={{ top: offsetOf(index), minHeight: estimate, gridTemplateColumns: template }}
                 >
                   <div
                     role="rowheader"
-                    className="flex items-center justify-end px-1 text-micro tabular-nums text-[var(--text-placeholder)]"
+                    className="flex items-center justify-end px-1 text-micro tabular-nums text-placeholder"
                   >
                     {rowNumber.format(index + 1)}
                   </div>
@@ -669,7 +646,7 @@ function CellGrid({
                     const bad = value.trim() !== "" && !isCellNumber(value);
                     const isCaret = at.row === index && at.column === columnIndex;
                     return (
-                      <div key={columnIndex} role="gridcell" className="min-w-0 border-s border-[var(--border)]">
+                      <div key={columnIndex} role="gridcell" className="min-w-0 border-s border-subtle">
                         <input
                           data-cell={`${index}:${columnIndex}`}
                           value={value}
@@ -685,7 +662,7 @@ function CellGrid({
                           // sees, `aria-invalid` is what a screen reader reads.
                           aria-invalid={bad || undefined}
                           className={cn(
-                            "block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none",
+                            "block size-full bg-transparent px-2 text-end tabular-nums 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
@@ -693,11 +670,11 @@ function CellGrid({
                             // 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:bg-brand-soft",
                             FOCUS_RING,
                             "focus-visible:ring-inset",
-                            isCaret && editing && "focus:bg-[var(--bg-surface)]",
-                            disabled && "text-[var(--text-muted)]",
+                            isCaret && editing && "focus:bg-surface",
+                            disabled && "text-muted",
                             bad && cn(FIELD_INVALID, "ring-inset"),
                           )}
                           onMouseDown={(event) => {
@@ -736,7 +713,7 @@ function CellGrid({
                   })}
                   <div
                     role="gridcell"
-                    className="flex items-center justify-center border-s border-[var(--border)]"
+                    className="flex items-center justify-center border-s border-subtle"
                   >
                     <button
                       type="button"
@@ -745,7 +722,7 @@ function CellGrid({
                       tabIndex={at.row === index && at.column === width ? 0 : -1}
                       aria-label={labels.removeRow(index + 1)}
                       className={cn(
-                        "rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]",
+                        "rounded p-1 text-placeholder outline-none hover:text-danger disabled:cursor-default disabled:hover:text-placeholder",
                         FOCUS_RING,
                       )}
                       onKeyDown={(event) => onCellKeyDown(event, index, width)}
@@ -770,7 +747,7 @@ function CellGrid({
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5">
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-subtle px-2 py-1.5">
         <Button
           variant="ghost"
           size="sm"
@@ -785,7 +762,7 @@ function CellGrid({
         <Button
           variant="ghost"
           size="sm"
-          className="text-[var(--text-muted)]"
+          className="text-muted"
           disabled={disabled || !cells.length}
           onClick={() => {
             onCells([]);
@@ -795,14 +772,14 @@ function CellGrid({
         >
           <Eraser aria-hidden className="size-3.5" /> {labels.clear}
         </Button>
-        <span className="text-caption tabular-nums text-[var(--text-muted)]">
+        <span className="text-caption tabular-nums 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-caption text-[var(--danger)]">{labels.problems(problems)}</span>
+          <span className="text-caption text-danger">{labels.problems(problems)}</span>
         )}
-        <span className="ms-auto flex items-center gap-1 text-caption text-[var(--text-muted)]">
+        <span className="ms-auto flex items-center gap-1 text-caption text-muted">
           <ClipboardPaste aria-hidden className="size-3.5" /> {labels.pasteHint}
         </span>
       </div>
@@ -868,7 +845,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-caption text-[var(--text-muted)]">
+      <p className="mt-1 px-1 text-caption text-muted">
         {columns.map((column) => column.label).join(" · ")}
         {" — "}
         <bdi>{labels.points(lines)}</bdi>