fix(ui-kit): respect prefers-reduced-motion across animated ui-kit and miner-ui components (#8360)

13 ui-kit components (accordion, alert-dialog, context-menu, dialog,
dropdown-menu, hover-card, input-otp, menubar, navigation-menu, popover,
select, sheet, tooltip) and 2 miner-ui components (streaming-text,
chat/typing-indicator) animated unconditionally, so a user with the OS
reduce-motion preference still got full fade/zoom/slide/bounce/blink/caret
motion. Pairs each animate-* utility with motion-reduce:animate-none, the same
guard skeleton.tsx/state-views.tsx/button.tsx/tabs.tsx already apply, inline at
each call site (no new abstraction). Adds regression tests asserting the guard
on a Radix content component (AccordionContent) and on TypingIndicator, plus a
class-list assertion on StreamingText's caret.

Closes #8303

Co-authored-by: RealDiligent <nft.gold.eth@gmail.com>

Author: RealDiligent

apps/loopover-miner-ui/src/components/chat/typing-indicator.test.tsx

@@ -0,0 +1,23 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { TypingIndicator } from "./typing-indicator";
+
+// Regression for #8303: the three animate-bounce dots must each pair their animation with
+// motion-reduce:animate-none so a user with the OS "reduce motion" preference set sees a static indicator
+// instead of a bouncing one -- matching the guard skeleton.tsx / Spinner already provide.
+describe("TypingIndicator respects prefers-reduced-motion (#8303)", () => {
+  it("renders three bouncing dots that each carry motion-reduce:animate-none", () => {
+    const { container } = render(<TypingIndicator authorName="Assistant" />);
+    const dots = container.querySelectorAll(".animate-bounce");
+    expect(dots.length).toBe(3);
+    for (const dot of dots) {
+      expect(dot.className).toContain("motion-reduce:animate-none");
+    }
+  });
+
+  it("renders nothing when not composing (unchanged behavior)", () => {
+    const { container } = render(<TypingIndicator composing={false} />);
+    expect(container.firstChild).toBeNull();
+  });
+});

apps/loopover-miner-ui/src/components/chat/typing-indicator.tsx

@@ -16,13 +16,16 @@ export function TypingIndicator({
       <span className="sr-only">{label}</span>
       <span
         aria-hidden="true"
-        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.3s]"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.3s] motion-reduce:animate-none"
       />
       <span
         aria-hidden="true"
-        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.15s]"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:-0.15s] motion-reduce:animate-none"
+      />
+      <span
+        aria-hidden="true"
+        className="size-1.5 animate-bounce rounded-full bg-muted-foreground motion-reduce:animate-none"
       />
-      <span aria-hidden="true" className="size-1.5 animate-bounce rounded-full bg-muted-foreground" />
     </div>
   );
 }

apps/loopover-miner-ui/src/components/streaming-text.tsx

@@ -32,7 +32,7 @@ export function StreamingText({ source, className }: { source: ChunkSource | nul
     <p className={className} data-status={status} aria-busy={status === "streaming"}>
       {text}
       {status === "streaming" && !reducedMotion ? (
-        <span aria-hidden="true" className="ml-0.5 inline-block animate-pulse">
+        <span aria-hidden="true" className="ml-0.5 inline-block animate-pulse motion-reduce:animate-none">
           ▍
         </span>
       ) : null}

apps/loopover-miner-ui/src/streaming-text.test.tsx

@@ -61,6 +61,9 @@ describe("StreamingText (#6516)", () => {
     await src.push("typing…");
     await waitFor(() => expect(screen.getByText(/typing…/)).toBeTruthy());
     expect(caret()).not.toBeNull(); // still streaming → caret present under full motion
+    // #8303: the caret's animate-pulse is also paired with motion-reduce:animate-none as a CSS-level
+    // fallback, complementing the JS usePrefersReducedMotion guard that already omits it entirely.
+    expect(caret()?.className).toContain("motion-reduce:animate-none");
   });
 
   it("suppresses the caret under prefers-reduced-motion but still reaches the full text and done", async () => {

packages/loopover-ui-kit/src/components/accordion.test.tsx

@@ -0,0 +1,33 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+
+// Regression for #8303: the Radix content/transition components in @loopover/ui-kit must pair their
+// animate-* utilities with motion-reduce:animate-none, matching skeleton.tsx / state-views.tsx, so a user
+// with the OS "reduce motion" preference set does not get the fade/zoom/slide/accordion animation.
+// AccordionContent is a representative Radix content component (its animate-accordion-up/down utilities are
+// the ones the issue calls out) and renders inline when its item is open.
+describe("AccordionContent respects prefers-reduced-motion (#8303)", () => {
+  it("carries motion-reduce:animate-none alongside its animate-accordion utilities", () => {
+    const { getByText } = render(
+      <Accordion type="single" defaultValue="a" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>Trigger</AccordionTrigger>
+          <AccordionContent>Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    // The Radix Content wraps the inner padding div that holds the text.
+    const content = getByText("Body").parentElement as HTMLElement;
+    expect(content.className).toContain(
+      "data-[state=open]:animate-accordion-down",
+    );
+    expect(content.className).toContain("motion-reduce:animate-none");
+  });
+});

packages/loopover-ui-kit/src/components/accordion.tsx

@@ -44,7 +44,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down motion-reduce:animate-none"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>

packages/loopover-ui-kit/src/components/alert-dialog.tsx

@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg motion-reduce:animate-none",
         className,
       )}
       {...props}

packages/loopover-ui-kit/src/components/context-menu.tsx

@@ -44,7 +44,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-context-menu-content-transform-origin)",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-context-menu-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -60,7 +60,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-context-menu-content-transform-origin)",
+        "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-context-menu-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}

packages/loopover-ui-kit/src/components/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg motion-reduce:animate-none",
         className,
       )}
       {...props}

packages/loopover-ui-kit/src/components/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-dropdown-menu-content-transform-origin)",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-dropdown-menu-content-transform-origin) motion-reduce:animate-none",
       className,
     )}
     {...props}
@@ -66,7 +66,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-dropdown-menu-content-transform-origin)",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-(--radix-dropdown-menu-content-transform-origin) motion-reduce:animate-none",
         className,
       )}
       {...props}