@kinetixui/ui 0.17.0 → 0.19.0

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",
       },

package/src/components/json-viewer.tsx

@@ -136,16 +136,18 @@ function JsonNode({
       </div>
       {expanded && (
         <>
-          {entries.map(([key, val], i) => (
-            <JsonNode
-              key={key}
-              name={isArray ? undefined : key}
-              value={val}
-              depth={depth + 1}
-              expandDepth={expandDepth}
-              isLast={i === entries.length - 1}
-            />
-          ))}
+          <div role="group">
+            {entries.map(([key, val], i) => (
+              <JsonNode
+                key={key}
+                name={isArray ? undefined : key}
+                value={val}
+                depth={depth + 1}
+                expandDepth={expandDepth}
+                isLast={i === entries.length - 1}
+              />
+            ))}
+          </div>
           <div style={{ paddingLeft: depth * 16 }}>
             <span>{closeBracket}</span>
             {!isLast && <span className="text-muted-foreground">,</span>}

package/src/components/list.tsx

@@ -29,39 +29,53 @@ export interface ListItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 const ListItem = React.forwardRef<HTMLDivElement, ListItemProps>(
   ({ className, leading, title, description, trailing, disabled, onSelect, ...props }, ref) => {
     const interactive = !!onSelect && !disabled;
-    return (
-      <div
-        ref={ref}
-        role={interactive ? "button" : "listitem"}
-        tabIndex={interactive ? 0 : undefined}
-        aria-disabled={disabled}
-        onClick={disabled ? undefined : onSelect}
-        onKeyDown={
-          interactive
-            ? (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onSelect?.();
-                }
-              }
-            : undefined
-        }
-        className={cn(
-          "flex items-center gap-3 px-3 py-3 font-sans outline-none",
-          // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
-          interactive &&
-            "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          disabled && "pointer-events-none opacity-disabled",
-          className,
-        )}
-        {...props}
-      >
+    const rowClass = cn(
+      "flex items-center gap-3 px-3 py-3 font-sans outline-none",
+      // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
+      interactive &&
+        "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+      disabled && "pointer-events-none opacity-disabled",
+      className,
+    );
+    const content = (
+      <>
         {leading && <div className="flex shrink-0 items-center justify-center">{leading}</div>}
         <div className="min-w-0 flex-1">
           <div className="truncate text-body-md text-foreground">{title}</div>
           {description && <div className="truncate text-body-sm text-muted-foreground">{description}</div>}
         </div>
         {trailing && <div className="flex shrink-0 items-center gap-2">{trailing}</div>}
+      </>
+    );
+
+    if (!interactive) {
+      return (
+        <div ref={ref} role="listitem" aria-disabled={disabled} className={rowClass} {...props}>
+          {content}
+        </div>
+      );
+    }
+
+    // A list's only valid children are listitems, so a pressable row is a listitem that
+    // contains the button — not a button standing in for the listitem.
+    return (
+      <div role="listitem">
+        <div
+          ref={ref}
+          role="button"
+          tabIndex={0}
+          onClick={onSelect}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onSelect?.();
+            }
+          }}
+          className={rowClass}
+          {...props}
+        >
+          {content}
+        </div>
       </div>
     );
   },

package/src/components/markdown-editor.tsx

@@ -163,7 +163,7 @@ function renderMarkdown(source: string): string {
  * this ports cleanly to all four platforms instead.
  */
 const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
-  ({ value, onChange, placeholder, rows = 10, className, ...props }, ref) => {
+  ({ value, onChange, placeholder, rows = 10, className, "aria-label": ariaLabel = "Markdown", ...props }, ref) => {
     const textareaRef = React.useRef<HTMLTextAreaElement>(null);
     const [showPreview, setShowPreview] = React.useState(false);
     const pendingSelection = React.useRef<{ start: number; end: number } | null>(null);
@@ -236,11 +236,12 @@ const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
             rows={rows}
+            aria-label={ariaLabel}
             className="resize-none rounded-none border-0 font-mono text-[13px] focus-visible:border-transparent focus-visible:shadow-none"
           />
           {showPreview && (
             <div
-              className="overflow-auto p-3 text-sm [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc"
+              className="overflow-auto p-3 text-sm [&_a]:text-link [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc"
               // Rendered from renderMarkdown above, which HTML-escapes all
               // source text before inserting any markup — safe from
               // injection, same trust boundary as any other self-generated

package/src/components/message-bubble.tsx

@@ -34,7 +34,7 @@ const MessageBubble = React.forwardRef<HTMLDivElement, MessageBubbleProps>(
           <div
             className={cn(
               "min-w-0 rounded-2xl px-3.5 py-2 text-body-sm",
-              sent ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+              sent ? "bg-action text-action-foreground" : "bg-muted text-foreground",
               sent && grouped && "rounded-tr-md",
               !sent && grouped && "rounded-tl-md",
             )}
@@ -45,7 +45,7 @@ const MessageBubble = React.forwardRef<HTMLDivElement, MessageBubbleProps>(
             <div className="flex items-center gap-1 px-1 text-label-sm text-muted-foreground">
               {timestamp}
               {sent && status && (
-                <span className={cn(status === "read" && "text-primary")}>
+                <span className={cn(status === "read" && "text-action")}>
                   {status === "sent" ? <Check className="size-3.5" /> : <CheckCheck className="size-3.5" />}
                 </span>
               )}
@@ -71,7 +71,7 @@ const TypingIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
         <span
           key={i}
           aria-hidden
-          className="size-1.5 animate-typing-dot rounded-full bg-muted-foreground"
+          className="size-1.5 animate-typing-dot motion-reduce:animate-none motion-reduce:opacity-70 rounded-full bg-muted-foreground"
           style={{ animationDelay: `${i * 150}ms` }}
         />
       ))}

package/src/components/multi-select.tsx

@@ -82,8 +82,8 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
             }}
             className={cn(
               "flex min-h-11 w-full flex-wrap items-center gap-1.5 border border-input bg-background px-3 py-2 font-sans",
-              "outline-none focus-visible:border-primary focus-visible:shadow-focus",
-              "aria-expanded:border-primary aria-expanded:shadow-focus",
+              "outline-none focus-visible:border-action focus-visible:shadow-focus",
+              "aria-expanded:border-action aria-expanded:shadow-focus",
               className,
             )}
             {...props}
@@ -108,7 +108,18 @@ const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
           }}
         >
           <Command shouldFilter={!creatable}>
-            <CommandInput placeholder="Search…" value={query} onValueChange={setQuery} />
+            <CommandInput
+              placeholder="Search…"
+              value={query}
+              onValueChange={setQuery}
+              onKeyDown={(e) => {
+                // Backspace in an empty search field removes the last chip, as in every tag input
+                if (e.key === "Backspace" && query === "" && current.length > 0) {
+                  e.preventDefault();
+                  remove(current[current.length - 1]!);
+                }
+              }}
+            />
             <CommandList>
               <CommandEmpty>
                 {canCreate ? (

package/src/components/native-select.tsx

@@ -18,7 +18,7 @@ const nativeSelectVariants = cva(
     "flex w-full appearance-none border border-input bg-background px-3 py-3 pe-9",
     "font-sans text-body-md text-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",
   ],
@@ -26,7 +26,7 @@ const nativeSelectVariants = cva(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none",
       },

package/src/components/notification-center.tsx

@@ -56,7 +56,7 @@ const NotificationCenterContent = React.forwardRef<HTMLDivElement, NotificationC
           <button
             type="button"
             onClick={onMarkAllRead}
-            className="text-label-md font-medium text-primary outline-none hover:underline focus-visible:underline"
+            className="text-label-md font-medium text-link outline-none hover:underline focus-visible:underline"
           >
             Mark all read
           </button>
@@ -102,7 +102,7 @@ const NotificationItem = React.forwardRef<HTMLDivElement, NotificationItemProps>
         )}
         {...props}
       >
-        <span className={cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-primary" : "bg-transparent")} />
+        <span className={cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-action" : "bg-transparent")} />
         <div className="min-w-0 flex-1">
           <p className={cn("truncate text-body-sm", unread ? "font-medium text-foreground" : "text-muted-foreground")}>
             {title}

package/src/components/progress.tsx

@@ -14,7 +14,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="size-full flex-1 bg-primary transition-transform"
+      className="size-full flex-1 bg-action transition-transform"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/src/components/radio-group.tsx

@@ -25,17 +25,17 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroupPrimitive.Item
     ref={ref}
     className={cn(
-      "aspect-square size-[18px] rounded-full border-2 border-input text-primary outline-none transition-colors",
+      "aspect-square size-[18px] rounded-full border-2 border-input text-action 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]:border-action",
       "aria-invalid:border-destructive",
       className,
     )}
     {...props}
   >
     <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-      <Circle className="size-2.5 fill-primary text-primary" />
+      <Circle className="size-2.5 fill-action text-action" />
     </RadioGroupPrimitive.Indicator>
   </RadioGroupPrimitive.Item>
 ));

package/src/components/scroll-area.tsx

@@ -9,7 +9,7 @@ const ScrollArea = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollAreaPrimitive.Viewport tabIndex={0} className="size-full rounded-[inherit] outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring">{children}</ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>

package/src/components/select.tsx

@@ -25,8 +25,8 @@ const SelectTrigger = React.forwardRef<
       "font-sans text-body-md text-foreground",
       "data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       "outline-none transition-colors",
-      "focus:border-primary focus:shadow-focus",
-      "data-[state=open]:border-primary",
+      "focus:border-action focus:shadow-focus",
+      "data-[state=open]:border-action",
       "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:shadow-focus-destructive",
       "disabled:cursor-not-allowed disabled:opacity-disabled",
       className,

package/src/components/skeleton.tsx

@@ -3,7 +3,7 @@
 import { cn } from "../lib/utils";
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+  return <div className={cn("animate-pulse rounded-md bg-muted motion-reduce:animate-none", className)} {...props} />;
 }
 
 export { Skeleton };

package/src/components/slider.tsx

@@ -14,13 +14,13 @@ const Slider = React.forwardRef<
     {...props}
   >
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      <SliderPrimitive.Range className="absolute h-full bg-action" />
     </SliderPrimitive.Track>
     {/* the accessible name belongs on the thumb: that is the element with role="slider" */}
     <SliderPrimitive.Thumb
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
+      className="block size-4 rounded-full border border-action/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled"
     />
   </SliderPrimitive.Root>
 ));

package/src/components/sonner.tsx

@@ -18,7 +18,7 @@ function Toaster({ theme = "system", ...props }: ToasterProps) {
           toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          actionButton: "group-[.toast]:bg-action group-[.toast]:text-action-foreground",
           cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
         },
       }}

package/src/components/spinner.tsx

@@ -9,7 +9,7 @@ import { cn } from "../lib/utils";
  * dependency; `size` sets the diameter, `variant` swaps the indicator
  * colour for on-color surfaces.
  */
-const spinnerVariants = cva("inline-block animate-spin rounded-full border-2 border-current border-t-transparent", {
+const spinnerVariants = cva("inline-block animate-spin motion-reduce:animate-[spin_3s_linear_infinite] rounded-full border-2 border-current border-t-transparent", {
   variants: {
     size: {
       sm: "size-4",
@@ -17,9 +17,9 @@ const spinnerVariants = cva("inline-block animate-spin rounded-full border-2 bor
       lg: "size-8",
     },
     variant: {
-      default: "text-primary",
+      default: "text-action",
       muted: "text-muted-foreground",
-      onColor: "text-primary-foreground",
+      onColor: "text-action-foreground",
     },
   },
   defaultVariants: { size: "md", variant: "default" },

package/src/components/stepper.tsx

@@ -39,8 +39,8 @@ const Stepper = React.forwardRef<HTMLOListElement, StepperProps>(
                 <span
                   className={cn(
                     "flex size-7 shrink-0 items-center justify-center rounded-full text-label-md font-medium",
-                    status === "complete" && "bg-primary text-primary-foreground",
-                    status === "current" && "border-2 border-primary text-primary",
+                    status === "complete" && "bg-action text-action-foreground",
+                    status === "current" && "border-2 border-action text-action",
                     status === "upcoming" && "border border-input text-muted-foreground",
                   )}
                 >
@@ -52,7 +52,7 @@ const Stepper = React.forwardRef<HTMLOListElement, StepperProps>(
                     className={cn(
                       "bg-border",
                       vertical ? "my-1 min-h-6 w-px flex-1 self-stretch" : "mt-3.5 h-px flex-1",
-                      status === "complete" && "bg-primary",
+                      status === "complete" && "bg-action",
                     )}
                   />
                 )}

package/src/components/switch.tsx

@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
       "peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
       "focus-visible:outline-none 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]:bg-primary data-[state=unchecked]:bg-tertiary",
+      "data-[state=checked]:bg-action data-[state=unchecked]:bg-tertiary",
       className,
     )}
     {...props}

package/src/components/tab-bar.tsx

@@ -35,7 +35,7 @@ const TabBarItem = React.forwardRef<HTMLButtonElement, TabBarItemProps>(
       aria-current={active ? "page" : undefined}
       className={cn(
         "relative flex flex-1 flex-col items-center justify-center gap-1 py-2 text-label-sm outline-none transition-colors",
-        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
+        active ? "text-action" : "text-muted-foreground hover:text-foreground",
         "focus-visible:bg-accent",
         className,
       )}

package/src/components/table-of-contents.tsx

@@ -31,7 +31,7 @@ const TableOfContents = React.forwardRef<HTMLElement, TableOfContentsProps>(
             style={{ paddingInlineStart: `${((item.level ?? 1) - 1) * 12 + 12}px` }}
             className={cn(
               "-ms-px border-s py-1.5 text-body-sm outline-none transition-colors",
-              isActive ? "border-primary font-medium text-primary" : "border-transparent text-muted-foreground hover:text-foreground",
+              isActive ? "border-action font-medium text-action" : "border-transparent text-muted-foreground hover:text-foreground",
             )}
           >
             {item.label}

package/src/components/textarea.tsx

@@ -17,7 +17,7 @@ const textareaVariants = 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",
   ],
@@ -25,7 +25,7 @@ const textareaVariants = cva(
     variants: {
       state: {
         Default: "",
-        Focus: "border-primary shadow-focus",
+        Focus: "border-action shadow-focus",
         Error: "border-destructive",
         Disabled: "opacity-disabled pointer-events-none resize-none",
       },

package/src/components/timeline.tsx

@@ -35,7 +35,7 @@ const Body = ({ item, align }: { item: TimelineItem; align: "left" | "right" })
 
 const Rail = ({ item, isLast }: { item: TimelineItem; isLast: boolean }) => (
   <div className="flex flex-col items-center">
-    <span className="flex size-2.5 shrink-0 items-center justify-center rounded-full bg-primary">{item.icon}</span>
+    <span className="flex size-2.5 shrink-0 items-center justify-center rounded-full bg-action">{item.icon}</span>
     {!isLast && <span aria-hidden className="my-1 w-px flex-1 bg-border" />}
   </div>
 );

package/src/components/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-overlay overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
+        "z-overlay overflow-hidden rounded-md bg-action px-3 py-1.5 text-xs text-action-foreground font-sans",
         "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,

package/src/components/virtual-list.tsx

@@ -63,7 +63,8 @@ function VirtualList<T>({
     <div
       ref={containerRef}
       role="list"
-      className={cn("overflow-y-auto font-sans", className)}
+      tabIndex={0}
+      className={cn("overflow-y-auto font-sans outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", className)}
       style={{ height, ...style }}
       onScroll={(e) => {
         onScroll?.(e);

package/src/components-a11y.test.tsx

@@ -10,37 +10,16 @@ import { afterEach, describe, expect, it } from "vitest";
  * association. jsdom has no layout or stylesheet, so `color-contrast` (covered
  * by `pnpm check:contrast`) and page-level rules are off.
  *
- * KNOWN lists violations that already existed when this pass was added
- * (mostly demo stories with unlabeled controls — fix the story or the component), keyed
- * `story:rule`. A new violation fails; fixing a known one fails too (stale
- * entry) until it is deleted from the list, so the baseline only shrinks.
+ * KNOWN lists violations that are tolerated, keyed `story:rule`. It is empty: every story
+ * is clean. A new violation fails; if you must baseline one, a later fix fails until the
+ * entry is deleted, so the list can only shrink.
  */
 const stories = import.meta.glob("./stories/*.stories.tsx", { eager: true }) as Record<
   string,
   Record<string, unknown>
 >;
 
-const KNOWN = new Set<string>([
-  "Banner:landmark-no-duplicate-banner",
-  "Banner:landmark-unique",
-  "CircularProgress:aria-progressbar-name",
-  "ColorPicker:label",
-  "DiffViewer:aria-required-children",
-  "FileUpload:label",
-  "FileUpload:nested-interactive",
-  "InputOTP:label",
-  "JsonViewer:aria-required-parent",
-  "List:aria-required-children",
-  "List:button-name",
-  "MarkdownEditor:label",
-  "MultiSelect:aria-input-field-name",
-  "NativeSelect:select-name",
-  "NumberInput:label",
-  "Progress:aria-progressbar-name",
-  "Select:button-name",
-  "Slider:aria-input-field-name",
-  "ToggleGroup:button-name",
-]);
+const KNOWN = new Set<string>([]);
 
 afterEach(cleanup);
 

package/src/components-behavior.test.tsx

@@ -65,7 +65,7 @@ describe("Badge", () => {
     );
     const link = screen.getByRole("link", { name: "New" });
     expect(link).toHaveAttribute("href", "/new");
-    expect(link).toHaveClass("bg-primary"); // badge classes merged onto the <a>
+    expect(link).toHaveClass("bg-action"); // badge classes merged onto the <a>
   });
 });