fix(ui): animate finding group collapse

- Keep after-row content mounted during exit - Animate inline resource container close state - Preserve existing finding group table behavior
feat(ui): add Combobox trigger transition
2026-06-10 13:32:44 +00:00 · 2026-06-05 14:55:00 +02:00 · 2026-06-05 14:54:52 +02:00 · 2026-06-05 14:54:45 +02:00 · 2026-06-05 14:54:37 +02:00 · 2026-06-05 14:49:09 +02:00
25 changed files with 1408 additions and 141 deletions
@@ -5,7 +5,7 @@ import {
  getCoreRowModel,
  useReactTable,
 } from "@tanstack/react-table";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import { ChevronsDown } from "lucide-react";
 import { useImperativeHandle, useRef } from "react";

@@ -213,109 +213,112 @@ export function InlineResourceContainer({
        onMuteComplete: handleMuteComplete,
      }}
    >
-      <tr>
+      <motion.tr
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+      >
        <td colSpan={columnCount} className="p-0">
-          <AnimatePresence initial>
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: "auto", opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.2, ease: "easeOut" }}
-              className="overflow-hidden"
-            >
-              <div className="relative">
-                <div
-                  ref={combinedScrollRef}
-                  className="max-h-[440px] overflow-y-auto pl-6"
-                >
-                  {/* Resource rows or skeleton placeholder */}
-                  <table className="-mt-2.5 w-full border-separate border-spacing-y-4">
-                    <tbody>
-                      {isLoading && rows.length === 0 ? (
-                        Array.from({ length: skeletonRowCount }).map((_, i) => (
-                          <ResourceSkeletonRow
-                            key={i}
-                            isEmptyStateSized={filteredResourceCount === 0}
-                          />
-                        ))
-                      ) : rows.length > 0 ? (
-                        rows.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            data-state={row.getIsSelected() && "selected"}
-                            className="cursor-pointer"
-                            onClick={(e) => {
-                              // Don't open drawer if clicking interactive elements
-                              // (links, buttons, checkboxes, dropdown items)
-                              const target = e.target as HTMLElement;
-                              if (
-                                target.closest(
-                                  "a, button, input, [role=menuitem]",
-                                )
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="overflow-hidden"
+          >
+            <div className="relative">
+              <div
+                ref={combinedScrollRef}
+                className="max-h-[440px] overflow-y-auto pl-6"
+              >
+                {/* Resource rows or skeleton placeholder */}
+                <table className="-mt-2.5 w-full border-separate border-spacing-y-4">
+                  <tbody>
+                    {isLoading && rows.length === 0 ? (
+                      Array.from({ length: skeletonRowCount }).map((_, i) => (
+                        <ResourceSkeletonRow
+                          key={i}
+                          isEmptyStateSized={filteredResourceCount === 0}
+                        />
+                      ))
+                    ) : rows.length > 0 ? (
+                      rows.map((row) => (
+                        <TableRow
+                          key={row.id}
+                          data-state={row.getIsSelected() && "selected"}
+                          className="cursor-pointer"
+                          onClick={(e) => {
+                            // Don't open drawer if clicking interactive elements
+                            // (links, buttons, checkboxes, dropdown items)
+                            const target = e.target as HTMLElement;
+                            if (
+                              target.closest(
+                                "a, button, input, [role=menuitem]",
                              )
-                                return;
-                              drawer.openDrawer(row.index);
-                            }}
-                          >
-                            {row.getVisibleCells().map((cell) => (
-                              <TableCell key={cell.id}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
-                              </TableCell>
-                            ))}
-                          </TableRow>
-                        ))
-                      ) : (
-                        <TableRow className="hover:bg-transparent">
-                          <TableCell
-                            colSpan={columns.length}
-                            className="h-24 text-center"
-                          >
-                            {getFindingGroupEmptyStateMessage(group, filters)}
-                          </TableCell>
+                            )
+                              return;
+                            drawer.openDrawer(row.index);
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell key={cell.id}>
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          ))}
                        </TableRow>
-                      )}
-                    </tbody>
-                  </table>
+                      ))
+                    ) : (
+                      <TableRow className="hover:bg-transparent">
+                        <TableCell
+                          colSpan={columns.length}
+                          className="h-24 text-center"
+                        >
+                          {getFindingGroupEmptyStateMessage(group, filters)}
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </tbody>
+                </table>

-                  {/* Loading state for infinite scroll (subsequent pages only) */}
-                  {isLoading && rows.length > 0 && (
-                    <LoadingState label="Loading resources..." />
-                  )}
+                {/* Loading state for infinite scroll (subsequent pages only) */}
+                {isLoading && rows.length > 0 && (
+                  <LoadingState label="Loading resources..." />
+                )}

-                  {/* Sentinel for scroll hint detection */}
-                  <div
-                    ref={scrollHintSentinelRef}
-                    aria-hidden
-                    className="h-px shrink-0"
-                  />
+                {/* Sentinel for scroll hint detection */}
+                <div
+                  ref={scrollHintSentinelRef}
+                  aria-hidden
+                  className="h-px shrink-0"
+                />

-                  {/* Sentinel for infinite scroll */}
-                  <div ref={sentinelRef} className="h-1" />
-                </div>
+                {/* Sentinel for infinite scroll */}
+                <div ref={sentinelRef} className="h-1" />
+              </div>

-                {/* Gradients rendered after scroll container so they paint on top */}
-                <div className="from-bg-neutral-secondary pointer-events-none absolute top-0 right-0 left-6 z-20 h-6 bg-gradient-to-b to-transparent" />
-                <div className="from-bg-neutral-secondary pointer-events-none absolute right-0 bottom-0 left-6 z-20 h-6 bg-gradient-to-t to-transparent" />
+              {/* Gradients rendered after scroll container so they paint on top */}
+              <div className="from-bg-neutral-secondary pointer-events-none absolute top-0 right-0 left-6 z-20 h-6 bg-gradient-to-b to-transparent" />
+              <div className="from-bg-neutral-secondary pointer-events-none absolute right-0 bottom-0 left-6 z-20 h-6 bg-gradient-to-t to-transparent" />

-                {/* Scroll hint */}
-                {showScrollHint && (
-                  <div className="pointer-events-none absolute right-0 bottom-0 left-6 z-30">
-                    <div className="absolute inset-x-0 bottom-2 flex justify-center">
-                      <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md">
-                        <ChevronsDown className="inline size-3.5" /> Scroll for
-                        more
-                      </div>
+              {/* Scroll hint */}
+              {showScrollHint && (
+                <div className="pointer-events-none absolute right-0 bottom-0 left-6 z-30">
+                  <div className="absolute inset-x-0 bottom-2 flex justify-center">
+                    <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md">
+                      <ChevronsDown className="inline size-3.5" /> Scroll for
+                      more
                    </div>
                  </div>
-                )}
-              </div>
-            </motion.div>
-          </AnimatePresence>
+                </div>
+              )}
+            </div>
+          </motion.div>
        </td>
-      </tr>
+      </motion.tr>

      <ResourceDetailDrawer
        open={drawer.isOpen}
@@ -32,4 +32,53 @@ describe("Button", () => {
      "text-xs",
    );
  });
+
+  it("applies the shared press and reduced-motion contract to button-like variants", () => {
+    // Given
+    render(<Button>Start scan</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Start scan" });
+
+    // Then
+    expect(button).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow,transform,scale]",
+      "duration-150",
+      "ease-out",
+      "active:scale-[0.98]",
+      "motion-reduce:active:scale-100",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+    expect(button).not.toHaveClass("transition-all");
+  });
+
+  it("keeps link buttons from scaling on press", () => {
+    // Given
+    render(<Button variant="link">Open details</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Open details" });
+
+    // Then
+    expect(button).toHaveClass("active:scale-100");
+    expect(button).not.toHaveClass("active:scale-[0.98]");
+  });
+
+  it("keeps menu buttons on the shared targeted transition recipe", () => {
+    // Given
+    render(<Button variant="menu">Open menu</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Open menu" });
+
+    // Then
+    expect(button).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow,transform,scale]",
+      "duration-200",
+      "active:scale-[0.98]",
+      "motion-reduce:active:scale-100",
+    );
+    expect(button).not.toHaveClass("transition-all");
+  });
 });
@@ -5,7 +5,7 @@ import type { ComponentProps } from "react";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[8px] text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-button-disabled disabled:text-text-neutral-tertiary outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[8px] text-sm font-medium transition-[background-color,border-color,color,box-shadow,transform,scale] duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:bg-button-disabled disabled:text-text-neutral-tertiary motion-reduce:active:scale-100 motion-reduce:transform-none motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
@@ -21,13 +21,13 @@ const buttonVariants = cva(
          "border border-border-neutral-secondary bg-bg-neutral-secondary hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary text-text-neutral-primary focus-visible:ring-border-neutral-tertiary/50",
        ghost:
          "border border-transparent text-text-neutral-primary hover:bg-bg-neutral-tertiary active:bg-border-neutral-secondary focus-visible:ring-border-neutral-secondary/50",
-        link: "text-button-tertiary underline-offset-4 hover:text-button-tertiary-hover disabled:bg-transparent",
+        link: "text-button-tertiary underline-offset-4 hover:text-button-tertiary-hover active:scale-100 disabled:bg-transparent",
        // Menu variant like secondary but more padding and the back is almost transparent
-        menu: "backdrop-blur-xl bg-white/60 dark:bg-white/5 border border-white/80 dark:border-white/10 text-text-neutral-primary dark:text-white shadow-lg hover:bg-white/70 dark:hover:bg-white/10 hover:border-white/90 dark:hover:border-white/30 active:bg-white/80 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-button-primary/50 transition-all duration-200",
+        menu: "backdrop-blur-xl bg-white/60 dark:bg-white/5 border border-white/80 dark:border-white/10 text-text-neutral-primary dark:text-white shadow-lg hover:bg-white/70 dark:hover:bg-white/10 hover:border-white/90 dark:hover:border-white/30 active:bg-white/80 dark:active:bg-white/15 focus-visible:ring-button-primary/50 duration-200",
        "menu-active":
-          "backdrop-blur-xl bg-white/50 dark:bg-white/5 border border-black/[0.08] dark:border-white/10 text-text-neutral-primary dark:text-white shadow-sm hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/[0.12] dark:hover:border-white/30 active:bg-white/70 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-button-primary/50 transition-all duration-200",
+          "backdrop-blur-xl bg-white/50 dark:bg-white/5 border border-black/[0.08] dark:border-white/10 text-text-neutral-primary dark:text-white shadow-sm hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/[0.12] dark:hover:border-white/30 active:bg-white/70 dark:active:bg-white/15 focus-visible:ring-button-primary/50 duration-200",
        "menu-inactive":
-          "text-text-neutral-primary border border-transparent hover:backdrop-blur-xl hover:bg-white/40 dark:hover:bg-white/5 hover:border-black/[0.08] dark:hover:border-white/10 hover:shadow-sm active:bg-white/50 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-border-neutral-secondary/50 transition-all duration-200",
+          "text-text-neutral-primary border border-transparent hover:backdrop-blur-xl hover:bg-white/40 dark:hover:bg-white/5 hover:border-black/[0.08] dark:hover:border-white/10 hover:shadow-sm active:bg-white/50 dark:active:bg-white/15 focus-visible:ring-border-neutral-secondary/50 duration-200",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+function ControlledCheckbox() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      aria-label="Select provider"
+      checked={checked}
+      onCheckedChange={(value) => setChecked(value === true)}
+    />
+  );
+}
+
+describe("Checkbox", () => {
+  it("animates the background and check mark as one state change", async () => {
+    // Given - A controlled checkbox in the unchecked state
+    const user = userEvent.setup();
+    render(<ControlledCheckbox />);
+
+    const checkbox = screen.getByRole("checkbox", { name: /select provider/i });
+    const indicator = checkbox.querySelector(
+      "[data-slot='checkbox-indicator']",
+    );
+
+    // When - The user checks the checkbox
+    await user.click(checkbox);
+
+    // Then - The background and check mark transitions use the same timing
+    expect(checkbox).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(indicator).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-200",
+      "ease-out",
+      "data-[state=checked]:scale-100",
+      "data-[state=checked]:opacity-100",
+      "data-[state=unchecked]:scale-75",
+      "data-[state=unchecked]:opacity-0",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -41,7 +41,7 @@ function Checkbox({
      checked={indeterminate ? "indeterminate" : checked}
      className={cn(
        // Base styles
-        "peer shrink-0 rounded-sm border transition-all outline-none",
+        "peer shrink-0 rounded-sm border transition-colors duration-200 ease-out outline-none motion-reduce:transition-none",
        sizeStyles.root,
        // Default state
        "bg-bg-input-primary border-border-input-primary shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]",
@@ -58,8 +58,9 @@ function Checkbox({
      {...props}
    >
      <CheckboxPrimitive.Indicator
+        forceMount
        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
+        className="grid place-content-center text-current transition-[opacity,transform] duration-200 ease-out data-[state=checked]:scale-100 data-[state=checked]:opacity-100 data-[state=indeterminate]:scale-100 data-[state=indeterminate]:opacity-100 data-[state=unchecked]:scale-75 data-[state=unchecked]:opacity-0 motion-reduce:scale-100 motion-reduce:transition-none"
      >
        {indeterminate || checked === "indeterminate" ? (
          <MinusIcon className={sizeStyles.icon} />
@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { Combobox } from "./combobox";
+
+const options = [
+  { value: "aws", label: "AWS" },
+  { value: "azure", label: "Azure" },
+  { value: "gcp", label: "GCP" },
+];
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as unknown as typeof ResizeObserver;
+
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", {
+    configurable: true,
+    value: vi.fn(() => false),
+  });
+  Object.defineProperty(HTMLElement.prototype, "releasePointerCapture", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("Combobox", () => {
+  it("renders a selectable combobox trigger", () => {
+    // Given
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: /select provider/i });
+
+    // Then
+    expect(trigger).toBeVisible();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("uses visible trigger and chevron open-state motion", () => {
+    // Given
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: /select provider/i });
+    const icon = trigger.querySelector("svg");
+
+    // Then
+    expect(trigger).toHaveClass(
+      "group",
+      "transition-[background-color,border-color,color,box-shadow]",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("opens with the shared Popover content motion contract", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    await user.click(
+      screen.getByRole("combobox", { name: /select provider/i }),
+    );
+    const content = document.querySelector("[data-slot='popover-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -113,8 +113,10 @@ export function Combobox({
          variant="outline"
          role="combobox"
          aria-expanded={open}
+          aria-label={selectedOption ? selectedOption.label : placeholder}
          disabled={disabled}
          className={cn(
+            "group transition-[background-color,border-color,color,box-shadow]",
            comboboxTriggerVariants({ variant }),
            triggerClassName,
            className,
@@ -123,7 +125,7 @@ export function Combobox({
          <span className="truncate">
            {selectedOption ? selectedOption.label : placeholder}
          </span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+function renderOpenDialog() {
+  return render(
+    <Dialog open>
+      <DialogTrigger>Open modal</DialogTrigger>
+      <DialogContent>
+        <DialogTitle>Launch scan</DialogTitle>
+        <DialogDescription>Configure scan settings</DialogDescription>
+      </DialogContent>
+    </Dialog>,
+  );
+}
+
+describe("Dialog", () => {
+  it("renders controlled content through the Radix Dialog API", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const dialog = screen.getByRole("dialog", { name: "Launch scan" });
+
+    // Then
+    expect(dialog).toBeVisible();
+    expect(dialog).toHaveAttribute("data-slot", "dialog-content");
+    expect(screen.getByText("Configure scan settings")).toBeVisible();
+  });
+
+  it("uses an intentional overlay motion contract", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const overlay = document.querySelector("[data-slot='dialog-overlay']");
+
+    // Then
+    expect(overlay).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses an intentional content motion contract", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const dialog = screen.getByRole("dialog", { name: "Launch scan" });
+
+    // Then
+    expect(dialog).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -37,7 +37,7 @@ function DialogOverlay({
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
-        "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/50",
+        "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/50 duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:animate-none motion-reduce:transition-none",
        className,
      )}
      {...props}
@@ -59,7 +59,7 @@ function DialogContent({
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none sm:max-w-lg",
          className,
        )}
        onClick={(e) => e.stopPropagation()}
@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+function renderOpenDrawer() {
+  return render(
+    <Drawer open>
+      <DrawerTrigger>Open drawer</DrawerTrigger>
+      <DrawerContent>
+        <DrawerTitle>Resource details</DrawerTitle>
+        <DrawerDescription>Review resource metadata</DrawerDescription>
+      </DrawerContent>
+    </Drawer>,
+  );
+}
+
+describe("Drawer", () => {
+  it("renders controlled content through the Vaul Drawer API", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const drawer = screen.getByRole("dialog", { name: "Resource details" });
+
+    // Then
+    expect(drawer).toBeVisible();
+    expect(drawer).toHaveAttribute("data-slot", "drawer-content");
+    expect(screen.getByText("Review resource metadata")).toBeVisible();
+  });
+
+  it("uses an intentional overlay motion contract", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const overlay = document.querySelector("[data-slot='drawer-overlay']");
+
+    // Then
+    expect(overlay).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses direction-aware drawer content motion", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const drawer = screen.getByRole("dialog", { name: "Resource details" });
+
+    // Then
+    expect(drawer).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "data-[vaul-drawer-direction=bottom]:slide-in-from-bottom-full",
+      "data-[vaul-drawer-direction=bottom]:data-[state=closed]:slide-out-to-bottom-full",
+      "data-[vaul-drawer-direction=top]:slide-in-from-top-full",
+      "data-[vaul-drawer-direction=top]:data-[state=closed]:slide-out-to-top-full",
+      "data-[vaul-drawer-direction=right]:slide-in-from-right-full",
+      "data-[vaul-drawer-direction=right]:data-[state=closed]:slide-out-to-right-full",
+      "data-[vaul-drawer-direction=left]:slide-in-from-left-full",
+      "data-[vaul-drawer-direction=left]:data-[state=closed]:slide-out-to-left-full",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -35,7 +35,7 @@ function DrawerOverlay({
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
-        "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/50",
+        "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/50 duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:animate-none motion-reduce:transition-none",
        className,
      )}
      {...props}
@@ -54,11 +54,11 @@ function DrawerContent({
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:border-l-border-neutral-secondary data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r",
+          "group/drawer-content bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex h-auto flex-col duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
+          "data-[vaul-drawer-direction=top]:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-[state=closed]:slide-out-to-top-full data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-[state=closed]:slide-out-to-bottom-full data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:border-l-border-neutral-secondary data-[vaul-drawer-direction=right]:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-[state=closed]:slide-out-to-right-full data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l",
+          "data-[vaul-drawer-direction=left]:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-[state=closed]:slide-out-to-left-full data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r",
          className,
        )}
        {...props}
@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown";
+
+function renderActionsDropdown() {
+  return render(
+    <DropdownMenu open>
+      <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>,
+  );
+}
+
+describe("DropdownMenu", () => {
+  it("renders open menu content through the Radix DropdownMenu API", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toBeVisible();
+    expect(menu).toHaveAttribute("data-slot", "dropdown-menu-content");
+    expect(screen.getByRole("menuitem", { name: "Edit" })).toBeVisible();
+    expect(screen.getByRole("menuitem", { name: "Delete" })).toBeVisible();
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toHaveClass(
+      "origin-(--radix-dropdown-menu-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy menu motion for reduced-motion users", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("applies the same motion contract to submenu content", () => {
+    // Given
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub open>
+            <DropdownMenuSubTrigger>More actions</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Archive</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    // When
+    const submenuContent = screen
+      .getByRole("menuitem", { name: "Archive" })
+      .closest("[data-slot='dropdown-menu-sub-content']");
+
+    // Then
+    expect(submenuContent).toHaveClass(
+      "origin-(--radix-dropdown-menu-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -42,7 +42,7 @@ function DropdownMenuContent({
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
          className,
        )}
        {...props}
@@ -227,7 +227,7 @@ function DropdownMenuSubContent({
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
-        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
        className,
      )}
      {...props}
@@ -0,0 +1,87 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe("Popover", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders controlled content through the Radix Popover API", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toBeVisible();
+    expect(screen.getByText("Filter content")).toHaveAttribute(
+      "data-slot",
+      "popover-content",
+    );
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toHaveClass(
+      "origin-(--radix-popover-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy motion for reduced-motion users", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -32,7 +32,7 @@ function PopoverContent({
        align={align}
        sideOffset={sideOffset}
        className={cn(
-          "bg-popover text-popover-foreground 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 pointer-events-auto z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground 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 pointer-events-auto z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
          className,
        )}
        {...props}
@@ -0,0 +1,138 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { EnhancedMultiSelect } from "./enhanced-multi-select";
+
+const options = [
+  { value: "aws-prod", label: "Production AWS" },
+  { value: "azure-dev", label: "Development Azure" },
+];
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as unknown as typeof ResizeObserver;
+
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("EnhancedMultiSelect", () => {
+  it("uses visible trigger and chevron open-state motion", () => {
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={() => {}}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    const trigger = screen.getByRole("combobox", { name: /select providers/i });
+    const icon = trigger.querySelector("svg");
+
+    expect(trigger).toHaveClass(
+      "group",
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates item selection feedback and checkbox visibility", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={() => {}}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    );
+
+    const option = screen.getByRole("option", { name: /production aws/i });
+    const checkbox = option.querySelector("[data-slot='checkbox']");
+    const checkboxIndicator = checkbox?.querySelector(
+      "[data-slot='checkbox-indicator']",
+    );
+
+    expect(option).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkbox).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkboxIndicator).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-200",
+      "ease-out",
+      "data-[state=checked]:scale-100",
+      "data-[state=checked]:opacity-100",
+      "data-[state=unchecked]:scale-75",
+      "data-[state=unchecked]:opacity-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates selected pills when values are added to the trigger", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={onValueChange}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    );
+    await user.click(screen.getByRole("option", { name: /production aws/i }));
+
+    const pill = within(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    )
+      .getByText("Production AWS")
+      .closest("[data-slot='enhanced-multiselect-pill']");
+
+    expect(onValueChange).toHaveBeenCalledWith(["aws-prod"]);
+    expect(pill).toHaveClass(
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -183,7 +183,7 @@ export function EnhancedMultiSelect({
          aria-controls={open ? listboxId : undefined}
          aria-label={ariaLabel}
          className={cn(
-            "border-border-input-primary bg-bg-input-primary text-text-neutral-primary data-[placeholder]:text-text-neutral-tertiary [&_svg:not([class*='text-'])]:text-text-neutral-tertiary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-input-primary active:bg-bg-input-primary focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex h-auto min-h-12 w-full items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&_svg]:pointer-events-auto",
+            "group border-border-input-primary bg-bg-input-primary text-text-neutral-primary data-[placeholder]:text-text-neutral-tertiary [&_svg:not([class*='text-'])]:text-text-neutral-tertiary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-input-primary active:bg-bg-input-primary focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex h-auto min-h-12 w-full items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 motion-reduce:transition-none [&_svg]:pointer-events-auto",
            disabled && "cursor-not-allowed opacity-50",
            className,
          )}
@@ -200,7 +200,8 @@ export function EnhancedMultiSelect({
                      <Badge
                        key={value}
                        variant="tag"
-                        className="m-1 cursor-default [&>svg]:pointer-events-auto"
+                        data-slot="enhanced-multiselect-pill"
+                        className="animate-in fade-in-0 zoom-in-95 m-1 cursor-default duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none [&>svg]:pointer-events-auto"
                      >
                        <span className="cursor-default">{option.label}</span>
                        <span
@@ -224,7 +225,8 @@ export function EnhancedMultiSelect({
                {selectedValues.length > maxCount && (
                  <Badge
                    variant="tag"
-                    className="m-1 cursor-default [&>svg]:pointer-events-auto"
+                    data-slot="enhanced-multiselect-pill"
+                    className="animate-in fade-in-0 zoom-in-95 m-1 cursor-default duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none [&>svg]:pointer-events-auto"
                  >
                    {`+ ${selectedValues.length - maxCount} more`}
                    <span
@@ -271,7 +273,7 @@ export function EnhancedMultiSelect({
                  className="flex h-full min-h-6"
                />
                <ChevronDown
-                  className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer"
+                  className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none"
                  aria-hidden="true"
                />
              </div>
@@ -281,7 +283,7 @@ export function EnhancedMultiSelect({
              <span className="text-text-neutral-tertiary mx-3 text-sm">
                {placeholder}
              </span>
-              <ChevronDown className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer" />
+              <ChevronDown className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none" />
            </div>
          )}
        </Button>
@@ -339,7 +341,7 @@ export function EnhancedMultiSelect({
                    aria-selected={isSelected}
                    aria-disabled={option.disabled}
                    className={cn(
-                      "cursor-pointer",
+                      "cursor-pointer transition-colors duration-150 ease-out motion-reduce:transition-none",
                      option.disabled && "cursor-not-allowed opacity-50",
                    )}
                    disabled={option.disabled}
@@ -83,6 +83,138 @@ describe("MultiSelect", () => {
    ).not.toBeInTheDocument();
  });

+  it("uses visible trigger and chevron open-state motion", () => {
+    render(
+      <MultiSelect values={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    const icon = trigger.querySelector("svg");
+
+    expect(trigger).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses visible content open and close motion", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect values={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+
+    const content = document.querySelector("[data-slot='multiselect-content']");
+
+    expect(content).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates item selection feedback and check visibility", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect defaultValues={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+
+    const option = screen.getByRole("option", { name: /production aws/i });
+    const checkIcon = option.querySelector("svg");
+
+    expect(option).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkIcon).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates selected pills when values are added to the trigger", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect defaultValues={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /production aws/i }));
+
+    const pill = within(screen.getByRole("combobox"))
+      .getByText("Production AWS")
+      .closest("[data-selected-item]");
+
+    expect(pill).toHaveClass(
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
  it("filters items without crashing when search is enabled", async () => {
    const user = userEvent.setup();

@@ -153,15 +153,14 @@ export function MultiSelectTrigger({
        data-slot="multiselect-trigger"
        data-size={size}
        className={cn(
-          "border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=multiselect-value]:line-clamp-1 *:data-[slot=multiselect-value]:flex *:data-[slot=multiselect-value]:items-center *:data-[slot=multiselect-value]:gap-2 dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
+          "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=multiselect-value]:line-clamp-1 *:data-[slot=multiselect-value]:flex *:data-[slot=multiselect-value]:items-center *:data-[slot=multiselect-value]:gap-2 motion-reduce:transition-none dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
          className,
        )}
      >
        {children}
        <ChevronDown
          className={cn(
-            "text-bg-button-secondary size-6 shrink-0 opacity-70 transition-transform duration-200",
-            open && "rotate-180",
+            "text-bg-button-secondary size-6 shrink-0 opacity-70 transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none",
          )}
        />
      </Button>
@@ -267,7 +266,7 @@ export function MultiSelectValue({
          <Badge
            variant="tag"
            data-selected-item
-            className="group flex items-center gap-1.5 px-2 py-1 text-xs font-medium"
+            className="group animate-in fade-in-0 zoom-in-95 flex items-center gap-1.5 px-2 py-1 text-xs font-medium duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none"
            key={value}
            onClick={
              clickToRemove
@@ -415,7 +414,7 @@ export function MultiSelectItem({
      keywords={keywords}
      data-slot="multiselect-item"
      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-bg-button-secondary text-bg-button-secondary my-1 flex w-full cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-lg px-4 py-3 text-sm outline-hidden select-none first:mt-0 last:mb-0 hover:bg-slate-200 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:hover:bg-slate-700/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-bg-button-secondary text-bg-button-secondary my-1 flex w-full cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-lg px-4 py-3 text-sm outline-hidden transition-colors duration-150 ease-out select-none first:mt-0 last:mb-0 hover:bg-slate-200 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 motion-reduce:transition-none dark:hover:bg-slate-700/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
        isSelected && "bg-slate-100 dark:bg-slate-800/50",
        disabled && "cursor-not-allowed opacity-50 hover:bg-transparent",
        className,
@@ -431,8 +430,8 @@ export function MultiSelectItem({
      </span>
      <CheckIcon
        className={cn(
-          "text-bg-button-secondary size-5 shrink-0",
-          isSelected ? "opacity-100" : "opacity-0",
+          "text-bg-button-secondary size-5 shrink-0 transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none",
+          isSelected ? "scale-100 opacity-100" : "scale-95 opacity-0",
        )}
      />
    </CommandItem>
@@ -0,0 +1,222 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", {
+    configurable: true,
+    value: vi.fn(() => false),
+  });
+  Object.defineProperty(HTMLElement.prototype, "releasePointerCapture", {
+    configurable: true,
+    value: vi.fn(),
+  });
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function renderTypeSelect({ open = false }: { open?: boolean } = {}) {
+  return render(
+    <Select defaultValue="all" open={open} onValueChange={() => {}}>
+      <SelectTrigger aria-label="All Types">
+        <SelectValue placeholder="All Types" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Types</SelectItem>
+        <SelectItem value="manual">Manual</SelectItem>
+        <SelectItem value="scheduled">Scheduled</SelectItem>
+      </SelectContent>
+    </Select>,
+  );
+}
+
+describe("Select", () => {
+  it("renders an open dropdown with selectable options", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const listbox = screen.getByRole("listbox");
+
+    // Then
+    expect(
+      within(listbox).getByRole("option", { name: "All Types" }),
+    ).toBeVisible();
+    expect(
+      within(listbox).getByRole("option", { name: "Manual" }),
+    ).toBeVisible();
+    expect(
+      within(listbox).getByRole("option", { name: "Scheduled" }),
+    ).toBeVisible();
+  });
+
+  it("uses robust trigger transitions for hover, focus, and chevron state", () => {
+    // Given
+    renderTypeSelect();
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: "All Types" });
+    const icon = trigger.querySelector("svg");
+
+    // Then
+    expect(trigger).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-[rotate]",
+      "duration-200",
+      "ease-out",
+      "group-data-[state=open]:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("preserves the Radix open data-state model", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const listbox = screen.getByRole("listbox");
+    const content = listbox.closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+
+  it("keeps content mounted briefly with a closing state", async () => {
+    // Given
+    const { rerender } = renderTypeSelect({ open: true });
+
+    expect(screen.getByRole("listbox")).toBeVisible();
+
+    // When
+    rerender(
+      <Select defaultValue="all" open={false} onValueChange={() => {}}>
+        <SelectTrigger aria-label="All Types">
+          <SelectValue placeholder="All Types" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Types</SelectItem>
+          <SelectItem value="manual">Manual</SelectItem>
+          <SelectItem value="scheduled">Scheduled</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    // Then
+    const content = await waitFor(() =>
+      screen.getByRole("listbox").closest("[data-slot='select-content']"),
+    );
+    const trigger = document.querySelector("[data-slot='select-trigger']");
+
+    expect(content).toHaveAttribute("data-closing", "true");
+    expect(trigger).toHaveAttribute("data-closing", "true");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  it("keeps uncontrolled content mounted briefly after selecting an option", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Select defaultOpen defaultValue="all" onValueChange={() => {}}>
+        <SelectTrigger aria-label="All Types">
+          <SelectValue placeholder="All Types" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Types</SelectItem>
+          <SelectItem value="manual">Manual</SelectItem>
+          <SelectItem value="scheduled">Scheduled</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    expect(screen.getByRole("listbox")).toBeVisible();
+
+    // When
+    await user.click(screen.getByRole("option", { name: "Manual" }));
+
+    // Then
+    const content = await waitFor(() =>
+      screen.getByRole("listbox").closest("[data-slot='select-content']"),
+    );
+    const trigger = document.querySelector("[data-slot='select-trigger']");
+
+    expect(content).toHaveAttribute("data-closing", "true");
+    expect(content).toHaveClass(
+      "animate-out",
+      "fade-out-0",
+      "zoom-out-95",
+      "pointer-events-none",
+      "duration-100",
+      "ease-in",
+    );
+    expect(content).not.toHaveClass(
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+    );
+    expect(trigger).toHaveAttribute("data-closing", "true");
+  });
+
+  it("uses explicit open and close motion classes", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const content = screen
+      .getByRole("listbox")
+      .closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:zoom-out-95",
+      "duration-200",
+      "ease-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy dropdown motion for reduced motion", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const content = screen
+      .getByRole("listbox")
+      .closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -2,20 +2,90 @@

 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { ComponentProps, type WheelEvent } from "react";
+import {
+  ComponentProps,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type WheelEvent,
+} from "react";

 import { cn } from "@/lib/utils";

+const SELECT_CLOSE_ANIMATION_MS = 100;
+
+interface SelectMotionContextValue {
+  isClosing: boolean;
+}
+
+const SelectMotionContext = createContext<SelectMotionContextValue>({
+  isClosing: false,
+});
+
 const stopWheelPropagation = (event: WheelEvent<HTMLElement>) => {
  event.stopPropagation();
 };

 function Select({
  allowDeselect = false,
+  open,
+  defaultOpen,
+  onOpenChange,
  ...props
 }: ComponentProps<typeof SelectPrimitive.Root> & {
  allowDeselect?: boolean;
 }) {
+  const isControlled = open !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    defaultOpen ?? false,
+  );
+  const requestedOpen = isControlled ? open : uncontrolledOpen;
+  const [renderedOpen, setRenderedOpen] = useState(requestedOpen);
+  const [isClosing, setIsClosing] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+
+    if (requestedOpen) {
+      setIsClosing(false);
+      setRenderedOpen(true);
+      return;
+    }
+
+    if (!renderedOpen) {
+      setIsClosing(false);
+      return;
+    }
+
+    setIsClosing(true);
+    closeTimerRef.current = setTimeout(() => {
+      setRenderedOpen(false);
+      setIsClosing(false);
+      closeTimerRef.current = null;
+    }, SELECT_CLOSE_ANIMATION_MS);
+
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [requestedOpen, renderedOpen]);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+
+    onOpenChange?.(nextOpen);
+  };
+
  const handleValueChange = (nextValue: string) => {
    if (allowDeselect && props.value === nextValue) {
      // Single-select with deselect
@@ -27,11 +97,15 @@ function Select({
  };

  return (
-    <SelectPrimitive.Root
-      data-slot="select"
-      {...props}
-      onValueChange={handleValueChange}
-    />
+    <SelectMotionContext.Provider value={{ isClosing }}>
+      <SelectPrimitive.Root
+        data-slot="select"
+        {...props}
+        open={renderedOpen}
+        onOpenChange={handleOpenChange}
+        onValueChange={handleValueChange}
+      />
+    </SelectMotionContext.Provider>
  );
 }

@@ -57,12 +131,15 @@ function SelectTrigger({
  size?: "sm" | "default";
  iconSize?: "sm" | "default";
 }) {
+  const { isClosing } = useContext(SelectMotionContext);
+
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
+      data-closing={isClosing ? "true" : undefined}
      className={cn(
-        "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 has-[>svg]:px-3 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
+        "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 has-[>svg]:px-3 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 motion-reduce:transition-none dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
        className,
      )}
      {...props}
@@ -71,7 +148,8 @@ function SelectTrigger({
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon
          className={cn(
-            "text-bg-button-secondary shrink-0 opacity-70 transition-transform duration-200 group-data-[state=open]:rotate-180",
+            "text-bg-button-secondary shrink-0 opacity-70 transition-[rotate] duration-200 ease-out motion-reduce:rotate-0 motion-reduce:transition-none",
+            isClosing ? "rotate-0" : "group-data-[state=open]:rotate-180",
            iconSize === "sm" ? "size-4" : "size-6",
          )}
          aria-hidden="true"
@@ -92,6 +170,7 @@ function SelectContent({
 }: ComponentProps<typeof SelectPrimitive.Content> & {
  width?: "default" | "wide";
 }) {
+  const { isClosing } = useContext(SelectMotionContext);
  const widthClasses =
    width === "wide"
      ? "w-[min(max(var(--radix-select-trigger-width),24rem),calc(100vw-2rem))] max-w-[32rem]"
@@ -101,8 +180,12 @@ function SelectContent({
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
+        data-closing={isClosing ? "true" : undefined}
        className={cn(
-          "bg-popover text-popover-foreground 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 border-border-input-primary bg-bg-input-primary relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border",
+          "bg-popover text-popover-foreground 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 border-border-input-primary bg-bg-input-primary relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
+          isClosing
+            ? "animate-out fade-out-0 zoom-out-95 pointer-events-none duration-100 ease-in"
+            : "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          widthClasses,
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("animates tab content when switching between tabs", async () => {
+    // Given - A tabs group with two content panels
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="events">Events</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Overview content</TabsContent>
+        <TabsContent value="events">Events content</TabsContent>
+      </Tabs>,
+    );
+
+    // When - The user switches to another tab
+    await user.click(screen.getByRole("tab", { name: /events/i }));
+
+    const eventsPanel = screen.getByText("Events content");
+
+    // Then - The newly active content keeps the motion-ready content element
+    expect(eventsPanel).toHaveAttribute("data-slot", "tabs-content");
+    expect(eventsPanel).toHaveClass(
+      "will-change-transform",
+      "motion-reduce:transform-none",
+    );
+    expect(eventsPanel).toHaveAttribute("data-state", "active");
+  });
+});
@@ -1,6 +1,7 @@
 "use client";

 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion, useReducedMotion } from "framer-motion";
 import type { ComponentProps, ReactNode } from "react";

 import {
@@ -30,7 +31,7 @@ const TRIGGER_STYLES = {
 * Content component styles
 */
 const CONTENT_STYLES =
-  "mt-2 focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;
+  "mt-2 will-change-transform motion-reduce:transform-none focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;

 /**
 * Build trigger className by combining style parts
@@ -122,14 +123,27 @@ function TabsTrigger({

 function TabsContent({
  className,
+  children,
  ...props
 }: ComponentProps<typeof TabsPrimitive.Content>) {
+  const shouldReduceMotion = useReducedMotion();
+
  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn(CONTENT_STYLES, className)}
-      {...props}
-    />
+    <TabsPrimitive.Content asChild {...props}>
+      <motion.div
+        data-slot="tabs-content"
+        initial={shouldReduceMotion ? false : { opacity: 0, y: 4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : { duration: 0.2, ease: "easeOut" }
+        }
+        className={cn(CONTENT_STYLES, className)}
+      >
+        {children}
+      </motion.div>
+    </TabsPrimitive.Content>
  );
 }

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+function renderOpenTooltip() {
+  return render(
+    <Tooltip open>
+      <TooltipTrigger>Copy ARN</TooltipTrigger>
+      <TooltipContent>Copy resource identifier</TooltipContent>
+    </Tooltip>,
+  );
+}
+
+describe("Tooltip", () => {
+  it("renders controlled content through the Radix Tooltip API", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(screen.getByRole("tooltip")).toBeVisible();
+    expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent("Copy resource identifier");
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(tooltip).toHaveClass(
+      "origin-(--radix-tooltip-content-transform-origin)",
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy tooltip motion for reduced-motion users", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(tooltip).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});
@@ -329,7 +329,9 @@ export function DataTable<TData, TValue>({
                        </TableCell>
                      ))}
                    </TableRow>
-                    {renderAfterRow?.(row)}
+                    <AnimatePresence initial={false}>
+                      {renderAfterRow?.(row)}
+                    </AnimatePresence>
                  </Fragment>
                ),
              )
Author	SHA1	Message	Date
Alan Buscaglia	65c0425729	fix(ui): animate finding group collapse - Keep after-row content mounted during exit - Animate inline resource container close state - Preserve existing finding group table behavior	2026-06-05 14:55:00 +02:00
Alan Buscaglia	5828cce644	feat(ui): add Combobox trigger transition - Animate combobox trigger and chevron state - Keep trigger accessible with a stable label - Cover Combobox motion with focused unit tests	2026-06-05 14:54:52 +02:00
Alan Buscaglia	87bd2e78a1	feat(ui): add Drawer content transition - Animate drawer overlay and directional content states - Preserve reduced-motion behavior - Cover Drawer motion with focused unit tests	2026-06-05 14:54:45 +02:00
Alan Buscaglia	ccae4afe68	feat(ui): add Dialog content transition - Animate dialog overlay and content states - Preserve reduced-motion behavior - Cover Dialog motion with focused unit tests	2026-06-05 14:54:37 +02:00
Alan Buscaglia	0e2bb99f02	feat(ui): add Tabs content transition - Animate tab panels when switching active content - Preserve reduced-motion behavior - Cover shared Tabs motion with focused unit tests	2026-06-05 14:49:09 +02:00
Alan Buscaglia	8fb59682d5	feat(ui): add multiselect selection microinteractions - Animate selected pills and item feedback in multiselect components - Add checkbox state transitions for provider group selections - Cover shared selection motion with focused unit tests	2026-06-05 14:44:25 +02:00
Alan Buscaglia	799f062ee0	feat(ui): add Tooltip open close microinteraction - Add visible Tooltip motion timing and easing - Preserve reduced-motion fallbacks - Cover Tooltip motion contract with unit tests	2026-06-05 13:47:11 +02:00
Alan Buscaglia	51945f5cc5	feat(ui): add Dropdown open close microinteraction - Add visible Dropdown motion timing and easing - Align submenu motion with dropdown content - Cover reduced-motion behavior with unit tests	2026-06-05 13:46:53 +02:00
Alan Buscaglia	b93e3f9d04	feat(ui): add Select open close microinteraction - Add visible Select close motion without open-state conflicts - Preserve reduced-motion behavior - Cover controlled and uncontrolled close flows	2026-06-05 13:04:16 +02:00
Alan Buscaglia	ef4d05a782	feat(ui): add Popover open close microinteraction - Add explicit timing for Popover state transitions - Add reduced-motion fallback utilities - Cover controlled Popover motion behavior	2026-06-05 12:16:27 +02:00
Alan Buscaglia	7185e539c8	feat(ui): add Button press microinteraction - Add targeted transition recipe for shared Button states - Add press and reduced-motion behavior - Cover link and menu motion exceptions	2026-06-05 12:00:35 +02:00