@kinetixui/ui 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.17.0",
+    "@kinetixui/tokens": "0.18.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",

package/src/components/audio-player.tsx

@@ -66,7 +66,7 @@ const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
         type="button"
         onClick={toggle}
         aria-label={playing ? "Pause" : "Play"}
-        className="grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus"
+        className="grid shrink-0 place-items-center rounded-full bg-action text-action-foreground outline-none transition-transform hover:scale-105 focus-visible:shadow-focus"
         style={{ width: size, height: size }}
       >
         {playing ? <Pause className="size-1/3 fill-current" /> : <Play className="size-1/3 translate-x-px fill-current" />}
@@ -105,7 +105,7 @@ const AudioPlayer = React.forwardRef<HTMLDivElement, AudioPlayerProps>(
           </button>
           <PlayPause size={36} />
           <div className="absolute inset-x-0 bottom-0 h-1 bg-muted">
-            <div className="h-full bg-primary transition-[width]" style={{ width: `${pct}%` }} />
+            <div className="h-full bg-action transition-[width]" style={{ width: `${pct}%` }} />
           </div>
         </div>
       );

package/src/components/badge.tsx

@@ -19,7 +19,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground",
+        default: "bg-action text-action-foreground",
         secondary: "bg-secondary-foreground text-secondary",
         destructive: "bg-destructive text-destructive-foreground",
         outline: "border border-input text-foreground",

package/src/components/banner.tsx

@@ -56,7 +56,7 @@ const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
   ({ className, variant = "information", sticky, hideIcon, onDismiss, action, children, ...props }, ref) => {
     const Icon = ICON[variant ?? "information"];
     return (
-      <div ref={ref} role="banner" className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
+      <div ref={ref} className={cn(bannerVariants({ variant, sticky }), className)} {...props}>
         {!hideIcon && <Icon />}
         <div className="mx-auto flex min-w-0 max-w-4xl flex-1 flex-wrap items-center justify-center gap-x-3 gap-y-1 text-center">
           <span>{children}</span>

package/src/components/button.tsx

@@ -41,7 +41,7 @@ const buttonVariants = cva(
         // (the old hover:bg-[--color-blue-600] was a hard-coded dark navy — on dark mode,
         //  where --primary is light, it inverted the button into the near-black background.)
         Primary:
-          "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/85 disabled:bg-border disabled:text-muted-foreground",
+          "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85 disabled:bg-border disabled:text-muted-foreground",
         // rest = --secondary; hover/active promote to the --secondary-foreground fill with
         //  inverted text — theme-aware, unlike the previous hard-coded green primitives.
         //  Active is solid like hover: dimming it (90% was 3.97:1) drops the text under AA,
@@ -51,14 +51,14 @@ const buttonVariants = cva(
         // 1px outline; hover fills with accent + strengthens the edge to --ring so the
         // state stays visible on the darkest surfaces (WCAG 2.2 SC 1.4.11); active pins primary
         Outline:
-          "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-primary active:bg-accent active:text-primary disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
+          "border border-input bg-transparent text-foreground hover:border-ring hover:bg-accent active:border-action active:bg-accent active:text-action disabled:border-input disabled:text-muted-foreground disabled:bg-transparent",
         Destructive:
           "bg-destructive text-destructive-foreground hover:brightness-95 active:brightness-90 disabled:bg-border disabled:text-muted-foreground",
         // transparent rest; hover adds an inset --ring outline (the accent fill alone is
         // <3:1 against the page on dark) plus the accent fill; active pins primary text
         Ghost:
-          "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-primary active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
-        Link: "bg-transparent text-primary underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline",
+          "bg-transparent text-foreground hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring active:bg-accent active:text-action active:ring-0 disabled:text-muted-foreground disabled:bg-transparent",
+        Link: "bg-transparent text-link underline-offset-4 hover:underline hover:text-foreground rounded-none px-0 disabled:text-muted-foreground disabled:no-underline",
       },
       size: {
         // padding = Figma spacing/3 + spacing/2 ; type = Label Small (11/16, +0.5 tracking)
@@ -87,14 +87,14 @@ const buttonVariants = cva(
     },
     compoundVariants: [
       { variant: "Destructive", class: "focus-visible:shadow-focus-destructive" },
-      { variant: "Primary", state: "Hover", class: "bg-primary/90" },
-      { variant: "Primary", state: "Active", class: "bg-primary/85" },
+      { variant: "Primary", state: "Hover", class: "bg-action/90" },
+      { variant: "Primary", state: "Active", class: "bg-action/85" },
       { variant: "Secondary", state: "Hover", class: "bg-secondary-foreground text-secondary" },
       { variant: "Secondary", state: "Active", class: "bg-secondary-foreground text-secondary" },
       { variant: "Outline", state: "Hover", class: "border-ring bg-accent" },
-      { variant: "Outline", state: "Active", class: "border-primary bg-accent text-primary" },
+      { variant: "Outline", state: "Active", class: "border-action bg-accent text-action" },
       { variant: "Ghost", state: "Hover", class: "bg-accent ring-1 ring-inset ring-ring" },
-      { variant: "Ghost", state: "Active", class: "bg-accent text-primary" },
+      { variant: "Ghost", state: "Active", class: "bg-accent text-action" },
       { variant: "Link", state: "Hover", class: "underline text-foreground" },
       { variant: "Link", size: ["sm", "md", "lg"], class: "py-2 px-0 h-auto" },
     ],

package/src/components/calendar.tsx

@@ -45,7 +45,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ),
         day_button: cn(
           buttonVariants({ variant: "Ghost", size: "icon" }),
-          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground",
+          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-action group-data-[selected=true]:text-action-foreground group-data-[selected=true]:hover:bg-action group-data-[selected=true]:hover:text-action-foreground group-data-[selected=true]:focus:bg-action group-data-[selected=true]:focus:text-action-foreground",
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",

package/src/components/chart.tsx

@@ -100,7 +100,7 @@ const ChartContainer = React.forwardRef<
         role={role ?? "img"}
         aria-label={name}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-surface:focus-visible]:[outline:2px_solid_hsl(var(--ring))] [&_.recharts-surface:focus-visible]:rounded-sm [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
         )}
         {...props}
@@ -144,7 +144,7 @@ function ChartState({
           {[40, 72, 56, 88, 48, 64, 80].map((h, i) => (
             <span
               key={i}
-              className="w-full animate-pulse rounded-sm bg-muted"
+              className="w-full animate-pulse rounded-sm bg-muted motion-reduce:animate-none"
               style={{ height: `${h}px`, animationDelay: `${i * 90}ms` }}
             />
           ))}

package/src/components/checkbox.tsx

@@ -21,8 +21,8 @@ const Checkbox = React.forwardRef<
       "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
-      "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      "data-[state=checked]:border-action data-[state=checked]:bg-action data-[state=checked]:text-action-foreground",
+      "data-[state=indeterminate]:border-action data-[state=indeterminate]:bg-action data-[state=indeterminate]:text-action-foreground",
       "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",
       className,
     )}

package/src/components/circular-progress.tsx

@@ -52,7 +52,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
             strokeLinecap="round"
             strokeDasharray={c}
             strokeDashoffset={c - (v / 100) * c}
-            className="stroke-primary transition-[stroke-dashoffset] duration-base"
+            className="stroke-action transition-[stroke-dashoffset] duration-base"
           />
         </svg>
         {(showValue || label != null) && (

package/src/components/code-block.tsx

@@ -53,7 +53,7 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
                   onClick={() => setActive(i)}
                   className={cn(
                     "border-b-2 px-3 py-2 text-body-sm transition-colors outline-none",
-                    i === active ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
+                    i === active ? "border-action text-foreground" : "border-transparent text-muted-foreground hover:text-foreground",
                   )}
                 >
                   {t.name || "code"}

package/src/components/color-picker.tsx

@@ -197,6 +197,9 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
           role="slider"
           tabIndex={0}
           aria-label="Saturation and value"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(s)}
           aria-valuetext={`saturation ${Math.round(s)}%, value ${Math.round(v)}%`}
           onPointerDown={handleSquarePointerDown}
           onPointerMove={handleSquarePointerMove}
@@ -333,6 +336,7 @@ function HexField({
 
   return (
     <Input
+      aria-label="Hex color"
       value={draft}
       onChange={(e) => setDraft(e.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, alpha ? 8 : 6))}
       onBlur={commit}

package/src/components/data-grid.tsx

@@ -193,17 +193,161 @@ function DataGrid<TData>({
     endEdit(restoreFocus);
   }
 
+  // ── keyboard model (ARIA grid pattern) ─────────────────────────────────────────────────────
+  // The grid is ONE tab stop (roving tabindex). Arrows, Home/End (Ctrl = grid corners) and
+  // PageUp/PageDown move the active cell; the header row is row -1. Rows are virtualized, so a move
+  // first scrolls the target row into the rendered window and focus lands after the next render.
+  const HEADER_HEIGHT = 40; // h-10
+  type Pos = { row: number; columnId: string };
+  const [active, setActive] = React.useState<Pos>({ row: -1, columnId: columns[0]?.id ?? "" });
+  const pendingFocusRef = React.useRef<Pos | null>(null);
+  const [announcement, setAnnouncement] = React.useState("");
+
+  const rowCount = sortedData.length;
+  const colIds = renderedColumns.map((c) => c.id);
+  const activeCol = colIds.includes(active.columnId) ? active.columnId : (colIds[0] ?? "");
+  const activeRow = Math.min(active.row, rowCount - 1);
+  // if the active row has scrolled out of the rendered window, the header takes the tab stop so
+  // the grid stays reachable by Tab
+  const activeRendered = activeRow < 0 || (activeRow >= startIndex && activeRow < endIndex);
+  const tabStop: Pos = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
+  const labelOf = (c: DataGridColumn<TData>) => (typeof c.header === "string" ? c.header : c.id);
+
+  function ensureRowVisible(row: number) {
+    const el = containerRef.current;
+    if (!el) return;
+    if (row < 0) {
+      // the header is sticky and always visible, but moving to it means "back to the top"
+      if (scrollTop !== 0) {
+        el.scrollTop = 0;
+        setScrollTop(0);
+      }
+      return;
+    }
+    const top = HEADER_HEIGHT + row * rowHeight;
+    const bottom = top + rowHeight;
+    let next = scrollTop;
+    if (top < scrollTop + HEADER_HEIGHT) next = row * rowHeight; // under the sticky header
+    else if (bottom > scrollTop + viewportHeight) next = bottom - viewportHeight;
+    if (next !== scrollTop) {
+      el.scrollTop = next;
+      setScrollTop(next);
+    }
+  }
+
+  function moveTo(row: number, columnId: string) {
+    const r = Math.max(-1, Math.min(row, rowCount - 1));
+    ensureRowVisible(r);
+    pendingFocusRef.current = { row: r, columnId };
+    setActive({ row: r, columnId });
+  }
+
+  // Runs after every render until the pending target exists in the DOM (it may need a scroll first).
+  React.useEffect(() => {
+    const p = pendingFocusRef.current;
+    if (!p) return;
+    const selector = p.row < 0 ? `[data-header="${p.columnId}"]` : `[data-cell="${p.row}:${p.columnId}"]`;
+    const el = containerRef.current?.querySelector<HTMLElement>(selector);
+    if (el) {
+      pendingFocusRef.current = null;
+      el.focus();
+    }
+  });
+
+  function moveColumn(column: DataGridColumn<TData>, dir: 1 | -1) {
+    if (column.pinned) return;
+    const ids = unpinnedOrdered.map((c) => c.id);
+    const from = ids.indexOf(column.id);
+    const to = from + dir;
+    if (to < 0 || to >= ids.length) {
+      setAnnouncement(`${labelOf(column)} is already the ${dir < 0 ? "first" : "last"} movable column`);
+      return;
+    }
+    const targetId = ids[to]!;
+    setOrder((prev) => {
+      const next = prev.filter((id) => id !== column.id);
+      next.splice(next.indexOf(targetId) + (dir > 0 ? 1 : 0), 0, column.id);
+      return next;
+    });
+    pendingFocusRef.current = { row: -1, columnId: column.id }; // a reordered node loses focus; give it back
+    setAnnouncement(`${labelOf(column)} moved to position ${leftPinned.length + to + 1} of ${colIds.length}`);
+  }
+
+  function resizeColumn(column: DataGridColumn<TData>, delta: number) {
+    const current = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
+    const next = Math.max(column.minWidth ?? DEFAULT_MIN_WIDTH, current + delta);
+    setWidths((prev) => ({ ...prev, [column.id]: next }));
+    setAnnouncement(`${labelOf(column)} column width ${next} pixels`);
+  }
+
+  function onNavKeyDown(e: React.KeyboardEvent<HTMLElement>, row: number, column: DataGridColumn<TData>) {
+    if (e.target !== e.currentTarget) return; // keys inside an editing input are the input's own
+    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+    const idx = colIds.indexOf(column.id);
+    const horizontal = e.key === "ArrowRight" ? (rtl ? -1 : 1) : e.key === "ArrowLeft" ? (rtl ? 1 : -1) : 0;
+
+    // header chords: Alt+Left/Right reorders the column, Shift+Left/Right resizes it (10px)
+    if (row < 0 && horizontal !== 0 && (e.altKey || e.shiftKey)) {
+      e.preventDefault();
+      if (e.altKey) moveColumn(column, horizontal as 1 | -1);
+      else resizeColumn(column, horizontal * 10);
+      return;
+    }
+
+    const go = (r: number, i: number) => {
+      e.preventDefault();
+      moveTo(r, colIds[Math.max(0, Math.min(i, colIds.length - 1))]!);
+    };
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowLeft":
+        return go(row, idx + horizontal);
+      case "ArrowDown":
+        return go(row + 1, idx);
+      case "ArrowUp":
+        return go(row - 1, idx);
+      case "Home":
+        return go(e.ctrlKey ? -1 : row, 0);
+      case "End":
+        return go(e.ctrlKey ? rowCount - 1 : row, colIds.length - 1);
+      case "PageDown":
+        return go(row + pageRows, idx);
+      case "PageUp":
+        return go(Math.max(row - pageRows, row >= 0 ? 0 : -1), idx);
+      case "Enter":
+      case " ":
+        if (row < 0 && column.sortable) {
+          e.preventDefault();
+          toggleSort(column.id);
+        } else if (row >= 0 && column.editable && e.key === "Enter") {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+      case "F2":
+        if (row >= 0 && column.editable) {
+          e.preventDefault();
+          setEditing({ rowIndex: row, columnId: column.id });
+        }
+        return;
+    }
+  }
+
   return (
+    <>
     <div
       ref={containerRef}
       role="grid"
+      aria-rowcount={rowCount + 1}
+      aria-colcount={colIds.length}
       className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
       style={{ height }}
       onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
     >
       <div style={{ width: totalWidth, minWidth: "100%" }}>
-        <div role="row" className="sticky top-0 z-[2] flex border-b bg-background">
-          {renderedColumns.map((column) => {
+        <div role="row" aria-rowindex={1} className="sticky top-0 z-[2] flex border-b bg-background">
+          {renderedColumns.map((column, colIdx) => {
             const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
             const pinnedStyle: React.CSSProperties =
               column.pinned === "left"
@@ -216,6 +360,9 @@ function DataGrid<TData>({
               <div
                 key={column.id}
                 role="columnheader"
+                data-header={column.id}
+                aria-colindex={colIdx + 1}
+                aria-keyshortcuts={`Shift+ArrowLeft Shift+ArrowRight${column.pinned ? "" : " Alt+ArrowLeft Alt+ArrowRight"}`}
                 {...(column.sortable
                   ? { "aria-sort": isSorted ? (sort!.direction === "asc" ? "ascending" : "descending") : "none" }
                   : {})}
@@ -239,18 +386,13 @@ function DataGrid<TData>({
                   });
                 }}
                 onClick={() => column.sortable && toggleSort(column.id)}
-                // a sortable header is a control: reachable with Tab, operated with Enter / Space
-                tabIndex={column.sortable ? 0 : undefined}
-                onKeyDown={(e) => {
-                  if (column.sortable && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
-                    e.preventDefault();
-                    toggleSort(column.id);
-                  }
-                }}
+                // roving tabindex: the grid is one tab stop; arrows move between cells (see onNavKeyDown)
+                tabIndex={tabStop.row === -1 && tabStop.columnId === column.id ? 0 : -1}
+                onFocus={() => setActive({ row: -1, columnId: column.id })}
+                onKeyDown={(e) => onNavKeyDown(e, -1, column)}
                 className={cn(
-                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground",
-                  column.sortable &&
-                    "cursor-pointer outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                  "relative flex h-10 shrink-0 select-none items-center gap-1 px-2 font-medium text-muted-foreground outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                  column.sortable && "cursor-pointer hover:text-foreground",
                   column.pinned && "bg-background",
                 )}
                 style={{ width, ...pinnedStyle }}
@@ -266,7 +408,7 @@ function DataGrid<TData>({
                     e.stopPropagation();
                     beginResize(column.id, column.minWidth ?? DEFAULT_MIN_WIDTH, e.clientX, width);
                   }}
-                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-primary/50"
+                  className="absolute right-0 top-0 h-full w-1 touch-none cursor-col-resize hover:bg-action/50"
                 />
               </div>
             );
@@ -279,10 +421,11 @@ function DataGrid<TData>({
               <div
                 key={getRowId ? getRowId(row, rowIndex) : rowIndex}
                 role="row"
+                aria-rowindex={rowIndex + 2}
                 className="absolute flex w-full border-b hover:bg-muted/50"
                 style={{ top: rowIndex * rowHeight, height: rowHeight }}
               >
-                {renderedColumns.map((column) => {
+                {renderedColumns.map((column, colIdx) => {
                   const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
                   const pinnedStyle: React.CSSProperties =
                     column.pinned === "left"
@@ -295,19 +438,15 @@ function DataGrid<TData>({
                     <div
                       key={column.id}
                       role="gridcell"
+                      aria-colindex={colIdx + 1}
                       data-cell={`${rowIndex}:${column.id}`}
                       onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
-                      // an editable cell is reachable with Tab and entered with Enter or F2 (the spreadsheet convention)
-                      tabIndex={column.editable ? 0 : undefined}
-                      onKeyDown={(e) => {
-                        if (column.editable && e.target === e.currentTarget && (e.key === "Enter" || e.key === "F2")) {
-                          e.preventDefault();
-                          setEditing({ rowIndex, columnId: column.id });
-                        }
-                      }}
+                      // roving tabindex; Enter or F2 edits an editable cell (the spreadsheet convention)
+                      tabIndex={tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1}
+                      onFocus={() => setActive({ row: rowIndex, columnId: column.id })}
+                      onKeyDown={(e) => onNavKeyDown(e, rowIndex, column)}
                       className={cn(
-                        "flex shrink-0 items-center px-2",
-                        column.editable && "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                        "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
                       )}
                       style={{ width, ...pinnedStyle }}
@@ -335,6 +474,11 @@ function DataGrid<TData>({
         </div>
       </div>
     </div>
+    {/* reorder / resize results, spoken politely; outside the grid because a grid's children must be rows */}
+    <div role="status" aria-live="polite" className="sr-only">
+      {announcement}
+    </div>
+    </>
   );
 }
 

package/src/components/diff-viewer.tsx

@@ -103,13 +103,14 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
           role="row"
           className={cn("flex", op.type === "add" && "bg-success/10", op.type === "remove" && "bg-destructive/10")}
         >
-          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+          <span role="cell" className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
             {op.type !== "add" ? op.oldLine : ""}
           </span>
-          <span className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
+          <span role="cell" className="w-9 shrink-0 select-none border-r px-1.5 text-right text-muted-foreground">
             {op.type !== "remove" ? op.newLine : ""}
           </span>
           <span
+            role="cell"
             className={cn(
               "w-4 shrink-0 select-none text-center",
               op.type === "add" && "text-success",
@@ -118,7 +119,7 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
           >
             {op.type === "add" ? "+" : op.type === "remove" ? "−" : ""}
           </span>
-          <span className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
+          <span role="cell" className="min-w-0 flex-1 whitespace-pre px-1">{op.text}</span>
         </div>
       ))}
     </div>
@@ -128,19 +129,19 @@ function UnifiedDiff({ ops }: { ops: DiffOp[] }) {
 function SplitDiff({ ops, oldLabel, newLabel }: { ops: DiffOp[]; oldLabel: string; newLabel: string }) {
   return (
     <div role="table">
-      <div className="flex border-b bg-muted/40 text-muted-foreground">
-        <div className="flex-1 px-2 py-1">{oldLabel}</div>
-        <div className="flex-1 border-l px-2 py-1">{newLabel}</div>
+      <div role="row" className="flex border-b bg-muted/40 text-muted-foreground">
+        <div role="columnheader" className="flex-1 px-2 py-1">{oldLabel}</div>
+        <div role="columnheader" className="flex-1 border-l px-2 py-1">{newLabel}</div>
       </div>
       {ops.map((op, i) => (
         <div key={i} role="row" className="flex">
-          <div className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
+          <div role="cell" className={cn("flex flex-1 items-start", op.type === "remove" && "bg-destructive/10")}>
             <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
               {op.type !== "add" ? op.oldLine : ""}
             </span>
             <span className="min-w-0 flex-1 whitespace-pre px-1">{op.type !== "add" ? op.text : ""}</span>
           </div>
-          <div className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
+          <div role="cell" className={cn("flex flex-1 items-start border-l", op.type === "add" && "bg-success/10")}>
             <span className="w-9 shrink-0 select-none px-1.5 text-right text-muted-foreground">
               {op.type !== "remove" ? op.newLine : ""}
             </span>

package/src/components/fab.tsx

@@ -19,7 +19,7 @@ const fabVariants = cva(
   {
     variants: {
       variant: {
-        Primary: "bg-primary text-primary-foreground hover:bg-[--color-blue-600] active:bg-[--color-blue-700]",
+        Primary: "bg-action text-action-foreground hover:bg-action/90 active:bg-action/85",
         Secondary:
           "bg-secondary text-secondary-foreground hover:bg-[--color-green-500] hover:text-[--color-green-50] active:bg-[--color-green-600] active:text-[--color-green-50]",
       },

package/src/components/file-upload.tsx

@@ -59,17 +59,11 @@ const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
 
     return (
       <div ref={ref} className={cn("flex w-full flex-col gap-3 font-sans", className)} {...props}>
+        {/* A drag-and-drop surface, not a control: the Button inside is the one keyboard/AT target
+            (a role="button" containing a Button is nested-interactive). Clicking the surface stays a
+            mouse convenience. */}
         <div
-          role="button"
-          tabIndex={disabled ? -1 : 0}
-          aria-disabled={disabled}
           onClick={() => !disabled && inputRef.current?.click()}
-          onKeyDown={(e) => {
-            if (!disabled && (e.key === "Enter" || e.key === " ")) {
-              e.preventDefault();
-              inputRef.current?.click();
-            }
-          }}
           onDragOver={(e) => {
             e.preventDefault();
             if (!disabled) setDragging(true);
@@ -81,9 +75,9 @@ const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             if (!disabled) pick(e.dataTransfer.files);
           }}
           className={cn(
-            "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center outline-none transition-colors",
-            !disabled && "cursor-pointer hover:bg-accent/50 focus-visible:shadow-focus",
-            dragging && "border-primary bg-accent",
+            "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center transition-colors",
+            !disabled && "cursor-pointer hover:bg-accent/50",
+            dragging && "border-action bg-accent",
             disabled && "pointer-events-none opacity-disabled",
           )}
         >
@@ -108,6 +102,10 @@ const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             multiple={multiple}
             accept={accept}
             disabled={disabled}
+            // driven by the dropzone button above; a second focusable control inside a role=button
+            // (and an unlabeled one) is invalid, so keep it out of the tab order and the a11y tree
+            tabIndex={-1}
+            aria-hidden="true"
             className="sr-only"
             onChange={(e) => {
               pick(e.target.files);
@@ -141,7 +139,7 @@ function FileUploadItem({ file, onRemove, onRetry }: FileUploadItemProps) {
   return (
     <li className={cn("flex items-center gap-2.5 rounded-md border p-2.5 text-body-sm", isError ? "border-destructive bg-destructive/5" : "border-input")}>
       {isLoading ? (
-        <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" aria-hidden />
+        <Loader2 className="size-4 shrink-0 animate-spin motion-reduce:animate-[spin_3s_linear_infinite] text-muted-foreground" aria-hidden />
       ) : isError ? (
         <TriangleAlert className="size-4 shrink-0 text-destructive" aria-hidden />
       ) : (
@@ -152,7 +150,7 @@ function FileUploadItem({ file, onRemove, onRetry }: FileUploadItemProps) {
         {isError && file.error ? <p className="text-destructive">{file.error}</p> : <p className="text-muted-foreground">{formatBytes(file.size)}</p>}
         {isLoading && typeof file.progress === "number" && (
           <div className="mt-1 h-1 w-full overflow-hidden rounded-full bg-muted">
-            <div className="h-full bg-primary transition-[width]" style={{ width: `${Math.max(0, Math.min(100, file.progress))}%` }} />
+            <div className="h-full bg-action transition-[width]" style={{ width: `${Math.max(0, Math.min(100, file.progress))}%` }} />
           </div>
         )}
       </div>
@@ -160,7 +158,7 @@ function FileUploadItem({ file, onRemove, onRetry }: FileUploadItemProps) {
         <button
           type="button"
           onClick={() => onRetry(file.id)}
-          className="shrink-0 text-label-md font-medium text-primary underline-offset-2 outline-none hover:underline focus-visible:underline"
+          className="shrink-0 text-label-md font-medium text-link underline-offset-2 outline-none hover:underline focus-visible:underline"
         >
           Retry
         </button>

package/src/components/input-group.tsx

@@ -22,7 +22,7 @@ const InputGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
       data-slot="input-group"
       className={cn(
         "flex w-full items-center overflow-hidden rounded-sm border border-input bg-background font-sans transition-colors",
-        "focus-within:border-primary focus-within:shadow-focus",
+        "focus-within:border-action focus-within:shadow-focus",
         "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:shadow-focus-destructive",
         "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-disabled",
         className,

package/src/components/input-otp.tsx

@@ -35,7 +35,8 @@ const InputOTPSlot = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-docked ring-1 ring-ring",
+        // ring is a box-shadow, which forced-colors mode strips; the outline survives it
+        isActive && "z-docked ring-1 ring-ring forced-colors:[outline:2px_solid] forced-colors:[outline-offset:-2px]",
         className,
       )}
       {...props}

package/src/components/input.tsx

@@ -25,7 +25,7 @@ const inputVariants = cva(
     "font-sans text-body-md text-foreground",
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
-    "focus-visible:border-primary focus-visible:shadow-focus",
+    "focus-visible:border-action focus-visible:shadow-focus",
     "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
   ],
@@ -33,7 +33,7 @@ const inputVariants = cva(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none",
       },