@kinetixui/ui 0.16.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.16.1",
+  "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.16.1",
+    "@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",
@@ -101,6 +101,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "axe-core": "4.13.0",
     "jsdom": "^30.0.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

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

@@ -15,11 +15,11 @@ import { cn } from "../lib/utils";
  * container. Hence the swapped bg/text on that one variant.
  */
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium font-sans tracking-[0.5px] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full px-2.5 py-1 text-label-md font-sans transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     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

@@ -20,7 +20,7 @@ const bannerVariants = cva(
   {
     variants: {
       variant: {
-        information: "border-info/20 bg-info/10 text-info",
+        information: "border-info/20 bg-info/10 text-info-on-container",
         warning: "border-warning/25 bg-warning/15 text-warning",
         success: "border-success/25 bg-success/15 text-success",
         error: "border-destructive/20 bg-destructive/10 text-destructive",
@@ -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

@@ -36,33 +36,37 @@ const buttonVariants = cva(
       variant: {
         // bg primary / text on-primary; hover+active step down the blue ramp; disabled -> border grey
         // rest = --primary; hover/active dim it via opacity so it works in BOTH themes.
+        // Alphas are bounded by contrast, not taste: text on the dimmed fill must stay >= 4.5:1
+        // (light: 90% = 5.05, 85% = 4.54, 80% = 4.11 fails) — enforced by check:contrast.
         // (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/80 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
+        //  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,
+        //  and anything above ~97% is imperceptible. Enforced by check:contrast.
         Secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground/90 active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground active:text-secondary focus-visible:bg-secondary disabled:bg-border disabled:text-muted-foreground",
         // 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)
-        sm: "px-3 py-2 text-[11px] leading-4 tracking-[0.5px]",
+        sm: "px-3 py-2 text-label-sm",
         // spacing/4 + spacing/3 ; Label Medium (12/16, +0.5)
-        md: "px-4 py-3 text-[12px] leading-4 tracking-[0.5px]",
+        md: "px-4 py-3 text-label-md",
         // spacing/6 + spacing/3 ; Label Large (14/20, +0.1)
-        lg: "px-6 py-3 text-[14px] leading-5 tracking-[0.1px]",
+        lg: "px-6 py-3 text-label-lg",
         // spacing/3 all round, square
         icon: "p-3 [&>*:not(svg)]:sr-only",
       },
@@ -83,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/80" },
+      { 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/90 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}
@@ -220,7 +223,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
           max={360}
           step={1}
           onValueChange={([nh]) => commit(nh ?? h, s, v, a)}
-          aria-label="Hue"
           className="relative flex h-4 w-full touch-none select-none items-center"
         >
           <SliderPrimitive.Track
@@ -230,7 +232,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
                 "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))",
             }}
           />
-          <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          <SliderPrimitive.Thumb aria-label="Hue" className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
         </SliderPrimitive.Root>
 
         {alpha && (
@@ -240,7 +242,6 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
             max={100}
             step={1}
             onValueChange={([na]) => commit(h, s, v, (na ?? a * 100) / 100)}
-            aria-label="Alpha"
             className="relative flex h-4 w-full touch-none select-none items-center"
           >
             <SliderPrimitive.Track
@@ -256,7 +257,7 @@ const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
                 style={{ backgroundImage: `linear-gradient(to right, transparent, hsl(${h} ${s}% ${v}%))` }}
               />
             </SliderPrimitive.Track>
-            <SliderPrimitive.Thumb className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+            <SliderPrimitive.Thumb aria-label="Alpha" className="block size-4 rounded-full border-2 border-white bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
           </SliderPrimitive.Root>
         )}
 
@@ -335,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

@@ -19,7 +19,7 @@ export interface DataGridColumn<TData> {
   /** fixed to this side, not draggable, and excluded from the reorder sequence */
   pinned?: "left" | "right";
   sortable?: boolean;
-  /** double-click swaps the cell for a text input; commit fires on Enter/blur, Escape cancels */
+  /** double-click — or Enter / F2 on the focused cell — swaps it for a text input; commit fires on Enter/blur, Escape cancels */
   editable?: boolean;
   onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
@@ -173,22 +173,181 @@ function DataGrid<TData>({
     window.addEventListener("pointerup", handleUp);
   }
 
-  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string) {
-    column.onCellEdit?.(row, rowIndex, value);
+  // After a keyboard commit/cancel, hand focus back to the cell that was being edited (a blur
+  // commit — the user clicked or tabbed elsewhere — must not pull focus back).
+  const restoreFocusRef = React.useRef<{ rowIndex: number; columnId: string } | null>(null);
+  React.useEffect(() => {
+    const target = restoreFocusRef.current;
+    if (editing || !target) return;
+    restoreFocusRef.current = null;
+    containerRef.current?.querySelector<HTMLElement>(`[data-cell="${target.rowIndex}:${target.columnId}"]`)?.focus();
+  }, [editing]);
+
+  function endEdit(restoreFocus: boolean) {
+    if (restoreFocus && editing) restoreFocusRef.current = { rowIndex: editing.rowIndex, columnId: editing.columnId };
     setEditing(null);
   }
 
+  function commitEdit(column: DataGridColumn<TData>, row: TData, rowIndex: number, value: string, restoreFocus = false) {
+    column.onCellEdit?.(row, rowIndex, value);
+    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"
@@ -201,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" }
                   : {})}
@@ -224,8 +386,12 @@ function DataGrid<TData>({
                   });
                 }}
                 onClick={() => column.sortable && 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",
+                  "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",
                 )}
@@ -242,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>
             );
@@ -255,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"
@@ -271,8 +438,17 @@ 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 })}
-                      className={cn("flex shrink-0 items-center px-2", column.pinned && "bg-background")}
+                      // 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 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                        column.pinned && "bg-background",
+                      )}
                       style={{ width, ...pinnedStyle }}
                     >
                       {isEditing ? (
@@ -281,8 +457,8 @@ function DataGrid<TData>({
                           defaultValue={column.value ? String(column.value(row)) : ""}
                           className="h-7 w-full rounded-sm border-0 bg-transparent px-1 text-sm outline-none ring-1 ring-inset ring-ring"
                           onKeyDown={(e) => {
-                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value);
-                            else if (e.key === "Escape") setEditing(null);
+                            if (e.key === "Enter") commitEdit(column, row, rowIndex, e.currentTarget.value, true);
+                            else if (e.key === "Escape") endEdit(true);
                           }}
                           onBlur={(e) => commitEdit(column, row, rowIndex, e.currentTarget.value)}
                         />
@@ -298,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]",
       },